時代の発展に伴い、JavaScript 陣営には優れたフレームワークが次々と登場しており、開発作業が大幅に簡素化されていますが、これらのフレームワークを使用する際には、その起源や構築方法についても考える必要があるでしょうか。既製の API を使用するだけでは満足できず、その内部実装メカニズムを深く理解している場合 (ある人によれば、API は最も早く減価していくものです)、最善の方法はそのソース コードを読むことです。読めるということ。
ここ 2 日間でjQueryのソース コードを勉強しましたが、ここでは私の表面的な知識を共有します。不適切な場合は修正してください。さて、jQuery がどのように機能するかを見てみましょう。JavaScript の基本的な知識がすでにあることを前提としています。基礎が十分ではない場合は、『JavaScript Advanced Programming』と『Understanding JavaScript』という 2 冊の本を読むことをお勧めします。この記事は、js のクラス、オブジェクト、関数、プロトタイプなどの概念を理解していない友人には適していません。
最初から始めましょう:
まず、フレームワークが Shaka (私の名前 ;) と呼ばれると仮定して、ユーザーに対するオブジェクトを構築します。
var Shaka = function(){}; ここでは、何も含まない空の関数を作成します。この関数は実際にはコンストラクターです。生成したオブジェクトがプロトタイプで定義されたメソッドを呼び出すためには、プロトタイプを使用して Shaka にいくつかのメソッドを追加する必要があります (Shaka をクラスとして考えてください)。そのため、次のように定義します。
Shaka.fn = Shaka.prototype = {};
ここでの Shaka.fn は、将来使用するための Shaka.prototype のエイリアスと同等です。これらは同じ参照を指します。
OK、sayHello メソッドを追加し、Shaka にパラメータを追加しましょう。これにより、このフレームワークの最も基本的な外観がすでに存在します。このフレームワークが生きている場合は、現在 1 年経過しています。
コードボックスを実行
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
さて、興奮しないでください。このフレームワークと jQuery の使用にはいくつかの違いがあることに気付きました。たとえば、jq では次のように記述できます。
jQuery('#myid').someMethod();
これはどのように行われるかというと、jQuery() コンストラクターは jQuery オブジェクトのインスタンスを返すので、そのメソッドを呼び出すことができるため、Shaka のコンストラクターはインスタンスを返す必要があり、次のようになります。
var Shaka = function(){ return //Shaka のインスタンスを返します };
では、Shaka のインスタンスを取得するにはどうすればよいでしょうか? まず、prototype を使用してクラスをシミュレートするときの手順を確認してみましょう。このとき、実際に新しいオブジェクト someObje を作成し、その新しいオブジェクトをこの Call として使用します。クラスのコンストラクターである MyClass 関数を呼び出し、次に someObj が MyClass.prototype で定義されたメソッドを取得します。これらのメソッドの this ポインターは、現在のオブジェクト インスタンスを参照します。