学习 Sea.js 笔记(二)

写模块:

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 [email protected] -g
  npm install [email protected] -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开发框架.

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

时间: 2024-10-13 03:12:00

学习 Sea.js 笔记(二)的相关文章

深入学习sea.js

入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/module3.js' ) }); seajs.use('a3') 二.module学习 _ id:模块的id _url:模块的绝对路径 -dependences  :模块的依赖 数组 _ exports :当前模块的对外接口 等待更新

30分钟学习sea.js使用指南

: 等待更新.......

STM32学习及应用笔记二:一次运算符优先级造成的错误

本人在最近一个项目的开发中,出现一个应为疏忽运算符优先级造成的问题,检查了很久才发现问题,所以觉得运算符的优先级问题还是有必要再研究一下.具体的问题是这样的,我采集了传感器的原始数据,然后会对数据进行一些处理,在其中的一种条件下会对一个数进行左移几位并加上一个数.类似的操作在其他地方也有,但只在这个地方忘记了一个括号,所以得出了结果总是存在偏差,只好从头开始查找,花了不少时间才发现这出错误. 其实本人平时还是非常注意代码规范的,但也有一时疏忽的,确实运算符的优先级有时候让人迷惑.下面我们简单的总

JS中的模块化开发之Sea.JS

模块化开发的好处: 1:减少冲突 2:提高性能 用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads 例子:获取非行间样式的模块化开发: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

Node.js笔记(0001)---connect模块

首先来看这一部分代码 1 /** 2 * Created by bsn on 14-7-1. 3 */ 4 var connect = require('connect'); 5 6 var app = connect(); 7 function hello(req, res, next) { 8 console.log(req.url); 9 res.end('hello bsn'); 10 next(); 11 } 12 13 function helloAgain(req, res) {

Sea.js学习笔记

Sea.js入门 http://www.cnblogs.com/doseoer/p/4007752.html 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. https://github.com/seajs/seajs/issues/547 Sea.js:简单.极致的模块化Web开发体验 Sea.js 创始人玉伯专访

js模板加载框架 sea.js学习笔记

seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http://seajs.org/docs/#docs 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数“define” fn.define = function(id, deps, factory) { //code of function… } 使用define函数来进行定义一个模块

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource