フロントエンド UI コンポーネント再利用ツールの紹介

「怠惰」は主要な生産力です。

コードの再利用はプログラマーにとって常に歓迎されています。フロントエンドのコンポーネント化の最終目標は、再利用です。今日は、UI コンポーネントの再利用を実現する方法について詳しく説明します。

通常、コンポーネントと呼ばれるものは、ビジネス ロジックを含むフロントエンド コンポーネントであることが多く、実際には、このようなコンポーネントを広義に再利用することは、せいぜい同じビジネス ライン内で行うことができますが、UI コンポーネントは再利用することができます。ビジネス上の制約がなく、UI レベルでの再利用のみを実現する場合も同様であり、想像の余地がたくさんあるため、ここでは UI コンポーネントについてのみ説明します。

まず、UI コンポーネントは Web インターフェイスのフロントエンド コードの一部であり、ビジネスは含まれませんが、フォーム検証、カルーセル効果、タブ効果などの基本的な JS 効果が利用可能です。 .、つまり、UI コンポーネントに htmlcssjs を含めることができるとします。再利用の目的は単純にコピー＆ペーストすることではなく、例えばインターフェースの内容を調整したり、表示スタイルを調整したり、JSエフェクトを設定したりすることのみです。それが実際にコンポーネントの再利用に役立つ可能性があります。

それでは、上記の目標を達成する方法を考えてみましょう。最初の最も核となるのは、コンポーネントのカスタマイズ機能です。カスタマイズとは、コンポーネントの htmlcssjs コードを変更できることを意味し、編集プロセスで何が得られるかを確認する必要があります。テンプレート エンジンを使用してこの関数を実装できます。そのアイデアは、すべてのコンポーネント コードをテンプレート構文で記述し、テンプレート エンジンがこのデータを使用してテンプレートを解析し、最終的なコードを取得することです。ブラウザが実行できること。構成を変更するプロセスは、構成データを編集するプロセスでもあります。編集後、テンプレート エンジンがリアルタイムで呼び出され、新しいコードが再解析され、コードがリアルタイムでブラウザに更新されます。あなたが見ているものは、編集プロセス中に得られるものです。

この機能は大まかに、コンポーネントコードの取得、設定データの可視化、テンプレートエンジンの呼び出し、設定ファイルの編集、コンポーネントのデモンストレーション、コンポーネントのhtml/css/jsコードのコピーを実装する必要があります。

少し拡張すると、コンポーネント コードの自動取得は特定の組織ルールに依存する必要があるため、コンポーネントの管理方法を最初に合意する必要があります。たとえば、合意されたコンポーネントは、temp.html/style.css/script.js三个模板文件，再加上一个config.json設定データ ファイルを含むフォルダーで構成されます。コンポーネントには、コンポーネント ライブラリとして一般的な保存フォルダーが必要です。コンポーネント情報を取得するには、コンポーネント ライブラリには、すべてのコンポーネントのリストと各コンポーネントに関する情報を提供するディレクトリ ファイルも必要です。これにより、このディレクトリからコンポーネントを取得できるようになります。テンプレート、構成、および必要な情報。

上記の分析に基づいて、コンポーネント管理、プレビュー、編集、コードコピー機能を実現できる UI コンポーネント管理ツールの開発を開始できます。

ここで止めてしまうと、このツールの実用的な価値はあまり高くありません。フロントエンドコードの再利用に着目し、例えばフロントエンドのコンポーネント管理に設計段階から参加できるか。デザイナーは社内の UI コンポーネント ライブラリを公開および管理し、プロジェクトの設計段階で、調整する基本コンポーネントをコンポーネント ライブラリから選択し、フロント エンドはデザイナーの結果を復元するだけで済みます。コンポーネントを使用して機能を取得します。プロジェクトのフロントエンド コードで直接使用されます。

コンポーネントライブラリで実装する必要がある機能は、コンポーネントの編集結果から特別なコードを生成することであり、このコードは管理ツール内のコンポーネントの編集サイトを復元するために使用され、これにより、設計プロセスからフロントエンド開発への引き継ぎ。この機能の実装原理は、コンポーネントの元の構成と変更された構成をマージし、コンポーネントの変更された構成を取得し、それをコンポーネントのレンダリングと表示に使用して、設計サイトを復元できるようにすることです。

現時点で、必要な機能は基本的に完成しています。このツールは上記の機能に基づいて、コンポーネントの構築をより最適化するのに役立つユーザー管理と使用状況の統計が追加されています。図書館。

ソースコード: Github
プレビュー:

プロジェクトが役に立った場合は、Github にアクセスして、好きなだけスターを付けてください。

以上がフロントエンド UI コンポーネント再利用ツールの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。