使用requirejs依赖项构建远程jQuery UI小部件

时间:2012-01-10 21:52:24

标签: javascript jquery ajax jquery-ui requirejs

我创建了一个jQuery UI小部件,它依赖于其他一些自定义JavaScript模块。我在窗口小部件的“_create”方法中使用requirejs获取这些模块。如果我的最终消费者定义了我的“data-main”属性,这实际上很有效。但是,在我的消费者自己使用requirejs并定义他们自己的“data-main”属性的情况下,这不起作用。

由于我使用requirejs从一个完全不同的服务器通过我的小部件注入脚本,我遇到了一些问题,其中requirejs正常处理这个问题。

  • 首先,我不能使用package.json文件,除非我假设我的所有消费者都有一个package.json,其中包含与我相同的资源。最重要的是,我有DEV,TEST和PROD服务器URL来处理。
  • 其次,我无法使用require.config在服务器加载期间设置我的baseUrl,因为它可能会破坏他们正在使用的所有内容。

我正在使用的当前实现要求使用者向我的数据主位置(外部服务器)添加require的脚本引用。然后将脚本引用添加到我的小部件(外部服务器)。这是有效的,因为我公司的其他人甚至都没有听说过requirejs :)。第二部分我开始向他们展示如何将所有代码捆绑到可重用的JavaScript模块中,我的解决方案已经破解。

我想提出一个解决方案,而最终消费者可以简单地引用我的单个JavaScript小部件,然后加载它需要运行的所有内容。

有关如何执行此操作的任何建议?我想过用静态数据主攻击我自己的require版本,然后假设它们可以有多个requirejs库。我不愿意这样做......但我真的想不出更好的方法。

1 个答案:

答案 0 :(得分:1)

这是我要做的......

几个笔记:

  • 我正在使用jQuery UI小部件工厂模式(但这不是一个小部件)
  • 小部件代码位于远程服务器上,消费者只引用它,不要下载它
  • 我正在使用requirejs加载小部件依赖项
  • 我希望消费者最易于使用

因为我需要尽快加载我的jQuery UI小部件,以便消费者立即拥有小部件的上下文($(选择器).mywidget)我决定在_create方法中解决我的问题。

此代码基本上安装了requirejs(如果它不存在),然后使用它来安装上述小部件需要使用的需求数组。这允许我假设最终用户可以通过URL引用我的“小部件”脚本,使用相同名称的“ data-requiremodule ”属性,并获得远程依赖项的完整列表。 / p>

 _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”对象......但是你明白了。我希望这可以帮助除了我之外的其他人:)。