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

效果图:

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

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

seaJs学习笔记2 – seaJs组建库的使用的更多相关文章

  1. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  2. python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑

    python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑 许多人在安装Python第三方库的时候, 经常会为一个问题困扰:到底应该下载什么格式的文件?当我们点开下载页时, 一般 ...

  3. openresty 学习笔记六:使用session库

    openresty 学习笔记六:使用session库 lua-resty-session 是一个面向 OpenResty 的安全和灵活的 session 库,它实现了 Secure Cookie Pr ...

  4. seajs教程之seajs学习笔记 seajs.use用法

    seajs.use 用来在页面中加载模块.通过 use 方法,可以在页面中加载任意模块. 实例地址:http://www.android100.org/html/201405/23/12807.htm ...

  5. Linux学习笔记——如何使用共享库交叉编译

    0.前言     在较为复杂的项目中会利用到交叉编译得到的共享库(*.so文件).在这样的情况下便会产生下面疑问,比如:     [1]交叉编译时的共享库是否须要放置于目标板中,假设须要放置在哪个文件 ...

  6. seajs学习笔记

    seajs配置 seajs.config({ //别名配置 alias:{ 'es5-safe':'gallery/es5-safe/0.9.3/es5-safe', 'jquery':'jquery ...

  7. SeaJS学习笔记(一) ./ 和 ../ 区别

    最近要去实习,公司里使用sea.js进行模块化开发 具体下载安装就不多说了,请参见SeaJS官网 <!DOCTYPE html> <html> <head> < ...

  8. seajs 学习笔记

    seajs的作者是玉伯,具体好处优点等详见官方网址 介绍 1 模块定义define define(function(require,exports,module){ //require 引入需要的模块 ...

  9. CMD规范学习笔记——基于SEAJS实现

    CMD(Common Module Definition):该规范明确了模块的书写格式和基本交互规则.通常一个模块就是一个JS文件. 通过define关键字来定义模块,最基本的格式为: define( ...

随机推荐

  1. Unity3d学习 相机的跟随

    最近在写关于相机跟随的逻辑,其实最早接触相机跟随是在Unity官网的一个叫Roll-a-ball tutorial上,其中简单的涉及了关于相机如何跟随物体的移动而移动,如下代码: using Unit ...

  2. C语言 · Anagrams问题

    问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...

  3. Apache 与 php的环境搭建

    Apache和PHP的版本分别为: httpd-2.4.9-win64-VC11.zip php-5.6.9-Win32-VC11-x64.zip 下载地址: php-5.6.9-Win32-VC11 ...

  4. DB1:数据库的创建和文件的修改

    在SQL Server中,使用Create Database创建数据库,使用Alter Database命令,能够修改数据库的数据文件和日志文件. 一,创建数据库 1,在创建数据库时,最佳实践是: 创 ...

  5. 基于ASP.NET/C#开发国外支付平台(Paypal)学习心得。

        最近一直在研究Paypal的支付平台,因为本人之前没有接触过接口这一块,新来一家公司比较不清楚流程就要求开发两个支付平台一个是支付宝(这边就不再这篇文章里面赘述了),但还是花了2-3天的时间通 ...

  6. web api接口同步和异步的问题

    一般来说,如果一个api 接口带上Task和 async 一般就算得上是异步api接口了. 如果我想使用异步api接口,一般的动机是我在我的方法里面可能使用Task.Run 进行异步的去处理一个耗时的 ...

  7. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  8. Android中通过ActionBar为标题栏添加搜索以及分享视窗

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.Action ...

  9. OpenGL ES 3.0: 图元重启(Primitive restart)

    [TOC] 背景概述 在OpenGL绘制图形时,可能需要绘制多个并不相连的图形.这样的情况下这几个图形没法被当做一个图形来处理.也就需要多次调用 DrawArrays 或 DrawElements. ...

  10. linux-linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...