すべてにご挨拶。
jBoneは、最新のブラウザでDOMを操作するためのマイクロライブラリ（gzip圧縮された2kb）です。 Backboneが正常に動作するために必要な基本メソッドのjQueryインターフェイスを部分的に実装しますが、独立して使用できます。
問題
jBoneは、モバイルアプリケーションの開発という特定の問題を解決するために生まれました。 主な要件は、UIの応答性とアプリケーションの読み込み速度でした。 すぐに、私たちが持っていたすべてのコードのほぼ半分がjQueryによって占められており、それを使用して非常に単純なタスクが解決されたことが明らかになりました。
jQueryを放棄することが決定されました。 直感的なインターフェースとブラウザ間の互換性のため、私は本当に気に入っています。 インターフェースを残したいのですが、ブラウザ間の完全な互換性は必要ありませんでした。そのような機能を実装するために必要なコードははるかに少ないことがわかりました。 さらに、jQueryメソッドの代わりに最新のブラウザー機能を使用して、パフォーマンスを大幅に向上させることができます。
ソリューションを検索する
分析の結果、この問題を解決するための既製のツールがすでに存在することがわかりましたが、それらにはすべて欠点があります。 初めに、jQueryよりもかなり小さいとはいえ、 Zeptoを30 kbほど小さく見ることにしました。さらに、jQueryでパフォーマンスが数回低下するという重大なパフォーマンスの問題があります。 次のステップでは、 Enderを使用して「my jQuery」を構築しようとしましたが、結果のファイルサイズは私の期待に適合しませんでした。 3番目の試みは、DOMを操作するための追加ライブラリなしでBackboneを取得したいという要望でした。 最初にBackbone.Nativeを見つけました。 アイデアは悪くはありませんが、便利なエイリアスを拒否するのは不合理なようです。コードの量ははるかに速く増加し、コードを書くプロセスはそれほど便利ではありません。 このプルリクエストはより興味深いように見えます。アイデアはjQueryを必要とする人のためにオプションにすることです。残りはBackbone.Nativeのようにネイティブメソッドを使用する機会がありますが、利便性と開発の速度の問題は残ります。
歯を食いしばって、自転車を書くことにしました。 私はある日を満たすために目標を設定しました。 プロトタイプはjQueryとの最小限の互換性を確保し、Backboneのすべてのユニットテストに合格するはずでした。原則としてこれ以上の時間を費やしたくありませんでした。これは、最終的にjQueryを開始した場所に到達することを意味します
解決策
現在、jBoneは約10kbの非圧縮コードであり、テストで完全にカバーされ、BackboneのjQuery置換を提供しています。
実装とjQueryとの違いについて少し話しましょう。
セレクターエンジン
これは単純な
querySelector
であり、長所と短所がありますが 、最初はシズルではなく、完全な互換性を期待していません。 しかし、それはjQueryと比較して非常に高速です。
イベント
主な違いは、ネイティブjavascriptイベントで作業する必要があることです。これは良いことです。 実際、jQueryイベントではほぼ完全に書き直されています。 たとえば、
addEventListener
メソッドを使用して要素にリスナーを追加する場合、ノードがドキュメント内にない場合、イベントは「ポップアップ」しません。jQueryはこの「問題」を解決します。完全にネイティブなイベントに切り替えることはできません。 JQueryには独自のイベントオブジェクトがあり、これには標準とは異なるプロパティセットがあります。 これらはすべて些細なことですが、心に留めておく必要があります。
CSS
jBoneでは、cssメソッドはcamelCaseスタイルのプロパティを受け入れます。
borderColor
、
border-color
代わりに
borderColor
書き込み
borderColor
。
属性、アニメーション
必要なものはすべてJavaScriptにあるため、jBoneで属性を操作することはほとんどありません。
element.[setAttribute, hasAttribute, getAttribute, ...]
属性の操作
element.[setAttribute, hasAttribute, getAttribute, ...]
クラスの操作
element.classList.add[remove, toggle, contains, ...]
element.dataset
データ属性の使用
同じことがアニメーションにも当てはまります。非常に多くのタスクでJS側でアニメーションを放棄し、完全にCSSの手に渡して、アプリケーションロジックをプレゼンテーションから分離できる時が来たと思います。
AJAX、遅延
ライブラリのこの部分はまったくカバーされておらず、選択権は残っています。 AJAXの実装は非常に多く 、Promises / A +標準の実装、たとえばwhen 、 Q 、または単にdeferredがあります。 後者は最小の重みを持ち、$変数にパッチを適用し、jQueryで実装されたDeferredオブジェクトのすべての機能をカバーするため、私に思いつきました。
まとめ
その結果、ほとんどの場合、使い慣れたjQueryインターフェイスを残したまま、DOM操作の非常に小さくて軽快な抽象化を得ました。
Githubソースコード。
ドキュメント
API