- コンポーネントの最初の紹介-WebプログラミングのUnixの方法
- コンポーネント作成の例
- 単体テスト-コンソール
- ユニットテスト-エクスプレス
- 単体テスト-ブラウザー
- メイクvs gulp vs. うめき声
- Zの死者、赤ちゃん
- コンポーネントとcouchapps
node.js
を使用するすべての人は、エクスプレスWebサーバーの作成者であるTJ Golovaychuk、モカテストライブラリなどを知っています。 しかし、おそらく、今日の彼の最も素晴らしいプロジェクトはComponent- http://github.com/componentです。 ロシア語のコンポーネントに関する文献はまだほとんどありません。このギャップを埋めようとします。 TJは2012年12月19日に彼のブログに最初のコンポーネントの投稿を投稿しました。現在、爆発的な成長の後、コンポーネントの数はすでに1,000を超え、毎日増加しています。
ブラウザでJSを真剣に使用するには、コードがモジュール式である必要があります。これにより、各モジュールは独自のファイル内にあり、各モジュールは個別に、残りのモジュールとは無関係にテストできます。 コンポーネント-これらは、node.jsが使用するnpmモジュールのように、ブラウザーが使用するモジュールです browserify.jsによって作成されたモジュールとは異なり、browserifyは「ソースマテリアル」としてnpmモジュールのみを使用し、JSのみを含むことができ、コンポーネントにはcss、html、およびフォントを含めることができ、一緒に。 これにより、cssには独自のモジュラーシステムがないという事実が同時に修正されます。 また、たとえば、アプリケーションの一部を削除すると問題になります。 コンポーネントを使用する場合、html、cssとともにコンポーネントを削除します。 などは、ほとんど些細なアクションです。
アプリケーションコンポーネントは、たとえば、チェーンストア（買い物かご）にあります。 または、ナビゲーションバー、複雑なメニューなど。 重要なことは、各コンポーネントが個別に設計およびテストされることです。 コンポーネントのテストについては、後で詳しく説明します。 ただし、コンポーネントはページ上に表示されている必要はありません。 日付またはローマ数字、ローカル形式の変換-典型的な例。
JavaScriptの2つの主要なモジュール形式であるCommonJSとAMDのうち、最初のものがコンポーネントで選択されています。 コンポーネントは、依存関係の作成と追加の両方、およびパブリケーション、そして大部分はテストさえおなじみのコマンドラインで行われるという点で便利です。 コンポーネントの操作は、node.jsの操作と非常に似ています。 （はい、RubyまたはPythonでも）。 node.jsについてのアイデアがある場合は、コンポーネントも使用できます。 これは、サーバーとブラウザーの両方で1つの言語だけでなくjavascriptだけでなく、使い慣れたワークフローでも有益です。すべて同じスキルが使用されます。 そして、多くの点で同じコードです。 これは、AMDシステムと比較して有利です。
最初の知り合いにとっては、 wiki 、特にFAQを閲覧するのが最も便利です。
普遍性
コンポーネントと多くの同様のプロジェクトの主な違い-たとえば、jQueryプラグイン、コンポーネントは単なるコンポーネントです。 jQueryプラグインはjQueryでのみ使用できます。 Dojo、Backbone、またはMooToolsモジュールも適切なインフラストラクチャにのみ存在します。 コンポーネントは単なるコンポーネントです。 動作するために何も必要とせず、どこでも、どのシステムでも、どのフレームワークでも使用できます。 各コンポーネントは、スタンドアロンスクリプトとして生成でき、一般にシステム外のブラウザで使用できます。
component.json
node.js
（およびそれに応じて
browserify.js
）とは異なり、各コンポーネントには
package.js
ファイルと同様に
component.json
ファイルが必要です。 両方の環境、サーバー、node.js、ブラウザーで使用する予定のモジュールの場合、これはやり過ぎのように感じられます。 勝つことは、ファイルとコンポーネント自体の両方で、シンプルでクリーンで明確なコードです。 Component.json仕様。
名前空間：github / author / project
2番目の注目すべき違いは、共通のリポジトリとコンポーネントの名前空間です。 ノードには、デフォルトでコンポーネント-github.comに独自のリポジトリnpmjs.orgがあります。 （もちろん、あなたのものを使用できます）。 したがって、コンポーネント名はユーザー名/プロジェクトです。 とても便利です。 著者の名前はすぐに認識できるようになり、このようないくつかの名前からこの「品質マーク」ですぐに選択できます。
慈善的な独裁者node.jsとのこれらの違いの議論は、彼のブログとcomponent-FAQにあります。 相違点コンポーネントと詳細な表 browserifyはG. Stagasによって準備されました 。
余分なステップ？
はい。すべてのアプリケーションコンポーネントを単一の
build.js
に接続するには、追加のステップ
make build
を導入する必要があります。 しかし、すべて同じですが、javascriptを使用する場合、必然的に予備の手順に従います。コーヒースクリプトの変換、sassの変換、jshintの実行、packなどなどが必要です。 したがって、このプロセスの別のコンポーネントは、通常、作業では目立ちません。 すべてが一緒に実行されるのは、常に1つの
make
または
grunt
、
gulp
であるため、これは
gulp
、欠点ではありません。
サイズが重要
コンポーネントでは、通常
jquery
、
underscore
など、などを使用できません。 たとえば、
each
または
map
を使用する必要がある場合は、
jquery
または
underscore
を入れないでください。ただし、
require(component/each)
は数行で、クロスブラウザーコードがあります。 そして、すべての方法についても同様です。 その結果：
Angular.js-709Kb、コンポーネント/リアクティブ-47Kb。 ReactiveはAngularの完全な類似物ではなく、そのルート機能のみです。 しかし、通常これが必要であり、このカバすべてではありません。
Aloha.js〜1Mb、yields / editable-4.6 Kb、これもアロハの完全なアナログではなく、必要な問題の本質のみです。
タイプミスはありません、1Mb / 4.6Kb。 それはそのような恐ろしい割合です。
さらに、
make build
作成
make build
ときに--devオプションを削除します。 さらに、 Charlotte GoreのFlatinatorを参照してください。未使用のエイリアスを削除することでコードを削減しています。 さらに、v1はさらにコンパクトになります。 これはすべて縮小と圧縮に依存します。
UNIXの方法
各コンポーネントは小さく、1つのタスクのみを実行します。 （おなじみのフレーズ）。 このため、平均的なプロジェクトでも最大数百のコンポーネントが必要になる場合があります。 しかし、それは一見しただけで怖いです。 その結果、接続された形式の大規模プロジェクトであっても、縮小されていないbuild.jsの重量はこれ以上、または約100 Kbになります。 コンポーネントは単なる別のフレームワークではなく、コンポーネントはブラウザ内で単一方向です。
私にとって最も重要なこと
私にとって個人的に最も重要なことは、このモデルに従うと、読み書きのできる人がこの特定のタスクをどのように実行するかを見ることができるということです。 Rails、Angular、Djangoのようなカバで正しい場所を見つけ、それがどのように機能するかを理解することは常に可能ではありません。 これは、精神に強い人、または何の関係もない人にしかできません。 そして、しばしばそれを理解する機会ではありません。 それは機能します、そして、大丈夫、私は仕事をしました、そして、さらに理解することは何もないようです。 また、コンポーネントでは、それぞれが完全に表示されるシンプルな製品であり、簡単に学ぶことができます。
さて、すでに述べたこと-サーバー、ブラウザー、およびたとえばCouchDBでの単一のワークフロー-作業はすべてCommonJS標準に基づいています。
インストール：
<pre> $ sudo npm install -g component $ component --help . . . </pre>
継続する
PS正しいコンポーネントまたはコンポーネントは何ですか？ 何が根付いているのか見てみましょう。 Literacy.ruは、「すべての非用語のコンテキストでは、単語コンポーネントを使用する必要がある」と述べています。 そして、これが用語のコンテキストです。 つまり、コンポーネントa、彼女。 違いは乗数で特に顕著です。 number-多くのコンポーネントまたはコンポーネント。 コンポーネントyを選択するので、複数形では最初のオプション（多くのコンポーネント）を選択します。