JavaScript模块化编程之require.js与sea.js

为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内部逻辑。   从而,团队化的合作开发成为必然,各种软件工程技术的引进使得JavaScript的模块化开发成为必然与必须。

本文将主要讨论require.js(AMD)以及sea.js(CMD)

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

sea.js(CMD)就近依赖: 即在代码运行时,首先是不知道依赖的,需要遍历所有的require关键字,从而找出依赖(使用字符串的正则表达式匹配),与AMD的依赖引入方法相比,确实有其方便之处,但前提是以性能为代价的。  下面举一个简单的例子,

文件目录结构:

JavaScript模块化编程之require.js与sea.js

--------------------------------------------------------------------------------------------------------------------------------------------------------------

在index页面中进行配置入口模块的加载,

JavaScript模块化编程之require.js与sea.js

当然,对于一些sea.js行为的配置,远远不止这些,有兴趣的同学可以查一下作者的github上的对应部分:Sea.js配置

--------------------------------------------------------------------------------------------------------------------------------------------------------------

模块的搭建:  可分为:模块定义(define),依赖引入,接口暴漏

define(function(require, exports, module) {
// 通过 require 引入依赖
//var $ = require('jquery');
//var Spinning = require('./spinning'); // type1
// 通过 exports 对外提供接口
exports.doSomething3 = function(){
console.log("do3");
}; //type2
var a = {};
a.doSomething = function(){
console.log("MyOk");
}; a.doSomething2 = function(){
console.log("MyOk2");
};
// 或者通过 module.exports 提供整个接口
module.exports = a;
});

入口的定义其实和模块的定义一样,只是一般不会对外暴漏接口且只负责引入与执行(开启执行),如C中的main函数一样。

require.js(AMD,依赖前置,即在执行当前模块时,我们必须指定当前模块所依赖的模块项,并逐个按循序引入),这样的一种依赖引入模式,相比于CMD,js引擎无需遍历整个工程去找相应的依赖,而是直接引入即可。  下面以一个require的实例为例,我想读者应该很快就能get it。  其实

项目目录:

JavaScript模块化编程之require.js与sea.js

--------------------------------------------------------------------------------------------------------------------------------------------------------------

加载require.js

JavaScript模块化编程之require.js与sea.js

data-main:就是我们整个模块整体的入口点。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

在main.js中使用require.config()方法,对模块的加载行为进行自定义。
JavaScript模块化编程之require.js与sea.js
与sea.js类似,baseUrl定义了整个require.js的基础路径,所有模块的引入都将依赖这个路径或者说:文件夹。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

重头戏,require.js中的模块的定义:

JavaScript模块化编程之require.js与sea.js

require是通过define函数的参数中匿名函数前面的一个String数组来存储我们所要引入的依赖,如此处要使用的car模块,那么就必须将car这个模块的就baseUrl色路径以字符串数组一个元的形式给出,  与sea.js相比(require('jquery')),确实比较麻烦,但我前面也说过,方便必须是建立在性能代价的基础上. 关于require在软依方面的使用,请移步高人微博

其实每种技术的优势都不是绝对的,sea.js也只有其独特魅力,只是作者理解的过于肤浅,我想,只有最合适的业务逻辑,没有最合适的技术。

That’s   all

上一篇:word模版另存为网页(*.htm,*.html),转为jsp页面并加入数据后导出成word


下一篇:sea.js与require.js的区别