用JavaScript自己寫MVVM前端框架-VM實(shí)現(xiàn)篇

VincentFF 發(fā)布于2019-08-26 11:52 / 1239人閱讀

摘要：關(guān)于前端框架大家都有了解，或多或少的使用過，比如，，等等。那么你是否也想自己手寫一個(gè)的前端框架呢，我們從入手，手把手教你寫基于的前端框架，在整個(gè)編寫的過程中，希望大家學(xué)習(xí)更多，理解更多。本節(jié)我們以打包工具結(jié)合轉(zhuǎn)換插件實(shí)現(xiàn)數(shù)據(jù)的抽象。

關(guān)于MVVM前端框架大家都有了解，或多或少的使用過，比如Angular，React，VUE等等。那么你是否也想自己手寫一個(gè)MVVM的前端框架呢，我們從Virtual DOM入手，手把手教你寫基于Virtual DOM的前端框架，在整個(gè)編寫的過程中，希望大家學(xué)習(xí)更多，理解更多。
Github代碼： https://github.com/chalecao/v...

章節(jié)1: 認(rèn)識DOM與VirtualDOM

真實(shí)的DOM是網(wǎng)頁上的文檔對象模型，由一個(gè)個(gè)HTML元素節(jié)點(diǎn)構(gòu)成的樹形結(jié)構(gòu)。

如圖中所示，我們用JS創(chuàng)建出來的節(jié)點(diǎn)就是虛擬節(jié)點(diǎn)，Virtual node，當(dāng)然由這些虛擬節(jié)點(diǎn)vd構(gòu)成的樹形結(jié)構(gòu)就稱為虛擬DOM，Virtual DOM。我們本節(jié)課介紹的就是要如何創(chuàng)建這樣的虛擬DOM。

章節(jié)2: 如何構(gòu)建VirtualDOM

首先我們需要分析一個(gè)node節(jié)點(diǎn)的構(gòu)成，比如他的節(jié)點(diǎn)類型type，節(jié)點(diǎn)屬性的集合props，子元素的集合。這樣我們就可以抽象一個(gè)數(shù)據(jù)模型來表示這個(gè)節(jié)點(diǎn)。虛擬DOM是由許多虛擬節(jié)點(diǎn)按照層級結(jié)構(gòu)組合起來的，那么我們實(shí)現(xiàn)虛擬節(jié)點(diǎn)的數(shù)據(jù)模型抽象之后，就可以構(gòu)建虛擬DOM的數(shù)據(jù)模型抽象。

手工實(shí)現(xiàn)DOM模型構(gòu)建不太合理，我們可以借助JSX的工具來完成這個(gè)轉(zhuǎn)換。本節(jié)我們以rollup打包工具結(jié)合babel轉(zhuǎn)換插件實(shí)現(xiàn)數(shù)據(jù)的抽象。具體代碼配置參考：github中package.json配置和rollup.config.js

const vdom = (
    
        
            
            hello
        
    )

上面我們定義的vdom片段采用JSX處理器處理后如下面代碼：

/* fed123.com */
"use strict";

