Question

在YUI3中，可以覆盖例如Node模块？例如，我想做这样的事情：

Y.Node.prototype.get = function () {
    // Do some stuff then call the original function
};

当Y是全局可用的YUI实例（我认为是由库创建）时，它完美地工作（正如您所期望的那样）。当您使用模块加载器并传递回调时，它不起作用：

YUI().use("*", function (DifferentY) {
    DifferentY.Node.prototype.get === Y.Node.prototype.get; // false
});

我花了一段时间来浏览YUI源代码，但到目前为止还没有弄清楚上一个示例中DifferentY的创建位置和方式（并且通过扩展，创建了DifferentY.Node）

我之前从未使用过YUI，所以我可能会以完全错误的方式解决这个问题。

Answer 1

好的如果我看一下那个例子似乎对Y有误解。在YUI3中，每个东西都是沙箱，所以你可以同时运行多个YUI实例。 Y不是全局变量，它将在您调用YUI（）。use方法时实例化，并且仅存在于该函数内。这就是为什么在SO的代码中只存在DifferentY，而不是Y.

YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Y exists in here... 
});

因此，如果你想从外部增强YUI，我会建立在YUI的模块策略上并使用YUI.add（）创建一个YUI模块

if (YUI) {
  YUI.add('node-enhancement', function (Y) {
    Y.Node.prototype.get = function () {
      // Do some stuff then call the original function
    };
  }, '0.0.1', {
    requires: [Node]
  });
}

并让开发人员将增强功能加载为模块（无论如何使用yui3进行加载）

YUI().use('node-enhancement'), function(Y) {
    // just use YUI as allways
});

有关全局YUI对象如何工作的说明，此概述可能有所帮助：http://yuilibrary.com/yui/docs/yui/

Answer 2

以下是猴子修补技术的使用示例。

在此处查看控制台输出：http://jsfiddle.net/jslayer/XmF6L/

YUI.add('node-custom-module', function(Y){
    console.warn('Override Y.Node');

    Y.Node.YOUR_NODE = 'custom Node';
});

YUI.add('widget-custom-module', function(Y){
    console.warn('Override Y.Widget');

    Y.Widget.YOUR_WIDGET = 'custom Widget';
});

YUI.GlobalConfig = {
    modules : {
        'node-custom-module' : {
            condition : {
                name    : 'node-custom-module',
                trigger : 'node',
                test    : function(){
                    return true;
                }
            }
        },
        'widget-custom-module' : {
            condition : {
                name    : 'widget-custom-module',
                trigger : 'widget',
                test    : function(){
                    return true;
                }
            }
        }
    }
};

YUI().use('node', function(Y) {
    console.group('Node');
    console.log('Y.Node.YOUR_NODE : ', Y.Node.YOUR_NODE);
    console.groupEnd('Node');
});

YUI().use('widget', function(Y) {
    console.group('Widget');
    console.log('Y.Node.YOUR_NODE : ', Y.Node.YOUR_NODE);
    console.log('Y.Widget.YOUR_WIDGET : ', Y.Widget.YOUR_WIDGET);
    console.groupEnd('Widget');
});

当然没有必要使用YUI.GlobalConfig。

此外，在groups配置

中使用YUI（http://yuilibrary.com/yui/docs/yui/loader.html）也很舒服

groups : {
  patches : {
    modules : {
      /* Define your mp modules here */
    }
  }
}

你能修补YUI模块的方法吗？

2 个答案: