JavaScript框架設計模式詳解

更新時間：2021年09月01日 14:19:40 作者：just today

這篇文章主要介紹了javascript框架設計模式,結合實例形式分析了javascript模板方法模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下

mvc

在這里插入圖片描述

Model（模型） - 模型代表一個存取數據的對象或 JAVA POJO。它也可以帶有邏輯，在數據變化時更新控制器。

View（視圖） - 視圖代表模型包含的數據的可視化。

Controller（控制器） - 控制器作用于模型和視圖上。它控制數據流向模型對象，并在數據變化時更新視圖。它使視圖與模型分離開。

是單向的

mvp

在這里插入圖片描述

mvp的核心在于presenter層，該層的核心是對于dom元素的操作，以jquery實現(xiàn)列表頁為例，presenter主要是通過循環(huán)將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 多頁面應用

特點：首次加載比較快，后期加載比較慢。前期開發(fā)成本低，后期維護成本高。

SPA：singal page application 單頁面應用

首次加載比較慢，后期加載比較快。前期開發(fā)成本高，后期維護成本低。（主要復用得多）

createElement

var li = document.createElement(ele,src,content);
// ele    需要創(chuàng)建的元素
// 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(x); //true
person.hasOwnProperty(y); //false
person.hasOwnProperty(add); // false
構造函數中的this指向實例化對象，所以x是person的屬性
而y和add相當于是添加在 Person.prototype上
person.__proto__.hasOwnProperty(add)//true

類中的函數，相當于是添加在該構造函數的原型上