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

原文地址：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中指定需要使用的组建名即可。

效果图：

234242

这款神奇还包含了很多组建，来看看列表：

22222

就介绍到这里吧，总会有需要用到它的时候。以此mark！

posted @ 2015-07-28 11:08  Jmingzi  阅读(1176)  评论(0)  编辑  收藏  举报