JavaScript フレームワーク デザイン パターンの詳細な説明

JavaScript フレームワーク デザイン パターンの詳細な説明

動画

ここに画像の説明を挿入

Model(模型) - モデルは、データを保存および取得するオブジェクトまたは JAVA POJO を表します。データが変更されたときにコントローラーを更新するロジックを含めることもできます。

View(視圖) - ビューは、モデルに含まれるデータの視覚化を表します。

Controller(控制器) - コントローラーはモデルとビューに対して動作します。モデル オブジェクトへのデータの流れを制御し、データが変更されたときにビューを更新します。ビューとモデルを分離します。

一方通行です

最優秀選手

ここに画像の説明を挿入

MVP の核となるのはプレゼンター層です。この層の核となるのは DOM 要素の操作です。jQuery によるリスト ページの実装を例にとると、プレゼンターは主にモデル内のデータをループで HTML タグと結合し、ビューに追加します。

ムヴヴム

ここに画像の説明を挿入

mvvm の核はモデル層にあり、その核はデータに対する操作です。mvp モードと比較すると、コーディングの焦点は dom に対する操作からデータに対する操作に移っています。 VM レイヤーはビュー レイヤーにデータを表示し、ビュー レイヤーのデータをモデル レイヤーに渡します。 VueはviewModelの典型的な例です

Vueのソース

VueはReactの仮想DOM技術とAngularのNGディレクティブ技術を活用しています。

スパ mpa

MPA: 複数ページのアプリケーション

特徴: 最初の読み込みは高速ですが、その後の読み込みは低速です。初期の開発コストは低いですが、その後の保守コストは高くなります。

SPA: シングルページアプリケーション

最初の読み込みは遅くなりますが、その後の読み込みは速くなります。初期の開発コストは高いが、その後の保守コストは低い。 (主に再利用が多い)

要素を作成する

var li = document.createElement(ele,src,content);
//ele 作成する要素 //src 要素の属性 //content 要素の内容var li = document.createElement('li',{className='list-li'},'123');
<li className="list-li">123<li>

クラス

クラス Person {
   コンストラクタ(x,y) {
      this.x = x;
   }
   追加() {
      コンソールにログ出力します。
   }
}
var person = new Person(1,2);
typeof Person // 関数 クラスの本質はコンストラクタです Person === Person.prototype.constructor //true クラスはコンストラクタのプロトタイプを指します person.hasOwnProperty(x); //true
person.hasOwnProperty(y); //偽
person.hasOwnProperty(add); // 偽
コンストラクタ内のこれはインスタンス化されたオブジェクトを指しているので、xはpersonのプロパティであり、yとaddはPerson.prototype person.__proto__.hasOwnProperty(add) //trueに追加するのと同じです。

クラス内の関数は、コンストラクターのプロトタイプに追加するのと同じです。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript デザインパターン戦略パターン実装原則詳細説明
  • JavaScript デザイン パターン - ビジター パターンの原則と使用例の分析
  • JavaScript デザインパターン - テンプレートメソッドパターンの原則と使用例の分析
  • JavaScript デザイン パターン - オブザーバー パターンの原則と使用例
  • JavaScript デザインパターン - 状態パターンの原則と使用例
  • JavaScript と JQuery フレームワークの基本チュートリアル

<<:  独自のサーバーを素早く構築する方法の詳細なチュートリアル(Java 環境)

>>:  Prometheus を使用して、MySQL の自動増分主キーの残りの使用可能パーセンテージをカウントします。

推薦する

個人履歴書を作成するための HTML の簡単な実装

履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...

MySQLの暗黙的な変換について話す

作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...

React Nativeがシミュレータにリンクできない件について

React Native は、現在人気のオープンソース JavaScript ライブラリ React...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

CentOS 7 での Nginx ログタイミング分割の実装手順の詳細説明

1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...

MySQL sql_modeクエリと設定の詳細な説明

1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...

MySQLのREDOログとUNDOログの詳細な説明

MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...

jQuery における Ajax の関連知識ポイントのまとめ

序文JavaScriptを学ぶ学生は、 AJAX (非同期JavaScriptとxml) 変換は非同...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

Linux でのマルチスレッドおよびマルチプロセス クラッシュのシミュレーションに関する簡単な説明

結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...

iframe の src を about:blank に設定した後の詳細

iframe の src を 'about:blank' に設定した後、"...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...