前台代码模块化 seajs

   随着程序的增加，前台代码变的越来越复杂，重复的js 模块会变多，文件间的依赖也会变复杂，会经常出现引用了一个文件就忘了它所依赖的文件是哪个。seajs 很好的解决了这个问题，它属于模块级管理，能搞让我们引用文件时减少文件间的依赖。

 

    如果用过nodejs 的话，会发现seajs的用法和nodejs的模块语法相似，使用简单

 

1.下载seajs 文件，下载地址http://seajs.org/docs/#downloads

 

2.将文件放到工程文件里，并在页面上引用

 

<script type="text/javascript" src="/javascripts/libs/seajs/2.2.0/sea.js"></script>

 3.定义自己的模块

 

   创建文件a.js

 

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){}
    };
})

4.页面调用

 

    

<script type="text/javascript">

    seajs.use('myMoudle', function(practiceStarter) {
        practiceStarter.init('first');
    });

</script>

 

 

这个就完成的了页面调用，但是这个只是单一的文件加载没有看到页面的模块化，seajs 最大的好处就是把文件间的依赖写在文件中，前台不需要关心

例如 a.js的运行需要b.js

b.js

define(function(require, exports, module ){
    var Other = function(){
    }
    module.exports = Other;
})

在a.js中引入b.js

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){
          var Other = require('b_path')
       }
    };
})

 

如果页面上要引入多个模块可以

 <script type="text/javascript">

    seajs.use(["/javascripts/editor_layout.js", "/javascripts/paper_practice_starter.js"], function(editor_layout, practiceStarter) {
       
    });

</script>

  也可以在页面上在seajs.use 前加入

seajs.config({
    base: '/'  //或者 . 
});

 指定加载文件的其实位置，如果不设置，默认为当前页面的上级目录