最近、記事やPPTなどの「モジュール化」にハマっていて、それに関連していろいろ考えさせられました。この時期の「モジュール性」についての考えを整理すると、ほとんどが私自身のページ再構築という仕事の経験と理解に基づいたものであり、ある程度の限界はありますが、復習することで新しいことを学べればと思います。過去。
「モジュラー」は、「Ajax」と同様に、これまで私たちが使用してきたテクノロジーや手法の流行の名前にすぎません。しかし、ページ再構築の発展のトレンドとして、人々の注目はますます高まっており、無意識のうちに「モジュール化」についてよく語られますが、「モジュール化」とは何かを本当に理解していますか？
モジュール性とは何ですか?
CNKIには「モジュール性」の解釈が 28 あります。 「モジュール式」の考え方が広く使われていることがわかります。ページ再構成における「モジュール化」に最も近い説明は、おそらくソフトウェア開発における説明です。
まず、Baidu のエントリで「モジュール性」がどのように説明されているかを見てみましょう。
「モジュール化とは、複雑な問題を解決するときに、ソフトウェア システムを上から下まで層ごとに複数のモジュールに分割するプロセスを指します。各モジュールは特定のサブ機能を完了し、すべてのモジュールは特定の方法で組み立てられて全体になります。モジュールには、インターフェース、機能、ロジック、ステータスという基本的な属性があり、モジュールの外部特性が反映され、ロジックはモジュールの内部特性が反映されます。ソフトウェア アーキテクチャ、モジュールは、組み合わせたり、分解したり、交換したりできるユニットです。」
関連書籍も多数ありますので、興味のある方は検索してみてください。私たちが学んでいるのは考え方であるということを強調する必要があります。
ページ制作をモジュール化する必要があるのはなぜですか?
サイトのコンテンツが増加し、コードが肥大化しているため、クライアント エクスペリエンス (主に開く速度) とメンテナンスの効率が徐々に影響を受けています。これらの問題を解決する方法はありますか?
コードの冗長性の削減、コードの再利用の改善、画像の圧縮などは簡単に考えられますが、これらを実現するにはどうすればよいでしょうか?モジュール的な考え方を解決できるため、コードの冗長性が効果的に削減され、コードの再利用が向上します。さらに重要なのは、複数人によるメンテナンスをサポートし、メンテナンス コストを削減できることです。 CSS の記述方法はより柔軟であり、コードの結合が発生しやすいため、モジュール化を使用すると結合をある程度軽減でき、バグの発見にも役立ちます。したがって、サイトの初期段階では「モジュール思考」にもっと注意を払い、それを活用してサイトを作成する必要があります。
以前によく言及したサイトのパフォーマンスの最適化のかなりの部分には、コードの再利用の改善、開発効率の向上などの「モジュール化」も含まれます。「モジュール化」には多くの利点がありますので、それらを簡単にリストします。
最も重要な点は、モジュール性の最も重要な機能の 1 つでもある「コードの再利用を増やす」ことだと思います。
「モジュール化」を実現するにはどうすればよいでしょうか?
ここでの主な問題は、HTML と CSS の「モジュール性」です。スキニングの実装方法を見てみましょう。
これから、HTML と CSS のインターフェイス実装がわかります。
このインターフェイスをより適切に実装するには、関連する (インタラクション、デザイン、ページ、開発) 規約、ルール、仕様が必要です。たとえば、現在の状態はすべて同じクラス名「nonce」を使用し、すべてグレー表示されたパフォーマンスを使用します。 use 元のクラス名の後ろに「_n」を付ける、Tabの実装方法など。これらの規則、ルール、仕様を適切に設定すると、HTML コードを簡単にテンプレート化し、インターフェイス仕様と統合することができます。
まず理解する必要がある 2 つの誤解があります。
完全に独立したモジュールは同じプロジェクト内に配置されます。プロジェクトには独自のパフォーマンスとインタラクティブな統一性があるため、冗長性を減らすためにこれらの部分を共通の定義として提案する必要があります。であり、完全に切り離すことは不可能であるため、モジュール化において非常に重要なポイントは「適度な結合」です。公開定義ではモジュールスタイルの実装を調整する必要があり、この調整は「インターフェース」の実装にも影響します。
この記事では主にモジュールの考え方について説明するため、具体的な実装の詳細については今後の記事で説明します。関連する内容については、以前に書いた「 IKEA 家具デザインからのモジュール化」をご覧ください。一緒に議論することを歓迎します。
原文： http://www.cssforest.org/blog/index.php? id=134