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に追加するのと同じです。

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