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


如果您觉得本文的内容对您的学习有所帮助，您可以微信：