独自のオブジェクト関数を作成するには、vanilla js

Question

独自の関数をビルドして、定義済みのオブジェクトで純粋なjavascriptを使用して呼び出す方法はありますか？ Jqueryはこのように動作しており、どのようにして知りたいのですか。ここで私は何をしたいのかを示し、少量のサンプルは以下のとおりです。

あなたのコードで

doc = { 
 
    qS: function(selector) { 
 
    return document.querySelector(selector); 
 
    } 
 
}; 
 
    
 
var me = doc.qS('#id'); 
 
me.qS('span').innerText = 'Changed!';

<div id="id"><span>Test</span></div>

Answer 1

：

doc = { 
    qS: function(selector) { 
    return document.querySelector(selector); 
    } 
}; 

var me = doc.qS('#id'); 
me.qS('span').innerText = 'Changed!'; 

あなたがdoc.qS('#id')を呼び出した後、meが持つDOM要素を含み、 no q5メソッドが定義されています。今

function DOM(elt) { 
    return { 
    qS(selector)  { return DOM(elt.querySelector(selector)); }, 
    set innerText(text) { elt.innerText = text; }, 
    get innerText()  { return elt.innerText; } 
    }; 
} 

はあなたが行うことができます：

DOM(document).qS('#id').qS('span').innerText = "foo"; 

はあなたが代わりに実装することができますが、チェーンにしたい場合はラjQueryが呼び出す、あなたは、このようなDOM要素のラッパーとしていくつかのより多くの機械を構築する必要がありますDOMをコンストラクタとして呼び出す（new DOMを呼び出して）、そのプロトタイプにqSなどのメソッドを指定するか、DOMをES6クラスとして実装しますが、実際は実装の詳細です。

しかし、querySelectorAllのようなメソッドの呼び出しを処理するには、物のリストを返すため、これを展開して複数の要素（これはjQueryの機能）を処理する必要があります。長い間、jQueryの能力の低いバージョンや、zeptoなどの軽量バージョンのjQueryがあります。これは疑わしいメリットのためにあなた自身を維持する必要があります。

あなたが望むすべては、querySelectorの別名で、一般的に悪い習慣と考えられていますが、

Object.defineProperty(HTMLElement, 'qS', { 
    value(selector) { return this.querySelector(selector); } 
}); 

を行うことができます。しかし、今、あなたは維持し、説明するために別のものを持って、そしてそれはおそらくトラブル価値はない場合。

多くの人が連鎖スタイルを好んでおり、jQueryによって人気が高まったと言えるのは間違いありません。しかし、他の人々はそれを嫌う。私はあなたがそれは少しの流行だったと言うことができ、今やいくらかファッションから外れていくと思う。あなたにもちょうどそれはあなたがやってみたかったのすべてだ場合、あなただけで起動するquerySelector('#id span')を書くことができます。もちろん、

var id = document.querySelector('#id'); 
var span = id.querySelector('span'); 
span.textContent = 'Changed!'; 

を書くかもしれません。

なぜ DOMエレメントを選択してスタイルを追加するなど、DOMエレメントを選択する必要があると感じるのでしょうか？多くのjQueryプログラムは、さまざまな奇妙な方法でDOMをトラバースし、要素を追加したり削除したり変更したりする複雑なコードです。 jQueryを使用している人々の多くが、CSSを賢明に使用して達成することができます。 JSコードが少なくてDOMを歩き回り操作する必要がなくなるので、jQueryを有名にしたような連鎖のような構文的な砂糖の必要性は減ります。

何らかのテンプレート言語を提供する現代のフレームワークを選択した場合、JSで行う必要のある直接的なDOM操作の量をほぼゼロに減らすことができます。