コンポーネントでの考え方

キーテイクアウト

• インターフェイス開発へのコンポーネントアプローチは、ビジネスドメインをモデリングするのではなく、相互作用の最小の抽象的なセクションに焦点を当てた従来のMVCおよびMVVMフレームワークよりも利点を提供します。
コンポーネントは、再利用し、ビジネスドメインから距離を置き、さまざまなコンテキストに適応できるように設計する必要があります。このアプローチは、特定のタイプのヘルプ検索コンポーネントではなく、普遍的に使用できる示唆的なテキスト入力コンポーネントの作成に例示することができます。
• コンポーネートコンポーネントへのインターフェイスを分解すると、開発プロセスが簡素化されるだけでなく、孤立したテストが容易になります。コンポーネントは互いに独立しているため、システム全体に干渉することなく修正や追加が可能です。
• Webコンポーネント、React、ポリマー、フライト - すべては、インターフェイスコンポーネントの構築を目的としています。これは、Big MVCおよびMVVMフレームワークとは異なるツールセットであり、インターフェイスを実装する方法を計画する際には、異なる考え方が必要です。私はまだサーバーアプリケーションにMVCなどのモデルを使用していますが、インターフェイス開発のコンポーネントアプローチの利点に専用の変換です。この記事では、コンポーネントでの思考がMVCでの考え方とはどのように異なるかを概説し、そのアプローチを実際の例で実装します。
私の考えでは、MVCデザインのヘッドスペースは「ビジネスドメインをモデル化するにはどうすればよいですか？そのドメインとの対話プロセスをモデル化するにはどうすればよいですか？これらのプロセスを容易にするためにインターフェイスをモデル化するにはどうすればよいですか？」このヘッドスペースは、優れたコンポーネント設計を促進しないということです。実際、インターフェイスを構成可能なコンポーネントに分解するために着手したときに、どのように考えるべきかについての極の反対です。せいぜいマイクロアプリになります。最悪の場合、あなたは神の要素を構築します。最後にやりたいことは、ビジネスドメインをコンポーネントとしてモデル化することです。あなたがモデル化することを目指すのは、あなたが説明できる相互作用の最小の抽象的なセクションです。 再利用のための設計

「この却下可能なアラートパネルを作成するにはどうすればよいですか？」の代わりに、「この相互作用を容易にするために新しいHTML要素を追加していたら、彼らはどうなりますか？」と自問してください。これは、ビジネスドメインから安全に距離を置き、本質的に異なるコンテキストで最も再利用可能なコンポーネントにつながると思います。

別の例として、ヘルプシステムの検索を許可するすべての場所で使用されるタイプのヘルプ検索コンポーネントを作成しないでください。次に、データのリクエストを受信する方法を知っているAPIデータコンポーネントを検索し、ヘルプ検索APIと対話し、結果をブロードキャストします。これで、提示的なテキスト入力のテストではAPIのあざけりは必要ありません。「タグ」フィールドに提案を追加するように求められた場合、既存の示唆的なテキスト入力コンポーネントをドロップし、説明するシンプルなデータコンポーネントを配線できます。タグAPIに、そして完了！

実用的な例 - 「プロジェクトリスト」

具体的な例では、単純なインターフェイスを孤立したコンポーネントとして実装することを見てみましょう。次のモックアップは、99designs 1-to-1プロジェクトシステムからの抽出です。 UIは大幅に簡素化されていますが、執筆時点で私たちが築き上げるJavaScriptは、サイトからの生産コードです。これがワイヤーフレームです：

私たちが持っているのは、アクティブ、ドラフト、アーカイブの3つのプロジェクトの3つのリスト間のナビゲーションです。各プロジェクトには、アクティブなプロジェクトのアーカイブ、ドラフトの削除、アーカイブプロジェクトの再アクティブなど、実行できるアクションがあります。アプリのデザインの考えでは、プロジェクトのモデリングを開始し、「アーカイブ」や「削除」などのメソッドを提供し、「ステータス」プロパティを属する「ステータス」プロパティを追跡します。まさに私たちが避けたいことなので、私たちは相互作用とそれらを促進するために必要なものだけに関心を持っています。

その中心には、行ごとのアクションがあります。そのアクションが実行されたら、リストから行を削除します。すでにプロジェクト固有のドメインの知識を当てています！さらに、各リストにいくつのアイテムがあるかについてカウントがあります。この記事の範囲を抑えるために、各ページがサーバー側に生成されると仮定し、タブナビゲーションがフルページの更新を引き起こします。 JavaScriptに強制的に依存する必要はないため、アクションボタンは、フォームのアクションを非同期的に実行し、完了したときにイベントをブロードキャストするイベントハンドラーを送信するフォーム要素になります。

