RequireJS

前端 2017-11-27

RequireJS 的诞生

  • 实现 js 文件的异步加载,避免页面失去响应。
  • 管理模块之间的依赖性,便于代码的编写和维护。

RequireJS 的使用

  • RequireJS 的加载

    <script src="js/require.js" defer async="true" data-main="js/main"></script>
    defer 是 IE 浏览器的异步加载声明 async="true" 是其他浏览器的异步加载声明 data-main属性的作用是,指定网页程序的主模块。
    
  • require 方法

    require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
        //  some code
    });
    

    require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

    上面的代码表示的是:加载了依赖模块,jqueryunderscorebackbone。然后匿名回调函数里头的参数,($, _, Backbone)分别代表的就是加载依赖的三个模块。

  • require.config() 方法

    require.config({
        baseUrl: "js/lib",
        paths: {
            "jquery": "https://cdn.bootcss.com/jquery/3.2.1/jquery.min",
            "underscore": "underscore.min",
            "backbone": "backbone.min"
        }
    });
    
  • define() 方法

    具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

    //  hello.js 没有依赖其他模块的时候
    define(function () {
        'use strict';
        let a = 'hhh';
        return {
            a: a
        }
    });
    //  如果这个模块还依赖其他模块,那么define()函数的第一个参数是一个数组,指明该模块的依赖性。
    define(['jquery'],function ($) {
        'use strict';
        let a = 'hhh',
            html = $.html();
        return {
            a: a,
            html: html
        }
    });
    //  main.js
    require(['hello'], function (hello){
        console.log(hello.a);   //  hhh
    });
    
  • 加载非规范的模块

    举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

    require.config({
        shim: {
            'underscore':{
                exports: '_'
            },
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            }
        }
    });
    

    require.config() 接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。
    具体来说,每个模块要定义:

    1. exports 值(输出的变量名),表明这个模块外部调用时的名称;
    2. deps 数组,表明该模块的依赖性。

参考资料

Demo


本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论