Js模块化开发--seajs和gruntJs

1.Seajs库

   解决开发中的冲突依赖等问题，提供代码可维护性。

  SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架，可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。

  SeaJS 就两个核心：模块定义和 模块的加载及依赖关系。

  官方网站 http://seajs.org

2.seajs如何使用?

  主要有以下四个步骤：

   ①通过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是构建前端可维护性的项目，如自动化、文件压缩、合并及单元测试等等。

安装流程

1. 先安装nodejs和npm(包管理工具)
2. npm install -g grunt-cli  全局安装grunt
3. npm install grunt --save-dev
4. grunt -version  查看版本号安装成功
5. npm install grunt --save-dev

参考资料：JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架