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

 

posted on 2018-01-04 10:46  Sharpest  阅读(110)  评论(0编辑  收藏  举报