没想到啊

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
SeaJS快速入门，让js代码模块化 - 2011-09-09修订，新增参考资料

http://www.iteye.com/topic/1114409

 

最近打算整理一下项目的前端代码，将凌乱的js代码模块化。RequireJS/SeaJS都是选用的对象。

由于SeaJS是国人写的基于CommonJS modules 1.1规范的js模块管理工具，这个和node.js的module1.0规范差不多，加之有中文的一手文档，顺理成章的支持国产。

 

昨天下午研究了很久的文档，感觉非常蛋疼！ 我平时主要做的是Java方面，并不想了解太多js模块加载的原理，只想快速用之，结果连篇简单易懂的快速入门都没。我勒个去的！！！ 十分蛋疼.

 

下面整理一下SeaJS的用法，仅供快速入门，高级功能请自行发掘。

 

简单的概念:

  1. SeaJS中所有js代码都应该被模块化，未模块化的代码不能采用SeaJS API引用
  2. 通常一个文件一个模块，文件名即模块名(这个和java中的public class是一样的)
  3. 如果要通过SeaJS引用jquery,ExtJS等库，你需要先对它们进行改造(暂时定为高级内容，本文不涉及)

SeaJS中的模块API:

文件main.js, 定义模块:

 

Js代码  收藏代码
  1. define(function  (require, exports, module) {  
  2.     exports.sum = function(x, y) {  
  3.         return x + y;  
  4.     }  
  5. })  

 

关键字define, 以及匿名函数的参数一个都不能少， 注意: require, exports, module 参数名称也不能改.

exports:用于生命该模块的对外结构， main.js的对外接口为 sum function

module:用于表示当前模块的信息，具有如下属性:

id: 模块的唯一表示， require方法需要用到他

exports:当前模块开放的接口, main.js中是 sum

dependencies:当前模块依赖那些模块，Array, 下面increment.js的应该是: ["math"]

文件increment.js, 引用(require)模块:

 

Js代码  收藏代码
  1. define(function  (require, exports, module) {  
  2.     var add = require('math').sum;  
  3.     exports.increment = function  (val) {  
  4.         return add(val, 1)  
  5.     }  
  6. })  

 

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标签:

 

Js代码  收藏代码
  1. <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代码:

 

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2.    "http://www.w3.org/TR/html4/loose.dtd">  
  3.   
  4. <html lang="en">  
  5. <head>  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7.     <title>index</title>  
  8.     <meta name="generator" content="TextMate http://macromates.com/">  
  9.     <meta name="author" content="吕健">  
  10.     <!-- Date: 2011-09-05 -->  
  11.     <script src="lib/sea-debug.js" type="text/javascript" charset="utf-8" data-main="./javascripts/main"></script>  
  12.     <script src="lib/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>  
  13. </head>  
  14. <body>  
  15.   
  16.       
  17. </body>  
  18. </html>  

4. 构建main.js:

 

Js代码  收藏代码
  1. seajs.config({  
  2.     // 只定base目录，类似java中的src目录  
  3.     base: './javascripts/',  
  4.     // 目录长的可以声明别名, 这点十分人性化  
  5.     alias: {  
  6.     },  
  7.     // 下面配置自己理解  
  8.     charset: 'utf-8',  
  9.     timeout: 20000,  
  10.     debug: 0  
  11. });  
  12.   
  13.   
  14. define(function(require, exports, module) {  
  15.     // 如果没有配置base, 需要用 require('./javascripts/increment')  
  16.     var inc = require('increment').increment;  
  17.       
  18.     var a = 1;  
  19.     console.log(inc(a));  
  20. })  

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-07

1. 删除了不少废话，修改了不少手误造成的错别字
2. 为直接引用jquery的方式添加了代码描述

## 2011-09-09

1. 去掉了前面对文档不足的乱喷(发泄的言论，不值得保留)
2. 添加参考资料
posted on 2012-02-03 15:29  没想到啊  阅读(1589)  评论(0)  编辑  收藏  举报