Помощью RequireJS, почему и когда использовать прокладку конфиг



прочитал requirejs документ отсюда api



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();
}
}
}
});


но я не получаю сим часть.
почему я должен использовать прокладку и как я должен настроить, я могу получить некоторые дополнительные разъяснения



пожалуйста, может ли кто-нибудь объяснить на примере, почему и когда мы должны использовать прокладку.
спасибо.

440   3  

3 ответов:

основное использование shim - это библиотеки, которые не поддерживают AMD, но вам нужно управлять их зависимостями. Например, в Примере Backbone и Underscore выше: вы знаете, что Backbone требует подчеркивания, поэтому предположим, что вы написали свой код следующим образом:

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

    // do something with Backbone

}

RequireJS будет запускать асинхронные запросы как для подчеркивания, так и для магистрали, но вы не знаю, кто из них вернется первым так что вполне возможно, что позвоночник будет пытаться что-то сделать с Подчеркиваем, прежде чем он заряжен.

Примечание: этот пример подчеркивания / магистрали был написан до того, как обе эти библиотеки поддержали AMD. Но этот принцип остается верным для любых библиотек сегодня, которые не поддерживают AMD.

крючок "init" позволяет вам делать другие расширенные вещи, например, если библиотека обычно экспортирует две разные вещи в глобальное пространство имен, но вы хотите переопределить их в одном пространстве имен. Или, может быть, вы хотите сделать некоторые обезьяны исправления на методы в библиотеке, которую вы загружаете.

больше справочная информация:

согласно документации RequireJS API, прокладка позволяет вам

настройка зависимостей, экспорта и пользовательской инициализации для старые, традиционные сценарии" глобалов браузера", которые не используют 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 export сообщает RequireJS, какой член на глобальном объекте (the окно, предполагая, что вы находитесь в браузере, конечно) - это фактическое значение модуля. Допустим, moduleA добавляет себя к window как "modA" (так же, как jQuery и подчеркивание делает как $ и _ соответственно), то мы делаем наш экспорт значение "modA".

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

это даст RequireJS локальную ссылку на этот модуль. Глобальная мода также будет существовать на странице.

-пользовательская инициализация для старых" глобальных " сценариев браузера

это, наверное, самая важная особенность конфигурации shim, которая позволяет нам добавлять "браузерные глобальные", "не-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();
            }
        }
    }
});

Comments

    Ничего не найдено.