2

そこで、楽しみのために、jQueryの構文/機能を模倣できるかどうかを確認することにしました。これはかなり簡単であることがわかりました（クロスブラウザ/レガシーの互換性について心配しない場合）。私がこれまでに行ったことをここで見ることができます：http：//jsfiddle.net/FPAaM/3/

Nodeさて、他のサードパーティのjavascriptライブラリの足を踏まないために、とのプロトタイプに機能を追加するときに注意すべき点は何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 に答える