seajs是what?
先看段代码:
var loder = {};
var define = loder.define = function(id,deps,factory){
loader[id] = factory;
};
上述代码干了什么?这就是一个最简单的加载器,但离实际应用还有很大差距,需要添加很多功能,seajs就是一个成熟的方案。
当一个页面集合了越来越多的js,这些js由不同的小组维护而且js包含了众多的组件,于是相同的函数可能命名冲突,为了解决命名冲突,大家可能会加上命名空间,记忆命名空间是一个负担,另外各种组件之间的引用,造成了复杂的依赖的关系,如何管理好依赖文件的加载问题也是个烦恼的问题。
seajs很好地解决了命名空间,依赖等问题。简单的说seajs是模块加载器,它将命名空间、组件解释为模块。按照seajs规则编写的代码符合CMD规范,使用它有两个好处:二是让模块定义变得简单,二是让模块发布变得简单。它是如何做到的这两方面的?
- 首先模块定义的方式,模块源代码中是这样编写模块的define(factory),非常简单,但是如果直接合并合并后多个define就会造成不知道如何引用具体的模块,于是涉及到第二个部分,如何让模块发布过程变得简单。
- 模块提取过程是,将源代码转换成seajs能正确解释的代码,即define(id,deps,factory)需要借助于grunt-cmd-transport或spm-build工具。
让这两个方面变得简单的秘诀在于seajs采用了路径即模块标识,于是在提取依赖过程中,根据模块标识找到依赖模块的文件将其合并,并且将模块定义转换为这种形式define(id,deps,factory)。上线后的代码中define(id,deps,factory)的id和deps模块标识用的是路径,根据路径即模块标识,就可以找到相应的完整模块标识。
模块标识
seajs的模块定义方式非常simple,主要的难点在于不同项目有不同的部署要求,因此会因为模块标识理解不够造成进入各种坑。下面详细分析下模块标识!
模块标识命名规则:
- 一个模块标识由斜线(
/
)分隔的多项组成。 - 每一项必须是小驼峰字符串、
.
或..
。 - 模块标识可以不包含文件后缀名,比如
.js
。 - 模块标识可以是 相对 或 * 标识。如果第一项是
.
或..
,则该模块标识是相对标识
解释一下其中的几种概念:
- 相对路径,以
.
或..开头
-
*路径,不以
.或..及
斜线(/
)开头 - 普通路径,除相对和*路径外的,比如/(根路径)开头的,
"http://"
、"https://"
、"file:///"
等协议标识开头的 - 模块命名空间是seajs所在文件的根路径即所谓的base路径,去除了
seajs/x.y.z
字串,也可以指定seajs.config({base:});
模块依赖提取过程如何解析?
- 只提取相对标识
- 相对标识相对
require
所在模块的标识来解析
上线后模块标识解析规则?
- *标识始终相对
base
基础路径解析。(*标识由字符串开头) - 绝对路径和根路径,即普通路径,始终相对当前页面解析,跟我们平时用的其他js和css路径一样,比如当前页面是www.simple.com/user/index.html ,路径为/js/hello.js,它解析后的地址为www.simple.com/js/hello.js。
-
模块定义中require
和require.async
的相对路径相对当前模块路径来解析。
如果我们能理解其模块标识解析设计的出发点,那么就可以轻易的理解这些而不用记忆这么多:
- 关注度分离。书写模块的时候我们是不用指定模块id的,require的模块时候只要填入依赖模块的相对路径,于是我们只要关注代码的书写而不是依赖,打包后工具会自动帮我们处理好模块id。
- 尽量与浏览器的解析规则一致。上线后在浏览器中的代码,模块路径的解析规则应该于平时用的css、js这些加载路径规则一样,普通路径和相对路径的都是相对当前页面的。
示例
目录结构如下:
www
--app
--blog
index.html
--sea-modules
--seajs
--2.2.0
sea.js
--blog
--user
--1.0.0
main.js
--static
--user
--src
a.js
b.js
main.js
--dist
main.js
package.json
Makefile
// /www/static/user/src/a.js
define(function(require,exports,module){
module.exports = function(){
// ..........................
};
});
// /www/static/user/src/b.js
define(function(require,exports,module){
module.exports = function(){
// ..........................
};
});
// /www/static/user/src/main.js
define(function(require,exports,module){
var a = require('./a");
var b = require('./b");
// ..............
});
// /www/static/user/package.json
{
family:"blog",
name:"user",
version:"1.0.0",
spm:{
output:["main.js"]
}
}
// /www/static/user/Makefile
build:
@spm build deploy:
@rm -rf ../../sea-modules/blog/user
@mkdir ../../sea-modules/blog/user
@mkdir ../../sea-modules/blog/user/1.0.
@cp dist/*.* ../../sea-modules/blog/user/1.0.0
@echo
@echo " deploy to seajs-modules/blog/user/1.0.0"
@echo
使用spm-build构建项目:
cd /www/static/user ; spm-build --encoding gbk
会在/www/static/user/dist 下生成 main.js 和 main-debug.js,main.js大概是这样的
// /www/static/user/dist/main.js
define("blog/user/1.0.0/main",["./a","./b"],function(require){
var a = require('./a");
var b = require('./b");
});
define("blog/user/1.0.0/a",[],function(require,exports,module){
// .......................
});
define("blog/user/1.0.0/b",[],function(require,exports,module){
// .......................
});
然后运行make deploy
会将 ../dist/main 部署到 /www/sea-modules/blog/user/1.0.0/main.js
在页面中如何加载模块呢?
<!-- www.expample.com/app/blog/index.html -->
<script src="/sea-modules/seajs/2.4.0/sea.js" id="seajson"></script>
<script>
seajs.config({charset:"gbk"});
seajs.use("blog/user/1.0.0/main");
</script>