Js模块化开发--seajs和gruntJs
1.Seajs库
解决开发中的冲突依赖等问题，提供代码可维护性。
SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架，可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。
SeaJS 就两个核心：模块定义和 模块的加载及依赖关系。
官方网站 http://seajs.org
①通过script引入sea.js的库
②把js文件变成模块 –define
③调用模块 –exports
④加载模块 –seajs.use
依赖模块 –require
例如：用define把普通模块变成sea的模块
function show(){
alert(1);
}
//使用define改写model1.js
define(function(require,exports,module){
//sea下的参数 : 不允许修改的 三个参数可以都写，可以都不写或者只写前两个或者只写前一个，只能省略后面的参数，不能省略前面的参数 //exports : 对外提供接口的对象 function show(){ alert(1); } exports.show = show; });
seajs.use两个参数 :
第一个参数 : 模块的地址--相对于sea.js的相对路径,后面的“.js”后缀可以省略 、
第二个参数 :callback回调函数 say.sayHello()就是调用sayHello模块的exports.sayHello方法，当然这callback函数中有个say参数。
seajs.use("sayHello/sayHello",function(say){
say.sayHello("out","Hello SeaJS!");
});
seajs.use('./js/module1.js',function(ex){
ex.show(); //1
});
模块的依赖关系
模块的依赖其实在模块定义的时候就应该存在了。
例如在model2.js里面如果要弹出model3.js模块里面的一个参数
//model2.js
define(function(require,exports,module){
//require : 模块之间依赖的接口
var a = require('./module3.js').a; //当引入的是sea下面的模块的时候，那么require执行完的结果就是exports
function show(){
alert(a);
}
exports.show = show;
});
//model3.js
define(function(require,exports,module){
var a = 100;
exports.a=a;
});
页面中调用
seajs.use('./js/module2.js',function(ex){
ex.show(); //100
});
3.构建部署
对于正式项目，在发布上线前，还需要对源码进行压缩、合并等操作。
这可以通过 spm 或 Grunt 等构建工具来实现。这之前先了解下模块化历史。
- nodeJS的出现（http://nodejs.org/）
-------commonJS规范（http://www.commonjs.org/）规定服务器模块化端开发规范的
- 浏览器JS的模块化？有两个规范
——AMD规范（http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition）
》代表requireJS库（http://requirejs.org/）
——CMD规范
》代表Seajs采用的cmd规范 针对浏览器端的模块化开发
4.构建工具
gruntjs（http://www.gruntjs.net/ ）
gruntjs是构建前端可维护性的项目，如自动化、文件压缩、合并及单元测试等等。
安装流程
- 先安装nodejs和npm(包管理工具)
- npm install -g grunt-cli 全局安装grunt
- npm install grunt --save-dev
- grunt -version 查看版本号安装成功
- npm install grunt --save-dev
参考资料：JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架
