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

最新推荐文章于 2024-08-08 00:44:12 发布

奋飛

最新推荐文章于 2024-08-08 00:44:12 发布

阅读量1w

点赞数 3

分类专栏：前端技术站文章标签： javascript require shim

本文链接：https://blog.csdn.net/ligang2585116/article/details/50725430

版权

前端技术站专栏收录该内容

58 篇文章 5 订阅

订阅专栏

一、加载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");