-2

要素のデータ属性を取得するJavaScript関数が必要です。ネイティブ JS の要素で使用したい。

私はプロトタイプのゲッターを探し回りましたが、それがどのように機能するかについて頭を悩ませることはできません (javascript はまだ私のお茶ではありません)。

私が欲しいもの：

this.myCustomFunction('fooBar'); // the `this` element
document.getElementById('ExampleId').myCustomFunction('fooBar'); // another way of selecting

私が見つけたすべての例は、私が自分で作成したオブジェクトに関するものです。上記の例のようなものが欲しいです。

ベンチマークを提供するには、ここでベンチマークを見つけることができます

誰かが私に小さな例と、コードがどのように流れるかについての説明を与えることができれば、それは素晴らしいことです (または、将来の参考のために、これがどのように呼び出されるかについて)。

最初のコメントは、このようにしないように私に勧めています。別の解決策がある場合に備えて、私の目標をもう少し説明します。これは私が今いるところです：

Object.prototype.cms_getDataAttr = function(dataname){
    // IE upto 10 doenst work with dataset, so use the slower 'getAttribute'
    if( typeof this.dataset == 'undefined'){
         return this.getAttribute('data-'+dataname);
    }
    else{
        // I want to use this one instead, benchmarked this is ALOT faster
        return this.dataset.bigsrc;
    }
}
4

3 に答える 3

1

一般に、ネイティブ Javascript オブジェクトのプロトタイプを拡張することは避けるべきです。この推奨事項の最大の理由の 1 つは、異なるプログラマーがネイティブ プロトタイプ拡張機能に同じ関数名を使用すると、競合が発生する可能性があるためです。つまり、最初のプログラマーの関数は、まったく異なることを行うことになります。ある時点でコードの一部を再利用可能なライブラリに変換して、他のプログラマーやプロジェクトと共有したい場合はどうすればよいでしょうか? それらの他のプログラマーの 1 人が、自分のgetDataAttr関数とは異なることを行う独自の関数を持っていた場合、自分のコードまたは他のプログラマーのコードを書き直す必要があります。したがって、シムを作成して古いブラウザーに標準となった機能のサポートを追加することを除いて、誰もがネイティブ オブジェクトを拡張することは避けたほうがよいでしょう。

@Bergi が指摘したように、この場合、dataset新しいブラウザで利用可能なネイティブ プロパティを実際に使用できます。これなどの shim を使用すると、使用しているブラウザーに関係なく、任意の要素のプロパティに簡単にアクセスできるようにdatasetなりました。つまり、カスタム関数は不要になりました。この場合、これをお勧めします。これらの古いブラウザーが時代遅れになると、shim も必要なくなり、明らかにネイティブ メソッドのパフォーマンスが向上し、他のプログラマーが作業しやすくなるためです。

一般に、ネイティブ プロトタイプを拡張する代わりの 1 つの良い方法は、jQuery と同様のことを行うことです。つまり、ネイティブ オブジェクトをラップし、追加のメソッドでそれを「拡張」する関数を作成しますが、オブジェクト自体は実際には変更しません。私が言ったようにdataset、この特定のケースでは shim がより良い解決策だと思いますが、これは一般的に知っておくと便利なアプローチです。次に例を示します。

function ExtendedDomElement(element) {
    this.element = element;
}

ExtendedDomElement.prototype = {
    constructor: ExtendedDomElement,
    getDataAttr: function(dataname) {
        var element = this.element;

        // IE upto 10 doenst work with dataset, so use the slower 'getAttribute'
        if( typeof element.dataset == 'undefined'){
             return element.getAttribute('data-'+dataname);
        }
        else {
            return element.dataset[dataname];
        }
    }
}

function extendDomElement(element) {
    return new ExtendedDomElement(element);
}

function byId(id) {
    return extendDomElement(document.getElementById(id));
}


var fooElementExtended = byId('foo');
var bar = fooElementExtended.getDataAttr('bar');
于 2013-10-15T12:51:41.443 に答える
1

これがあなたが望むものかどうかはわかりませんが、 setAttribute と getAttribute を使用して、要素の html 属性 (データ属性を含む) を読み書きできます。

element.getAttribute("data-foo"); // ==> Returns the value of the data-attribute
element.setAttribute("data-foo", "newValue"); // ==> Changes the value of the data-attribute to "newValue"
于 2013-10-15T12:10:08.210 に答える