angularjs backbone 集成requirejs 模块化

首先认识requirejs 

requirejs是个包加载器，核心功能是模块化管理，可以实现按需加载。 重点是明白 模块化不是按需加载。

模块化的意义： 是通过代码逻辑表明模块之间的依赖关系和执行顺序，按照模块逻辑来分解代码，起到配合mvc框架架构项目的作用。

按需加载：顾名思义 根据需要 通过模块依赖  event事件  加载所需的模块。

因为做的本地混合应用，在我项目中的主要的作用是模块化，我使用requirejs的原因是模块化管理，不是按需加载。

backbone 配合 requirejs 架构前端方案     https://github.com/breakfriday/backboneMvc-requirejs  

backbone是非常经典的前端mvc框架 除了mvc几乎没有其他功能。

如果用backbone这一类框架 架构项目   流程：   

上图 可以看到

backbone一类框架的流程    路由驱动控制器（此处增加backboneMvc插件  backbone本身没有控制其逻辑）  控制器驱动action  action完成对应的视图模块与model模块的调用，保证多个视图模块与model之间的通信

模块结构 入口文件调用module a，module a调用module  b，依次 module b 调用 c ,e , f ...   完成模板的编译  事件的绑定  viewMode的组装 ..... 最后生成视图对象  render。

ctrl1 通过require（[],function(){}）可以实现按需加载

define(function (require) {
    BackboneMVC = require("BackboneMVC")
    $ = require("jquery")
    _ = require("underscore")

    return function(){
        BackboneMVC.namespace('MyApp.Controllers');
        MyApp.Controllers.ToyController = BackboneMVC.Controller.extend({
            name: 'ct1', /* the only mandatory field */
            index: function () {
              alert("ct1")
            },


            test1: function () {
                require(['model/model'],function(model){

                    model.init().done(function () {
                        $(".pages").append("<div style='color: red'>test0 done  " + model.name+"</div>")
                    }).fail(function () {
                        alert("not ok")
                    })
                    this.model=undefined
                }.bind(this))

            },

            test2: function () {
                require(["model/model2", "view/view2"], function (model, view1) {
                    var model = this.model = this.model || new  model
                    model.init().done(function () {
                        view1.sucess(model.name)
                        this.test2()

                    }.bind(this)).fail(function () {
                        view1.fail()


                    }).progress(function () {
                        view1.progess()
                    })


                }.bind(this))
            }


        });
    }


});

或者 对比ctrl2流程逻辑与ctrl1相同，ctr2l使用commonjs的写法require（）  其实是标注模块的依赖性，进define头，一次性加载。  requirejs 支持commonjs的语法 但是使用的是amd的协议

define(function (require) {
    BackboneMVC = require("BackboneMVC")
    $ = require("jquery")
    _ = require("underscore")

    return function(){
        BackboneMVC.namespace('MyApp.Controllers');
        MyApp.Controllers.ToyController = BackboneMVC.Controller.extend({
            name: 'ct2', /* the only mandatory field */
            index: function () {
                 alert("this is ct2")
            },

            test1: function () {
                var model=require('model/model')

                model.init().done(function () {
                    $(".pages").append("<div style='color: red'>test0 done  " + model.name+"</div>")
                }).fail(function () {
                    alert("not ok")
                })
                this.model=undefined
            },

            test2: function () {
                var model=require("model/model2")
                var view1=require("view/view2")


                var model = this.model = this.model || new  model
                model.init().done(function () {
                    view1.sucess(model.name)
                    if (model.name > 1) {
                        this.test2()
                    }
                }.bind(this)).fail(function () {
                    view1.fail()
                }).progress(function () {
                    view1.progess()
                })
            }



        });
    }


});

这是我 requirejs + backbone 架构项目的结构。

用angular已经做了两个项目了，这里总结下

angular 框架执行流程：  前端方案  https://github.com/breakfriday/my-angularMvc

郁闷的是经常有人说 angular 已经有module了还需requirejs吗， angular的module 是命令的容器 与模块化意思不同。

angualr的模块化只是解决了 代码逻辑的耦合性的问题，没有通过原型链 class这一种方法来实现，而是通过依赖注入代替class，优点是耦合性很散可以很方便的拆分组合。

但是requirejs另一部功能，控制模块文件的加载，控制模块文件的分割，控制模块文件的依赖关系  这一部分逻辑是angular没做的。

angular使用requirejs

              1.打包方便， 使用requrejs 模块化 ，编辑代码的过程就定义了模块之间的依赖关系，打包时候，不需要一个一个文件对照，用不到没有依赖关系的文件不会被打包，也不会漏掉文件。

              2.将script 脚本从模板页面（针对mvc框架）抽离出来，通过js当前模块加载需要依赖的js模块。模板页面只是模板。

              3.可以实现 按需加载

