成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JS每日一題：簡述一下Vue.js的template編譯過程？

NicolasHe / 430人閱讀

摘要：問簡述一下的編譯過程先上一張圖大致看一下整個(gè)流程從上圖中我們可以看到是從后開始進(jìn)行中整體邏輯分為三個(gè)部分解析器將模板字符串轉(zhuǎn)換成優(yōu)化器對(duì)進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬的渲染優(yōu)化代碼生成器使用生成函數(shù)代碼字符串開始前先解釋一下抽象

20190215問

簡述一下Vue.js的template編譯過程？

先上一張圖大致看一下整個(gè)流程

從上圖中我們可以看到compile是從mount后開始進(jìn)行中, 整體邏輯分為三個(gè)部分

解析器(parse) - 將 模板字符串 轉(zhuǎn)換成 element ASTs

優(yōu)化器(optimize) - 對(duì) AST 進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬DOM的渲染優(yōu)化

代碼生成器(generate) - 使用 element ASTs 生成 render 函數(shù)代碼字符串

開始前先解釋一下AST

AST(abstract syntax tree 抽象語法樹), 是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式

從代碼上簡單理解一下

JS每日一題

//轉(zhuǎn)成AST后會(huì)得到如下格式
[
  {
    "type": "tag",
    "name": "div",
    "attribs": {
      "class": "name"
    },
    "children": [
      {
        "data": "JS每日一題",
        "type": "text",
        "next": null,
        "startIndex": 18,
        "prev": null,
        "parent": "[Circular ~.0]",
        "endIndex": 24
      }
    ],
    "next": null,
    "startIndex": 0,
    "prev": null,
    "parent": null,
    "endIndex": 30
  }
]

AST會(huì)經(jīng)過generate得到render函數(shù)，render的返回值是VNode, VNode的源碼可以見 https://github.com/vuejs/vue/...

#### 解析器(parse)

源碼地址 https://github.com/vuejs/vue/...

parse 的目標(biāo)是把 template 模板字符串轉(zhuǎn)換成 AST 樹，它是一種用 JavaScript 對(duì)象的形式來描述整個(gè)模板。那么整個(gè) parse 的過程是利用正則表達(dá)式順序解析模板，當(dāng)解析到開始標(biāo)簽、閉合標(biāo)簽、文本的時(shí)候都會(huì)分別執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)，來達(dá)到構(gòu)造 AST 樹的目的

優(yōu)化器(optimize)

源碼地址 https://github.com/vuejs/vue/...

通過 optimize 把整個(gè) AST 樹中的每一個(gè) AST 元素節(jié)點(diǎn)標(biāo)記了 static 和 staticRoot, optimize 的過程，就是深度遍歷這個(gè) AST 樹，去檢測它的每一顆子樹是不是靜態(tài)節(jié)點(diǎn)，如果是靜態(tài)節(jié)點(diǎn)則它們生成 DOM 永遠(yuǎn)不需要改變

代碼生成器(generate)

源碼地址
https://github.com/vuejs/vue/...

把優(yōu)化后的 AST 樹轉(zhuǎn)換成可執(zhí)行的代碼

總結(jié)

首先通過parse將template解析成AST,其次optimize對(duì)解析出來的AST進(jìn)行標(biāo)記，最后generate將優(yōu)化后的AST轉(zhuǎn)換成可執(zhí)行的代碼

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101786.html

相關(guān)文章

  • JS每日一題: 請(qǐng)簡述一下vuex實(shí)現(xiàn)原理

    摘要：給的實(shí)例注入一個(gè)的屬性，這也就是為什么我們?cè)诘慕M件中可以通過訪問到的各種數(shù)據(jù)和狀態(tài)源碼位置，是怎么實(shí)現(xiàn)的源碼位置是對(duì)的的初始化，它接受個(gè)參數(shù)，為當(dāng)前實(shí)例，為的，為執(zhí)行的回調(diào)函數(shù)，為當(dāng)前模塊的路徑。 20190221 請(qǐng)簡述一下vuex實(shí)現(xiàn)原理 對(duì)vuex基礎(chǔ)概念有不懂的可以點(diǎn)這里 vuex實(shí)現(xiàn)原理我們簡單過一遍源碼 地址 https://github.com/vuejs/vuex 首...

    JohnLui 評(píng)論0 收藏0

  • JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

    摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實(shí)現(xiàn)的其他事插件是一個(gè)具有屬性的對(duì)象。 20190327期 Webpack有哪些常見的Plugin？他們是解決什么問題的 定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實(shí)現(xiàn)的其他事 webpack 插件是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象。appl...

    songze 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

    zacklee 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

    lbool 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

    Alex 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<