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>

与DOMready的关系

注意：seajs.use与DOMready事件没有任何关系。如果某些操作要确保在DOMready后执行，需要使用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属性：

<scriptsrc="path/to/sea.js"id="seajsnode"></script>

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

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

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