seajs是what?
var loder = {};
var define = loder.define = function(id,deps,factory){
loader[id] = factory;
};
- 首先模块定义的方式,模块源代码中是这样编写模块的define(factory),非常简单,但是如果直接合并合并后多个define就会造成不知道如何引用具体的模块,于是涉及到第二个部分,如何让模块发布过程变得简单。
- 模块提取过程是,将源代码转换成seajs能正确解释的代码,即define(id,deps,factory)需要借助于grunt-cmd-transport或spm-build工具。
模块标识
- 一个模块标识由斜线(
/
)分隔的多项组成。 - 每一项必须是小驼峰字符串、
.
或..
。 - 模块标识可以不包含文件后缀名,比如
.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
// /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>
参考阅读:
seajs的那些坑的更多相关文章
-
seajs之seajs-debug坑
最近遇到两个关于seajs-debug的坑 一个与preload有关,详情见https://github.com/seajs/seajs-debug/issues/15 一个与map时间戳有关,详情见 ...
-
用spm2构建seajs项目的过程
前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...
-
seajs的那点事(很坑的事),和本白的一点事(更坑的事)
在开始之前,偶先吐槽加逗比一下,2天前,CCAV的本白和百度的菊花成功潜入到了携程大楼 然后在没有找到他们运维的情况下,四处乱逛,企图把他们的服务器给root一下,然后再瞎逛之后到了一个很神奇的地方 ...
-
seajs集成jquery的一个坑
var $ = require("jquery"); 今天在用seajs集成js的时候,老是发现$获取不到,但是文件又加载进去了,后来找了半天发现是这个问题. 本质的原因在于sea ...
-
JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
-
seajs学习一天后的总结归纳
公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴 ...
-
新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
-
SeaJS与RequireJS最大的区别
SeaJS与RequireJS最大的区别 U_U 2013-06-20 16:21:12 执行模块的机制大不一样-----------------------------------由于 Requir ...
-
前端模块化开发之seaJs
了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...
随机推荐
-
AraxisMerge和beyond Compare做git mergetool配置
打开.gitconfig文件,加入如下代码即可 [diff] external = /Applications/AraxisMerge.app/Contents/Utilities/araxisgit ...
-
w win cmd VS broswer
php -f Fetch data from db , use php without any bugs to analyse the data and read and write db, with ...
-
NSS_04 extjs中grid接收datetime类型参数列
今天在做用户列表时发现, asp.net mvc3的控制器在返回JsonResult结果时, 会把对象内的DateTime类型成员,解析为类似于\/Date(1238606590509)\/的格式 , ...
-
[poco] HttpRequest之post方法
转自 http://www.cnblogs.com/yuanxiaoping_21cn_com/archive/2012/06/10/2544032.html #import <iostream ...
-
centos 下使用vscode 调试egg.js 注意事项
这两天在centos下,直接用vscode运行egg.js的例子.遇到个问题就是当安装了vscode-egg插件,会遇到一个现象.就是同样的代码,Windows下调试可以顺利进行,但是centos有时 ...
-
POJ 2570 线段树
Potted Flower Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Jav ...
-
SDN2017 第二次实验作业
安装floodlight 参考链接:http://www.sdnlab.com/19189.html 从github下载源码,并编译安装 $ sudo apt-get install build-es ...
-
Scala学习(二)--- 控制结构和函数
控制结构和函数 摘要: 本篇主要学习在Scala中使用条件表达式.循环和函数,你会看到Scala和其他编程语言之间一个根本性的差异.在Java或C++中,我们把表达式(比如3+4)和语句(比如if语句 ...
-
web.xml执行顺序
出自:http://blog.csdn.net/u010833154/article/details/50697987 引言:启动java web程序的时候,java web会读取配置文件web.xm ...
-
HDU 3507 斜率优化dp
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...