您的位置:首页 > Web前端 > JavaScript

学习 Sea.js 笔记(二)

2015-11-11 00:00 411 查看
写模块:

define(function(require, exports, module) {
使用 require(...) 引入模块.
通过 exports.something = ... 对外提供接口
或通过 module.exports = ... 提供整个接口 ?
});

构建部署:
需要使用 spm 或 Grunt 工具.

spm 标准构建工具(已经发布版本3): http://spmjs.io/

项目标准目录结构:
dist 构建之后的文件夹
src 存放源码
package.json 模块信息. (类似于 grunt 使用的模块信息文件)

安装 spm:
npm install spm@2.x -g
npm install spm-build@0.x -g

执行 spm (执行后文件构建到 dist 目录中):
spm build

辅助使用 make 工具 (对应要写 makefile)

如果(简单的) spm 构建不能满足需要, 则使用 Grunt: http://gruntjs.com/
需处理 CMD 的模块: grunt-cmd-transport, grunt-cmd-concat

(关于 Grunt 有社区文章)

== API 快速参考 ==

seajs.config({ ... }) -- 配置. 可指定路径(paths), 别名(alias), 变量(var), 映射(map),
预加载项(preload), 设置调试模式(debug), 等.
变量用于路径只能在运行时才知道的情况(如 lang)

seajs.use(name, callback) -- 加载一个模块. 可选回调.
seajs.use([name_a, name_b ...], callback(a, b, ...) ) -- 加载多个模块, 可选回调.

关于调试: https://github.com/seajs/seajs/issues/263

== CMD 模块定义规范 ==

CMD: Common Module Definition

一个模块就是一个文件, 代码书写格式: define(factory);

define 是一个全局函数, 用于定义模块.

factory 可以是:
1. 对象 (如一个 JSON 对象)
2. 字符串 (如模板 : 'Current user is {{name}}.')
3. 函数: 形为 function(require, exports, module)

define 的更复杂形式:
define(id?, deps?, factory)
其中 id 表示模块标识, deps 表示模块依赖 (属于 Modules/Transport 规范):
define('helo', ['jquery'], function(...){...} )
参数可以省略, 因为可通过构建工具自动生成.

require 函数:
var foo = require(id)

异步 require:
require.async(id, callback?) -- 异步加载一个或多个模块, 可选回调.
这里 id 可形为 [n1, n2, ...], 表示多个模块.

require.resolve(id) -- 只解析模块路径, 不加载.

exports 是一个对象, 用来向外提供模块接口. 例子:
exports.foo = 'foo-bar';
exports.faz = function ...

(在实际 examples 中, 看到 seajs.cache 中模块的 exports 可以是null,数组,字符串,函数,构造函数等)

还可以使用 return {... } 直接向外提供接口. (? 和 exports 是否冲突, 或合并?)

给 exports 直接赋值的正确写法: module.exports = ... (估计可任何值)

module 对象 (在调试中可看到于 seajs.cache):
.id -- 模块唯一标识
.url -- 模块绝对路径 (正式发布版中可能并无该文件, 其一般被合并到一个大文件中)
.dependencies --- [] 表示依赖
.exports -- 对外提供的接口

CMD 规范尽量保持简单, 需要再查, 与 CommonJS, Node.js 的相应规范保持兼容性.

== 模块系统 ==

系统的定义(Wikipedia): 泛指由一群有关联的个体组成, 根据预先编排好的规则工作, 能完成个别元件不能
单独完成的工作的群体.

(故而)要构建一个系统, 需要做:
1. 定义系统成员; 2. 约定系统通讯.

Sea.js 是前端(浏览器中)的模块加载器. 这里模块主要指 js 模块.

模块:
1. 是一段 js 代码; (?统一的基本书写格式)
2. 模块之间通过基本交互规则, 能彼此引用, 协同工作. (按理 sea 主要解决引用问题, 如何协同是模块的事情)

额外的一篇不错的文章 (可惜没有下篇, author: 孟岩):
http://blog.csdn.net/myan/article/details/5928531
相关的另一篇文章(author: :周爱民?)
http://blog.csdn.net/aimingoo/article/details/6062997

相关提及的 KISSY: KISSY 是一个开源前端UI开发框架.

这些文章不错, 所以先转去看看文章吧.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: