作者: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动态合并。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
SeaJS Web 端的js 模块加载器
seajs-2.3.0.zip
knockout seajs .net中实战应用
自己在公司需要使用seajs,就学习了seajs写了个手册和demo,欢迎阅读。
seajs下载,包含自己总结的用法和规范
seajs-2.2.0源码
seajs源码
seajs-5分钟上手。。。。。。...................................................。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
seajs入门完整案例,适合新手学习! seajs入门完整案例,适合新手学习!
seajs源文件以及一个帮助文档,文档介绍比较详细
seajs-css.js 用于seajs加载css文件,上课用的课件资源,大家有需要的可以随时下载。版本是非常好用的,作为一个学习模块化我们必须的知识插件
开始学习seajs,模块化的js思想。SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现...
Bootstrap和seajs结合的分页器,绝对好用嗷
seajs3.0 源码注释,只是本人阅读源码的一些心得及简单注释。 或者直接查看 博文 查看模块加载过程的流程解释。
相关seajs简介,插件制作及js源码插件、jquery插件转换seajs插件的方法等
seaJS框架简介和完整例子,在浏览器中打开index.html 即可,欢迎下载...
主要是做了一个基于node环境中,seajs的配置以及一些实例和利用grunt进行资源的打包压缩合并的构建
前端开源库-grunt-react-seajsgrunt react seajs,一个将react组件转换为seajs模块的grunt插件
NULL 博文链接:https://bijian1013.iteye.com/blog/2259862
这是自己编写的模仿seajs模块加载的模块加载器,用于学习交流之用。大致模仿seajs的模块化加载实现。