要求为什么以及何时使用shim配置

我从这里读取了requirejs文档

requirejs.config({
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                //Using a function allows you to call noConflict for
                //libraries that support it, and do other cleanup.
                //However, plugins for those libraries may still want
                //a global. "this" for the function will be the global
                //object. The dependencies will be passed in as
                //function arguments. If this function returns a value,
                //then that value is used as the module export value
                //instead of the object found via the 'exports' string.
                return this.Foo.noConflict();
            }
        }
    }
});

但我没有得到它的底座部分。 为什么我应该使用垫片,我应该如何配置,我可以得到一些更多的澄清

请用任何一个例子来解释为什么和什么时候应该使用垫片。 谢谢。


shim主要用于不支持AMD的库,但需要管理它们的依赖关系。 例如,在上面的Backbone和Underscore示例中:您知道Backbone需要Underscore,因此假设您编写了如下代码:

require(['underscore', 'backbone']
, function( Underscore, Backbone ) {

    // do something with Backbone

}

RequireJS将启动对Underscore和Backbone的异步请求,但是你不知道哪一个会首先回来,所以有可能Backbone会在加载前尝试使用Underscore做些事情。

注意:这个下划线/主干的例子是在这两个库支持AMD之前编写的。 但是这个原则适用于不支持AMD的任何图书馆。

“init”钩子可以让你执行其他高级的事情,例如,如果一个库通常将两个不同的东西导出到全局命名空间中,但是你想在一个命名空间下重新定义它们。 或者,也许你想对正在加载的库中的某个方法做一些修补程序。

更多背景:

  • 升级到RequireJS 2.0给出了订单插件如何在过去试图解决这个问题的一些历史。
  • 请参阅Aaron Hardy撰写的本文的“加载非模块”部分,以获得更好的描述。

  • 按照RequireJS API文档,shim可以让你

    为不使用define()声明依赖关系并设置模块值的较旧的传统“浏览器全局”脚本配置依赖项,导出和自定义初始化。

    - 配置依赖关系

    假设你有2个javascript模块(moduleA和moduleB),其中一个(moduleA)依赖于另一个(moduleB)。 这两个都是您自己的模块所必需的,因此您可以在require()或define()中指定依赖项。

    require(['moduleA','moduleB'],function(A,B ) {
        ...
    }
    

    但由于要求自己遵循AMD,你不知道哪一个会被提早取出。 这是垫片来救援的地方。

    require.config({
        shim:{
           moduleA:{
             deps:['moduleB']
            } 
        }
    
    })
    

    这将确保moduleB总是在moduleA加载之前获取。

    - 配置导出

    Shim导出告诉RequireJS全局对象上的成员(窗口,当然假设你在浏览器中)是实际的模块值。 比方说,moduleA将自己添加到window中'modA'(就像jQuery和下划线分别为$和_),然后我们使出口值为'modA'。

    require.config({
        shim:{
           moduleA:{
             exports:'modA'
            } 
        }
    

    它将给RequireJS一个本地引用这个模块。 全局的modA仍然会存在于页面上。

    定制初始化旧的“浏览器全局”脚本

    这可能是shim config最重要的特性,它允许我们在自己的模块中添加'浏览器全局','非AMD'脚本(不遵循模块化模式)作为依赖关系。

    让我们说moduleB是普通的旧JavaScript,只有两个函数funcA()和funcB()。

    function funcA(){
        console.log("this is function A")
    }
    function funcB(){
        console.log("this is function B")
    }
    

    虽然这两个函数在窗口范围内都可用,但RequireJS建议我们通过它们的全局标识符/句柄来使用它们,以避免混淆。 因此将垫片配置为

    shim: {
        moduleB: {
            deps: ["jquery"],
            exports: "funcB",
            init: function () {
                return {
                    funcA: funcA,
                    funcB: funcB
                };
            }
        }
    }
    

    init函数的返回值用作模块导出值,而不是通过'exports'字符串找到的对象。 这将允许我们在我们自己的模块中使用funcB

    require(["moduleA","moduleB"], function(A, B){
        B.funcB()
    })
    

    希望这有助于。


    您必须在requirejs.config中添加路径来声明,例如:

    requirejs.config({
        paths: {
              'underscore' : '.../example/XX.js' /// your file java script
              'jquery' : '.../example/jquery.js' /// your file java script
        }
        shim: {
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            'underscore': {
                exports: '_'
            },
            'foo': {
                deps: ['bar'],
                exports: 'Foo',
                init: function (bar) {
                    return this.Foo.noConflict();
                }
            }
        }
    });
    
    链接地址: http://www.djcxy.com/p/92519.html

    上一篇: Requirejs why and when to use shim config

    下一篇: Dojo AMD loader executing define callbacks with empty / missing dependencies