目錄

• mvc
• mvp
• mvvm
• 的來源
• spa mpa
• createElement
• class
• 總結

mvc

Model（模型） - 模型代表一個存取資料的物件或 POJO。它也可以帶有邏輯，在資料變化時更新控制器。

View（檢視） - 檢視代表模型包含的資料的視覺化。

Controller（控制器） - 控制器作用於模型和檢視上。它控制資料流向模型物件，並在資料變化時更新檢視。它使檢視與模型分離開。

是單向的

mvp

mvp的核心在於presenter層，該層的核心是對於dom元素的操作，以實現列表頁為例，presenter主要是通過迴圈將Model中的資料與html的標籤進行組合，新增到View中去。

mvvm

mvvm的核心在於Model層，該層的核心是對於資料的操作，相對於mvp模式，我們的編碼重點已經由對dom的操作轉化為對資料的操作。VM層是指將資料展示到view層以及view層的資料傳遞至Model層。vue就是viewModel的一個典型的示例

vue的來源

vue借鑑了react的virtual dom 技術和 angular的ng- 指令技術

spa mpa

MPA: mutilip page application 多頁面應用

特點：首次載入比較快，後期載入比較慢。前期開發成本低，後期維護成本高。

SPA：singal page application 單頁面應用

首次載入比較慢，後期載入比較快。前期開發成本高，後期維護成本低。（主要複用得多）

createElement

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>

class

class Person {
   constructor(x,y) {
      this.x = x;
   }
   add() {
      console.log(this.x);
   }
}
var person = new Person(1,2);
typeof Person // function 類本質是一個建構函式
Person === Person.prototype.constructor //true 類指向建構函式的原型
person.hasOwnProperty(xhttp://www.cppcns.com
 
); //true
person.hasOwnProperty(y); //false
person.hasOwnProperty(add); // false
建構函式中的this指向例項化物件，所以x是person的屬性
而y和add相當於http://www.cppcns.com是新增在 Person.prototype上
person.__proto__.hasOwnProperty(add)//true

類中的函式，相當於是新增在該建構函式的原型上

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！