You are here
JS学习21：seaJS入门
一、什么是seaJS
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
SeaJS的作者是淘宝前端工程师玉伯。
对于前端们来说，后端的一些语言非常让我们感觉到和蔼可亲，没有浏览器的烦恼，可以随便include、随便require，又有class，用起来非常的爽。我们羡慕了这么久，前端的发展也正从这条路上熙熙攘攘的走来，各种思想和潮流蜂拥而至，不过是js还是css都非常革命性的的影响了我们。
首先就是jquery，简洁的API比起原生js的getELementById要舒爽的多。我一开始接触的是js，刚入门就投入到jquery当中来了，一发不可收拾。有人说，jquery有局限性，有弊端，无法放在很大的项目里。艾，只能说呵呵，jquery是一种工作，就像普通的土地可以种植花果蔬菜，甚至高楼大厦、航天飞机也是从土地里开的，你说它不能胜任大项目吗？人云亦云，可怕，只是工具的用法不同而已。还有一种说法就是jquery用的多了，原生js不会用那也是个屁。我又只能说呵呵了。jquery是工具，jquery是嫁接在js上的，就像一个平台一样，为了快速的建筑更好的建筑，我们依赖这个非常稳定的平台，有何不妥？！原生js只能是这个平台的基石，但jquery的平台是基本上所有的API都是与原生不一样的，并且不会冲突。如果非要说基础基础，那我可以偏激的说，你还是回家造一台电脑再说吧，没有电脑你谈何javascript。
同样，seaJS也是一种工具，是一种开发状态，是javascript的前进的可能方向。今天刚入门，对此了解的不是很多，这里就不献丑说seajs的原理了。可以说，与seaJS同样功能的可能不止一个，我用它学习它的道理是，它非常的简洁，和jquery一样，很容易上手，门槛非常的低，并且它源自淘宝前端。淘宝前端是我非常羡慕的一个职业，他们的技术和能力在国内肯定是第一名，并且他们为开源项目贡献了很多很多，为前端行业带来了很多新的方向和思想。
二、seaJS的目录结构
还是把API部分放到第三节来说，这里先说下怎样的目录结构，不说任何涉及seaJS的代码部分。使用了seaJS，基本上不需要改动当前项目js或者css的目录结构，我想对于前端er来说，js、css的放置虽然各有千秋，但都肯定是放在一起的，或者是分门别类的放在一起，那么这样就好办了，你的配置不需要改动，就这样。
接下来，要做的是下载seaJS了。使用seaJS非常的友好，因为是中文的，虽然部分文档在了github上，很可喜的是这个全球最大的开源分享社区并没有被防火墙拦截，你可以随心所欲的阅读。
seaJS的官网：http://seajs.org
下载了seaJS，dist文件夹里面包含了seaJS的基本内容，把这个文件夹放在你的项目中合适的位置，当然可以重命名这个文件夹。
三、seaJS的基本配置
在页面中使用seaJS和使用jQuery一样，需要引入，seaJS需要配置可选的两个参数：config（配置文件）、main（入口文件）。如下代码所示：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>引用seajs</title>
- <script src="sea/sea.js" data-config="./js/config" data-main="./js/main"></script>
- </head>
- <body>
- </body>
- </html>
可以看出sea和项目的脚本是分别放在两个同级目录的文件夹的。
配置文件是以当前文件为准的同级文件夹js下的config.js。
入口文件是以当前文件为准的同级文件夹js下的main.js。（如果文件就是js，可以省略后缀，如果文件是其他类型，可以使用#号结尾，如main.js.php#，加载的文件就是main.js.php，或者使用get参数，如main.js?get=123，那么加载的文件就是main.js?get=123）
3.1、config配置
先贴出我的配置代码：
- seajs.config(
- {
- // 激活 shim 插件
- plugins: ['shim']
- // shim 配置项
- ,alias:
- {
- // jQuery 的 shim 配置
- 'jquery':
- {
- src: 'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js',
- exports: 'jQuery'
- }
- }
- ,paths:
- {
- 'js':'../js/'//这个路径是以sea.js文件为基础的
- ,'lib':'../lib'
- }
- ,map:
- [
- //防止js文件夹下的文件被缓存
- [/(.*js\/[^\/\.]*\.(?:js))(?:.*)/,'$1?_='+new Date().getTime()]
- ]
- ,debug:true
- });
详细的解释已经注释了，更多内容参考：https://github.com/seajs/seajs/issues/262
3.2、main写法
这个入口，就像wordpress的index.php一样，所有的访问都从这里进入，然后流通到各个目的地。main.js也是如此，当然了这个文件也是非常的小巧，也许一行代码就可以，也许几行代码就可以。我的代码是这样的：
- seajs.use('./js/second',function(s)
- {
- s.show();
- });
使用js文件夹下面的second.js启动项，启动完毕执行该模块下的show方法。这里的目录必须是相对运行文件为准的路径。
四、seaJS的模块
如上second模块的写法：
- //second
- define(function(require,exports,module)
- {
- var $=require('jquery');
- exports.show=function()
- {
- $(document.body).append('<div>seaJS的second模块被正常加载。</div>');
- }
- });
这是一个模块的书写方法，全局函数define，参数是一个function，其中的function有3个参数，参数名分别为require、exports、module。
项目主页运行的结果是：
懂了这些之后，准备把它配置到wordpress主题中去吧，前端的骚年们！！
来自 http://qianduanblog.com/post/js-learning-21-start-seajs.html