欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

seajs笔记

程序员文章站 2024-03-26 12:37:29
...

当网站开发越来越复杂的时候,会碰到这些问题
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来串接这些模式

相关标签: seajs