seajs笔记
当网站开发越来越复杂的时候,会碰到这些问题
1.冲突
2.性能
3.依赖
seajs是一个适合web端的模块加载器
学习网站:www.seajs.org
sea.js的特性
1.使代码模块化
2.相同模块只会加载一次
如何减少函数命名冲突
common.js
function tab(){};
function drag(){};
function tips(){};
1.可以添加命名空间可以降低冲突,但是无法避免冲突
common.js
var miaov = {};
miaov.tab = function(){};
miaov.drag = function(){};
miaov.tips = function(){};
拆分代码
新的页面:tab(), common.js
common.js->tab.js drag.js tips.js
新的页面: tab(),tab.js
由于将common.js拆分成多个js文件,
如果b依赖于a,会导致b必须放在a文件下面
依赖会导致很多问题,导致一直在修改bug所以会导致大家的开发过程中效率缓慢
seajs如何解决?
1.引入seajs的库
2.如何变成模块?
define
3.如何调用模块?
export
seajs.use
4.如何依赖模块?
require
test.js
define(funtion(require,exports,module){ // 参数不能修改,参数写法不变
exports: 对外的接口
function tab(){
alert(123);
}
exports.tab = tab;
})
demo.html
//seajs.use: 页面去调用函数,第一个函数:模块的地址,第二参数,地址加载成功后的回调函数
seajs的默认根目录:sea.js
//seajs.use('js/test');//调用的文件地址是相对于seajs
seajs.use('./js/test1.js',function(ex){ // 回调的参数,就是模块中的exports
ex.tab();
tab();// 避免了函数的冲突
function tab(){
alert(456);
}
})
test.js
define(funtion(require,exports,module){ // 参数不能修改,参数写法不变
//exports: 对外的接口
//require: 依赖的接口
require('./test2.js'); // 如果地址是一个模块的话,那么require的返回值就是模块中的exports
function tab(){
alert(a);
}
exports.tab = tab;
})
test2.js
// var a=10;
// test2定义一个模块化
define(function(require,export,module){ //参数写法不变
var a = 10;
exports. a = a;
})
模块化分为两种形式
1.异步加载
2.同步加载
可以按照需求不一样进行选择相应的模块加载方式
seajs.config
-alias
-preload
-debug
shim.js将不是AMDm模型的文件转化为AMD形式
模块化历史(模块化的演变都是因为过去存在的问题所以再形成的)
1.ECMAScript第六版将正式支持模块语法
2.nodeJS(只能支持自己的服务器规范)
3.commonJS(服务器模块化规范)
4.AMD
(服务器请求的速度快,
客户端是通过request请求,
请求速度是很慢的,
服务器和客户端有很大的区别,所以推出了AMD)
5.requireJS(类似于闭包形式的返回值,通过return)
-跟seajs一样,web端模块化
-seajs采用cmd规范
seajs是commonjs的技术,用的是amd的壳define
网站开发模式
以xy轴来看开发网站
1.底层库(JQ)
2.组件
3.应用
通过seajs来串接这些模式