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