转载

seaJs学习笔记2 – seaJs组建库的使用

我觉得学习新东西并不是会使用它就够了的，会使用仅仅代表你看懂了，理解了，二不代表你深入了，彻悟了它的精髓。

所以不断的学习将是源源不断。

最近在学习seaJs和AngualrJs的指令和服务，感觉angularjs实在太强大了，好吧，步入主题，今天在深入了解seaJs的时候发现了一款神器，不过这款神奇貌似没有更新和维护了，但我测试了一下，还是可以用的。

这款神奇就是 SeaJS 组件库，Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里，一切皆是模块，所有模块协同构建成模块系统。

神器DOC地址： http://panxuepeng.github.io/seajslib/

下面我们来简单的演示一下如何吧

首先你要下载本神器： https://github.com/panxuepeng/seajslib/archive/gh-pages.zip

因为它是基于seaJs，而seaJs是需要nodeJs环境的，并且本神器下载之后是需要用npm进行安装下载相关依赖的库，所以grunt你也是得下载的。

配置好环境后，执行2步，（比如你解压到seajslib文件夹下）：

1、在命令行窗口进入 seajslib/lib 目录，执行 npm install shelljs。  2、在命令行窗口进入 seajslib/lib 目录，执行 node install.js ，安装 Grunt 相关模块。

然后，你就可以拷贝seajslib下的lib文件夹到你的项目中去使用了。其实你会发现其中包含了很多组建模块，我们也可以把需要的拷贝出来，而不是拷贝整个。

来个小李子，直接上代码，清晰直接：

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="../lib/seajs/src/seajs.js"></script> <script src="../lib/jquery/jquery-1.9.1.min.js"></script> </head> <body> <a href="data.txt" data-toggle="dialog">预览(ajax)</a><br/> <a href="data.txt" data-toggle="artdialog">请点击我（选择器方式拿到内容）</a> <script> seajs.use(['dialog/src/dialog', 'artdialog/src/artdialog']); </script> </body> </html>

在上面的例子中，a标签里面的都是指向的一个文件，这就是用ajax异步请求获取data.txt的文件内容，这里我用到了2个组建，dialog，artdialog，在data-toggle中指定需要使用的组建名即可。

效果图：

seaJs学习笔记2 – seaJs组建库的使用