奇妙に思えるかもしれませんが、Habréでは、この強力なフレームワークについての言及は、2012年4月の1件のコメントでのみ見つかりました。
エントリー
私にとって、このトピックは特に関連があります。最近、膨大な数のjsフレームワークがHabréで言及されているためです。
さまざまなプロジェクトの作成者は、それらの一部をWeb上で見つけ、一部は自分で書いていますが、その
理由は実際にはわかりません 。 誰か
が自転車を書い
ているだけです。
私の意見では、冗長なコードの欠如、最大限のミニマリズムのために努力する必要があります。トートロジーは申し訳ありません。
サイト全体でIDでHTML要素を選択するだけでよい場合-jQueryを含めるのはばかげています。
Node.jsプロジェクト
でjsファイルのパックを収集して圧縮する必要がある場合-多数の設定、パラメーター、追加、およびメソッドを使用して重いフレームワークを記述または接続すると、ファイルを接着してCrawford jsminを介して実行する最も単純なスクリプトがはるかに高速で信頼性が高くなりますより簡単に。
コードが多いほど、エラーが多くなります。 サードパーティのコードが多いほど、プロジェクトの維持が難しくなります。 結局のところ、他の誰かのコードを取得するとき、あなたはそのサポートに対して責任を負います。 「このバグは私のものではなく、そのライブラリからのものです」と言うことはできません。
バニラJS
そのため、世界で最も強力で人気のあるJSフレームワークのレビューを開始します。
Vanilla JSチームは、フレームワークコードのすべてのバイトをサポートし、小さくて直感的なものにするために日々努力しています。
Vanilla JSを使用しているのは誰ですか？ あなたが尋ねた良いこと、ここにいくつかの例があります：Facebook、Google、YouTube、Yahoo、Wikipedia、Windows Live、Twitter、Amazon、LinkedIn、MSN、eBay、Microsoft、Tumblr、Apple、Pinterest、PayPal、Reddit、Netflix、Stack Overflow。
実際、Vanilla JSは、jQuery、Prototype JS、MooTools、YUI、およびGoogle Web Toolkitを組み合わせたよりも多くのサイトですでに使用されています！
このサイトでは、必要な機能を選択してフレームワークをダウンロードできます。
- DOM（操作/セレクター）
- オブジェクトのプロトタイプシステム
- アヤックス
- アニメーション
- イベントシステム
- 正規表現
- オブジェクトとして機能
- 短絡
- 数学的方法のライブラリ
- 配列を操作するためのライブラリ
- 文字列を操作するためのライブラリ
さらに、ビルドをカスタマイズできます。
- ソースを圧縮
- UTF8エンコード
- 「CRLF」改行を使用する（Windows）
最大構成では、フレームワークの重量が次のようになります。
非圧縮：0バイト、圧縮：25バイト。
展開
Vanilla JSチームは、史上最軽量のフレームワークであることを誇りにしています。 プロダクションシェアリング戦略を使用すると、ユーザーのブラウザは、サイトの読み込みを開始する前であってもVanilla JSをメモリに読み込みます。
Vanilla JSを有効にするには、HTMLに次の行を追加するだけです：
<script src="path/to/vanilla.js"></script>
プロジェクトを実稼働に移す準備ができたら、接続をより高速な方法に変更します。
そうです、コードはまったくありません。 Vanilla JSは非常に人気があり、ブラウザは10年前からフレームワークを自動的にダウンロードします。
他のフレームワークとの速度の比較
IDでDOM要素を検索する
| 枠組み | コード | Op。\ Sec |
|---|
| バニラJS | document.getElementById('test-table'); | 12,137,211 |
| 道場 | dojo.byId('test-table'); | 5,443,343 |
| プロトタイプjs | $('test-table') | 2,940,734 |
| Ext js | delete Ext.elCache['test-table']; Ext.get('test-table'); | 997,562 |
| jQuery | $jq('#test-table'); | 350,557 |
| ゆい | YAHOO.util.Dom.get('test-table'); | 326,534 |
| MooTools | document.id('test-table'); | 78,802 |
タグ名でアイテムを検索する
| 枠組み | コード | Op。\ Sec |
|---|
| バニラJS | document.getElementsByTagName("span"); | 8,280,893 |
| プロトタイプjs | Prototype.Selector.select('span', document); | 62,872 |
| ゆい | YAHOO.util.Dom.getElementsBy(function(){return true;},'span'); | 48,545 |
| Ext js | Ext.query('span'); | 46.915 |
| jQuery | $jq('span'); | 19,449 |
| 道場 | dojo.query('span'); | 10,335 |
| MooTools | Slick.search(document, 'span', new Elements); | 5,457 |
コード例
アイテムをそっと隠す
| バニラJS | var s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})(); |
| jQuery | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut();</script> |
AJAX呼び出し
| バニラJS | var r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow"); |
| jQuery | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script> |
おわりに
Vanilla JSの詳細については、次のリンクをご覧ください。
- Vanilla JS ドキュメント
- バニラJSに関するさまざまな本
- または、Vanilla JSのプラグインをいくつか試してください
Vanilla JSでプロジェクトを紹介する場合、次の便利なボタンを使用できます。
-
投稿の著者から
まあ、おそらくこれは本当に最高のJSフレームワークです！
まず第一に、それを検討することをお勧めします。緊急に何か他のものを引き受ける必要がある場合に限ります。