`
zccst
  • 浏览: 3319370 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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动态合并。


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    seajs simple demo

    使用Seajs进行模块化管理可以带来以下好处: - **代码分离**:每个模块都有自己的作用域,避免全局变量冲突。 - **按需加载**:只加载当前需要的模块,减小首屏加载时间。 - **易维护**:模块化使得代码结构清晰...

    seaJs的模块定义和模块加载浅析

    这样做的好处是使得模块与模块之间的依赖关系变得清晰,开发者可以专注于模块的业务逻辑,而不用关心模块加载的具体细节。 模块的依赖关系在SeaJS中是非常重要的概念,它保证了代码的模块化和重用。在SeaJS的定义中...

    seajs培训 重构代码

    在实际的代码重构过程中,使用Sea.js可以带来以下好处: - **代码组织**:模块化的代码更易于理解和维护,每个模块负责特定的功能。 - **依赖管理**:Sea.js自动处理模块间的依赖关系,避免手动管理。 - **按需加载...

    seajs实现强制刷新本地缓存的方法分析

    这样做的好处是,每当版本号`version`变化时,请求的URL也会随之改变,这样就绕过了浏览器的缓存机制,使得浏览器会去服务器请求最新的文件。 除了使用版本号参数的方法之外,还有一种方式是通过替换文件名来强制...

    Web前端模块化组件seajs-3.0.0版

    除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。 提高可维护性。模块化可以让每个文件的职责...

    基于RequireJS和JQuery的模块化编程日常问题解析

    在实际应用中,模块化编程可以带来很多好处。例如,当需要修改或扩展某个功能时,由于代码已经被模块化,只需要关注和修改相应的模块即可,而不会影响到其他模块。同时,模块化也有利于多人协作开发,因为开发者可以...

    Sea.JS知识总结

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。是一款现代的用于Web开发的模块加载工具,提供简单、极致的模块化体验。Sea.js 由阿里、腾讯等公司共同维护。 使用 Sea.js的好处: Sea.js 追求简单、自然的...

    前端开源库-grunt-cmd-transport-xd

    这样做的好处在于,使得基于CommonJS标准编写的应用能够无缝地在CMD环境中运行,特别是对于那些依赖于Node.js生态系统中的模块,但需要在浏览器端运行的项目来说,这是一个非常实用的解决方案。 在使用【grunt-cmd-...

    ES6使用export和import实现模块化的方法

    模块化的好处 模块化是前端工程化的重要组成部分,它带来了诸多优势: - **避免变量污染和命名冲突**:每个模块都有自己的作用域,防止了全局变量的冲突。 - **提高代码复用率**:模块化使得代码可以被多个地方...

    JS前端模块化原理与实现方法详解

    5. **CMD(Common Module Definition)**:CMD 与AMD类似,主要用于Sea.js等库,它推崇就近依赖声明,使用`seajs.use`加载模块。 6. **ES6模块**:随着ES6标准的推出,JavaScript原生支持模块化。使用`export`导出...

Global site tag (gtag.js) - Google Analytics