前端模块化

前端模块规范有三种：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();
});

猜你喜欢