var vdom = vnode(
    "div",
    { id: "_Q5", style: "border: 1px solid red;" },
    vnode(
        "div",
        { style: "text-align: center; margin: 36px auto 18px; width: 160px; line-height: 0;" },
        vnode("img", { src: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png", height: "56", style: "border: none; margin: 8px 0px;" }),
        "google"
    )
);

是不是很好理解，JSX編譯后會(huì)自動(dòng)根據(jù)定義好的語法格式提取出元素的類型和屬性和子元素，并填入vnode方法中，我們只需要實(shí)現(xiàn)vnode方法就可以。我們可以編寫vnode方法用于構(gòu)建虛擬節(jié)點(diǎn)的模型，編寫createElement方法用于根據(jù)vnode模型創(chuàng)建元素。并且把vnode的子元素追加到父元素上，形成樹形層級結(jié)構(gòu)。

function vnode(type, props, ...children) {
    return { type, props, children };
  }

function createElement(node) {
    if (typeof node === "string") {
        return document.createTextNode(node);
    }
    const $el = document.createElement(node.type);
    node.children
        .map(createElement)
        .forEach($el.appendChild.bind($el));
    return $el;
}
document.body.appendChild(createElement(vdom));

這樣我們就完成了虛擬節(jié)點(diǎn)vnode和虛擬vDOM的構(gòu)建。

章節(jié)3: Diff VirtualDOM 與Update DOM

如圖展示了最簡單的一層DOM的結(jié)構(gòu)變化，無非也就這么幾種：增加元素節(jié)點(diǎn)、修改節(jié)點(diǎn)，刪除節(jié)點(diǎn)。我們可以基于DOM API來實(shí)現(xiàn)這些基本的操作，代碼如下：

function updateElement($parent, newnode, oldnode) {
    var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

    if (!newnode) {
        $parent.removeChild($parent.childNodes[index]);
    } else if (!oldnode) {
        $parent.appendChild(createElement(newnode));
    } else if (isChange(newnode, oldnode)) {
        $parent.replaceChild(createElement(newnode), $parent.childNodes[index]);
    } else if (newnode.type) {
        var newL = newnode.children.length;
        var oldL = oldnode.children.length;
        for (var i = 0; i < newL || i < oldL; i++) {
            updateElement($parent.childNodes[index], newnode.children[i], oldnode.children[i], i);
        }
    }
}

上面的代碼中我們實(shí)際上是把diff VirtualDOM 和update vdom放在一起處理了，采用了深度優(yōu)先遍歷的算法，從根節(jié)點(diǎn)優(yōu)先查到子節(jié)點(diǎn)，判斷子節(jié)點(diǎn)是否變化，有變化就進(jìn)行變更處理，然后再回到上級節(jié)點(diǎn)。

章節(jié)4: 處理DOM屬性和事件綁定

{
  type: “div”,
  props: {“style”: ”…”}, 
  children: [
      {type: “img”, props: {“src”: ”…”}
]}

上面我們抽取的vnode的模型中已經(jīng)把props拿出來了，我們這里需要把這些樣式設(shè)置到對應(yīng)元素上就好了。我們先看下元素的屬性變化有哪幾種情況：

如上，元素屬性可以增加可以減少，我們通過DOM API實(shí)現(xiàn)屬性的更新操作，代碼如下：

//handle props

function setProp($el, name, value) {
    if (typeof value == "boolean") {
        handleBoolProp($el, name, value);
    } else {
        $el.setAttribute(name, value);
    }
}
function handleBoolProp($el, name, value) {
    if (!!value) {
        $el.setAttribute(name, value);
        $el[name] = !!value;
    } else {
        $el[name] = !!value;
    }
}
function removeProp($el, name, value) {
    if (typeof value == "boolean") {
        $el[name] = false;
    }
    $el.removeAttribute(name, value);
}
function updateProp($el, name, newvalue, oldValue) {
    if (!newvalue) {
        removeProp($el, name, oldValue);
    } else if (!oldValue || newvalue != oldValue) {
        setProp($el, name, newvalue);
    }
}
function updateProps($el) {
    var newprops = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

    var _props = Object.assign({}, newprops, oldProps);
    Object.keys(_props).forEach(function (key) {
        updateProp($el, key, newprops[key], oldProps[key]);
    });
}

GPU云服務(wù)器云服務(wù)器 javascript前端框架用js寫自己的網(wǎng)站 mvvm框架的avalon javascript_mvvm

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107714.html

發(fā)表評論

登陸后可評論

0條評論

VincentFF

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow文檔

閱讀 805·2023-04-25 15:13
高并發(fā)下秒殺商品，必須知道的9個(gè)細(xì)節(jié)

閱讀 1425·2021-11-22 12:03
LeetCode 563 二叉樹的坡度[dfs] HERODING的LeetCode之路

閱讀 844·2021-11-19 09:40
#黑五#bacloud：全場KVM VPS一次性5折，獨(dú)立服務(wù)器6折優(yōu)惠，美國/荷蘭/立陶宛機(jī)房

閱讀 1929·2021-11-17 09:38
快云科技: 11.11鉅惠美國云機(jī)2H5G年付148僅有40臺，云服務(wù)器全場7折，香港云服務(wù)器年付

閱讀 1739·2021-11-08 13:18
C++仍然是最好的語言

閱讀 675·2021-09-02 15:15
vue中如何實(shí)現(xiàn)后臺管理系統(tǒng)的權(quán)限控制

閱讀 1791·2019-08-30 15:54
H5 input[type='date'] 優(yōu)化 pc端和移動(dòng)端的使用

閱讀 2661·2019-08-30 11:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用JavaScript自己寫MVVM前端框架-VM實(shí)現(xiàn)篇

相關(guān)文章

**利用 JavaScript 數(shù)據(jù)綁定實(shí)現(xiàn)一個(gè)簡單的 MVVM 庫**

**基于Vue的MVVM學(xué)習(xí)筆記**

**【教學(xué)向】150行代碼教你實(shí)現(xiàn)一個(gè)低配版的MVVM庫（1）- 原理篇**

JavaScript 進(jìn)階之深入理解數(shù)據(jù)雙向綁定

React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之一：React 三宗罪）

發(fā)表評論

0條評論

VincentFF

男|高級講師

TA的文章

tensorflow文檔

高并發(fā)下秒殺商品，必須知道的9個(gè)細(xì)節(jié)

LeetCode 563 二叉樹的坡度[dfs] HERODING的LeetCode之路

#黑五#bacloud：全場KVM VPS一次性5折，獨(dú)立服務(wù)器6折優(yōu)惠，美國/荷蘭/立陶宛機(jī)房

快云科技: 11.11鉅惠美國云機(jī)2H5G年付148僅有40臺，云服務(wù)器全場7折，香港云服務(wù)器年付

C++仍然是最好的語言

vue中如何實(shí)現(xiàn)后臺管理系統(tǒng)的權(quán)限控制

H5 input[type='date'] 優(yōu)化 pc端和移動(dòng)端的使用

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用JavaScript自己寫MVVM前端框架-VM實(shí)現(xiàn)篇

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！