SeaJs 模块化加载。。。。

seaJS模块加载的用法：

1.在页面中引入seajs.js

 <script src="node_modules/sea.js/sea.js"></script>

 

2.在game.js中定义模块。

模块的定义格式：

//定义一个模块，要遵循seajs的写法
define(function (require,exports,module) {

})

 

//定义一个模块，要遵循seajs的写法
define(function (require,exports,module) {
    //此处是模块的私有空间

    //同步方式依赖文件依赖另外一个文件
    var game1 = require('./game_exp.js');    
    console.log(game1)
    game1.ds(5,2);  //调用所依赖的文件内的方法

    $('#btn-click').click(function () {
        alert(5)
    });


    function convert(n) {
        return parseFloat(n);
    }

    function add(a,b){

        return convert(a) + convert(b);
    }

    function jian(a,b){
        return convert(a) - convert(b);
    }

    function cheng(a,b){
        return convert(a) * convert(b);
    }

    function chu(a,b){
        return convert(a) / convert(b);
    }

    function remain(a,b){
        return convert(a) % convert(b);
    }



    //向外暴露接口
    exports.add = add;
    exports.jian = jian;
    exports.cheng = cheng;
    exports.chu = chu;
    exports.remain = remain;


})

  在game_exp.js里写模块

define(function (require,exports,module) {

     exports.ds = function(a,b){
        console.log( a + b);
    }

});

 

3.在页面主入口中使用seajs

<script>
        //seajs中模块的引入需要相对路径的完整写法
    seajs.use('./js/game.js',function (game) {
        console.log(game);
       // game.add(5,3);    //调用方法

        var ta = document.getElementById('ta');
        var op = document.getElementById('sel');
        var tb = document.getElementById('tb');
        var btn = document.getElementById('btn');
        var result = document.getElementById('result');

        btn.onclick = function () {
            switch (op.value){
                case '+':
                    result.value = game.add(ta.value,tb.value);
                    break;

                case '-':
                    result.value = game.jian(ta.value,tb.value);
                    break;
                case '*':
                    result.value = game.cheng(ta.value,tb.value);
                    break;

                case '/':
                    result.value = game.chu(ta.value,tb.value);
                    break;


                case '%':
                    result.value = game.remain(ta.value,tb.value);
                    break;
            }
        }


    })

</script>

 

---

 

 

seajs加载jquery库的方法：

//定义一个模块，要遵循seajs的写法
define(function (require,exports,module) {
   
    //模块化加载第三方库，如jquery 首先要在jquery中进行模块化处理：10216行
    var $ = require('./jquery-3.2.1.js');
    console.log($);

    $('#btn-click').click(function () {
        alert(5)
    });


    function convert(n) {
        return parseFloat(n);
    }

    function add(a,b){

        return convert(a) + convert(b);
    }

   //向外暴露接口
    exports.add = add;
   
})

 

jquery中进行相应的模块化修改，增加如下代码：

//cmd模块化处理********seajs*******************

if ( typeof define === "function" && !define.amd ) {
    define( function() {   //模块化
        return jQuery;
    } );
}

 

seajs异步加载的方法：

 

define(function (require,exports,module) {

    require.async('./b.js',function (b) {   //异步加载，将会在b.js加载完成之后，才会执行里面的回调函数
        console.log('执行cccc');
        b.haha();
    });


    console.log('执行111');

    var game1 = require('./a.js');    //直接引用a.js  属于同步加载，会阻塞页面的加载
    game1.hi();

    console.log('执行222');

    function say() {
        console.log('执行333');
    }

    exports.say = say;

});