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

时间 2019-12-07

标签 seajs 学习笔记组建使用繁體版

原文原文链接

原文地址：seaJs学习笔记2 – seaJs组建库的使用javascript

我以为学习新东西并非会使用它就够了的，会使用仅仅表明你看懂了，理解了，二不表明你深刻了，彻悟了它的精髓。html

因此不断的学习将是源源不断。java

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

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

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

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

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

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

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

一、在命令行窗口进入 seajslib/lib 目录，执行 npm install shelljs。
 
二、在命令行窗口进入 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中指定须要使用的组建名便可。

效果图：

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

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

1. seajs 学习笔记
2. seajs学习笔记
3. seajs学习笔记一
4. SeaJs学习笔记$为null
5. 【SeaJS】【2】再识SeaJS
6. ☀【SeaJS】SeaJS Grunt构建
7. Seajs笔记
8. seajs笔记
9. seajs使用记录
10. seajs.的使用
更多相关文章...
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议