最初のJavaScriptライブラリを構築します

Dojoがどのように機能するのか疑問に思ったことはありませんか？ jqueryの巧妙な操作に興味を持ったことはありますか？このチュートリアルでは、舞台裏でこっそりとjqueryの超順調なバージョンを構築しようとします。

ほぼ毎日JavaScriptライブラリを使用しています。アルゴリズムの実装、API抽象化の提供、またはDOMの操作など、ライブラリはほとんどの最新のWebサイトで多くの機能を実行します。

このチュートリアルでは、このようなライブラリをゼロから構築しようとします（もちろん、これは単純化されたバージョンです）。 JQueryと同様に、DOMオペレーション用のライブラリを作成します。はい、それは楽しいですが、興奮する前に、いくつかのポイントを明確にしましょう。しっかりした一連の方法を書くつもりですが、これは完全なjQueryではありません。ライブラリを構築するときに遭遇する問題の種類を十分に理解するのに十分なことをします。

ここでは、すべてのブラウザにわたって完全な互換性を追求していません。今日書いたコードは、Chrome、Firefox、およびSafariで実行されるはずですが、IEなどの古いブラウザでは動作しない場合があります。

ライブラリのあらゆる使用をカバーするわけではありません。たとえば、 prepend メソッドは、ライブラリインスタンスを渡す場合にのみ有効です。

---

1. ライブラリを作成するためのフレームワーク

モジュール自体から始めます。 Webでコードをインポートおよびエクスポートする最新の方法であるECMAScriptモジュール（ESM）を使用します。

 export class dome {constructor（selector）{}} 

ご覧のとおり、 dome と呼ばれるクラスをエクスポートします。文字列の場合、CSSセレクターであると仮定しますが、単一のdomノードまたは document.queryselectorall の結果を受け入れることもできます。要素検索を簡素化することもできます。 length 属性がある場合、ノードのリストがあることがわかります。これらの要素を this.elements に保存します、 dome オブジェクトは複数のDOM要素をラップでき、ほぼすべての方法で各要素をループする必要があるため、これらのユーティリティは非常に便利です。

パラメーターとコールバック関数を受け入れるマップ>関数から始めましょう。アレイ内のアイテムをループし、コールバック関数によって返されるコンテンツを収集しますインスタンスは、現在の要素とインデックス番号の2つのパラメーターを受け取ります。

foreach メソッドも必要です。デフォルトでは、 mapone に呼び出しを転送できます。この関数が何をしているのかは簡単にわかりますが、本当の問題は、なぜそれが必要なのかということです。これには、「ライブラリコンセプト」と呼ばれるものが少し必要です。

概念の簡単な説明

ライブラリの構築がコードを書くだけであれば、それほど難しくないでしょう。しかし、このプロジェクトに取り組んでいるとき、私が見つけたより困難な部分は、特定の方法がどのように機能するかを決定することでした。

すぐに、複数のDOMノード（ $（ "li"）。text（））をラップする dome オブジェクトを構築します。これは便利ですか？そうは思いませんが、より良い返品値が何であるかわかりません。

このプロジェクトでは、アレイに1つのアイテムのみがある場合を除き、複数の要素のテキストを配列として返します。単一の要素のテキストを最も頻繁に入手できると思うので、この状況に合わせて最適化しました。ただし、複数の要素のテキストを取得している場合は、使用できるものを返します。

エンコード

