JavaScript个人笔记:js模块化开发seajs基础

①引入sea.js的库
②如何变成模块?
define
③如何调用模块?
exports
seajs.use
④如何依赖模块?
require

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <script src="sea/sea.js"></script>
    <script type="text/javascript">
        //两个参数 : 第一个参数 : 模块的地址  第二个参数 : 回调函数
        //sea的默认根目录 : sea.js这个文件
        seajs.use('./js/module1.js',function(ex){

            ex.show();

            function show(){
                alert('无冲突小明');
            }
            show();
        });



        seajs.use('./js/module2.js',function(ex){
            ex.show();

            function show(){
                alert('无冲突小明2调用3');
            }
            show();

        });


        seajs.config({
            alias : {
                mjs : './js/module3.js'
            }
        });
        seajs.use('mjs',function(ex){
            alert(ex.a);
        })




    </script>
</body>
</html>
// JavaScript Document
define(function(require,exports,module){

    //exports:对外提供接口的对象
    function show(){
        alert('找到小明');
    }
    exports.show = show;

});
// JavaScript Document

define(function(require,exports,module){

    //require:模块之间依赖的接口
    //当引入的的是sea下面的模块的时候,那么require执行完的结果就是exports
    var a = require('./module3.js').a;   //当引入的是sea下面的模块的时候,那么require执行完的结果就是exports

    function show(){
        alert(a);
    }

    exports.show = show;
});
// JavaScript Document
define(function(require,exports,module){
    //alert( module.exports == exports );//true

    /*require.async('.js/module2.js',function(){
        alert('模块加载完的回调');
    });
    */
    var a = '小明2调小明3';

    module.exports = {
        a : a
    };  
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值