seajs的基本语法及安装

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

猜你喜欢

转载自blog.csdn.net/zhaolinru/article/details/81477740
今日推荐