フロントエンド アーキテクチャの構築経験_html/css_WEB-ITnose

私はこの会社に入社して半年以上経っているので、会社に対する感情は表に出ていないのですが、幸いなことに最後の日に頼まれていたプロジェクト（CQMシステム）を引き継ぐことになりました。私のベスト。
最初の会社で働いてから現在まで、私も 1 年半の青春を Web サイトに費やして、バックエンドからフロントエンドへ、慣れていないところから慣れ親しんだところへ、徐々に着実に慣れてきました。ウェブサイトに関する知識の深層学習。
いつか自分でちゃんとしたものを作りたいと思っているのですが、1. 自分の能力が足りない、2. 時間に関しては怠けたい、という理由からこの CQM プロジェクトを立ち上げました。自分にとっては小さな試練と言えるでしょう。
さて、本題に入りましょう。私は別の理由により、会社のプロジェクト部門の一員ではありませんが、このプロジェクトのフロントエンドフレームワークを担当する機会があります。
やっぱり、これは小さなOAプロジェクトで、基本的にフロントエンドは私が全部担当しているので、中身は基本的に私のアイデアです。
追記: 内部情報のため、公開するのは都合が悪いのでご容赦ください

上の写真は、Microsoft MVC にアクセスしたことのある学生にご覧いただく必要があります。私はフロントエンドを担当していますが、C# は Microsoft の MVC に慣れています。もちろん、私が使用している IDE は Microsoft MVC を知っている学生には馴染みのあるものかもしれません。
まず第一に、私はフロントエンドで作業していますが、一部のデータを処理するための単純なサーバーも必要です。これしか知らないので、MVC (以下の MVC はすべて Microsoft MVC) が私にとって良い選択です。 。 。

他のフォルダーは脇に置き、展開された 2 つのフォルダーに注目してください。最初の [statics] には、もちろん、いくつかの静的ファイルが含まれていますが、これはコンパイルする必要があります。あまり使われていません。 2 番目の [views] にはページ ファイルが含まれています。

ここでは、プロジェクト チームと一緒に作業しているのではなく、一人で作業しているという意味で使われています。そのため、フロントエンドとバックエンドは完全に分離されており、データ テストのためのバックグラウンド プログラミングのみを使用しています。

フロントエンドで作業していたときの私の一般的なアイデアは、テンプレート レイアウト、コントロールの組み合わせの生成、ディレクトリ構造のレイアウトでした。 conterこの文章を使用して、2番目のレイヤー内にインラインフレームがある可能性があります。

下の写真はページレイアウトのスケッチです



上の写真からわかるように、フロントエンドページ全体は3つのレイヤーになっています。もちろん、1つのレイヤーにすることもできますが、フレームワークのためです。 ifrmae は大きく変わりますが、ラッピングを 3 層にするだけです。 PS: 左側のナビゲーションは 2 番目のレイヤーに属します
画像 3 の json フォルダーには Web サイトに必要な json データ形式が保存され、ashx フォルダーはサーバー データのテストに使用され、プラグイン フォルダーにはさまざまな js フレームワークが含まれています。

zoeDylan はフロントエンドのデータ処理層であり、他の js フレームワークを必要としません。dgg は、jq フレームワークを使用する要素の対話および要素の処理層です。

要約すると、フロントエンドの静的ファイルとページ データ ブロックはほぼ次のようになります


他のフォルダー、主に共有共有フォルダーについては説明しません
上記と同じです。 2 番目のレイヤーのビュー ファイルは共通で、end は 3 番目のレイヤーに共通のビュー ファイル、header はヘッダーの内容、frame はすべてのレイヤー (主に一部のファイル参照) で必要です。

このページのファイルは問題ありません。次のステップは、論理的なアイデアを説明することです
このプロジェクトに取り組んでいたとき、私は非常に情熱的に取り組み始めましたが、1 か月後には難しいと感じました。私の能力は十分ではありませんでしたが、何万行ものコードが書かれているので、何かの役に立つはずです。
フロントエンド全体のロジックは、バックグラウンドでビュー テンプレートを組み合わせ、JS でデータと表示を処理することです。

リクエストから表示までのページのロジックは次のようになります。赤い線はロードする必要があることを意味し、緑の線はロードできることを意味し、最後にページアドレスをリクエストします。 -template application-output} MVC を理解している学生は、mvc ページがどのように処理されるかを知っておく必要があります。ここでは詳しく説明しません。

はい、ページは読み込まれました。データはどうですか?

ここにあるデータは、ページ処理中に、json データのリクエスト アドレスがテンプレートで指定された div に追加されるか、js 形式のデータを直接返します。そして js の処理が開始され、ページに表示される最終コンテンツが生成されます。

これは、データを処理するために使用される dgg.js ファイルです。このファイルが 2 つのグローバル関数 dgg と _father を作成することに気づくでしょう。はい、すべてのページにこれら 2 つのグローバル関数が含まれます。dgg にはすべての共通のデータおよび要素処理関数が含まれます。また、_father はトップレベルのフレームワークを含む関数です。
1: dgg は zoeDylan.js を継承します。会社で必要な機能なので、これを実行しました
2:_father は、全画面ポップアップ、ステータス表示、メッセージプッシュなどのいくつかのイベントを呼び出します。
この関数は基本的にページのデータ補完を処理するため、ここでは主に関数 dgg.element について説明します。
dgg.element は、ページコンポーネントを作成するハンドラーです。json 形式のデータを渡すと、指定したコンポーネント名に基づいてコンポーネントが作成され、jq 関数コンポーネントが返されます。 G d 以下は、DGG.Element 関数のスクリーンショットです


dgg.element オープンのみ: dgg.element.create と dgg.element.template
前者はコンポーネントを作成し、後者は定義されたコンポーネント テンプレートです
dgg の処理です。 .element のロジックは次のとおりです。開発メソッド create-internal 処理を呼び出します。jsonSet がコンポーネントを決定し、テンプレート内のテンプレート スタイルを抽出します。tempLate---eleTemplate 内の対応するコンポーネント メソッドを呼び出し、コンポーネント イベントの処理に使用されます---setAttr を呼び出します。メソッド、パブリック要素属性の処理用 --- jq 関数を返すコンポーネント
ここで、tempLate は json データでカスタマイズできます。または、dgg.element.template を使用してテンプレートとテンプレート メソッド eleTemplate を設定できます。以下に例を示します。

例: コンポーネントを生成します

上記のコンポーネントを生成したいのですが、渡す json 形式は

json を取得した後、dgg を呼び出します。 element.create( json) で、処理ステップを開始します

1: まず、jsonSet がデータを処理し、主に複数のコンポーネントかどうかを判断します

2: コンポーネントを作成します

3: コンポーネント イベントの書き込み。コンポーネントの一連の処理 (コンポーネント イベントなどを含む)

4: 共通コンポーネント属性処理

これでメモは終わります。元の投稿者の経験不足のため、作成中に多くの問題が発生しました。建設プロセスにはまだ解決されていない問題がたくさんありますが、旧正月が明けても残業が必要です。このプロジェクトから多くのことを学びました。自分の欠点と経験不足を簡単に見つけることができるので、初心者が学ぶことができるフロントエンドアーキテクチャの概要と記録を自分に備忘録として書きます。からのロジックです

私は学生時代はWEBフロントエンドの初心者でしたが、偶然にもWEBフロントエンドの仲間入りをしました。 、私が始めたときは赤信号はありませんでした。