Web App架构

好的框架可以提高开发效率，一个项目比较完整的架构，需要考虑到协同，代码管理，调试环境，开发框架，资源优化，部署等等。基于现有的架构之上做开发，并不只是简单地填充代码，而是在熟悉这套开发模式的基础之上，了解整体的架构，并与其他框架对比，必要时深入去研究下框架的实现和优缺点，积累更加全面的软件知识，才可以从整体上去考虑一个软件的设计。

在这个开源的世界里，做一个程序很多时候都可以找到很多不错的开源框架，从而更加快捷的搭建出自己的开发框架。J2EE开发框架的成熟度就不说了。而在web app或者web游戏这一块，框架也是百花齐放，但是如果我们不去仔细做调研对比，就不知道哪一个框架时我自己的。俗话说，不要重造轮子，但是很多时候，因为找不到合适的取代框架或者第三方类库，我们都会自己去开始为自己的project做一个框架，可是这样随着而来的问题是：项目的deadline已经不允许这样做了，而且很多时候，根据自己现有的水平，做出来的框架也不一定就是好用的。

看了豌豆荚web版的规划和技术架构的选取，确实感觉挺不错的。

最后选取的MVC框架是Angular，因为Angular的一些理念很好，也许可以用在大家的项目中

现在就来分析一下Model-View-ViewModel:

web app的架构

angular.module('snappea', ['ng'])
    .service('photos', function($http){
        this.fetch = function(){
            return $http.get('http://snappea.com/photos');
        };
    })
    .controller('galleryController', function($scope, photos){
        $scope.photos = [];
        $scope.fetch = function(){
            $scope.photos = Photos.fetch();
        };
    })
    .directive('counter', function(){
        return function($scope, $element){
            $element.on('click', function(){
                $scope.fetch();
            });
            $scope.$watch('photos.length', function(value){
                $element.text('Total' + value + 'photos.');
            });
        };
    });

总结使用之后的优点：

良好的可测试性

事件缺少context，可能导致一系列问题：

dirty-check会循环的检查所有数据，直到不再有变化，最后一次性渲染，难点在于如何保证即时触发

可能导致数据变化的事件：DOM Event, Timeout XHR, Worker， etc...

有时候我们觉得使用框架会很没意思，觉得自己像个机器人，做一些无用功，但是反过来思考，却可以更加快速的让你接触到更多的知识，如果在空闲之余对这些框架的原理进行研究并对比各种同类框架的优缺点，在这些基础之上，相信也有能力去编写一个自己想要却找不到的框架了，你的思考深度决定过了你的兴趣程度。

有了这些第三方的API作为架构之后，即使你是一个人在写项目，你也绝对不是一个人在战斗，因为你已经身处开源世界了。

对于急着使用的技术，快速入门，做一个简单demo，整体阅读API，前提是一定要弄清楚demo的每一行代码的作用

多使用第三方框架或者类库提高开发效率

在空余时间，多把握好，去阅读一下第三方框架或者类库的源代码，找到吸引你的地方，多联想思考，写写技术博文

基于上面一点的学习和总结，如果下一次你真的发现没有这样的可以被使用的轮子时，你就可以着手创建一个新的类库了

平时作为个人的练习，还是可以根据自己近期的收获，写一个简单的框架练习一下的。