Require.JS快速入门

Require.JS 介绍

Require.JS 是一个基于 AMD 规范的 JavaScript 模块加载框架。实现 JavaScript 文件的异步加载，管理模块之间的依赖性，提升网页的加载速度。

AMD 是 Asynchronous Module Definition 的缩写，意思就是 异步模块定义。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

官网地址：

Require.JS 的诞生主要为了解决两个问题：　　

  • 1）实现 JavaScript 文件的异步加载，避免网页失去响应；
  • 2）管理模块之间的依赖性，便于代码的编写和维护。

加载 Require.JS

去官方网站下载最新版本，然后创建一个工程，目录如下：

project-directory
├── project.html
└── scripts
    ├── lib
    │   ├── a.js
    │   ├── b.js
    │   ├── backbone.js
    │   └── underscore.js
    ├── main.js
    └── require.js

编写 project.html 内容，引入 Require.JS 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

加载 scripts/require.js 这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

<script data-main="scripts/main" src="js/require.js" defer async="true" ></script>

async 属性表明这个文件需要异步加载，避免网页失去响应。IE 不支持这个属性，只支持 defer，所以把 defer 也写上。

加载 Require.JS 以后，下一步就要加载我们自己的代码了，这里我们使用 data-main 属性来指定网页程序的主模块。在上例中，就是 scripts 目录下面的 main.js，这个文件会第一个被 Require.JS 加载。由于 Require.JS 默认的文件后缀名是 js，所以可以把 main.js 简写成 main。

在浏览器中打开 project.html 文件，查看浏览器是否提示有错误。

定义模块

Require.JS 加载的模块，采用 AMD 规范。也就是说，模块必须按照 AMD 的规定来写。 具体来说，就是模块必须采用特定的 define() 函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在 define() 函数之中。

定义：

define(id, dependencies, factory);

参数：

  • id : 模块标示符[可省略]
  • dependencies : 所依赖的模块[可省略]
  • factory : 模块的实现，或者一个 JavaScript 对象。

Require.JS 定义模块的几种方式：

1、定义一个最简单的模块：

define({
        color: "black",
        size: "unisize"
});

2、传入匿名函数定义一个模块：

define(function () {
        return {
            color: "black",
            size: "unisize"
        }
 });

3、定义一个模块并依赖于 cart.js

define(["./cart"], function(cart) {
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                cart.add(this);
            }
        }
});

4、定义一个名称为 hello 且依赖于 cart.js 的模块

define("hello",["./cart"],function(cart) {
        //do something
});

5、兼容 commonJS 模块的写法(使用 require 获取依赖模块，使用 exports 导出 API)

define(function(require, exports, module) {
        var base = require('base');
        exports.show = function() {
            // todo with module base
        }
});

举例，在 lib/a.js 中，我们可以定义模块：

define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});

然后，在 main.js 中使用：

require(['lib/a'], function (a){
    alert(a.add(1,1));
});

如果这个模块还依赖其他模块，那么 define() 函数的第一个参数，必须是一个数组，指明该模块的依赖性。

例如，lib/b.js 文件如下：

define(['lib/a'], function(a){
    function fun1(){
        alert(2);
    }
    return {
        fun1: fun1,
        fun2: function(){alert(3)}
    };
});

定义的模块返回函数个数问题:

  • define 的 return 只有一个函数，require 的回调函数可以直接用别名代替该函数名。
  • define 的 return 当有多个函数，require 的回调函数必须用别名调用所有的函数。

这时候修改 main.js 内容为：

require(['lib/a','lib/b'], function(a,b) {
    alert(a.add(0,1))

    b.fun1();
    b.fun2();
});

然后，在浏览器中打开 project.html 文件，查看输出内容。

全局配置

如果你想改变 RequireJS 的默认配置来使用自己的配置，你可以使用 require.config 函数。require.config() 方法一般写在主模块(main.js)最开始。参数为一个对象，通过对象的键值对加载进行配置:

  • baseUrl：用于加载模块的根路径。如果 baseUrl 没有指定，那么就会使用 data-main 中指定的路径。
  • paths：用于映射不存在根路径下面的模块路径。
  • map : 对于给定的相同的模块名，加载不同的模块，而不是加载相同的模块
  • packages : 配置从 CommonJS 包来加载模块
  • waitSeconds：是指定最多花多长等待时间来加载一个 JavaScript 文件，用户不指定的情况下默认为 7 秒。
  • shims：配置在脚本/模块外面并没有使用 RequireJS 的函数依赖并且初始化函数。
  • deps：加载依赖关系。

其他可配置的选项还包括 locale、context、callback 等，有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。