1つのプロジェクト行のHTML：

を次に示します

コンポーネントを構築するためにフライトを使用します。フライトは現在、以前のSitePoint JavaScriptの記事で概説した理由から、99DesignsのデフォルトのJSコンポーネントライブラリです。

<span><span><span><li>></li></span>
</span>  <span><span><span><a> href<span>="/projects/99"</span> title<span>="View project"</span>></a></span>Need sticker designs for XYZ Co.<span><span></span>></span>
</span>  <span><span><span><div> class<span>="project__actions"</span>>
    <span><span><span><a> href<span>="/projects/99"</span> class<span>="button"</span>></a></span>View<span><span></span>></span>
</span>    <span><span><span><form> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></form></span>
</span>        <span><span><span><button>></button></span>Archive<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span>></span></span></span></span>

フォームの送信を処理し、イベントを放送するためのAsyncformコンポーネントは次のとおりです。

JavaScriptにクラス属性を使用しないという厳格なポリシーを維持するため、アクションフォームにデータアジンフォーム属性を追加し、次のようなすべてのマッチングフォームにコンポーネントを添付します。

<span><span><span><li>></li></span>
</span>  <span><span><span><a> href<span>="/projects/99"</span> title<span>="View project"</span>></a></span>Need sticker designs for XYZ Co.<span><span></span>></span>
</span>  <span><span><span><div> class<span>="project__actions"</span>>
    <span><span><span><a> href<span>="/projects/99"</span> class<span>="button"</span>></a></span>View<span><span></span>></span>
</span>    <span><span><span><form> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></form></span>
</span>        <span><span><span><button>></button></span>Archive<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span>></span></span></span></span>

今では、アクションを実行する能力があり、成功してDOMツリーを伝播するイベントをブロードキャストすることができます。次のステップは、そのイベントを聞いて、泡立つ行を削除することです。そのために取り外し可能です：

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>AsyncForm</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>broadcastEvent: 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.node, 'submit', this.asyncSubmit.bind(this));
</span>    <span>});
</span>
    <span>this.asyncSubmit = function(event) {
</span>      event<span>.preventDefault();
</span>      $<span>.ajax({
</span>        <span>'url': this.$node.attr('action'),
</span>        <span>'dataType': 'json',
</span>        <span>'data': this.$node.serializeArray(),
</span>        <span>'type': this.$node.attr('method')
</span>      <span>}).done(function(response<span>, data</span>) {
</span>        <span>this.$node.trigger(this.attr.broadcastEvent, data);
</span>      <span>}.bind(this)).fail(function() {
</span>        <span>// error handling excluded for brevity
</span>      <span>});
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(AsyncForm);
</span><span>});</span>

再び、プロジェクトの行にデータ取り外し可能な属性を追加し、コンポーネントを行要素に添付します。

<span>AsyncForm.attachTo('[data-async-form]');</span>

完了！それぞれ1つのイベントがある2つの小さなコンポーネントがあり、3つの形式で3つのタイプのアクションを優雅に劣化させる方法で処理しました。残っているのは1つだけで、それが各タブにカウントされます。簡単にする必要があります。必要なのは、行が削除されるたびにアクティブタブのカウントを1つだけ減らすことです。でも待って！アクティブなプロジェクトがアーカイブされると、アーカイブカウントが増加する必要があり、アーカイブされたプロジェクトが再活性化されると、アクティブ化されたカウントが増加する必要があります。最初に、その数を変更するための指示を受けることができるカウントコンポーネントを作成してください：

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Removable</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'removeOn': 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.attr.removeOn, this.remove.bind(this));
</span>    <span>});
</span>
    <span>this.remove = function(event) {
</span>      <span>// Animate row removal, remove DOM node, teardown component
</span>      $<span>.when(this.$node
</span>        <span>.animate({'opacity': 0}, 'fast')
</span>        <span>.slideUp('fast')
</span>      <span>).done(function() {
</span>        <span>this.$node.remove();
</span>      <span>}.bind(this));
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(Removable);
</span><span>});</span>

私たちのカウントは、htmlで 4 のようなものとして表されます。カウントはドキュメントレベルでイベントに耳を傾けるため、イベントプロパティがヌルになります。これにより、このインスタンスが聞くべきイベントを定義し、同じイベントで指示を聞いている複数のカウントインスタンスが誤っていることを防ぐように強制されます。

パズルの最後のピースは、取り外し可能なカウンターにモディファイアを使用してイベントを発射するために取り外し可能なインスタンスを取得することです。コンポーネント間のカップリングは確かに必要ないので、取り外し可能なイベントが削除されたときに発射するための属性を取り外し可能にします。

<span>Removable.attachTo('[data-removable]');</span>