を返します。したがって、 mapone はマップ> を呼び出し、次に配列または配列に単一のアイテムを返します。これがどのように機能するかわからない場合は、ご期待ください：表示されます！

 const m = map（callback）;これは、要素を繰り返してテキストを設定していることに注意してください。取得している場合、要素の<code> mapone </code>メソッドを返します。複数の要素で作業している場合は、それ以外の場合は、単なる文字列になります。  <p> <code> html </code>メソッドは、<code> innerhtml </code>を使用することを除いて、<code> text </code>メソッドとほぼ同じです。 </p> <pre class="brush:php;toolbar:false"> html（html）{typeof html！== foreach（el）{el.innerhtml = html; 。  <hr> <ol start="5"> <li> <h2>操作クラス</h2> </li> </ol> <p>次に、クラスを追加および削除できる必要があるため、<code> code> code </code>および<code> removeclass </code>メソッドを記述しましょう。 </p> <p> <code> addclass </code>メソッドは、各要素の<code> classlist.add </code>メソッドを使用します。文字列を渡すときにそのクラスのみが追加され、配列を渡すときに配列を繰り返し、そこに含まれるすべてのクラスを追加します。 </p> <pre class="brush:php;toolbar:false"> addclass（classes）{return this.foreach（el）{if（typeof classes！== "string"）{for（const elclass of classs）{el.classlist.add（elclass）;}}  <p>さて、クラスを削除するのはどうですか？このためには、ほぼ同じことを行います。<code> classlist.remove </code>メソッドを使用してください。 </p> <ol start="6"> <li> <h2>属性を使用した</h2> </li> </ol> <p>次に、<code> attr </code>関数を追加しましょう。これは、<code> html </code>メソッドとほぼ同じであるため簡単です。これらの方法と同様に、同時にプロパティを取得および設定することができます。設定するプロパティ名と値を1つ、取得するプロパティ名は1つだけです。 </p> <pre class="brush:php;toolbar:false"> attr（val）{if（typeof val！== "undefined"）{force（el）{el.settribute（attr、val）;}} code> setAttribute メソッド。それ以外の場合は、<code> getattribute </code>メソッドを使用します。  <ol start="7"> <li> <h2>要素の作成</h2> </li> </ol> <p>新しい要素を作成できるはずです。もちろん、これは<code> dome </code>クラスの方法として無意味です。 </p> <pre class="brush:php;toolbar:false"> export関数Create（tagname、attrs）{} 

ご覧のとおり、要素の名前と属性オブジェクトの2つのパラメーターを受け入れます。ほとんどのプロパティは attr メソッドを介して適用され、テキストコンテンツは dome オブジェクトにテキストメソッドを介して適用されます。これが実際に行われます参照してください。要素を作成し、新しい dome オブジェクトに直接送信します。

しかし今、私たちは新しい要素を作成しています、私たちはそれらをDOMに挿入したいと思うでしょう？

8. add and Preemption要素

次に、 append> append および prepend メソッドを書き込みます。これらの機能は、主に複数のユースケースがあるため、少し注意が必要です。できることは次のとおりです。

 dome1.append（dome2）;既存の要素  <p>「new」を使用して、既存の要素がまだdomにあります。今すぐ段階的に説明しましょう：</p> <pre class="brush:php;toolbar:false"> append（els）{} 

els は dome オブジェクトであると予想しています。完全なDOMライブラリは、ノードまたはノードのリストとしてそれを受け入れますが、それを行いません。それぞれの要素を繰り返す必要があり、その中に、取り付けたい各要素を通過します。

アプリがある場合、パラメーターとして渡された外部 dome オブジェクトからの i は、元の（除外された）ノードのみが含まれます。したがって、単一の要素のみを単一の要素に追加する場合、関係するすべてのノードは、それぞれの prepend メソッドの一部になります。

9. 要素を削除

完全性については、 remode メソッドを追加しましょう。 removechild メソッドを使用するだけで、これは非常に簡単です。物事を容易にするために、 foreach ループを使用してトラバーサルを逆にします。 removechild メソッドを使用して、ドームオブジェクトを使用します。悪くないよね？

10. イベントを使用して

最後になりましたが、いくつかのイベントハンドラー関数を書きます。

メソッドを参照してください。要素を反復し、 addeventlistener メソッドを使用する必要があります。 off function（イベントハンドラーを外す）

 off（evt、fn）{return this.foreach（el）{el.removeeventlistener（evt、fn、fals <code> dome </code>、スクリプトに入れてインポ​​ートするだけです。  <pre class="brush:php;toolbar:false"> Import {dome、create} from "./dome.js" 

そこから、次のように使用できます。

それだけです！

私たちの小さなライブラリを試してみて、少し拡張できることを願っています。先に述べたように、私はそれをgithubに置いた。お気軽にフォークしたり、プレイしたり、プルリクエストを送信したりしてください。

もう一度明確にしましょう。このチュートリアルの目的は、常に自分のライブラリを書く必要があることを提案することではありません。大規模で成熟したライブラリを可能な限り優れたものにするために、協力して献身的なチームがあります。ここでの目的は、ライブラリ内で何が起こるかについての洞察を与えることです。

お気に入りのライブラリを掘り下げることを強くお勧めします。あなたは彼らがあなたが思うほど神秘的ではないことに気付くでしょう、そしてあなたは多くを学ぶかもしれません。ここにいくつかの良い出発点があります：

• Jqueryソースコード（Paul Irish）から学んだ11のこと
• jQuery（James Padolsey）の舞台裏
• React 16：Front-End UI Libraryの深い学習API互換書き直し
ジェイコブは、ウェブ開発者、ハイテクライター、フリーランサー、オープンソースの寄稿者です。

以上が最初のJavaScriptライブラリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。