前端模块化开辟的代价

处理定名争执

我们做项目是经常会做一些通用功用的封装,封装成一个个的函数,然后保存在一个名叫util.js的文件中.这类状况就很有可能在另一个开辟人员开辟时发作定名争执.

处理烦琐的文件依靠

基于util.js，我们最先开辟UI层通用组件dialog.js,那末我们如今的援用状况应当如许:

<script src='util.js'></script>
<script src='dialog.js'></script>

假如有更多的依靠关联援用起来就异常的烦琐.

运用Sea.js来处理

seajs是一个模块治理框架,运用seajs须要恪守CMD(Common Module Definition)模块定义范例.一个文件就是一个模块.

经由过程define函数举行模块定义.

util.js文件的代码以下:

define(function(require,exports){
    exports.each = function(){
        //完成代码
    };
    esxports.log = function(str){
        //完成代码
    }
});

这里的exports向外供应了each和log要领,当这个模块被援用时,能够挪用这两个要领.

经由过程require函数举行模块挪用.

dialog.js文件的代码以下:

define(function(require,exports){
    var util = require('./util.js');
    exports.init = function(){
        util.each();
        util.log();
    }
});

这里经由过程require('./util.js')来挪用到util模块.

Sea.js 带来的优点

1. 经由过程exports暴露接口.这意味着不须要定名空间,也不须要全局变量,处理了定名争执的题目.

2. 经由过程require引入依靠.这是一种很好的关注星散，处理了烦琐的文件依靠.

3. 模块的版本治理.经由过程别号等设置,合营构建东西,能够比较轻松的完成模块的版本治理.

4. 提拔可保护性. 模块化能够让每一个文件的职责单一,异常利于代码保护.seajs供应nocahce debug等插件,具有在线调试等功用,能比较显著的提拔效力.

5. 前端性恶能优化.seajs经由过程异步加载模块对页面机能异常有益.seajs供应了combo flush插件，合营服务端,能够很好对页面机能举行调优.

6. 跨环境同享模块.CMD模块定义范例与NOdejs的模块范例异常邻近.经由过程seajs的Nodejs版本,能够很轻易完成模块的跨服务器和浏览器同享.

前端的模块化构建可分为两大类。一类是以 Dojo、YUI3、国内的 KISSY 等类库为代表的大教堂形式。在大教堂形式下，一切组件都是颗粒化、模块化的，各组件之间层层分级、环环相扣。另一类是以 jQuery、RequireJS、国内的 Sea.js、OzJS 等类库为基本的集市形式。在集市形式下，一切组件相互自力、职责单一，各组件经由过程组合松耦合在一起，协同完成开辟.

seajs兼容性

• Chorme 3+

• Firfox 2+

• Safari 3.2+

• Opera 10+

• IE 5.5+

延续更新中。。。