首页 > 网站 > WEB开发 > 正文

Sea.js 提供简单、极致的模块化开发体验

2024-04-27 14:22:05
字体:
来源:转载
供稿:网友

Sea.js 提供简单、极致的模块化开发体验

参考:http://seajs.org/docs/#intro

为什么使用 Sea.js ?

Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:

  • 简单友好的模块定义规范:Sea.js 遵循CMD规范,可以像Node.js一般书写模块代码。
  • 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。

Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。

兼容性

Sea.js 具备完善的测试用例,兼容所有主流浏览器:

Chrome 3+         ?Firefox 2+        ?Safari 3.2+       ?Opera 10+         ?IE 5.5+           ?

Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。

引用文献:

前端模块化开发的价值

一步步学会使用SeaJS 2.0

API 快速参考

seajs.config

用来对 Sea.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'  }});

更多配置项请参考:#262

seajs.use

用来在页面中加载一个或多个模块。

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

更多用法请参考:#260

define

用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:

define(function(require, exports, module) {  // 模块代码});

也可以手动指定模块 id 和依赖,详情请参考:#242require,exportsmodule三个参数可酌情省略,具体用法如下。

require

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

define(function(require) {  // 获取模块 a 的接口  var a = require('./a');  // 调用模块 a 的方法  a.doSomething();});

注意,require只接受字符串直接量作为参数,详细约定请阅读:#259

require.async

用来在模块内部异步加载一个或多个模块。

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

详细说明请参考:#242

exports

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

define(function(require, exports) {  // 对外提供 foo 属性  exports.foo = 'bar';  // 对外提供 doSomething 方法  exports.doSomething = function() {};});

详细说明请参考:#242

module.exports

exports类似,用来在模块内部对外提供接口。

module.exportsexports的区别,以及详细说明请参考:#242

CMD 模块定义规范

模块标识

require 书写约定

模块的加载启动

配置

标准构建

插件

  • seajs-text

加载模板字符串

加载 Handlebars 模板并进行预编译

加载 JSON 数据

  • seajs-style

seajs.importStyle(CSSText, id?)

  • seajs-combo

减少 HTTP 请求数是性能优化中非常重要的一条准则。使用 combo 插件,配合服务器的nginx-http-concat服务(安装指南),可自动对同一批次的多个模块进行合并下载。

  • seajs-flush

通过 combo 插件,我们可以对同一数组中的加载项进行合并加载。通过 flush 插件,我们可以更进一步减少 HTTP 请求数。

  • seajs-debug

调试插件

  • seajs-log

加载 seajs-log 插件后,seajs 会拥有 log 方法。

  • seajs-health

通过 health 插件,可以分析当前页面模块的健康情况。

多版本共存

  • Sea.js 的调试接口

seajs.cacheObject

 通过seajs.cache,可以查阅当前模块系统中的所有模块信息

seajs.resloveFunction

 类似require.resolve,会利用模块系统的内部机制对传入的字符串参数进行路径解析。

seajs.requireFunction

 全局的require方法,可用来直接获取模块接口

seajs.dataObject

通过seajs.data,可以查看seajs所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。

seajs.logFunction

由 seajs-log 插件提供

  • ID 和路径匹配原则

使用seajs.userequire进行引用的文件,如果是具名模块(即定义了 ID 的模块),会把 ID 和seajs.use的路径名进行匹配,如果一致,则正确执行模块返回结果。反之,则返回null

改造现有文件为 CMD 模块

插件开发指南

Sea.js 通过事件提供可扩展接口。要给 Sea.js 开发插件,需要了解 Sea.js 内部所提供的事件类型。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表