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

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

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

このチュートリアルでは、このようなライブラリをゼロから構築しようとします（もちろん、これは単純化されたバージョンです）。 JQueryと同様に、DOMオペレーション用のライブラリを作成します。はい、それは楽しいですが、興奮する前に、いくつかのポイントを明確にさせてください：

• これは完全に機能的なライブラリではありません。しっかりした一連の方法を書くつもりですが、これは完全なjQueryではありません。ライブラリを構築するときに遭遇する問題の種類を十分に理解するのに十分なことをします。
• ここでは、すべてのブラウザにわたって完全な互換性を追求していません。今日書いたコードは、Chrome、Firefox、およびSafariで実行されるはずですが、IEなどの古いブラウザでは動作しない場合があります。
• ライブラリのあらゆる目的をカバーするわけではありません。たとえば、 prependメソッドは、ライブラリインスタンスを渡す場合にのみ有効です。

---

1. ライブラリのフレームワークを作成します

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

ドームをエクスポートする{
    コンストラクター（セレクター）{

    }
}

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

パラメーター、コールバック関数を取得するmap関数から始めましょう。配列内のアイテムDomeループし、コールバック機能によって返されるコンテンツを収集します。

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

概念の簡単な議論

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

まもなく、複数のDOMノード（ $("li").text() ）をラップするDomeオブジェクトを構築すると、すべての要素テキストを連結したすべての要素を含む文字列が取得されます。これは便利ですか？そうは思いませんが、より良い返品値が何であるかわかりません。

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

エンコーディングに戻ります

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

 mapone（コールバック）{
    const m = this.map（callback）;
    m.length> 1を返しますか？
};

4. テキストとHTMLを使用します

次に、 textメソッドを追加して、設定または取得しているかどうかを確認しましょう。これは、要素を繰り返してテキストを設定していることに注意してください。取得している場合、要素のmapOneメソッドを返します。複数の要素に取り組んでいる場合、これは配列を返します。

htmlメソッドは、 innerHTMLを使用することを除いて、 textメソッドとほぼ同じです。

 html（html）{
    if（typeof html！== "undefined"）{
        this.foreach（function（el）{
            el.innerhtml = html;
        }）;
        これを返します。
    } それ以外 {
        this.mapone（function（el）を返します{
            return el.innerhtml;
        }）;
    }
}

私が言ったように：ほとんど同じです。

---

5. 操作クラス

次に、クラスを追加および削除できるようにしたいので、 addClassとremoveClassメソッドを書きましょう。

addClassメソッドは、各要素のclassList.addメソッドを使用します。文字列を渡すときにそのクラスのみが追加され、配列を渡すときに配列を繰り返し、そこに含まれるすべてのクラスを追加します。

 addclass（classes）{
    return this.foreach（function（el）{
        if（typeofクラス！== "string"）{
            for（const elclass of classes）{
                el.classlist.add（elclass）;
            }
        } それ以外 {
            el.classlist.add（classes）;
        }
    }）;
}

とてもシンプルですよね？

さて、クラスを削除するのはどうですか？このためには、ほぼ同じことを行いますclassList.removeメソッドを使用してください。

6. プロパティを使用します

次に、 attr関数を追加しましょう。これは、 htmlメソッドとほぼ同じであるため簡単です。これらの方法と同様に、同時にプロパティを取得および設定することができます。設定するプロパティ名と値を1つ、取得するプロパティ名は1つだけです。

 attr（attr、val）{
    if（typeof val！== "未定"）{
        return this.foreach（function（el）{
            el.setattribute（attr、val）;
        }）;
    } それ以外 {
        this.mapone（function（el）を返します{
            return el.getattribute（attr）;
        }）;
    }
}

valが定義されている場合、 setAttributeメソッドを使用します。それ以外の場合は、 getAttributeメソッドを使用します。

7. 要素を作成します

新しい要素を作成できるはずであり、優れたライブラリはそれを行うことができます。もちろん、これはDomeクラスの方法として意味がありません。

エクスポート関数Create（tagname、attrs）{

}

ご覧のとおり、要素の名前と属性オブジェクトの2つのパラメーターを受け入れます。ほとんどのプロパティはattrメソッドを介して適用され、テキストコンテンツはtextメソッドを介してDomeオブジェクトに適用されます。これらすべての実際のアクションは次のとおりです。

エクスポート関数Create（tagname、attrs）{
    let el = new Dome（[document.createelment（tagname）]）;
    if（attrs）{
        for（key in attrs）{
            if（attrs.hasownproperty（key））{
                el.attr（key、attrs [key]）;
            }
        }
    }
    Elを返します。
}

ご覧のとおり、要素を作成し、新しいDomeオブジェクトに直接送信します。

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

8. 添付要素と接続された要素

次に、 appendのメソッドをprependします。これらの機能は、主に複数のユースケースがあるため、少し注意が必要です。これが私たちができることを紹介します：

 dome1.append（dome2）;
dome1.prendy（dome2）;

添付またはプレフィックスを添付する場合があります。

• 1つ以上の既存の要素の新しい要素
• 1つ以上の既存の要素に対する複数の新しい要素
• 1つ以上の既存の要素に対する既存の要素
• 1つ以上の既存の要素に対する複数の既存の要素

「新しい」を使用して、既存の要素がまだDOMにない要素を表しています。今すぐ説明しましょう：

 append（els）{

}

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

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

9. 要素を削除します

完全性については、 removeメソッドを追加しましょう。 removeChildメソッドを使用する必要があるため、これは非常に簡単です。物事を容易にするために、 forEachメソッドを使用してループを逆転させます。各要素のDomeオブジェクトremoveChild 、アプリを適切に使用したり、DOMに接したりすることができます。悪くないよね？

10. 使用イベント

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

onメソッドをチェックしてください。説明してください。

 on（evt、fn）{
    return this.foreach（function（el）{
        El.AddeventListener（EVT、FN、FALSE）;
    }）;
}

これは非常に簡単です。要素を繰り返し、 addEventListenerメソッドを使用するだけです。 off関数（イベントハンドラーを外す）はほぼ同じです。

 off（evt、fn）{
    return this.foreach（function（el）{
        El.RemoveEventListener（EVT、FN、FALSE）;
    }）;
}

---

11. 使用ライブラリ

Domeを使用するには、スクリプトに入れてインポ​​ートするだけです。

 "./dome.js"から{dome、create}をimport

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

新しいドーム（ "li"）
...

インポートするスクリプトがESモジュールであることを確認してください。

それでおしまい！

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

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

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

• jqueryソースコード（ポールアイリッシュ）から学んだ11のこと
• JQueryの舞台裏（James Padolsey）
• React16：APIの互換性の深いフロントエンドUIライブラリの書き換え

この投稿は、ジェイコブジャクソンの貢献により更新されました。ジェイコブは、ウェブ開発者、ハイテクライター、フリーランサー、オープンソースの寄稿者です。

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