前端模块化

binglingnew 2017-07-29

                                        前端模块规范有三种:CommonJs,AMD和CMD

首先了解下模块定义:
模块就是实现特定功能的文件,把几个函数放在一个文件里就构成了一个模块。
模块写成一个对象,模块成员都封装在对象里,通过调用对象属性,访问使用模块成员。但同时也暴露了模块成员,外部可以修改模块内部状态。外部无法访问内部私有变量。

CommonJs是服务器端,而AMD和CMD则是浏览器环境

异同点:
AMD  :  RequireJS 在推广过程中对模块定义的规范化产出,提前执行(异步加载:依赖先执行)+延迟执行
CMD  :  SeaJS 在推广过程中对模块定义的规范化产出,延迟执行(运行到需加载,根据顺序执行)

最近主要学seajs,所以了解了下,做下笔记:

CMD(翻译Common Module Definition通用模块定义)有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样

在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下

define(function(require, exports, module) {
   //require是可以把其他模块导入进来的一个参数;
   //exports是可以把模块内的一些属性和方法导出的;
   //module 是一个对象,上面存储了与当前模块相关联的一些属性和方法
});

 先写个简单例子:

// 定义模块  
myModule.js define(function(require, exports, module) { 
    var $ = require('jquery.js') 
    $('div').addClass('active'); 
    exports.data = 1; 
});
// 加载模块 
seajs.use(['myModule.js'], function(my){ 
    var star= my.data; 
    console.log(star); 
});

接下来是sea.js的使用:
1 .引入sea.js的库
2. 定义模块
      - define
3.调用模块
      -exports
      -sea.js.use
4.依赖模块
      -require

以下是我最近做的一个例子:前提引入所需文件--sea.js,jquery.js,这些官方文档可以下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="sea-modules/seajs/seajs/2.2.0/sea.js"></script>
    <link rel="stylesheet" href="./hello.css">
    <script>
        seajs.config({
//设置路径
//            paths: {
//                '1.01.1': './sea-modules/jquery/jquery/1.10.1/'
//            },
 // 设置别名,方便调用
            alias: {
                'jquery': './sea-modules/jquery/jquery/1.10.1/jquery'
            }
        });
        seajs.use(['./head'], function (header) {
            new header()
        });
    </script>
</head>
<body>

</body>
</html>

 这里的path是设置路径,方便跨目录调用。可以省略掉,和alias写到一起。

 接下来是head模块

define(function(require, exports, module) {
    // 别名配置,配置之后可在模块中使用require调用 require('jquery');
    // alias
    var $ = require('jquery')
    function header(){
        this.render()
    }
    header.prototype.render = function(){
        $('<h1 style="display:none;">Hello SeaJS !</h1>' +
            '<div class="show"></div>')
            .appendTo('body').fadeIn(0)
    }

    return header

});

  

当然也可以加载多个模块:

用来在页面中加载一个或多个模块。
seajs.use(id, callback?)

// 加载一个模块
seajs.use('./a');

// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

相关推荐