SeaJS 学习
什么是系统
在生活和工作中,我们会接触到大量系统:自然界生态系统、计算机操作系统、软件办公系统,还有教育系统、金融系统、网络系统、理论系统等等。究竟什么是系统呢?
来看下维基百科的解释:
系统泛指由一群有关连的个体组成,根据预先编排好的规则工作,能完成个别元件不能单独完成的工作的群体。系统分为自然系统与人为系统两大类。
简言之,系统有两个基本特性:
- 系统由个体组成。
- 个体之间有关连,按照规则协同完成任务。
系统中的个体可称之为系统成员,这样,要构建一个系统,最基本层面需要做两件事:
- 定义系统成员:确定成员是什么。
- 约定系统通讯:确定成员之间如何交互,遵循的规则是什么。
只要把这两个问题描述清楚,我们就可以构建出系统。
模块系统
Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里,一切皆是模块,所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题:
- 模块是什么?
- 模块之间如何交互?
在前端开发领域,一个模块,可以是JS 模块,也可以是 CSS 模块,或是 Template 等模块。在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块):
- 模块是一段 JavaScript 代码,具有统一的基本书写格式。
- 模块之间通过基本交互规则,能彼此引用,协同工作。
把上面两点中提及的基本书写格式和基本交互规则描述清楚,就能构建出一个模块系统。对书写格式和交互规则的详细描述,就是模块定义规范(Module Definition Specification)。
模块标识
模块标识是一个字符串,用来标识模块。在 require
、 require.async
等加载函数中,第一个参数都是模块标识。define
函数的 dependencies
参数也是由模块标识组成。
SeaJS 中的模块标识是 CommonJS 模块标识 的超集:
- 一个模块标识由斜线(
"/"
)分隔的多项组成。- 每一项必须是小驼峰字符串、
"."
或".."
。- 模块标识可以不包含文件后缀名,比如
".js"
。- 模块标识可以是“相对”或“顶级”标识。如果第一项是
"."
或".."
,则该模块标识是相对标识。- 顶级标识根据模块命名空间的根路径来解析。
- 相对标识相对
require
所在模块的标识来解析。
注意,符合上述规范的标识肯定是 SeaJS 的模块标识,但 SeaJS 能识别的模块标识不需要完全符合以上规范。 比如,除了大小写字母组成的小驼峰字符串,SeaJS 的模块标识字符串还可以包含下划线和连字符, 甚至可以以"http://"
、"https://"
、"file:///"
等协议标识开头。
相对标识
相对标识只出现在模块环境中,以 "."
开头。会相对当前模块的 URI 来解析:
// 在 http://example.com/js/a.js 中:
require('./b');
// => http://example.com/js/b.js
顶级标识
顶级标识不以点("."
)或斜线("/"
)开始, 会相对 SeaJS 的 base
路径来解析:
// 假设 base 路径是:http://example.com/js/libs/ // 在模块代码里:
require('jquery/1.7.1/jquery');
// => http://example.com/js/libs/jquery/1.7.1/jquery.js
base 路径的默认值,与 sea.js 的路径相关: 如果 sea.js 的路径是: http://example.com/js/libs/sea.js 则 base 路径为: http://example.com/js/libs/
当 sea.js
路径中含有版本号时,base
不会包含 seajs/x.y.z
字串。 当类库模块有多个版本时,这样会更方便。
如果 sea.js 的路径是: http://example.com/libs/seajs/1.0.0/sea.js 则 base 路径是: http://example.com/libs/
当然,也可以手工配置 base
路径:
seajs.config({
base: 'http://code.jquery.com/'
}); // 在模块代码里:
require('jquery');
// => http://code.jquery.com/jquery.js
普通路径
除了相对和顶级标识之外的标识都是普通路径。普通路径的解析规则,和 HTML 代码中的 script.src
一样,会相对当前页面来解析。(以当前页面路径为基础,无论你设置了怎样的base路径)
// 在 http://example.com/js/main.js 中:
require('http://example.com/js/a');
// => http://example.com/js/a.js // 在 http://example.com/js/a.js 中:
require('/js/b');
// => http://example.com/js/b.js // 在任何代码里:
seajs.use('./c');
// => http://example.com/path/to/page/c.js
seajs.use(ids, ...)
和 define(id, ...)
中的模块标识始终是普通路径,因为这两个方法是在全局环境中执行的。
文件后缀的提示
除非在路径中出现井号("#"
)或问号("?"
),SeaJS 在解析模块标识时, 都会自动添加 JS 扩展名(".js"
)。如果不想自动添加扩展名,最简单的方法是, 在路径末尾加上井号("#"
)。
// ".js" 后缀可以省略:
require('http://example.com/js/a');
require('http://example.com/js/a.js');
// => http://example.com/js/a.js // ".css" 后缀不可省略:
require('http://example.com/css/a.css');
// => http://example.com/css/a.css // 当路径中有问号("?")时,不会自动添加后缀:
require('http://example.com/js/a.json?callback=define');
// => http://example.com/js/a.json?callback=define // 当路径以井号("#")结尾时,不会自动添加后缀,且会在解析时,去掉井号:
require('http://example.com/js/a.json#');
// => http://example.com/js/a.json
http://seajs.org/docs/#docs
SeaJS 学习的更多相关文章
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- seaJS学习资料参考
seajs官方文档:http://seajs.org/docs/#docs http://wenku.it168.com/d_000096482.shtml http://blog.codinglab ...
- seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...
- 模块化之seaJs学习和使用
使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以 ...
- seajs学习一天后的总结归纳
公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴 ...
- 前端MVC学习——模块发开发、seajs学习
这份学习链接已经足够了:http://seajs.org/docs/#intro 我假设你至少已经浏览过上述链接文档.并且掌握了基本的seajs基础知识~ 手把手教你创建helloworld~ Hel ...
- 自学了三天的SeaJs学习,解决了前端的一些问题,与小伙伴们一起分享一下!
我为什么学习SeaJs? [第一]:为了解决项目中资源文件版本号的问题,以及打包压缩合并等问题. [第二]:好奇心和求知欲.[我发现很多知名网站也都在使用(qq空间, msn, 淘宝等等),而且 Se ...
- seajs学习笔记
seajs配置 seajs.config({ //别名配置 alias:{ 'es5-safe':'gallery/es5-safe/0.9.3/es5-safe', 'jquery':'jquery ...
- SeaJS学习笔记(一) ./ 和 ../ 区别
最近要去实习,公司里使用sea.js进行模块化开发 具体下载安装就不多说了,请参见SeaJS官网 <!DOCTYPE html> <html> <head> < ...
随机推荐
- poj 3264 Balanced Lineup 区间极值RMQ
题目链接:http://poj.org/problem?id=3264 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) alw ...
- 【BZOJ】【3007】拯救小云公主
思路题 我的naive的做法是二分答案+判定是否有路径可走……但是没有正确理解[走的方向任意]这句话…… 其实就是说想咋走咋走= =360°无死角乱走…… 所以其实是个平面上的问题…… 我们可以换个方 ...
- 剑指offer--面试题23
//该题原本想用递归实现,但却用循环实现了... //关键用了个队列 #include <queue> void Print(BinaryTreeNode* pRoot, std::que ...
- 二分图匹配(KM算法)n^3 分类: ACM TYPE 2014-10-01 21:46 98人阅读 评论(0) 收藏
#include <iostream> #include<cstring> #include<cstdio> #include<cmath> const ...
- 引擎设计跟踪(九.14.2f) 最近更新: OpenGL ES & tools
之前骨骼动画的IK暂时放一放, 最近在搞GLES的实现. 之前除了GLES没有实现, Android的代码移植已经完毕: [原]跨平台编程注意事项(三): window 到 android 的 移植 ...
- 深入理解python之self
首先明确的是self只有在类的方法中才会有,独立的函数或方法是不必带有self的.self在定义类的方法时是必须有的,虽然在调用时不必传入相应的参数. self名称不是必须的,在python中self ...
- Working with LOBs in Oracle and PHP
原文链接:http://www.oracle.com/technetwork/articles/fuecks-lobs-095315.html Working with LOBs in Oracle ...
- HDOJ 3177 Crixalis's Equipment
Crixalis's Equipment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- Xml Schema的用途
Xml Schema的用途 1. 定义一个Xml文档中都有什么元素 2. 定义一个Xml文档中都会有什么属性 3. 定义某个节点的都有什么样的子节点,可以有多少个子节点,子节点出现的顺序 4. ...
- 最长连续回文串(最优线性时间O(n))
转自:http://blog.csdn.net/hopeztm/article/details/7932245 Given a string S, find the longest palindrom ...