扩展本机JavaScript对象

我正在使用为一个项目创建一个微库（有点像JQuery）。Salt.JS的优点是我可以使用类似JQuery的语法，例如

$（“#我的元素_id”）

我在做一些本机扩展时遇到了一些挑战。我有以下代码：

window.Element.prototype.on = function(eventType, callback) {
    //code here
};

window.NodeList.prototype.on = function(eventType, callback) {
    //code here
};

window.HTMLCollection.prototype.on = function(eventType, callback) {
    //code here
};

这允许我将事件附加到元素、节点列表和HTMLCollections，如下所示：

$('#my-element-id').on('click', callback);
$('.all-my-divs').on('click', callback);

但是，现在我想在

窗口

上附加一个

on

事件，例如启用调整大小回调等功能。我希望能够做到以下几点：

var resized = function(){
    console.log('ALWAYS BE RESIZING!');
};
var el_win = $('window');    //I've updated Salt.JS to return window object 
el_win.on('resize', resized);

我可以对现有代码进行什么本机扩展以启用此功能

我可以对现有代码进行什么本机扩展以启用此功能

您可以将addEventListener别名为on

虽然很多人不喜欢扩展DOM，所以你也可以考虑编写一个可以安全扩展的DOM节点的包装器。 下面是一个示例，说明如何为通用节点实现这样的包装器

function wrap(node) {
    var o = {node: node}, i,
        map = [
            {alias: 'on', native: 'addEventListener'},
            {alias: 'off', native: 'removeEventListener'}
        ];
    if (node && node.constructor && node.constructor.prototype)
        for (i = 0; i < map.length; ++i)
            if (map[i].native in node.constructor.prototype)
                o[map[i].alias] = node.constructor.prototype[map[i].native].bind(node);
    return o;
}

// now, e.g.
wrap(window).on('click', console.dir.bind(console));

函数换行（节点）{
var o={node:node}，i，
地图=[
{别名：'on'，本机：'addEventListener'}，
{别名：“关闭”，本机：“removeEventListener”}
];
if（node&&node.constructor&&node.constructor.prototype）
对于（i=0；i

谢谢您的帮助。我理解扩展DOM有它的问题。我愿意接受任何不会扼杀过去或未来代码的方法。然而，我不是这类结构性问题的专家。

function wrap(node) {
    var o = {node: node}, i,
        map = [
            {alias: 'on', native: 'addEventListener'},
            {alias: 'off', native: 'removeEventListener'}
        ];
    if (node && node.constructor && node.constructor.prototype)
        for (i = 0; i < map.length; ++i)
            if (map[i].native in node.constructor.prototype)
                o[map[i].alias] = node.constructor.prototype[map[i].native].bind(node);
    return o;
}

// now, e.g.
wrap(window).on('click', console.dir.bind(console));