Web開発におけるUI層の疎結合

今回は、Web 開発における UI 層の疎結合について、Web 開発で UI 層の疎結合を使用する際の 注意事項 についてお届けします。

Web 開発では、UI は互いに分離され、相互作用する 3 つのレイヤーによって定義されます。

HTMLは、ページのデータとセマンティクスを定義するために使用されます

CSSは、ページにスタイルを追加し、視覚的な機能を作成するために使用されます

JSは、ページに動作を追加してよりインタラクティブにするために使用されます

疎結合について、意味不明な文章を話させてください。他のコンポーネントを変更せずに 1 つのコンポーネントを変更できる場合、疎結合になります。多くの人がコードの保守に関与する大規模な複数人システムの場合、コードの保守性にとって疎結合は重要です。開発者には、コードの一部を変更するときに他の人のコードを壊さないようにしてもらいたいと考えています。大規模システムの各コンポーネントの内容が制限されている場合、疎結合が実現されます。基本的に、疎結合を確保するには各コンポーネントを十分に薄く保つ必要があります。コンポーネントについてあまり知られていないほど、システム全体をより適切に形成できます。

注意すべき点が 1 つあります。コンポーネントが連携して「結合なし」を実現することはできません。すべてのシステムにおいて、コンポーネントはそのジョブを実行するためにいくつかの情報を共有します。私たちの目標は、1 つのコンポーネントへの変更が他の部分に定期的に影響を及ぼさないようにすることであることは簡単に理解できます。

Web UI が疎結合であれば、デバッグが簡単です。テキストまたは構造に関連する問題は、HTML を検索することで見つけることができます。スタイル関連の問題が発生した場合、問題が CSS にあることがわかります。最後に、これらの動作上の問題に対して、JS に直接アクセスして問題を見つける機能は、Web インターフェイスの保守性の中核部分です。

WebPage の時代では、HTML/CSS/JS の 3 つのレイヤーを分離することが推奨されています。たとえば、DOM の inline 属性を使用してリスナーをバインドすることは禁止されています。 test を書くと批判されるでしょう。しかし、WebApp時代になり、Reactに代表されるMVVMやMVCフレームワーク（厳密に言えばReactはView層に着目したフレームワークに過ぎません）はいずれもHTML、CSS、JSを一緒に書くことを推奨しており、イベント リスナーをインラインでバインドするコード。

疑問に思わずにはいられない、私たちは逆行しているのでしょうか？

歴史は時々ぐるぐる回る。実際、スパイラルは反転し、新たな出発点に立った。 ——Yu Bo 「Web R&D モデルの進化」

従来の WebPage の時代では、言語レベルでもフレームワーク レベルでもコンポーネント化のサポートが高くありませんでした。JS (ES6 以前の時代) とネイティブではなかった jQuery について考えてみましょう。サポートモジュールがあるため、メンテナンスコストの増加を避けるために、3 層分離のベストプラクティスをお勧めします。 ES6 とフロントエンド MV* フレームワークの登場により、フロントエンド開発モデル全体が変化しました。フロントエンドはページを作成するだけでなく、より多くの WebApp を作成していることがわかります。アプリケーションの規模と複雑さは、WebPage 時代のものとは異なります。

React は非常に典型的なもので、JSX を使用して HTML を記述し、ページ構造とページ ロジックを一緒に直接記述することを提案しています。これを WebPage 時代に置くと、直接的には典型的なアンチパターン教材としてみなされると思いますが、WebApp 時代ではほとんどの人に受け入れられ、使用されています。 React チームが提案した JS での CSS を含めると、フロントエンド開発が完全に JS によって支配され、コンポーネント化がより徹底されるように、CSS を JS で記述したいとも考えています (私は JS での CSS について詳しく調べて理解したわけではありませんが、このプロジェクトでは実際に大規模な実務経験がないため、現在はまだ様子見の姿勢を維持し、CSS 開発には以前の SASS と LESS を使い続けています。)

2 つの Web 時代の開発モデルは劇的に変化しましたが、3 層の疎結合設計に関して従う必要のある一般原則がまだいくつかあります:

CSS から JS を抽出します。 初期の IE8 以前のブラウザでは、CSS で JS を書くことができました (例を書かずに、これはアンチパターンです。覚えていないほうが良いです)。これによりパフォーマンスの問題が発生し、さらに恐ろしいのは、それが困難になることです。将来的には維持します。しかし、ここにいる皆さんの中でこの種のコードにアクセスできる人はいないと思いますが、それは問題ありません。

JSからCSSを抽出します。 JS で CSS を変更できないというわけではありません。代わりに、クラスを変更することでスタイルを間接的に変更できます。次の例を参照してください:

// 不好的写法element.style.color = 'red';
element.style.left = '10px';
element.style.top = '100px';
element.style.visibility = 'visible';// 好的写法.reveal {  color: red;
  left: 10px;
  top: 100px;
  visibility: visible;
}
element.classList.add('.reveal');

CSS className は CSS と JS 間の通信のブリッジになることができるためです。ページの

ライフサイクル

中に、JS は要素の className を自由に追加および削除できます。 className で定義されたスタイルは CSS コード内にあります。 CSS のスタイルは、JS を更新しなくてもいつでも変更できます。 CSS との疎結合を維持するために、JS はスタイルを直接操作しないでください。

style 属性の使用が許容される状況が 1 つあります。それは、別の要素またはページ全体を基準にして要素を再配置できるように、ページ上に要素を配置する必要がある場合です。この計算は CSS では実行できないため、style.top、style.left、style.bottom、style.rght を使用して要素を正しく配置できます。 CSS でこの要素のデフォルトのプロパティを定義し、Javascript

でこれらのデフォルト値を変更します。

フロントエンドが HTML と JS を一緒に書いている現状を考慮して、原書では 2 つを分離する実践については触れません。しかし、これだけナンセンスなことを言っても、次のことを覚えておいてください。予測可能性はテストと開発の迅速化につながり、どこからバグのデバッグを開始すればよいかを (推測するのではなく) 知っていると、問題の解決が速くなり、コードの全体的な品質が高くなります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS を使用して参照渡しと値渡しを行う方法

node.js インターフェイスの作成方法

以上がWeb開発におけるUI層の疎結合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。