構建一個具有requirejs依賴關係的遠程jQuery UI小部件

我創建了一個依賴於其他一些自定義JavaScript模塊的jQuery UI小部件。我在widget的「_create」方法中使用requirejs來獲取這些模塊。如果我有最終用戶定義我的「數據主」屬性，這實際上效果很好。但是，在我的消費者單獨使用requirejs並定義他們自己的「數據主」屬性的情況下，這不起作用。構建一個具有requirejs依賴關係的遠程jQuery UI小部件

由於我使用requirejs通過我的小部件從一個完全不同的服務器注入腳本，我遇到了requirejs處理這個問題的一般方法的一些問題。

首先，我不能使用package.json文件，除非我假設我的所有使用者都有一個package.json，它包含與我具有完全相同的資源。最重要的是，我有DEV，TEST和PROD服務器URL來處理。
第二我不能使用require.config來設置我的baseUrl在他們的服務器上加載期間，因爲它可能會破壞他們正在使用的所有需求。

我正在工作的當前實現需要消費者添加一個腳本引用來請求我的數據主位置（外部服務器）。然後將腳本引用添加到我的小部件（外部服務器）。這是有效的，因爲我公司沒有人甚至聽說過requirejs :)。第二，我開始向他們展示如何將他們的所有代碼捆綁到可重用JavaScript模塊中，我的解決方案已被破壞。

我想提出一個解決方案，而最終用戶可以簡單地引用我的單個JavaScript小部件，然後加載它需要的所有功能。

有關如何做到這一點的任何建議？我曾考慮過使用靜態數據主體來攻擊我自己的require需求，然後假設他們可以有多個requirejs庫。我想要這麼做...但我真的不能想到更好的方法。

來源

2012-01-10 farina

這是我會怎麼做？

夫婦的注意事項：

我使用jQuery UI部件工廠模式（不過這不完全是一個小部件）
小部件代碼存在一個遠程服務器上，消費者只引用它，不要下載
我使用requirejs加載插件的依賴
我想最大的易於使用的消費devel的歌劇院

，因爲它的要求，使消費者有小部件的情況下馬上我的jQuery UI控件所加載的ASAP（$（選擇）.mywidget）我已經決定要解決_create裏面我的問題方法。

該代碼基本上安裝requirejs，如果它不存在，然後使用它來安裝上述小部件需要使用的需求數組。這使我可以假設最終用戶可以通過URL引用我的「小部件」腳本，加上同名的「data-requiremodule」屬性，並獲得遠程依賴關係的完整列表。

_create: function() { 
    var widget = this; 
    widget._establish(widget, function() { 
    widget._install(widget); 
    }); 
}, 

_getBaseURL: function (scriptId, callback) { 
    var str = $('script[data-requiremodule="' + scriptId + '"]').attr('src'); 
    if (callback) callback(str.substring(str.search(/scripts/i), 0)); 
},  

_require: function (requirementAry, baseUrl, callback) { 
    require.config({ baseUrl: baseUrl }); 
    require(requirementAry, function() { 
    if (callback) callback(); 
    }); 
}, 

_establish: function (widget, callback) { 
    if (typeof require === 'undefined') { 
    widget._getBaseURL(widget._configurations.widgetName, function (baseUrl) { 
     var requireUrl = baseUrl + 'scripts/require.min.js'; 
     baseUrl = baseUrl + 'scripts/'; 
     $.getScript(requireUrl, function (data, textStatus) { 
     widget._require(widget._configurations.requiredLibs, baseUrl, function() { 
      callback(textStatus); 
     }); 
     }); 
    }); 
    } 
},

我沒有在這裏顯示我的「_configurations」對象......但你明白了。我希望這能幫助除我以外的其他人:)。

來源

2012-01-11 23:43:29 farina

構建一個具有requirejs依賴關係的遠程jQuery UI小部件

回答

相關問題