JavaScript框架設(shè)計(jì)模式詳解

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

這篇文章主要介紹了javascript框架設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下

mvc

在這里插入圖片描述

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

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

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

是單向的

mvp

在這里插入圖片描述

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

mvvm

在這里插入圖片描述

mvvm的核心在于Model層，該層的核心是對(duì)于數(shù)據(jù)的操作，相對(duì)于mvp模式，我們的編碼重點(diǎn)已經(jīng)由對(duì)dom的操作轉(zhuǎn)化為對(duì)數(shù)據(jù)的操作。VM層是指將數(shù)據(jù)展示到view層以及view層的數(shù)據(jù)傳遞至Model層。vue就是viewModel的一個(gè)典型的示例

vue的來(lái)源

vue借鑒了react的virtual dom 技術(shù)和 angular的ng- 指令技術(shù)

spa mpa

MPA: mutilip page application 多頁(yè)面應(yīng)用

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

SPA：singal page application 單頁(yè)面應(yīng)用

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

createElement

var li = document.createElement(ele,src,content);
// ele    需要?jiǎng)?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ì)是一個(gè)構(gòu)造函數(shù)
Person === Person.prototype.constructor //true 類指向構(gòu)造函數(shù)的原型
person.hasOwnProperty(x); //true
person.hasOwnProperty(y); //false
person.hasOwnProperty(add); // false
構(gòu)造函數(shù)中的this指向?qū)嵗瘜?duì)象，所以x是person的屬性
而y和add相當(dāng)于是添加在 Person.prototype上
person.__proto__.hasOwnProperty(add)//true

類中的函數(shù)，相當(dāng)于是添加在該構(gòu)造函數(shù)的原型上