轻轻谈一下seaJs——模块化开发的利器

      “仅做一件事，做好一件事。”

      这个应该就是seaJs的精髓了。

      我在自己的一些项目中使用过seaJs，对其算是了解一二，现在就班门弄斧，轻轻地谈一下。

      首先上一段度娘的话：

     “seaJs是一个遵循CommonJs规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。”

1.下载seaJs

下载url：https://github.com/seajs/seajs

      

       我们能清楚地看到，docs是文档；dist是压缩好的、用于浏览器端的SeaJS代码；src则是源代码。package.json + Gruntfile.js就是Grunt构建工具所需要的文件，用来合并压缩等等。

看完代码结构，现在就开始说一下里面的基本用法。

 2.seaJs的基本用法

2.1 用seajs.config来进行路径和文件依赖的配置。

譬如：

        

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'
});

更加详细的配置 ，可以参考：https://github.com/seajs/seajs/issues/262

2.2 用seajs.use在页面中加载一个或多个模块，callback 参数可选，省略时，表示无需回调。

继续看代码：

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

2.3 用define定义模块和获取模块。

具体调用如下：

define(function(require, exports, module) {

  // 你要写的模块代码

});

2.4用require 获取指定模块的接口。

define(function(require) {

  // 获取模块 x 的接口
  var x = require('./x');

  // 调用模块 x 的方法
  x.doSomething();
});

2.5 用require.async在模块内部异步加载一个或多个模块。

define(function(require) {

  // 异步加载一个模块，在加载完成时，执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 异步加载多个模块，在加载完成时，执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});

ps:此段代码copy自官网参考文档。

2.6用exports在模块内部对外提供接口。

define(function(require, exports) {

  //这一句对外提供了一个属性todo
  exports.todo = 'wt';


});

3.注意和规范

肤浅地过了一遍基本的用法之后，接下来就说一下要注意的东西了。

3.1模块工厂构造方法的第一个参数 必须 命名为 require 。

// 错误！
define(function(req) {
  // ...
});
// 错误！
define(function(r) {
  // ...
});

// 正确！
define(function(require) {
  // ...
});

3.2不要给 require 重新赋值或者不能把这个函数重命名。

// 错误
var yilai = require, a= yilai ("./mod");

// 错误
require = function() {};

// 错误
function todo(require) {}

// 错误
function todo() {
  var require = function() {};
}

3.3require 的参数值不能是字符串直接量之外的其他变量。

// 错误！
require(todo);

// 错误！
require("to-" + "do");

// 错误！
require("todo".toLowerCase());

总结：使用 Sea.js，提高代码的可维护性，高效性，灵活性，粒子性和可移植性。总结得有点虚，但是seaJs确实给项目的开发带来了很多的便利。还不用seaJs，你就凹凸慢了。

注：此 文章参考了官网的很多文章，编写而来。想知道得更多的童鞋，请点击这里：http://seajs.org/docs/#docs

Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。

博主相关文章推荐：

有趣的前端题目，看了不后悔

移动端前端开发概述

浅谈 标签的语义化

浅谈鼠标滚轮事件

不积跬步无以至千里----高度自适应的textarea

sass和less，优秀的前端样式预处理器

视差滚动的那些事儿

关于那些常见的坑爹的小bug