作者: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进行模块化管理可以带来以下好处: - **代码分离**:每个模块都有自己的作用域,避免全局变量冲突。 - **按需加载**:只加载当前需要的模块,减小首屏加载时间。 - **易维护**:模块化使得代码结构清晰...
这样做的好处是使得模块与模块之间的依赖关系变得清晰,开发者可以专注于模块的业务逻辑,而不用关心模块加载的具体细节。 模块的依赖关系在SeaJS中是非常重要的概念,它保证了代码的模块化和重用。在SeaJS的定义中...
在实际的代码重构过程中,使用Sea.js可以带来以下好处: - **代码组织**:模块化的代码更易于理解和维护,每个模块负责特定的功能。 - **依赖管理**:Sea.js自动处理模块间的依赖关系,避免手动管理。 - **按需加载...
这样做的好处是,每当版本号`version`变化时,请求的URL也会随之改变,这样就绕过了浏览器的缓存机制,使得浏览器会去服务器请求最新的文件。 除了使用版本号参数的方法之外,还有一种方式是通过替换文件名来强制...
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。 提高可维护性。模块化可以让每个文件的职责...
在实际应用中,模块化编程可以带来很多好处。例如,当需要修改或扩展某个功能时,由于代码已经被模块化,只需要关注和修改相应的模块即可,而不会影响到其他模块。同时,模块化也有利于多人协作开发,因为开发者可以...
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。是一款现代的用于Web开发的模块加载工具,提供简单、极致的模块化体验。Sea.js 由阿里、腾讯等公司共同维护。 使用 Sea.js的好处: Sea.js 追求简单、自然的...
这样做的好处在于,使得基于CommonJS标准编写的应用能够无缝地在CMD环境中运行,特别是对于那些依赖于Node.js生态系统中的模块,但需要在浏览器端运行的项目来说,这是一个非常实用的解决方案。 在使用【grunt-cmd-...
模块化的好处 模块化是前端工程化的重要组成部分,它带来了诸多优势: - **避免变量污染和命名冲突**:每个模块都有自己的作用域,防止了全局变量的冲突。 - **提高代码复用率**:模块化使得代码可以被多个地方...
5. **CMD(Common Module Definition)**:CMD 与AMD类似,主要用于Sea.js等库,它推崇就近依赖声明,使用`seajs.use`加载模块。 6. **ES6模块**:随着ES6标准的推出,JavaScript原生支持模块化。使用`export`导出...