ここで、カウントとリムーバブルの間の結合は、コンポーネントをDOMに添付するユースケース固有のページスクリプトで発生します。

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Count</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'event': null
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(document, this.attr.event, this.update.bind(this));
</span>    <span>});
</span>
    <span>this.update = function(event<span>, data</span>) {
</span>      <span>this.$node.text(
</span>        <span>parseInt(this.$node.text(), 10) + data.modifier
</span>      <span>);
</span>    <span>}
</span>  <span>}
</span>
  <span>return defineComponent(Count);
</span><span>});</span>

ミッションが達成されました。私たちのカウンターは、私たちのプロジェクトリストの行を何も知りません。そして、プロジェクトのリストの概念を中心に設計されたほんのわずかな方法ではありません。

最後の追加

<span>Count.attachTo(
</span>  <span>'[data-counter="active"]',
</span>  <span>{'event': 'uiActiveCountChanged'}
</span><span>);
</span>
<span>Count.attachTo(
</span>  <span>'[data-counter="draft"]',
</span>  <span>{'event': 'uiDraftCountChanged'}
</span><span>);
</span>
<span>Count.attachTo(
</span>  <span>'[data-counter="archived"]',
</span>  <span>{'event': 'uiArchivedCountChanged'}
</span><span>);</span>

私たちのUXデザイナーは、このアクションを取り消すことができないため、誰かがドラフトを削除しようとしたときに確認を求めた方が良いと指摘しました。問題ありません。まさにそれを行うコンポーネントをホイップすることができます。

それを削除ボタンに添付すると、求められたものがあります。 [確認]ダイアログはボタンを傍受し、ユーザーが「OK」を選択した場合にフォームの送信を許可します。互いに干渉することなくこれらのコンポーネントを構成できるため、非同期コンポーネントを変更する必要はありませんでした。本番コードでは、フォームが送信され、複数の提出を防ぐ視覚的なフィードバックを提供するアクションボタンにSinglesubmitコンポーネントを使用します。

最終コンポーネント、テスト、および備品

この記事が、プロジェクトがインターフェイスを構成可能なコンポーネントに分解することでどのように利益を得るかを示すことを願っています。私がカバーしていないコンポーネントデザインの重要な利点は、孤立したテストの容易さです。そのため、ジャスミンテストとHTMLテストフィクスチャとともに最終コンポーネントを次に示します。

asyncform
リムーバブル
count
確認

私がカバーしたものについて質問がある場合は、コメントで詳細をお願いします。

思考コンポーネントに関するよくある質問（FAQ）

効果的な思考の重要なコンポーネントは何ですか？

効果的な思考は、いくつかの重要なコンポーネントを含む多面的なプロセスです。これらには、明確さ、精度、精度、関連性、深さ、幅、論理、重要性、および公平性が含まれます。これらの各コンポーネントは、思考プロセスが効果的であり、正確な結論につながることを保証する上で重要な役割を果たします。

批判的思考スキルを改善するにはどうすればよいですか？仮定に疑問を投げかけ、多様な視点を求め、新しいアイデアに開かれているなどの習慣。また、分析、解釈、推論、評価、説明、自己規制などのスキルの開発も含まれます。批判的思考。それは、正しく推論する能力、施設からの結論を導き、主張を評価し、推論の誤りやエラーを避ける能力を伴います。私たちが検討している情報やアイデアは、手元の問題や問題に直接関係しています。焦点を合わせ続け、気を散らすことや無関係な情報を避けるのに役立ちます。

批判的思考の深さの重要性は何ですか？問題や問題、その根本的な原因や意味を理解し、複数の視点からそれを探求するために。思考の幅は、幅広い視点、アイデア、情報源を考慮することが含まれます。オープンマインドで好奇心が強く、新しいアイデアや視点を探求することをいとわないことを必要とします。

批判的思考における公平性の役割は何ですか？そして客観的。関連するすべての視点と証拠を考慮し、好意、偏見、または偏見を避ける必要があります。

精度は効果的な思考にどのように貢献しますか？

​​

思考の精度は、私たちの思考や表現において正確で、詳細な、明確であることを伴います。あいまいさ、あいまいさ、または混乱を避け、アイデアを効果的に伝えるのに役立ちます。

批判的思考における正確性の重要性は何ですか？ 、アイデア、結論は正しく、信頼性が高く、エラーや歪みがありません。健全な決定と判断を下すためには重要です。

どうすれば自分の思考の明快さを改善することができますか？

思考の明確さを改善するには、明確なコミュニケーションの実践、専門家や複雑な言語の避け、努力することが含まれます。私たちの思考と表現のシンプルさと単純さ。

以上がコンポーネントでの考え方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。