seajs的好处

作者:zccst

两大好处:
1,通过exports暴露接口。不需要命名空间,不需要全局变量。
2,通过require引入依赖。让依赖内置,开发者只关心当前模块的依赖,其他事情Seajs都会自动处理好。

其他好处:
1,模块的版本管理。通过别名配置,配合构建工具,可以比较轻松地实现模块的版本管理。
2,提高可以维护性。
3,前端性能优化。通过异步加载模块,对性能非常有益。
4,跨环境共享模块。


随着Dojo,YUI3,Node.js推广和流行,前端模块化才开始深入人心。


一类是大教堂模式。如Dojo,YUI3,KISSY等。所有组件都是颗粒化、模块化的,各组件之间层层分级、环环相扣。
一类是集市模式。如 jQuery、RequireJS、Sea.js、OzJS 等。所有组件彼此独立、职责单一,各组件通过组合松耦合在一起,协同完成开发。


开始

1,config
配置文件
主要用到
base 根目录
alias 把一个长路径简化为一个短路径
paths 路径。主要是把code.google.com/jquery/变为jquery,然后直接使用1.1,7.1,9.1版
charset 编码

例子:

seajs.config({

// 别名配置
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'json': 'gallery/json/1.0.2/json',
'jquery': 'jquery/jquery/1.10.1/jquery'
},

// 路径配置
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
},

// 变量配置
vars: {
'locale': 'zh-cn'
},

// 映射配置
map: [
['http://example.com/js/app/', 'http://localhost/js/app/']
],

// 预加载项
preload: [
Function.prototype.bind ? '' : 'es5-safe',
this.JSON ? '' : 'json'
],

// 调试模式
debug: true,

// Sea.js 的基础路径
base: 'http://example.com/path/to/base/',

// 文件编码
charset: 'utf-8'
});


2,use
用来在页面中加载一个或多个模块。

模块启动:

<script src="path/to/sea.js"></script>
<script>
// 加载模块 main,并在加载完成时,执行指定回调
seajs.use('./main', function(main) {
main.init();
});
</script>


与 DOM ready 的关系
注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证,比如:

seajs.use(['jquery', './main'], function($, main) {
$(document).ready(function() {
main.init();
});
});



最佳实践
seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时,推荐使用 require.async 方法。

引入 sea.js 时,可以把 sea.js 与其他文件打包在一起,可提前合并好,或利用 combo 服务动态合并。无论哪一种方式,为了让 sea.js 内部能快速获取到自身路径,推荐手动加上 id 属性:

<script src="path/to/sea.js" id="seajsnode"></script>
加上 seajsnode 值,可以让 sea.js 直接获取到自身路径,而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升,推荐默认都加上。


引入新的知识点:combo动态合并。


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值