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
2
3
1、在命令行窗口进入 seajslib/lib 目录,执行 npm install shelljs。
  
2、在命令行窗口进入 seajslib/lib 目录,执行 node install.js ,安装 Grunt 相关模块。

  

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

来个小李子,直接上代码,清晰直接:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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!

——转载请注明该文章来源:http://www.cnblogs.com/jhmydear/
 
分类: js/jQuery

seaJs组建库的更多相关文章

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

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  2. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  3. 【转】前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  4. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  5. seajs模块化加载框架使用

    seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...

  6. 手把手做一个基于vue-cli的组件库(上篇)

    基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.开工. GitHub源码地址:https://github.co ...

  7. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  8. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  9. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

随机推荐

  1. lua 远程调试 【zeroBrane 使用mobdebug】(good转)

    最近基于业务需求,学习了如何使用zeroBrane这个IDE实现C/S 模式下的 lua远程调试,废话不多,上效果图: ---------------------------------------- ...

  2. Blend4精选案例图解教程(四):请给我路径指引

    原文:Blend4精选案例图解教程(四):请给我路径指引 路径在界面设计中,可以起到很好的辅助作用,我常常使用它来对元素进行规则排列和非规则排列控制. 本次教程将演示,Blend中路径的常规用法. 1 ...

  3. jvisualvm远程监控Tomcat

    网上已经有很多这方面的资料,但有些很杂乱,这里做了整理总结. 一.Java VisualVM 概述 对于使用命令行远程监控jvm 太麻烦 . 在jdk1.6 中 Oracle 提供了一个新的可视化的. ...

  4. CentOS6.2安装memcache

    一,安装libevent # cd /tmp # wget http://www.monkey.org/~provos/libevent-1.3.tar.gz # tar -zxvf libevent ...

  5. PLSQL Developer 9.如何设置查询返回所有纪录(转)

    默认PLSQL Developer查询出来的记录只能是满屏那么多行,一般也就是二三十行,比较不方便. 根据以下设置,可以将其结果都返回. 方法:Tools>Preferences>Wind ...

  6. 华为编程大赛汇总----java

           以下华为编程比赛题目都是网上整理得到的,代码都是自己调试过的,由于网上java答案较少,欢迎大家批评指正,也希望对准备华为上机的童鞋们有一点点帮助.在练习的过程中成长,加油!~~  1. ...

  7. NYOJ 300 &amp;&amp; hdu 2276 Kiki &amp; Little Kiki 2 (矩阵高速功率)

    pid=300">Kiki & Little Kiki 2 时间限制:5000 ms  |  内存限制:65535 KB 难度:4 描写叙述 There are n light ...

  8. 【转】java JTable排序和过滤

    JTable排序 在Java SE 6中除了java.awt被更新外,javax.swing同时也有了很大的改进.在C/S程序中我们会经常使 用到"表".如我们可以在查询数据库后将 ...

  9. win7开机直接进入系统系统桌面

    在开始搜索栏输入:netplwiz   选中admin用户(也就是你登录的用户名),然后在把上面的勾去掉,点应用,会提示输入用户名和密码,输二次,是一样的密码,如果没设密码,就不用输直接应用,确定就O ...

  10. 七牛对用户使用webp图片格式的使用建议

    Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...