2

所以，为了好玩，我决定看看我是否可以模仿 jQuery 的语法/功能。事实证明这相当容易（当不担心跨浏览器/旧版兼容性时）。你可以在这里看到我到目前为止所做的事情：http: //jsfiddle.net/FPAaM/3/

现在，为了不踩到其他第三方 javascript 库的脚趾，在向 和 的原型添加功能时应该注意哪些Node问题NodeList？

Node.prototype.text = function(txt){
    var chld = this.childNodes;
    while(chld[0]) this.removeChild(chld[0]);

    this.appendChild(document.createTextNode(txt));

    return this;
};
NodeList.prototype.text = function(txt){
    for (var i = 0; i < this.length; i++)
        this[i].text(txt);

    return this;
};
Node.prototype.css = function(tag, val){
    if (val != undefined)
        this.style[tag] = val;
    else
        return this.style[tag];

    return this;
};
NodeList.prototype.css = function(tag, val){
    for (var i = 0; i < this.length; i++)
        this[i].css(tag, val);

    return this;
};
Node.prototype.clk = function(cbk){
    this.addEventListener("click", cbk, false);

    return this;
};
NodeList.prototype.clk = function(cbk){
    for (var i = 0; i < this.length; i++)
        this[i].clk(cbk);

    return this;
};

var $ = function(args){
    if (typeof args == "function")
        document.addEventListener("DOMContentLoaded", args, false);

    if (typeof args == "string")
        return document.querySelectorAll(args);

    return args;
};

$(function(){
    $("div.fancy").text("Poor man's jQuery!")
        .css("color", "red")
        .clk(function(e){
            if (this.css("color") == "red")
                $(this).css("color", "green");
            else
                this.css("color", "red");
        });
});
4

1 回答 1

0

Node并且NodeList是宿主对象。你不应该扩展它们。更好的方法是使用包装器（如 jQuery）。

检查这个：扩展 DOM 有什么问题

于 2012-09-22T04:36:28.457 回答