seaJs模块化开发简单入门

随着前端技术的日益成熟，功能越来越丰富强大，规范也越来越健全，在这样的背景环境下很快便有了CommonJs、AMD、CMD等一系列规范，使前端发开趋向模块化、规范化。
CMD模块化的代表之一就是国内开发的seaJs，它有很多优点：

遵从CMD规范，代码模块化
中文文档通俗易懂，入门上手简单
兼容性好、配置简洁明了、提供插件接口

seajs模块化基本流程：

引入sea.js库
define定义模块
exports暴露模块
require导入模块

安装

npm安装
```
npm i seajs
```
bower安装
```
bower i seajs
```
官网下载：http://seajs.org/docs/#downloads

定义模块

main.js

        
         define(
         function(require,exports,module){        
        
            
         // 引用test.js
        
            
         //require('./test.js')
        
            
         /*
        
        
             * 如果地址是一个模块，那么require的返回值就是模块中的exports
        
        
             */
        
            
         function (){
        
        
                 alert(
         require(
         './test.js').num);
        
        
             };
        
            
         // 向外暴露模块接口
        
        
             exports.alert = alert;
        
        
         })

1） exports : 对外的接口
2） require : 依赖的接口

test.js

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

调用模块

html页面中引入seajs和使用use方法请求入口文件

        
        
         大专栏  
         seaJs模块化开发简单入门iv class="line">
         <html>
         
          <head>
         
          
          <meta charset="UTF-8">
         
          
          <title>seaJs
          </title>
         
         
          </head>
         
         
          <body>
         
         
          <script src="sea.js">
          
          </script>
         
         
          <script>
          
         
          
          /*
         
         
           * seajs.use方法：
         
         
           * 页面去调用模块，
         
         
           * 第一个参数：模块的地址
         
         
           * 第二个参数：地址加载成功后的回调函数
         
         
           * seajs的默认目录：sea.js所在的目录
         
         
           * */
         
         
           seajs.use(
          './js/main.js',
          function(exports){
         
          
          // 回调的参数，就是模块中的exports
         
         
           exports.alert();
         
         
           });
         
          
          // 加载多个文件
         
          
          /*
         
         
           seajs.use(['./main.js','./main2.js'],function(ex1,ex2){
         
         
           操作
         
         
           })*/
         
         
          </script>
         
         
          </body>
         
         
          </html>

加载多个入口文件

        
         seajs.use([
         './main.js',
         './main2.js'],
         function(ex1,ex2){
        
            
         // 模块加载完成时执行回调操作
        
        
             ex1.fn();   
         // 调用ex1的方法
        
        
             ex2.fn();   
         // 调用ex2的方法
        
        
         })

有些js文件可能是在某些事件触发后才会被加载使用，因此没有必要在页面刚访问时，就加在所有资源文件，这样也可以减少客户端与服务器端的请求时间，提高用户体验。

seaja对于此便提供了一个async异步请求的方法：

        
         require.async(
         './test2.js',
         function(ex){    
         // 异步请求
        
        
             ex.fn();
        
        
         })

如有不当，请参考官网文档
seajs的具体config配置见：https://github.com/seajs/seajs/issues/262
参考文档：