seajs 模块化开发(转载、整理)

seajs 作者是阿里巴巴的射雕先生,玉泊。

Sea.js 追求简单、自然的代码书写和组织方式,兼容所有主流浏览器 具有以下核心特性:

  1. Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
  2. 依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。

seajs 常用API(会这7个足够在项目中使用了):

  • seajs.config
    用来对 Sea.js 进行配置。 (直接写在js的开头)
seajs.config({

  // 设置路径,方便跨目录调用
  paths: {
    'arale': 'https://a.alipayobjects.com/arale',
    'jquery': 'https://a.alipayobjects.com/jquery'
  },

  // 设置别名,方便调用
  alias: {
    'class': 'arale/class/1.0.0/class',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  }

});
  • seajs.use
    可以多次使用,用来在页面中加载一个或多个模块。

    • seajs.use 和 Document 的 ready 没有任何关系
    • 要想保证 文档结构加载完毕再执行你的 js 代码,一定要在 window.onload 或者 $(function(){}) 内部使用 seajs.use 。
// 加载一个模块
seajs.use('./a');

// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});
  • define
    模块文件用define 定义。
    用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
define(function(require, exports, module) {

  // 模块代码

});

require, exports 和 module 三个参数可酌情省略 。但是还是希望每写一个模块的时候,第一件事是把define和三个参数按顺序写出来。

  • require
    require 用来获取指定模块的接口。
define(function(require) {

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

  // 调用模块 a 的方法
  a.doSomething();
});
  • require.async
    用来在模块内部异步加载一个或多个模块。
define(function(require) {

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

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

});
  • exports
    用来在模块内部对外提供接口。
define(function(require, exports) {

  // 对外提供 foo 属性
  exports.foo = 'bar';

  // 对外提供 doSomething 方法
  exports.doSomething = function() {};

});
  • module.exports
    与 exports 类似,用来在模块内部对外提供接口。
define(function(require, exports, module) {

  // 对外提供接口
  module.exports = {
    name: 'a',
    doSomething: function() {};
  };

});

exports实际上是 module.exports的一个引用。所有要想暴露一个函数、一个对象的话,就得用module.exports . 开发中,直接使用module.exports 比较好。

经常使用的 API 只有 define, require, require.async, exports, module.exports 这五个。其他 API 有个印象就好,在需要时再来查文档,不用刻意去记。

项目中使用:
待补充。。。

seajs 官方链接
官方demo

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值