RequireJS入门(一) 转
RequireJS由James Burke创建,他也是AMD规范的创始人。
RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。
当然也不会有阻塞(blocking)的情况发生。好,以一个简单示例开始。
新建一个目录,结构如下
目录r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官网下载即可。
index.html如下
1
2
3
4
5
6
7
8
9
10
11
|
<!doctype html> <html> <head> <title>requirejs入门(一)</title> <meta charset= "utf-8" > <script data-main= "main" src= "require.js" ></script> </head> <body> </body> </html> |
使用requirejs很简单,只需要在head中通过script标签引入它(实际上除了require.js,其它文件模块都不再使用script标签引入)。
细心的同学会发现script标签上了多了一个自定义属性:data-main="main",等号右边的main指的main.js。当然可以使用任意的名称。这个main指主模块或入口模块,好比c或java的主函数main。
main.js如下
1
2
3
4
5
6
7
8
9
|
require.config({ paths: { jquery: 'jquery-1.7.2' } }); require([ 'jquery' ], function ($) { alert($().jquery); }); |
main.js中就两个函数调用require.config和require。
require.config用来配置一些参数,它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象,常用的配置有baseUrl,paths等。
这里配置了paths参数,使用模块名“jquery”,其实际文件路径jquery-1.7.2.js(后缀.js可以省略)。
我们知道jQuery从1.7后开始支持AMD规范,即如果jQuery作为一个AMD模块运行时,它的模块名是“jquery”。注意“jquery”是固定的,不能写“jQuery”或其它。
注:如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。
jQuery中的支持AMD代码如下
1
2
3
|
if ( typeof define === "function" && define.amd && define.amd.jQuery ) { define( "jquery" , [], function () { return jQuery; } ); } |
我们知道jQuery最终向外暴露的是全局的jQuery和 $。如下
1
2
|
// Expose jQuery to the global object window.jQuery = window.$ = jQuery; |
如果将jQuery应用在模块化开发时,其实可以不使用全局的,即可以不暴露出来。需要用到jQuery时使用require函数即可,
这里require函数的第一个参数是数组,数组中存放的是模块名(字符串类型),数组中的模块与回调函数的参数一一对应。这里的例子则只有一个模块“jquery”。
把目录r1放到apache或其它web服务器上,访问index.html。
网络请求如下
我们看到除了require.js外main.js和jquery-1.7.2.js也请求下来了。而它们正是通过requirejs请求的。
页面上会弹出jQuery的版本
这是一个很简单的示例,使用requirejs动态加载jquery。使用到了以下知识点
1、data-main属性
2、require.config方法
3、require函数
感兴趣的请继续阅读 下一篇 。
RequireJS入门(一) 转的更多相关文章
- RequireJS入门(三)转
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
- RequireJS入门(二) 转
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...
- RequireJS入门与进阶
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门(三)
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
- RequireJS入门(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...
- RequireJS入门(一)
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- requireJS入门
RequireJS 下载地址 : http://requirejs.org 什么是 requireJS ?以下是官方网站上的解释: RequireJS is a JavaScript file and ...
- RequireJS入门之二——第二例(写自己的模块)
第一节遗留的问题: 中文乱码: 修改require.js文件,搜索charset 关键字,修改为GBK:(貌似乱不乱码和jquery版本有问题,切换GBK和utf-8!!) 路 径: 仅 ...
随机推荐
- linq lambda 分组后排序
1.lamdba分组排序foodBusinessDistrict. GroupBy(x => new ...
- 唉,还是Windows好
作为一个计算机专业的,常常抱怨Windows慢.一个系统用一段时间慢下来就重装,但是次次重装很麻烦,每次重装之后还得装软件. 另外,Windows比Linux占资源,所以前段时间就想以Linux为主要 ...
- redis资料汇总
redis资源比较零散,引用nosqlfan上的文章,方便大家需要时翻阅.大家看完所有的,如果整理出文章的,麻烦知会一下,方便学习. 1.Redis是什么? 十五分钟介绍 Redis数据结构 Redi ...
- JavaWeb项目开发案例精粹-第6章报价管理系统-07View层
1. 2.back_index.html <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT= ...
- OpenSSL 使用 base64 编码/解码
简述 关于 OpenSSL 的介绍及安装请参见:Windows下编译OpenSSL 下面主要介绍有关 OpenSSL 使用 base64 编码/解码. 简述 编码解码 更多参考 编码/解码 #incl ...
- Rate Limiter设计
先存着,以后再写 http://iamzhongyong.iteye.com/blog/1982113 http://baike.baidu.com/view/2530454.htm https:// ...
- linux 安装scons
scons是一个Python写的自动化构建工具,需要安装python和scons后才能运行,能够跨平台.其集成功能类似于autoconf/automake ,是一个简洁可靠的工具.现在很多系统都自带 ...
- Linux系统文件的隐藏属性
linux系统的文件除了有普通rwx权限外还有一种隐藏权限,例如明明有权限删除某个文件却报错了. 或者仅能为某个文件追加内容而不能减少内容,遇到这种很‘奇怪’的文件,就要怀疑是文件被设置隐藏权限了. ...
- Oracle ->> 层级查询语句(hierarchical query)connect by
Oracle中的Connect By... Start With语句实现了递归查询或者树状查询. Connect By Prior 一方为起始(root)的ID 参考: http://www.360d ...
- jquery的extend和fn.extend的使用说明
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”.jQuery类的实例可以使用这个“成员函数”. jQuery为开发 ...