ここでは、フロントエンド アーキテクチャの最も重要な部分であるフロントエンドのコンポーネント化について学習します。 フロントエンド アーキテクチャに関して言えば、実は最もホットなトピックが 2 つあります。1 つはコンポーネント化、もう 1 つはアーキテクチャ モデルです。コンポーネント化の概念は、HTML タグを拡張する方法の研究から始まり、最終的にはフロントエンド アーキテクチャ システムへと進化しました。そして、その最も重要な機能は、フロントエンドコードの再利用性を向上させることです。 アーキテクチャ パターンは、 したがって、フロントエンドアーキテクチャではコンポーネント化が最優先事項であると言えます。実際のエンジニアリングでは、アーキテクチャモードよりもコンポーネント化が重要になることがよくあります。コンポーネント化はフロントエンドチームのコード再利用率を直接決定し、優れたコンポーネント化システムはフロントエンドチームのコード再利用率を向上させ、それによってチーム全体の効率を向上させるのに役立ちます。 再利用率が高まるため、全員が繰り返し書くコード量が減り、効率が上がり、チームメンバーにかかる心理的・精神的な負担が大幅に軽減されます。
ここでは、コンポーネント化とは何か、そしてコンポーネントの基本的な構成要素を理解することから始めます。 コンポーネントの基本概念コンポーネントはモジュールとオブジェクトに分かれています。コンポーネントは UI と深く関係しているので、ある意味では特別なモジュールや特別なオブジェクトと考えることができます。
コンポーネント化の特徴は、ツリー構造を利用して組み合わせることができ、ある程度のテンプレート構成機能を備えていることです。これが私たちのコンポーネントの基本的なコンセプトです。 オブジェクトとコンポーネントの違いまず、 3 つの主要な要素を持つオブジェクトを見てみましょう。
JavaScript の通常のオブジェクトは、そのプロパティ、メソッド、継承関係によって記述できます。ここでの継承は、JavaScript のプロトタイプ継承を使用します。 ここで言う「通常のオブジェクト」には、複雑な関数オブジェクトやその他の特殊なオブジェクトは含まれません。JavaScript では、プロパティとメソッドが統合されています。 コンポーネントと比較すると、コンポーネントにはより豊富なセマンティック要素が含まれています。コンポーネント内の要素は次のとおりです。
次はコンポーネントの コンポーネントにも 各コンポーネントには 以前は、事前に記述された UI コンポーネントをページにドラッグしてシステム インターフェイスを構築できる、人気のドラッグ アンド ドロップ システムがいくつかありました。しかし、後になって、特定の領域でドラッグ アンド ドロップできることに加えて、自動ソートやコンポーネントのネストなどの機能要件も必要であることがわかりました。このとき、コンポーネント間にツリー構造がないと動作しません。 最後に、コンポーネントはオブジェクトに基づいて意味的に関連する多くの概念を追加するため、コンポーネントは UI を記述するのに非常に適した概念になります。 成分図を使ってコンポーネントをより深く理解してみましょう。 コンポーネントの変更の最も直接的な原因は、ユーザーの入力と操作です。たとえば、ユーザーが選択ボックス コンポーネントでオプションを選択すると、 図の右側の状況は、コンポーネント開発者とコンポーネントの関係です。その 1 つは、開発者がコンポーネントの
開発者は、
次に、複雑なプロセスを記述するために使用される したがって、ここでは、コンポーネントを使用する開発者が、これらのコンポーネントの要素である この図を通して、コンポーネントの各要素の機能と情報の流れの方向を明確に理解することができます。 属性コンポーネントのすべての要素の中で最も複雑なのは、 英語の単語「 上記は英語におけるこれら 2 つの単語の違いについての説明ですが、実際の適用シナリオでも異なります。 属性とプロパティここでは、属性とプロパティの違いを確認するためにいくつかの例を使用します。 HTML では同等ではないシナリオを見てみましょう。 属性:<my-component 属性="v" /> <スクリプト> myComponent.getAttribute('a') myComponent.setAttribute('a', 値) </スクリプト>
財産:myComponent.a = '値';
クラス属性<div class="class1 class2"></div> <スクリプト> var div = document.getElementByTagName('div'); div.className // 出力はclass1 class2 </スクリプト> JavaScript の初期には、Class はキーワードであったため、キーワードとしての初期の class は属性名として使用できませんでした。しかし、現在ではこれは変更されており、キーワードも属性名として使用できるようになりました。 このキーワードをこのように使用できるようにするために、HTML で妥協的な設計が行われました。 HTML では属性は依然として たとえば、React では、className を記述すると、Class が自動的に設定されます。 スタイルプロパティ現在、JavaScript 言語では、クラスと className の間に矛盾はありません。 属性は文字列である場合もありますが、プロパティは文字列をセマンティック文字列に変換するオブジェクトです。最も典型的なのは <div class="class1 class2" style="color:blue"></div> <スクリプト> var div = document.getElementByTagName('div'); div.style // これはオブジェクトです</script> HTML の Style 属性は文字列であり、getAttribute と setAttribute を使用してこの属性を取得および設定できます。しかし、Style プロパティを使用すると、キーと値の構造が得られます。 Href属性HTML では、 たとえば、href の値は「//m.taobao.com」です。このとき、以前の http または https プロトコルは現在のページに基づいているため、ここでの href は現在のページのプロトコルに対応するように再度コンパイルする必要があります。 http から https への変換を行ったことがある人なら、Web サイトで https プロトコルを使用するようにする場合、ハードコードされた http または https URL をすべて したがって、 href に書き込んだものはすべて出力されます。それが属性です。解決されればそれは私たちの財産になります。 <a href="//m.taobao.com" rel="外部nofollow" ></a> <スクリプト> var a = document.getElementByTagName('a'); // 結果は「http://m.taobao.com」です。このURLは解決の結果です。 // これはプロパティです .href; // これは「//m.taobao.com」で、HTMLコードとまったく同じです。// これは属性です 属性を取得します。 </スクリプト> 上記のコードでは、プロパティと属性の両方に同時にアクセスできることもわかります。意味的には非常に近いですが、同じものではありません。 しかし、どちらか一方を変更すると、もう一方も変更されます。これは私たちが注意を払う必要がある現象です。 入力と値これは最も魔法的なペアであり、価値も特別なピットです。 多くの人は、プロパティと属性の値は完全に同等であると考えています。実はそうではありません。この属性の入力値は、値のデフォルト値と同等です。ユーザーが入力に値を入力するか、開発者が JavaScript を使用して入力に値を割り当てるかに関係なく、入力の属性は変更されません。 入力を表示するときは、プロパティが最初に表示されるため、属性の値はデフォルト値と同等になります。これは非常に有名な落とし穴です。初期の JQuery を使用したことがある人なら、prop と attr は同じものだと考えるでしょうが、ここで落とし穴に陥ってしまいます。 その後、JQuery ライブラリに val と呼ばれるメソッドが追加され、属性やプロパティの値について考える必要がなくなり、提供される val を直接使用して値を取得できるようになりました。
コンポーネントの状態を設計する方法ここでは、コンポーネント設計における ここで、Winer 先生は 4 つのシナリオに分けた表を作成しました。
それでは一つずつ説明していきましょう。
❌ マークアップのような静的な宣言型言語では設定できない
❓ プロパティと同様に、ユーザー入力によって必ずしも変更されるわけではありません
❌ 状態はコンポーネントの外部からではなく、コンポーネントの内部から変更されます。コンポーネントの状態を外部から変更するようにコンポーネントを設計する場合、コンポーネント内の状態は制御不能になります。コンポーネントの状態がコンポーネント外部でいつ変更されるかわからないため、状態の一貫性は保証されません。
✅ Config はコンポーネント内で一度だけ実行されるもので、コンポーネントが構築されたときにのみトリガーされます。だからそれは不変です。また、不変性のため、通常は構成をグローバル レベルに残します。通常、各ページには設定があり、それをページ内で使用します。 コンポーネントのライフサイクルライフサイクルに関して言えば、最も簡単に思い浮かぶのは では、これら 2 つの始まりと終わりの間のライフサイクルとは何でしょうか?コンポーネントの構築と破棄の間に何が起こるかを考える必要があります。 コンポーネントに関して非常に重要なことの 1 つは、作成後に表示されるかどうかです。これには、ライフサイクル内の マウントがある場合はアンマウントも必要となるため、コンポーネント内の したがって、 では、コンポーネントの状態はいつ変化するのでしょうか?ここでは 2 つの状況があります。
たとえば、ユーザーがボタンまたはタブをクリックすると、このコンポーネントの状態の変更がトリガーされます。同時に、コンポーネントのライフサイクルも生成され、このライフサイクルは Render レンダリングまたは Update 更新です。 これらすべてのライフサイクルを合計すると、コンポーネントの完全なライフサイクルになります。私たちが目にする、いわゆる 子供たち最後に、子供の概念についてお話ししましょう。子はコンポーネント ツリーを構築するための最も重要なコンポーネント機能であり、実際に使用される子には次の 2 つの種類があります。
コンポーネント ツリーの子要素を設計するときは、これら 2 つの異なるシナリオを考慮する必要があります。たとえば、React ではテンプレート型の子はありませんが、その子は関数を渡すことができ、この関数は子を返すことができます。このとき、テンプレート childrenとして機能します。したがって、Vue で無限スクロール リストを作成する場合、Vue のテンプレートの子には特定の要件があります。 結論ここでは、コンポーネント全体の概念と知識を学びました。次の記事では、コンポーネントシステムを設計および構築し、さまざまな実用的な知識について学習します。また、コンポーネントの実装について誰もが理解できるように、いくつかの一般的なコンポーネントと一般的な機能も使用します。 ここでは、私たちは互いに監督し、励まし合い、一緒に一生懸命に努力して、人生における学習の道を歩み、学習によって人生を変えていきます。 学びの道は退屈で孤独ですが、これによってより多くの仲間と励ましが得られることを願っています。一緒に応援しましょう! (๑•̀ㅂ•́)و フロントエンドコンポーネント化の基礎知識に関するこの記事はこれで終了です。より関連性の高いフロントエンドコンポーネント化、フロントエンドの基礎知識、フロントエンド知識のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法
>>: Mysql テーブル、列、データベースの追加、削除、変更、クエリの問題の概要
nginx でファイルサーバーを構築することもありますが、これは一般に公開されていますが、サーバーが...
成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...
1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...
目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...
目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...
1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...
目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...
序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...
ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...
ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。 1. ページの適用性の問題:...
一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチし...
システムの初期のパーティション分割により、オペレーティング システム内の対応する / パーティション...
主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...