最近打算整理一下项目的前端代码,将js代码模块化。RequireJS/SeaJS使我选型的对象。
SeaJS是国人写的基于CommonJS规范的javascript模块管理工具,由于有一手的中文档,并且和node.js是统一模块标准,自然而然就选他了。
简单的概念:
- SeaJS中所有js代码都应该被模块化,未模块化的代码不能用SeaJS API进行引用
- 通常一个文件一个模块,文件名即模块名
- 如果要通过SeaJS引用jquery,ExtJS等库,你需要先对它们进行改造(暂时定为高级内容,本文不涉及)
SeaJS中的模块API:
文件main.js, 定义模块:
define(function (require, exports, module) {
exports.sum = function(x, y) {
return x + y;
}
})
关键字define, 以及匿名函数的参数一个都不能少, 注意: require, exports, module 参数名称也不能改.
exports: 用于声明该模块的对外接口, main.js的对外接口为 sum function
module: 用于表示当前模块的信息,具有如下属性:
id: 模块的唯一表示, require方法需要用到他
exports: 当前模块开放的接口, Object, main.js中是 sum
dependencies: 当前模块的依赖列表, Array, 下面increment.js的是: ["math"]
文件increment.js, 引用(require)模块:
define(function (require, exports, module) {
var add = require('math').sum;
exports.increment = function (val) {
return add(val, 1)
}
})
require用于引用一个模块,上面代码引用了 math 模块, 并且用 add 变量来保存 sum 方法的引用.
概念完了,开始实战
我平时做java,对tomcat最熟,本片就以tomcat为主.
1. 创建工程结构:
在tomcat\webapps创建如下目录结构, 当然你也可以用eclipse创建 Dynamic Web Project
2. 下载SeaJS
http://modules.seajs.com/seajs/1.0.1/sea-debug.js
下载好后将sea-debug.js文件复制到lib下, 同时可以吧你喜欢的第三方库放这里。
关于如后引用第三方库,请稍后... 后面会提到
3. 安装SeaJS
在index.html中的head节点下加入script标签:
<script src="lib/sea-debug.js" type="text/javascript" charset="utf-8" data-main="./javascripts/main"></script>
期中 data-main用于指定初始加载的模块, ./javascripts/main 只的是 javascripts/main.js 文件
完整的index.html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="吕健">
<!-- Date: 2011-09-05 -->
<script src="lib/sea-debug.js" type="text/javascript" charset="utf-8" data-main="./javascripts/main"></script>
<script src="lib/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
4. 构建main.js:
seajs.config({
// 只定base目录,类似java中的src目录
base: './javascripts/',
// 目录长的可以声明别名, 这点十分人性化
alias: {
},
// 下面配置自己理解
charset: 'utf-8',
timeout: 20000,
debug: 0
});
define(function(require, exports, module) {
// 如果没有配置base, 需要用 require('./javascripts/increment')
var inc = require('increment').increment;
var a = 1;
console.log(inc(a));
})
5. 启动tomcat
访问 http://localhost:8080/seajs_demo/index.html 看看控制台数据(看输出请远离IE)
到这里估计你已经知道如何使用SeaJS了.
最后一个问题, 如何引用lib/下的jquery ?
jQuery是我从官方站点下的,没有模块化,无法通过SeaJS的require进行引用。如果要用SeaJS管理jquery, 你需要对jquery源码进行改造(SeaJS团队是这么做的).
我采用的方式是直接在html中引用, 不将其纳入SeaJS的模块管理。
<script src="lib/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
SeaJS 提供了一个类似于npm的管理工具,里面有他们改造好的第三方库,你可以在这里找找是否有适合的:
参考资料
这两天在做模块工作时,在GitHub Wiki中找到了不少文档:
https://github.com/seajs/seajs/wiki/Community
Blogs and tutorials
初级入门
中级使用
高级探索
修订历史
## 2011-09-07
1. 删除了不少废话,修改了不少手误造成的错别字
2. 为直接引用jquery的方式添加了代码描述
## 2011-09-09
1. 去掉了前面对文档不足的乱喷(发泄的言论,不值得保留)
2. 添加参考资料
- 大小: 14.6 KB
- 大小: 17.9 KB
- 大小: 22 KB
- 大小: 19.4 KB
- 大小: 154.5 KB
分享到:
相关推荐
基于seajs模块化的合并压缩###合并压缩前--Gruntfile.js--打包脚本--pagekage.json--依赖的npm配置--node-modules/--下载的npm--app/ //存放页面--src/ //打包前目录------seaConfig.js //Seajs配置文件------page/ ...
seajs-css.js 用于seajs加载css文件,上课用的课件资源,大家有需要的可以随时下载。版本是非常好用的,作为一个学习模块化我们必须的知识插件
这是自己编写的模仿seajs模块加载的模块加载器,用于学习交流之用。大致模仿seajs的模块化加载实现。
模块化可以让每个文件的职责单一,非常有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。 前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。...
SeaJS Web 端的js 模块加载器
requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。 requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。
seajs-2.2.0源码
用于seajs的预加载使用,有需要的小伙伴可以免费下载使用。方便大家多多分享免费的资源,有问题随时给我们留言。希望能帮助大家解决更多的问题
seajs入门完整案例,适合新手学习! seajs入门完整案例,适合新手学习!
seajs常见配置解析和常见插件的使用。sea.js,seajs-css.js,seajs-debug.js,seajs-preload.js,seajs-log.js等
JS模块化标准技术.JAVASCRIPT的几种模块化技术 作为前端重要组成部分的javascript语言,其面向对象功能非常差.所以要实现代码的模块化,需要一些标准:AMD,CMD 针对2种模块化也有现成的js模块化库SeaJs,require.js 今天...
开始学习seajs,模块化的js思想。SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现...
Require-Seajs随着现在web应用越来越复杂,所需的页面越来越多,js代码也随之大量增加,而传统的[removed][removed]js加载方法会影响性能和后期的维护成本, 所以模块化js是大势所趋。模块化js将业务逻辑相关的代码...
seajs-2.3.0.zip
避免依赖数量过多导致依赖列表过长,文件体积增大内置 Uglify-js 压缩器,配合 connector 可以一行一行的显示模块,可以更直观的检查压缩后的代码注意仅支持未 transport 过的模块的构建,普通非 CMD 文件也可以被...
前端开源库-grunt-react-seajsgrunt react seajs,一个将react组件转换为seajs模块的grunt插件
NULL 博文链接:https://weistar.iteye.com/blog/2029949
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。
将以前的代码 用seajs 重构了,js的面向对象设计