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函数

感兴趣的请继续阅读 下一篇 。

r1.zip

RequireJS入门（一） 转的更多相关文章

  1. RequireJS入门（三）转

    这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...

  2. RequireJS入门（二） 转

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  3. RequireJS入门与进阶

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  4. RequireJS入门（三）

    这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...

  5. RequireJS入门（二）

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  6. RequireJS入门（一）

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  7. RequireJS 入门指南

    RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...

  8. requireJS入门

    RequireJS 下载地址 : http://requirejs.org 什么是 requireJS ?以下是官方网站上的解释: RequireJS is a JavaScript file and ...

  9. RequireJS入门之二——第二例（写自己的模块）

    第一节遗留的问题: 中文乱码:  修改require.js文件,搜索charset 关键字,修改为GBK:(貌似乱不乱码和jquery版本有问题,切换GBK和utf-8!!) 路      径:  仅 ...

随机推荐

  1. JMeter使用指南--转

    JMeter使用指南 本文重点介绍JMeter工具在测试中地位以及其中一些难以理解或者手册中含糊不清的感念,读者可以通过本文了解这些概念,然后再根据自己的需要查阅JMeter中各个组件的具体用法来完成 ...

  2. Axis2学习的第一天

    按照下面,分别建2个工程,一个client(客户端),一个server(服务端) 先实现服务端: 1.编写services.xml文件,该文件是放在aar文件里的\META-INF目录下的: < ...

  3. HtmlAgilityPack 之 HtmlNode类

    HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 public static Dictionary<st ...

  4. http://www.cnblogs.com/TankXiao/p/4018219.html

    http://www.cnblogs.com/TankXiao/p/4018219.html

  5. hdu 3537 Daizhenyang's Coin （翻硬币游戏）

    #include<stdio.h> #include<algorithm> #include<string.h> using namespace std; ]; i ...

  6. SPRING IN ACTION 第4版笔记-第十一章Persisting data with object-relational mapping-004JPA例子的代码

    一.结构 二.Repository层 1. package spittr.db; import java.util.List; import spittr.domain.Spitter; /** * ...

  7. QT中可以用QProgressBar或着QProgressDialog来实现进度条

    QProgressBar的使用 首先在designer中拖一个按钮和进度条部件,按下面初始化 //补充:下面两句写在MainWindow的构造函数里进行初始化 ui->progressBar-& ...

  8. JavaWeb笔记——下载文件

    核心内容是两个头一个流       > 头:Content-Type:你传递给客户端的文件是什么MIME类型,例如:image/pjpeg       * 通过文件名称调用ServletCont ...

  9. POJ3176——Cow Bowling(动态规划)

    Cow Bowling DescriptionThe cows don't use actual bowling balls when they go bowling. They each take ...

  10. 使用RPM管理软件包

    一.概念简介 RPM 全名是『 RedHat Package Manager 』简称则为 RPM,是以一种数据库记录的方式来将你所需要的套件安装到你的 Linux 主机的一套管理程序. 二.实验环境 ...