angular  使用命令式编程的一个框架,所以在耦合性上采用了依赖注入  ，流程与backbone一类 框架不一样 ，流程执行不是通过controller model view模块之间的调用，而是通过模板中的命令驱动。

首先认识 angular

 app.js  angular启动文件

define([
    'angular',
    "controller/controllers",
    "directive/directives",
    "filter/filters",
    "angularRoute"

], function (angular,controllers,directives,filiters) {
var webApp=angular.module('ccmsApp', ["ngRoute",controllers.name,directives.name,filiters.name])

    })

 main.js requirejs配置文件  手动启动angular

require([ 'angular', 'script/app',"jquery"], function (angular, app) {


    angular.element().ready(function () {

        angular.resumeBootstrap([app['name']]);
    });
})

模块的注入方式分为    1. 按需加载    2.预加载     两种方案

在我的项目中，

　　　　directive service使用预加载，优点可以合并压缩成一个文件 减少http请求。且我的directive service 文件比较多很多是小文件，且各个视图都会用到，不太好从视图的逻辑来分割加载模块文件。

　　　　controller 是按需加载, 优点按需加载，因为controller 处理的就是viewModel  所以控制器文件与视图关系是多对一，可以从视图的逻辑来分割加载模块文件。缺点是因为是异步模块，所以不进amd 依赖关系不会被打包，

　　需要再写个built1.js  负责压缩整个异步模块的目录

service预加载：

define(function(require){
    var angular=require("angular")
    var accountService=require("service/script/accountService")
    var ngCustomListService=require("service/script/ngCustomListService")
    var ngCustomService=require("service/script/ngCustomService")
    var saveService=require("service/script/saveService")
    var getListService=require("service/script/getListService")
    var deleteService=require("service/script/deleteService")
    var RFMTreeService=require("service/script/RFMTreeService")
    var queryConfigService=require("service/script/queryConfigService")
    var dataTableConfigService=require("service/script/dataTableConfigService")
    var dataFilterConfigService=require("service/script/dataFilterConfigService")
    var ngRedAndBlackCustomService=require("service/script/ngRedAndBlackCustomService")
    var productLabelService=require("service/script/productLabelService")
    var ngDataImportService=require("service/script/ngDataImportService")


    var dataService=angular.module('dataServices', [])

    dataService.factory({
        "ngCustomListService":ngCustomListService ,
        "ngCustomService":ngCustomService,
        "saveService":saveService,
        "getListService":getListService,
        "deleteService":deleteService,
        "accountService":accountService,
        "queryConfigService":queryConfigService,
        "dataTableConfigService":dataTableConfigService,
        "dataFilterConfigService":dataFilterConfigService,
        "RFMTreeService":RFMTreeService,
        "ngRedAndBlackCustomService":ngRedAndBlackCustomService,
        "productLabelService":productLabelService,
        "ngDataImportService":ngDataImportService
    })

    return dataService;
})
       

　　

　　

按需加载：

使用angular 路由的resolve api，在路由启动时，require 对应的ngView视图模板页面中所需的controller  directive模块。

通过$controllerProvider.register 　　 $compileProvider.directive  　　$filterProvider.register　　  $provide.provider创建controller directive  filter service 依赖模块。

resolve阻塞，保证对应视图中的命令（controller，directive，filiter） 注入完成后再run

function config(templateUrl, controllerName, directives) {
        if (!$controllerProvider) {
            throw new Error("$controllerProvider is not set!");
        }

        var defer,
            html,
            routeDefinition = {};

        routeDefinition.templateUrl =templateUrl

        routeDefinition.controller = controllerName;

        routeDefinition.resolve = {
            delay:function ($q, $rootScope) {
                defer = $q.defer();

                    var dependencies = [controllerName];
                    if (directives) {
                        dependencies = dependencies.concat(directives);
                    }
                    require(dependencies, function () {    //按需加载 所需的控制器 directives 模块  ，
                                                          //  通过$controllerProvider.register    $compileProvider.directive创建
                        var controller = arguments[0],
                            template = "";

                        for (var i = 2; i < arguments.length; i++) {
                            lazyDirectives.register(arguments[i]);
                        }

                        $controllerProvider.register(controllerName, controller);  /*创建控制器*/
                        html = template;
                        defer.resolve();   /*加载完 返回resolve状态*/
                        $rootScope.$apply()
                    })


                return defer.promise;
            }
        }

        return routeDefinition;
    }

       $routeProvider.when('/view2', routeConfig.config('./partials/view2.html', 'controllers/second', ['directives/version']));