使用seajs进行模块管理

前端模块化开发的价值

解决命名冲突

咱们作项目是经常会作一些通用功能的封装,封装成一个个的函数,而后保存在一个名叫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+

持续更新中。。。