首先认识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']));