SeaJS入门

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等 JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。

SeaJS的主要目的是令 JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的 逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript 编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯。

SeaJS主要解决三个问题：命名冲突，依赖，性能。

我们在做项目的过程中，是不是有些项目迭代频繁，js之间的依赖性太强，而最终代码量复杂度搞得我们不想再维护下去了，太乱了维护起来太痛苦了，之前我也有这样经历。后来就用了SeaJS做代码管理，使用SeaJS非常适用于多人合作的，且需求一变再变反复修改迭代升级长期维护的项目，这样我们不用考虑别人怎么命名变量或者函数，我们可以挥洒自如，因为每个功能模块只有一个对外的接口，我们要使用模块内变量或者方法必有通过这个接口，不然是访问不到的，而且引用同一个模块js只会加载一次，不会损耗性能。

SeaJS的基本配置：

首先在页面中引入seajs，然后根据项目实际情况配置以下参数：

seajs.config({   // Sea.js 的基础路径    base:  './js/' ,      // 别名配置    alias: {       'jquery' :  'static/jquery-1.9.1.min'    },      // 路径配置    paths: {      'ddbing' :  'http://www.ddbing.com/'    },      // 变量配置    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 ,      // 文件编码    charset:  'utf-8' });

模块的书写约定，此时用到define 是一个全局函数，用来定义模块：

 

define( function (require, exports, module) {         // 模块间的依赖，获取模块 a 的接口        var  a = require( './a' );   // 调用模块 a 的方法        a.doSomething(); });

默认会传入三个参数：require、exports 和 module。

在页面中如何加载使用模块，此时用到use方法，例如：

// 加载模块 main，并在加载完成时，执行指定回调 seajs.use( './main' ,  function (ex) {    ex.init(); });

use 方法还可以一次加载多个模块：

//并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调 seajs.use([ './a' ,  './b' ],  function (a, b) {    a.init();    b.init(); });

callback 参数可选，省略时，表示无需回调。

与 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 方法。

转载于:https://www.cnblogs.com/liqingbo/p/4824449.html