前端模块化基本操作与介绍（一）

一。前端模块化-seajs
    1，提出问题
            为什么要用前端模块化
                1）防止全局变量污染，重名
                2）当引入工具库时，工具库中的变量名与我们定义的属性或方法重名
                3）当我们使用一些工具库时，我们需要手动的将工具库依赖写入到页面
                4）通用组更新了前端的基础类库，但是很难推动全站升级
                5）业务组想用某个通用组件，但是发现无法使用几行代码就实现
                6）老产品上线新功能，却只能基于老的类库进行开发
                7）业务合并的时候，发现前端代码冲突
                ......
       解决问题：
            seajs,requirejs
    2，seajs简介
        sea.js是一个很纯粹小巧的模块加载器，它只解决一个问题：前端代码模块化。通过sea.js，可以将大量的JavaScript代码封装成一个个小模块，然后轻松的实现模块化的加载和依赖管理
    3，获取与安装
        1）终端安装seajs
            //npm install  //安装各种各样的插件
            npm install spm -g
            spm install seajs
        2）页面中引入依赖
            github获取文件
            https://github.com/seajs/seajs
            <script src='lib/sea.js'></script>
            <script>
                alert(seajs.version);//版本信息
            </script>
    4,定义模块 define
       define() 可以有三个参数
        当传递一个参数时：
           参数是字符串，那么这就是一个字符串模块
           参数是数字，那么这就是一个数字模块
           参数是对象，那么这就是一个对象模块
           参数是函数（最常用）：
               这个函数有三个参数：
                    Require:用于引用其他模块的方法
                    Exports:返回接口对象
                    Module:模块module属性
        当传递两个参数时：
            第一个参数：是模块依赖的模块数组结合
            第二个参数：是function
        当传递三个参数时：
            参数1：表示该模块的名称，
            参数2：是模块以来的模块数组结合
            参数3：是function(require,exports,module){};
        当传递模块名称时，这个名称就是该模块的名字，可以使用该名字被调用
        当不传递模块名称时，该模块的名称就是当前文件相对于sea.js文件的路径
        通常我们将该模块的名称与文件名字保持一致
        我们使用define()方法定义一个木块，当一个文件中出现多个模块，后边的模块会覆盖前边的模块
    5,引用模块 require()
        规则：
            1)require不能简写
            2)require不能被重新定义
                var req = require
                function require(){}
                function fun(require){}
                function fun(){
                    var require = '123'
                }
                这些都不被允许
            3)require的参数只能是完整的字符串，require('img'+'e')是不允许的
        require的参数表示模块的路径，相对于seajs的路径，引入的是模块，js文件的后缀.js可以不写
        当require引入一个已经定义模块名称的模块时，在引入模块时，首先在该模块依赖的模块集合数组中将该模块的路径引入进来，然后使用require(name)引入该模块
    6，exports模块接口
        exports表示模块接口
        1）直接对exports添加属性，exports.color = 'red';
        2）通过modulr定义，module.exports.color = 'yellow';
        3）通过modulr定义，module.exports = {color:'red',name:'lisi'};
        4）通过return返回，return{color:'red',name:'lisi'};
        注意：我们在一个模块中只能使用一种接口方式，不能混用
        注意：我们不能直接对exports赋值新的对象，但是可以对odule.exports赋值新对象
    7,require.async  异步加载
        require方法的异步调用，与use方法很相似，在页面初始化时使用use异步加载模块。如果在模块中想实现异步加载其他模块需要使用require.async();
        两个参数：
            参数一：字符串或数组，所依赖模块路径
            参数二：加载成功回调，该函数的参数表示前边依赖模块的顺序调用
        语法：
            require.async(['header/heeader','header/skin.skin],function(h,s){});
            注意：当有判断条件判断加载哪个模块时
                同步加载，所有的模块都会被加载，但是走哪个模块，哪个模块才会被引用
                        那么两个分支中的依赖模块都会被加载，但是，执行哪个分支，哪个分支的模块才会被引用
                异步加载，走哪个模块，哪个模块才会被加载