main.js 中修改如下：

require.config({
    //By default load any module IDs from scripts/main
    baseUrl: 'scripts',
    paths: {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "scripts/jquery"],
        "a":"lib/a"
    }
});

//通过别名来引用模块
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");
    })
})

在这个例子中，通过 baseUrl 把根路径设置为了 scripts，通过 paths 的配置会使我们的模块名字更精炼，paths 还有一个重要的功能，就是可以配置多个路径，如果远程加载没有成功，可以加载本地的库。

上面例子中，先从远程加载 jquery 模块，如果加载失败，则从本地 scripts/jquery 加载；a 模块名称为 lib/a 路径的简称，加载 a 模块时，实际上是加载的 script/lib/a.js 文件。

通过 require加载的模块一般都需要符合 AMD 规范即使用 define 来申明模块，但是部分时候需要加载非 AMD 规范的 JavaScript，这时候就需要用到另一个功能：shim。比如我要是用 underscore 类库，但是他并没有实现 AMD 规范，那我们可以这样配置：

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

这样配置后，我们就可以在其他模块中引用 underscore 模块：

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

在新版本的 jquery 中，继承了 AMD 规范，所以可以直接使用 require["jquery"]，但是我们经常用到的 jquery 插件基本都不符合AMD规范。

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

也可以简写为：

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})

这样配置之后我们就可以使用加载插件后的 jquery 了：

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

Require.JS 插件

Require.JS 还提供一系列插件，实现一些特定的功能。

domready 插件，可以让回调函数在页面 DOM 结构加载完成后再运行。

require(['domready!'], function (doc){
    // called once the DOM is ready
});

tex t和 image 插件，则是允许 Require.JS 加载文本和图片文件。

define([
    'text!review.txt',
    'image!cat.jpg'
    ],
    function(review,cat){
        console.log(review);
        document.body.appendChild(cat);
    }
);

类似的插件还有 json 和 mdown，用于加载 json 文件和 markdown 文件。

插件清单：https://github.com/jrburke/requirejs/wiki/Plugins

其他问题

  • 1、循环依赖

在一些情况中，我们可能需要模块 moduleA 和 moduleA 中的函数需要依赖一些应用。这就是循环依赖。

// js/app/moduleA.js
define( [ "require", "app/app"],
    function( require, app ) {
        return {
            foo: function( title ) {
                var app = require( "app/app" );
                return app.something();
            }
        }
    }
);
  • 2、得到模块的地址

如果你需要得到模块的地址，你可以这么做……

var path = require.toUrl("./style.css");
  • 3、JSONP

我们可以这样处理 JSONP：

require( [
    "http://someapi.com/foo?callback=define"
], function (data) {
    console.log(data);
});
    1. 代码合并于压缩

请参考 优化 RequireJS 项目（合并与压缩）

时间： 2024-09-17 03:52:46

Require.JS快速入门的相关文章

Vue.js快速入门实例教程_javascript技巧

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

Vue.js快速入门教程_javascript技巧

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

Three.js快速入门教程_javascript技巧

引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

require.js 简洁入门

原文地址:http://blog.sae.sina.com.cn/archives/4382 前言 提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多复杂的概念,这里我就希望排除这些概念,从实用的角度来简单说一下require.js是干什么的,我们要怎么用它. 1.为什么要用require.js 大多数前端开发者都用过jquery,那么用jquery之前我们首先要把jquery加载进页面,然后在之后的js之中才可以使用$,这里面我们知道了两个道理

js框架require.js使用入门教程

require.js简介 RequireJS是一个工具库,主要用于客户端的模块管理.它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性.它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖,要是没法正确地去按照特定顺序加载,会出现错误,AMD规范可以处理这种问题,AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序. AMD是"Asynchronous Module Definition&qu

webpack+vue.js快速入门教程_javascript技巧

前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 npm script脚步的基本编写能力 有时间专门写一个这样的专题,如果需要可以邮件我.malun666@126.com webpack基础学习 官方文档 Webpack了解的知识点: webpack的基本配置 了解webpack常用的loader: less-loader.sass-loader

Vue.js快速入门

Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 作为前端的三大框架之一(其他两个是Angular.React),Vue得到了大多

07Vue.js快速入门-Vue路由详解

对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性非常好,可以很好的跟其他第三方的路由框架进行结合.当然官方也给出了路由的方案: vue-router; 建议还是用官方的最好,使用量也是最大,相对来说Vue框架的升级路由组件升级也会及时跟上,所以为了以后的维护和升级方便还是使用Vue自家的东西最好. 7.1. Vue-router的版本对应 注意: