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

奋飛

发布于 2019-08-15 09:59:36

1.7K0

发布于 2019-08-15 09:59:36

一、加载underscore、backbone

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

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

二、加载自定义模块

/* main.js */
define(["myCustomMod"], function(myCustomMod) {
    console.log(myCustomMod.max(1, 2, 3));
})

/* 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可以指定其中任何一个，作为模块的返回结果。建议只使用一个全局变量，已减少冲突的可能性。

/* require.config.js */
require.config({
    waitSeconds: 0,
    baseUrl: '/',
    paths: {
        myCustomMod: "myCustomMod"
    },
    shim: {
        "myCustomMod": {
            deps: [],
            exports: "myCustomMod"
        }
    }
})

/* 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静态服务器）

/* 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");

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016年02月23日，如有侵权请联系 cloudcommunity@tencent.com 删除

underscore

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

underscore

javascript

登录后参与评论

0 条评论

热度