前端学习总结（十三）前端模块化

一 前端模块化

起源于:
nodejs,将各种功能的js模块化,require调用,非常方便,易于扩展和管理

二 两种规范——AMD和CMD

1 AMD

特点：先出现,源自requireJS,异步加载模块,依赖前置(还没有执行之前就把所有的依赖都定义好了),提前执行。

define定义模块：

define(['require','foo'],function(){return});

require加载模块(依赖前置)：

require(['foo','bar'],function(foo,bar){});

2 CMD

特点：源自SeaJS,同步加载，依赖就近，延迟执行（执行到了才加载分析需要的模块）

define定义exports导出

define(function(require,exports,module){});

require(./somemodule) 直接（同步）引入，可通过Require.async异步引入。

三 Sea.js实例

1.在html文件里配置sea.js

<script>
    // seajs 的简单配置
    //1. 把jQuery配置成一个模块
    seajs.config({
        base: "./js",  //各种模块js所在根目录,推荐用js目录
        alias: {  //给模块起别名,之后直接通过别名引入调用
            "jquery": "lib/jquery/1.12.1/jquery-1.12.1.min.js"
        }
    })


    //2. 加载入口模块,就可以直接调用里边函数或执行,不用加 .js
    seajs.use("./js/main")
</script>

2.编写一个入口文件

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

    // 通过 require 引入依赖
    //var $ = require('jquery');
    //var Spinning = require('./spinning');

    // 通过 exports 对外提供接口
    //exports.doSomething = ...

    // 或者通过 module.exports 提供整个接口
    //module.exports = ...
    require('jquery');
    console.log('main.js imported')

    /*
    var myFunctionObj = require('function');
    console.log(myFunctionObj);
    */

    //将这个模块导出
    var myFunctionModule = require.async('function',function(function_callback){
        console.log(function_callback);
    })

});

3.将将多个函数封装成一个模块对象导出，如：function.js：

define(function(require, exports, module) {

    var a = {};
    // 通过 exports 对外提供接口
    a.doSomething1 = function(){
        console.log('doSomething1');
    }

    a.doSomething2 = function(){
        console.log('doSomething2');
    }

    module.exports = a;  //module.exports用来导出整个a模块

});

四 Require.js实例

1.在html中通过script标签里的data-main 定义主入口js文件：

<script data-main="js/main.js" src="js/require.js"></script>

2.定义两个模块：module1.js和module2.js

define(['require','module1'],function(){
    var module1 = {};
    module1 = {
        //通过这种对象中键值对形式,定义多个函数,属性,下面代码就定义了init方法
        module1_init: function(){
            console.log('module1:init方法执行');
        }
    }

    return module1;
});

define(['require','module2'],function(){
    var module2 = {};
    module2 = {
        //通过这种对象中键值对形式,定义多个函数,属性,下面代码就定义了init方法
        module2_init: function(){
            console.log('module1:init方法执行');
        }
    }

    return module2;
});

3.在main.js里引入各个模块：

//define中先按顺序引入它需要的,如require.js,在定义它自己
define(['require','main'],function(){
    console.log('main.js imported');

    //引入其他模块
    require(['module1','module2'],function(module1,module2){
        module1.module1_init();
        module2.module2_init();
    });

});

五 CommonJS