前端模块化开发总结

一、模块化开发的作用： 解决命名冲突和文件依赖的问题

二、模块化开发规范：

1、服务器端：  commonJS
    2、浏览器端：  
        (1) AMD :  通过模块加载器 require.js
            判断当前js是否使用amd规范：  typeof define && define.amd

        (2) CMD
        (3) UMD
        (4) ES6

三、AMD的实现

（1）引入require.js
        （2）引入入口文件 (main.js)
        (3) 定义模块：
            define(function(){
                function a(){}
                function b(){}

                //把a暴露在外部
                return {
                    a: a,
                    b: b
                }
            });
        (4) 在定义一个模块时，依赖另一个模块
            define(["依赖js的地址"],function(m1){
                function a(){
                    m1.b();
                    ....
                }
                return a;
            });
        (5) 在入口文件main.js中引用模块
            require(['模块的地址'],function(m2){

            });

        (6) 可以在main.js中，对模块路径提前配置
                require.config({
                    baseUrl: 'js',
                    paths: {
                        // 模块的别名
                        'util' : 'base/util',
                        'draw' : 'base/draw',
                        'createBall': 'createBall',
                        "getStyle": 'base/getStyle'
                    }
                });

                // require的功能： 加载相应的模块
                require(['createBall'],function(a){
                    for (var i = 0 ; i < 6; i++){
                        a();
                    }  
                    console.log(1);  
                });

四、CMD

（1）引入模块加载器和入口文件：  
        <script src="js/seajs-2.2.1.min.js"></script>
         <script src="js/main.js"></script>
    （2）入口文件： main.js
        seajs.config({
            paths: {
                // 相对于seajs文件的相对路径
                'path':'base'
            },
            // 别名
            alias: {
                'util' : 'util',
                'login' : 'login'
            }
        });

        seajs.use(["login"],function(loginM){
            console.log(loginM);
            function userHandle(){
                loginM.loginHandle();
                console.log('同时实现登录和注册');
            }
            userHandle();
        })
    (3) 定义模块
          define(function(require,module,exports){
            function loginHandle(){
                var util = require("util");
                    util.cFun();
                console.log("完成登录的业务");
            }
            exports.loginHandle = loginHandle;
        });