在YUI中加载jQuery和插件 [英] Load jQuery and plugins in YUI

问题描述

我正在尝试将jQuery作为YUI模块加载，而不是将其添加到全局范围。

I am trying to load jQuery as a YUI module, without adding it to the global scope.

我想出的最好的，就是创建一个全局 module.exports 以便jQuery认为它是一个通用的js模式，并且不会创建一个全局的jQuery对象......

The best I came up with, was to create a global module.exports so that jQuery thinks it is in a common js pattern, and does not create a global jQuery object...

// must create global object for jQuery to detect and attach to
// otherwise it will create itself in the global scope
module = {
    exports: {}
};

YUI({
    modules: {
        'my-jquery': {
            fullpath: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js',
            requires: [
                'node']
        }
    },
    onProgress: function (e) {
        switch (e.name) {
            case 'my-jquery':
                (function () {

                    var clone;

                    YUI.add('my-jquery', function (Y) {

                        if (!clone) {
                            clone = Y.clone(module.exports, true);
                            module.exports = {};
                        }

                        Y.namespace('my').jQuery = clone;

                    }, '1.10.1', {
                        requires: [
                            'node']
                    });

                })();
                break;
        }
    }

}).use('my-jquery', function (Y) {

    console.log('before');
    var jQuery = $ = Y.my.jQuery;
    console.log('walks');

    // regular old jQuery stuff here...
    $('#main').hide();

    // no global jQuery object
    console.log(1, window.jQuery);

    // there is a local jQuery object
    console.log(2, jQuery);

})

DEMO： http://jsfiddle.net/syvGZ/2/

有没有更好的在不触及全局范围的情况下在YUI中加载jQuery的方法？

DEMO: http://jsfiddle.net/syvGZ/2/

Is there a better way to load jQuery within YUI without touching the global scope?

推荐答案

使用<$ c $进入正确的轨道c> onProgress ，但你不需要跳过克隆和伪造的所有箍 module.exports 。诀窍是使用 jQuery.noConflict（）。

You're on the right track with using onProgress, but you don't need to jump through all the hoops of cloning and faking module.exports. The trick is to use jQuery.noConflict().

jQuery.noConflict 做两件事：

• 它返回jQuery函数


• 它恢复了一个以前版本的jQuery如果它存在，或者它从全局对象中删除jQuery

以下是它如何工作的说明：

Here's an illustration of how it works:

<script src="jquery.1.8.js"></script>
<script>
var jQuery18 = jQuery;
</script>
<script src="jquery.1.9.js"></script>
<script>
// the true parameter makes this work for both the $ and jQuery global variables, not just the $
var jQuery19 = jQuery.noConflict(true);
alert('is the global jQuery is jQuery19? ' + (jQuery === jQuery19)); // false
alert('is jQuery19 the same as jQuery18? ' + (jQuery19 === jQuery19)); // false
alert('is the global jQuery the same as jQuery18? ' + (jQuery === jQuery18)); // true
</script>

另一个问题是，因为YUI需要带有连接模块的脚本， e.name 不是指模块的名称，而是指刚刚加载的脚本的URL。可以在 e.data 中的数组中找到该脚本中加载的模块的名称。这只是意味着您需要迭代 e.data 以确定是否已加载jQuery。

Another issue is that since YUI expects scripts with concatenated modules, e.name doesn't refer to the name of the module, but instead to the URL of the script that was just loaded. The names of the modules loaded in that script can be found in an array in e.data. This just means that you need to iterate over e.data to figure out if jQuery was loaded.

总和它，你的脚本应如下所示：

To sum it up, your script should look like this:

YUI({
  modules: {
    'jquery': {
      fullpath: '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'
    }
  },
  onProgress: function (e) {
    for (var _module, i = 0, length = e.data.length; i < length; i++) {
      _module = e.data[i];
      if (_module.name === 'jquery') {
        // trap jQuery here while removing it from the global object
        (function ($) {
          YUI.add('jquery', function (Y) {
            Y.jQuery = $;
          });
        }(jQuery.noConflict(true)));
      }
    }
  }
}).use('jquery', function (Y) {
  var $ = Y.jQuery;
  $('foo').attr('bar', 'baz');
});

如果包含它们的脚本假定jQuery位于全局对象中，则插件可能会成为问题（大多数都是）。所以我建议你自己主持它们并将它们包装在 YUI.add 中。

Plugins could be an issue if the scripts that contain them assume jQuery is in the global object (most do). So I suggest you host them yourself and wrap them in YUI.add.

这篇关于在YUI中加载jQuery和插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！