Sea.js使用(1)

Sea.js

模块化开发
Sea.js遵循CMD规范

使用sea.js进行开发

第一步:引入sea.js的包
第二步:启动并指定入口模块seajs.use('../static/src/main') 注意:main.js可以省略后缀不写
第三步:定义模块 define(函数或者数组)define([]) define({}) define("abc")这几种形式不需要导出,数组内的值会被自动导出
常用写法:define(function(require,exports,module){})
第四步:如果本身是一个模块,可以通过require()来引入其他的模块 require()的参数只能是字符串,重复的require()请求只会执行一次
第五步:通过module.exports = {}来输出模块对象

小坑

当module.exports和exports都没有被赋值时,均指向同一个内存空间地址
console.log(module.exports === exports) //true
可以使用module.exports来挂载属性,也可以使用exports来挂在属性,但不能使用exports来输出对象

seajs.use()

seajs.use()是异步加载
seajs.use([]) -回调函数的参数就是数组每个模块的返回值
-模块的加载顺序,和回调参数的顺序一定要保持一致
推荐使用数组的形式,尽量省略”.js”的文件名

让第三方包支持cmd规范

1
2
3
4
5
if(typeof define === 'function' && define.cmd){
define(function(){
return jquery//'第三方包的对外接口'
})
}

seajs的config配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
seajs.config({
base:'./index', //设置顶级目录,也可以认为是基础目录
//使用的方式,排除绝对路径和相对路径,直接写接下来的文件夹或者文件名
//当不配置base的时候,base默认是seajs的目录
alias:{ //别名
'b':'aa/aa'.
}
paths:{
'c':'cc/cc'
}
//当alias和base同时存在的时可以拼接路径使用
//优先级
//如果是seajs.use('x');优先匹配alias和paths,匹配上了就不匹配base
//alias和paths都能使用base
//在seajs中paths 只能匹配文件夹,使用需要拼接
})

requirejs简单了解

requirejs中的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
requirejs.config({
baseUrl:'./public',
path: {
'jquery': '../jquery/jquery'
}
shim: { //垫一下输出没有定义输出对象的第三方js文件
'jquery': {
exports: '$'
}
}
})
requirejs(['a'],function(a){
})
-------
在其他文件中定义一个符合requirejs的模块
define([],function(){
console.log('b.js被加载了');
return 'b.js';
})

比较seajs和requirejs

requirejs会提前加载好所有需要的模块
seajs会按需求加载模块

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. Sea.js
    1. 1.1. 使用sea.js进行开发
  2. 2. 小坑
  3. 3. seajs.use()
  4. 4. 让第三方包支持cmd规范
  5. 5. seajs的config配置
  6. 6. requirejs简单了解
  7. 7. 比较seajs和requirejs