Clever Geek Handbook

Vanilla JS-非常に強力なjavascriptフレームワーク

奇妙に思えるかもしれませんが、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を組み合わせたよりも多くのサイトですでに使用されています！


このサイトでは、必要な機能を選択してフレームワークをダウンロードできます。





さらに、ビルドをカスタマイズできます。



最大構成では、フレームワークの重量が次のようになります。

非圧縮：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フレームワークです！

まず第一に、それを検討することをお勧めします。緊急に何か他のものを引き受ける必要がある場合に限ります。


More articles:


All Articles