sea.js的基本使用方法

关于SeaJS的概念,在这里就不多说了,自行百度吧~
下面是本人自己总结的sea.js的使用方法,有不对的地方请大家指出。

1. 第一步当然是去官网下载我们需要的文件喽

http://seajs.org/docs/ 进入官网点击下载即可。
打开我们下载的文件,是这样的:
SeaJS文件夹下的内容

打开src文件夹,我们可以看到很多js文件:
    intro.js             -- 全局闭包头部
    sea.js               -- 基本命名空间

    util-lang.js         -- 语言增强
    util-events.js       -- 简易事件机制
    util-path.js         -- 路径处理
    util-request.js      -- HTTP 请求
    util-deps.js         -- 依赖提取

    module.js            -- 核心代码
    config.js            -- 配置
    outro.js             -- 全局闭包尾部
我们想要的sea.js就在里面啦。
2. 根据需要在自己的页面里面引入sea.js
<script src="js/sea.js"></script>
3.开始使用!

关于怎样使用这个问题,还是从举个栗子开始吧~~~

如果我们现在有module1和module2两个js文件
module1.js内容如下:

function show(){
        alert(1);
    }
function show(){
    alert(2);
}

module2.js内容如下:

function show(){
        alert(3);
    }
  • 用sea.js引入其他js文件:
seajs.use('./js/module1.js')

注意了注意了!:sea的默认根目录是sea.js这个文件,注意路径哦~

seajs.use('./js/module1.js',function (){
       //两个参数:第一个参数:模块的地址;第二个参数:回调函数; 
        alert(123);  //当module1加载成功的时候弹出123
    })
  • 用sea.js实现模块化,解决冲突,依赖等问题:

对module1里面的代码做出如下改动:

define( function (require,exports,module){
    //require,exports,module这三个参数是固定的,不允许修改的,相当于关键字
    //可写可不写,如果要少写的话,只能少写后面的,不能少写前面的,
    //比如可以写require,exports,也可以写require,不能写exports,module,或者module//一般情况下都写上比较好
    function show(){
        alert(1);
    }
    exports.fn1 = show ;  //exports:对外提供接口的对象,让show这个函数在外面能够找到
})

function show(){
    alert(2);
}

对module2里面的代码做出如下改动:

define(function (require,exports,module){
    function show(){
        alert(3);
    }
    exports.fn2 = show ;
})
  • 在我们的html里面正确调用不同js文件里面的函数
seajs.use('./js/module1.js',function (){
        //两个参数:第一个参数:模块的地址;第二个参数:回调函; ‘./js/module1.js’:sea的默认根目录:sea.js这个文件
        alert(123);  //当module1加载成功的时候弹出123
    })

    seajs.use('./js/module1.js',function (ex){  //参数可以随意起名,代表exports
      ex.fn1();  //调用module1 的exports.fn1
      show();   //调用module1 的show
    })

    //show(); 这样调用不到module1里的内容

    seajs.use('./js/module2.js',function (ex){  //参数可以随意起名,代表exports
        ex.fn2();  //调用module2 的exports.fn1
        show();   //调用module1 的show
       // ex.fn1();  调用不到module1 的exports.fn1
    })

差不多就是这样啦,get到了就会觉得不是很难吧,哈哈~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值