與main.js的RequireJS共享數組

Question

編輯：我想出了解決我的問題的方法。 有兩個問題，首先，在我的init函數中設置lotInfo是創建未定義的引用。 其次，在我的lot-plan.js文件中，我將其包裝在“ require”中，但需要將其定義為模塊，因此將require（）切換為define（）可使var可以訪問。

1. 按照下面的建議，在lot-plan.js中返回所需的var。

2. 更改

   require（['raphael']，function（Raphael）{

至

define([
'raphael'
], function(Raphael){

並在此處刪除對lotInfo的引用

post_type_archive_plans:{
        init: function(lotInfo){
    // Need the suites var created in lot-plan
        }
    }

原始帖子

我正在使用requirejs構建一個站點，並且希望與main.js文件共享一個外部js文件。 我已經分離了這段代碼，因為它是一個Raphael svg，並且只是我不需要的main.js中的一堆總代碼。 我想要的是在main.js中創建此文件創建的數組。

僅供參考，這是使用保羅·愛爾蘭的圖案

修改后的http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/僅在body類上觸發（嚴格執行WordPress body_class）

需要配置

require.config({

paths: {
    jquery: [
        '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
        '../bower_components/jquery/jquery.min'
    ],
    underscore: [
        '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
        '../bower_components/underscore/underscore-min'
    ],
    fastclick: [
        '//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.10/fastclick.min',
        '../bower_components/fastclick/lib/fastclick'
    ],
    spinjs: [
        '//cdnjs.cloudflare.com/ajax/libs/spin.js/1.3.2/spin.min',
        '../bower_components/spinjs/spin'
    ],
    waitforimages: [
        '../js/lib/jquery.waitforimages.min'
    ],
    backgroundCheck: [
        '../bower_components/backgroundCheck/background-check.min'
    ],
    raphael: [
        '//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min',
        '../bower_components/raphael/raphael-min'
    ],
    swipe: [
        '//cdnjs.cloudflare.com/ajax/libs/swipe/2.0/swipe.min',
        '../bower_components/swipe/swipe'
    ],
    lotInfo: "lot-plan",
    app: 'app'
},
shim: {
    underscore: {
        deps: ['jquery'],
        exports: '_'
    },
    waitforimages: {
        deps: ['jquery']
    },
    app: {
        deps: ['jquery', 'underscore', 'fastclick', 'spinjs', 'waitforimages', 'backgroundCheck', 'raphael', 'swipe', 'lotInfo']
    }
}
});

require([
'jquery',
'fastclick',
'underscore',
'spinjs',
'waitforimages',
'backgroundCheck',
'raphael',
'swipe',
'lotInfo',
'app'
]);

因此，我正在加載的所有這些文件只是庫，但是我正在加載的最后一個文件“ lotInfo”是raphael svg文件。 請記住，一切正常，並在正確的頁面上加載。 這是lot-plan.js文件的包裝器，因此您可以了解它的制作方法。

require([
'raphael'
], function(Raphael){ if( $('#lot-plan').length ){


// Init
var rsr = Raphael('lot-plan', '452.978', '440.978');

blah blah blah a bunch of code....

var suites = [suite_a4east, suite_a5east, suite_a8east, suite_a9east, suite_a10east, suite_a4west, suite_a9west, suite_a10west, suite_b1east, suite_b2east, suite_b1west, suite_b2west, suite_b3west, suite_b6west, suite_c7, suite_d8, suite_e3, suite_e6, suite_f7, suite_d5];


}// if lot-plan exists
});// require

而且您會在底部看到套件var，這就是我要在我的app.js文件中訪問的var。 這就是我每頁加載代碼的方式。

require([
'jquery',
'underscore',
'fastclick',
'spinjs',
'waitforimages',
'backgroundCheck',
'raphael',
'lotInfo',
'swipe'
], function($, _, FastClick, Spinner, waitforimages, BackgroundCheck, Raphael, lotInfo, swipe){
'use strict';


// Modified http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
// Only fires on body class (working off strictly WordPress body_class)

var appname = {

    // All pages
    common: {
        init: function() {
                        //Would execute on all pages
                    }
            }
            post_type_archive_plans:{
        init: function(lotInfo){
    // Need the suites var created in lot-plan
        }
    }

因此，在post_type_archive_plans中，我需要抓住該套件var。 如果有人對我有任何提示，那就太好了！ 如果您需要更多信息，請告訴我。

謝謝！

Answer 1

假設#lot-plan沒有動態加載，您就快到了。 只需將suites數組作為lotInfo模塊的一部分返回lotInfo 。

在lot-plan.js中：

var suites = ...

return { suites: suites }

在app.js中：

init: function(lotInfo){
    var suites = lotInfo.suites
}