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();  //

});

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 实践：安装和创建项目框架

巴特西

Js模块化开发--seajs和gruntJs

最新文章

热门文章