精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-09-06
最后修改:2011-09-09
最近打算整理一下项目的前端代码,将凌乱的js代码模块化。RequireJS/SeaJS都是选用的对象。 由于SeaJS是国人写的基于CommonJS modules 1.1规范的js模块管理工具,这个和node.js的module1.0规范差不多,加之有中文的一手文档,顺理成章的支持国产。
昨天下午研究了很久的文档,感觉非常蛋疼! 我平时主要做的是Java方面,并不想了解太多js模块加载的原理,只想快速用之,结果连篇简单易懂的快速入门都没。我勒个去的!!! 十分蛋疼.
下面整理一下SeaJS的用法,仅供快速入门,高级功能请自行发掘。
简单的概念:
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: 当前模块开放的接口, 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. 下载SeaJShttp://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中用script引用的方式, 不将其纳入SeaJS的模块管理。
SeaJS 提供了一个类似于npm的管理工具,里面有他们改造好的第三方库,你可以在这里找找是否有适合的:
参考资料这两天在做模块工作时,在GitHub Wiki中找到了不少文档:
https://github.com/seajs/seajs/wiki/Community
Blogs and tutorials初级入门
中级使用
高级探索
修订历史## 2011-09-071. 删除了不少废话,修改了不少手误造成的错别字
2. 为直接引用jquery的方式添加了代码描述
## 2011-09-09
1. 去掉了前面对文档不足的乱喷(发泄的言论,不值得保留)
2. 添加参考资料
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-11-11
well done!
|
|
返回顶楼 | |
浏览 6202 次