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 <!doctype html> 2 <html> 3 <head><title>requirejs 入门(一)</title> 4 <meta charset="utf-8"> 5 <script data-main="main" src="require.js"></script> 6 </head> 7 <body></body> 8 </html>
使用 requirejs 很简单,只需要在 head 中通过 script 标签引入它(实际上除了 require.js, 其它文件模块都不再使用 script 标签引入)。
细心的同学会发现 script 标签上了多了一个自定义属性:data-main="main",等号右边的 main 指的 main.js。
当然可以使用任意的名称。 这个 main 指主模块或入口模块, 好比 c 或 java 的主函数 main。
main.js 如下
1 require.config({ 2 path:{jquery:'jquery-1.7.2'} 3 }); 4 5 require(['jquery'],function($){ 6 alert($().jquery); 7 });
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 代码如下
if ( typeof define === "function" && define.amd && define.amd.jQuery ) { define( "jquery", [], function () { return jQuery; } ); }
我们知道 jQuery 最终向外暴露的是全局的 jQuery 和 $。如下
// 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 函数