码迷,mamicode.com
首页 > Web开发 > 详细

学习 Sea.js 笔记(二)

时间:2015-11-11 13:31:56      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

写模块:

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开发框架.

这些文章不错, 所以先转去看看文章吧.

学习 Sea.js 笔记(二)

标签:

原文地址:http://my.oschina.net/u/232554/blog/528822

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!