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. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>requirejs入门（一）</title>
  5.         <meta charset="utf-8">
  6.         <script data-main="main" src="require.js"></script>
  7.     </head>
  8.     <body>
  9.     </body>
  10. </html>

使用requirejs很简单，只需要在head中通过script标签引入它（实际上除了require.js，其它文件模块都不再使用script标签引入）。

细心的同学会发现script标签上了多了一个自定义属性：data-main="main"，等号右边的main指的main.js。当然可以使用任意的名称。这个main指主模块或入口模块，好比c或java的主函数main。

main.js如下

  1. require.config({
  2.     paths: {
  3.         jquery: 'jquery-1.7.2'
  4.     }
  5. });
  6.  
  7. require(['jquery'], function($) {
  8.     alert($().jquery);
  9. });

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参数了。

这里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 基础（一）的更多相关文章

  1. RequireJS基础（三）

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

  2. RequireJS基础（二）

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

  3. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  4. requirejs基础教程

    一.初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用. ...

  5. RequireJS基础知识

    RequireJS解决代码依赖问题,异步加载js,避免页面失去相应 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代 ...

  6. requireJS基础使用

    index.html <body class="requireBODY" id="body"><div id="vuebox&quo ...

  7. 前端JS框架系列之requireJS基础学习

    1 背景 伴随着项目功能的不断扩充,客户体验的不断完善,实现交互逻辑的JS代码变得越来越多.起初,为了管理JS代码,我们把JS从页面中解放出来独立成文件,接着又把相似的交互代码提取到公共的JS页面中. ...

  8. requirejs——基础

    一.requirejs存在的意义: 我们引用外部JS文件通常是这样引用的: <script src="1.js"></script> <script ...

  9. requireJS入门基础

    参考  require.js详解 1.引用requireJS的html文件 <!DOCTYPE html> <head> <title>requireJS</ ...

随机推荐

  1. linux下关于svn提交的时候强制写注释

    在svn版本库的hooks文件夹下面,复制模版pre-commit.tmpl cp pre-commit.tmpl pre-commit chmod 777 pre-commit 1 2 1 2 na ...

  2. 为了体验 ILS 在Win2012R2 Hyper-V上安装Windows 2000 AdvSer

    Win2012 R2 Hyper-V 的集成服务包已不支持Windows 2000 先安装SP4.IE6.更新汇总包,再来安装这个. 安装完成后,会有几个未知设备,直接禁用就可以了. 开启Window ...

  3. OAF_开发系列26_实现OAF中Java类型并发程式开发oracle.apps.fnd.cp.request（案例）

    20150730 Created By BaoXinjian

  4. MySQL5.7安装与配置（YUM）

    安装环境:CentOS7 64位,MySQL5.7 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo/yum/  # ...

  5. 在Web中使用Windows控件

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+] 将Net控件转化为ActiveX控件 1GUID 2实现IObjectSafety接口 3程序集设定 制作安装程序 Web集 ...

  6. Unity3D 事件

    unity3d事件函数整理,事件,回调函数,消息处理 Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Star ...

  7. 【HOW】如何限制Reporting Services报表导出功能中格式选项

    Reporting Services报表导出功能中缺省会提供多种导出格式选项,但很多情况下不需要全部的格式选项,因此需要对这些选项进行限制.下面我们以SQL Server 2008 R2为例来说明对这 ...

  8. 一次性插入多条sql语句的几种方法

    第一种:通过 insert select语句向表中添加数据 从现有表里面把数据插入到另外一张新表去前提必须先有test_2表的存在,并且test_2表中的列的数据类型必须和test表里面列的数据类型一 ...

  9. js输出到控制台

    console.log(object[, object, ...])在控制台输出一条消息.如果有多个参数,输出时会用空格隔开这些参数. 第一个参数可以是一个包含格式化占位符输出的字符串,例如: con ...

  10. VS中附加进程的方式调试IIS页面，以及设置断点无效问题解决

    以前调试网站的时候都习惯是直接在解决方案中右键调试——启动新实例,后来发现这样的缺点有: 1.启动比较慢: 2.一些浏览器的request参数无法带入: 3.不特殊指定启动url的话,VS会将页面加载 ...