JavaScript框架設計模式詳解

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

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

mvc

在這里插入圖片描述

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

View（視圖） - 視圖代表模型包含的數(shù)據(jù)的可視化。

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

是單向的

mvp

在這里插入圖片描述

mvp的核心在于presenter層，該層的核心是對于dom元素的操作，以jquery實現(xiàn)列表頁為例，presenter主要是通過循環(huán)將Model中的數(shù)據(jù)與html的標簽進行組合，添加到View中去。

mvvm

在這里插入圖片描述

mvvm的核心在于Model層，該層的核心是對于數(shù)據(jù)的操作，相對于mvp模式，我們的編碼重點已經(jīng)由對dom的操作轉(zhuǎn)化為對數(shù)據(jù)的操作。VM層是指將數(shù)據(jù)展示到view層以及view層的數(shù)據(jù)傳遞至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  元素中的內(nèi)容
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 類本質(zhì)是一個構造函數(shù)
Person === Person.prototype.constructor //true 類指向構造函數(shù)的原型
person.hasOwnProperty(x); //true
person.hasOwnProperty(y); //false
person.hasOwnProperty(add); // false
構造函數(shù)中的this指向?qū)嵗瘜ο?，所以x是person的屬性
而y和add相當于是添加在 Person.prototype上
person.__proto__.hasOwnProperty(add)//true

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