使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理

2019-08-15 09:59:36 浏览数 (1)

一、加载underscore、backbone

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。,require.js是否能够加载非规范的模块呢?回答是可以的。这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。shim属性,专门用来配置不兼容的模块。

代码语言:javascript复制
require.config({
    shim: {
        'underscore':{
            exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

二、加载自定义模块

代码语言:javascript复制
/* main.js */
define(["myCustomMod"], function(myCustomMod) {
    console.log(myCustomMod.max(1, 2, 3));
})
代码语言:javascript复制
/* myCustomMod.js */
var  myCustomMod = {};      // 很重要,和shim中exports值必须一致
myCustomMod.add = function(num1, num2) {
    return num1   num2;
};
myCustomMod.max = function() {
    return Math.max.apply(Math, [].slice.call(arguments));
}

注意require.config配置shim中exports的值,一定要与相关文件中暴露出全局变量名称一致。如果暴露出多个全局变量,那么exports可以指定其中任何一个,作为模块的返回结果。建议只使用一个全局变量,已减少冲突的可能性。

代码语言:javascript复制
/* require.config.js */
require.config({
    waitSeconds: 0,
    baseUrl: '/',
    paths: {
        myCustomMod: "myCustomMod"
    },
    shim: {
        "myCustomMod": {
            deps: [],
            exports: "myCustomMod"
        }
    }
})
代码语言:javascript复制
/* text.html */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Require Shim</title>
    <script data-main="main" src="require.js"></script>
    <script src="require.config.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <p>控制台中会打出结果</p>
</body>
</html>

注意,在本地运行需要一个静态服务器(下述为简单的Node静态服务器)

代码语言:javascript复制
/* node-static-server.js */
var http = require("http");
var express = require("express");
var serveStatic = require('serve-static');

var app = new express();

app.use(serveStatic(__dirname   '/'));
app.get("/", function(req, res) {
    res.sendFile(__dirname   "/test.html");
})
app.listen(1337, "localhost");

0 人点赞