資訊專欄INFORMATION COLUMN
摘要：目錄前言問題的提出模板引擎和結(jié)合的實現(xiàn)編譯原理相關(guān)模版引擎的詞法分析語法分析與抽象語法樹代碼生成完整的結(jié)語前言本文嘗試構(gòu)建一個前端模板引擎，并且把這個引擎和進(jìn)行結(jié)合。于是就構(gòu)思了一個方案，在前端模板引擎上做手腳。
目錄作者：戴嘉華
轉(zhuǎn)載請注明出處并保留原文鏈接（ https://github.com/livoras/blog/issues/14 ）和作者信息。
前言
問題的提出
模板引擎和 Virtual-DOM 結(jié)合 —— Virtual-Template
Virtual-Template 的實現(xiàn)
4.1 編譯原理相關(guān)
4.2 模版引擎的EBNF
4.3 詞法分析
4.4 語法分析與抽象語法樹
4.5 代碼生成
完整的 Virtual-Template
結(jié)語
1. 前言本文嘗試構(gòu)建一個 Web 前端模板引擎，并且把這個引擎和 Virtual-DOM 進(jìn)行結(jié)合。把傳統(tǒng)模板引擎編譯成 HTML 字符串的方式改進(jìn)為編譯成 Virtual-DOM 的 render 函數(shù)，可以有效地結(jié)合模板引擎的便利性和 Virtual-DOM 的性能。類似 ReactJS 中的 JSX。
閱讀本文需要一些關(guān)于 ReactJS 實現(xiàn)原理或者 Virtual-DOM 的相關(guān)知識，可以先閱讀這篇博客：深度剖析：如何實現(xiàn)一個 Virtual DOM 算法 ， 進(jìn)行相關(guān)知識的了解。
同時還需要對編譯原理相關(guān)知識有基本的了解，包括 EBNF，LL(1)，遞歸下降的方法等。
2. 問題的提出本人在就職的公司維護(hù)一個比較樸素的系統(tǒng)，前端渲染有兩種方式：
后臺直接根據(jù)模板和數(shù)據(jù)直接把頁面吐到前端。
后臺只吐數(shù)據(jù)，前端用前端模板引擎渲染數(shù)據(jù)，動態(tài)塞到頁面。
當(dāng)數(shù)據(jù)狀態(tài)變更的時候，前端用 jQuery 修改頁面元素狀態(tài)，或者把局部界面用模板引擎重新渲染一遍。當(dāng)頁面狀態(tài)很多的時候，用 jQuery 代碼中會就混雜著很多的 DOM 操作，編碼復(fù)雜且不便于維護(hù)；而重新渲染雖然省事，但是會導(dǎo)致一些性能、焦點消失的問題（具體可以看這篇博客介紹）。
因為習(xí)慣了 MVVM 數(shù)據(jù)綁定的編碼方式，對于用 jQuery 選擇器修改 wordings 等細(xì)枝末節(jié)的勞力操作個人感覺不甚習(xí)慣。于是就構(gòu)思能否在這種樸素的編碼方式上做一些改進(jìn)，解放雙手，提升開發(fā)效率。其實只要加入數(shù)據(jù)狀態(tài) -> 視圖的 one-way data-binding 開發(fā)效率就會有較大的提升。
而這種已經(jīng)在運作多年的多人維護(hù)系統(tǒng)，引入新的 MVVM 框架并不是一個非常好的選擇，在兼容性和風(fēng)險規(guī)避上大家都有諸多的考慮。于是就構(gòu)思了一個方案，在前端模板引擎上做手腳。可以在幾乎零學(xué)習(xí)成本的情況下，做到 one-way data-binding，大量減少 jQuery DOM 操作，提升開發(fā)效率。
3. 模板引擎和 Virtual-DOM 結(jié)合 —— Virtual-Template考慮以下模板語法：
{title}
{each users as user i}
- NO.{i + 1} - {user.name} {if user.isAdmin} I am admin {elseif user.isAuthor} I am author {else} I am nobody {/if}
{/each}
這只一個普通的模板引擎語法（類似 artTemplate），支持循環(huán)語句（each）、條件語句（if elseif else ..）、和文本填充（{...}）， 應(yīng)該比較容易看懂，這里就不解釋。當(dāng)用下面數(shù)據(jù)渲染該模板的時候：
var data = {
title: "Users List",
users: [
{id: "user0", name: "Jerry", isAdmin: true},
{id: "user1", name: "Lucy", isAuthor: true},
{id: "user2", name: "Tomy"}
]
}
會得到下面的 HTML 字符串：
Users List
- NO.1 - Jerry I am admin
- NO.2 - Lucy I am author
- NO.3 - Tomy I am nobody
把這個字符串塞入文檔當(dāng)中就可以生成 DOM 。但是問題是如果數(shù)據(jù)變更了，例如data.title由Users List修改成Users，你只能用 jQuery 修改 DOM 或者直接重新渲染一個新的字符串塞入文檔當(dāng)中。
然而我們可以參考 ReactJS 的 JSX 的做法，不把模板編譯成 HTML， 而是把模板編譯成一個返回 Virtual-DOM 的 render 函數(shù)。render 函數(shù)會根據(jù)傳入的 state 不同返回不一樣的 Virtual-DOM ，然后就可以根據(jù) Virtual-DOM 算法進(jìn)行 diff 和 patch：
// setup codes // ... var render = template(tplString) // template 把模板編譯成 render 函數(shù)而不是 HTML 字符串 var root1 = render(state1) // 根據(jù)初始狀態(tài)返回的 virtual-dom var dom = root.render() // 根據(jù) virtual-dom 構(gòu)建一個真正的 dom 元素 document.body.appendChild(dom) var root2 = render(state2) // 狀態(tài)變更，重新渲染另外一個 virtual-dom var patches = diff(root1, root2) // virtual-dom 的 diff 算法 patch(dom, patches) // 更新真正的 dom 元素
這樣做好處就是：既保留了原來模板引擎的語法，又結(jié)合了 Virtual-DOM 特性：當(dāng)狀態(tài)改變的時候不再需要 jQuery 了，而是跑一遍 Virtual-DOM 算法把真正的 DOM 給patch了，達(dá)到了 one-way data-binding 的效果，總結(jié)流程就是：
先把模板編譯成一個 render 函數(shù)，這個函數(shù)會根據(jù)數(shù)據(jù)狀態(tài)返回 Virtual-DOM
用 render 函數(shù)構(gòu)建 Virtual-DOM；并根據(jù)這個 Virtual-DOM 構(gòu)建真正的 DOM 元素，塞入文檔當(dāng)中
當(dāng)數(shù)據(jù)變更的時候，再用 render 函數(shù)渲染一個新的 Virtual-DOM
新舊的 Virtual-DOM 進(jìn)行 diff，然后 patch 已經(jīng)在文檔中的 DOM 元素
（恩，其實就是一個類似于 JSX 的東西）
這里重點就是，如何能把模板語法編譯成一個能夠返回 Virtual-DOM 的 render 函數(shù)？例如上面的模板引擎，不再返回 HTML 字符串了，而是返回一個像下面那樣的 render 函數(shù)：
function render (state) {
return el("div", {}, [
el("h1", {}, [state.title]),
el("ul", {}, state.users.map(function (user, i) {
return el("li", {"class": "user-item"}, [
el("img", {"src": "/avatars/" + user.id}, []),
el("span", {}, ["No." + (i + 1) + " - " + user.name],
(user.isAdmin
? "I am admin"
: uesr.isAuthor
? "I am author"
: "")
])
}))
])
}
前面的模板和這個 render 函數(shù)在語義上是一樣的，只要能夠?qū)崿F(xiàn)“模板 -> render 函數(shù)”這個轉(zhuǎn)換，就可以跑上面所說的 Virtual-DOM 的算法流程，這樣就把模板引擎和 Virtual-DOM結(jié)合起來。為了方便起見，這里把這個結(jié)合體稱為 Virtual-Template 。
4. Virtual-Template 的實現(xiàn)網(wǎng)上關(guān)于模板引擎的實現(xiàn)原理介紹非常多。如果語法不是太復(fù)雜的話，可以直接通過對語法標(biāo)簽和代碼片段進(jìn)行分割，識別語法標(biāo)簽內(nèi)的內(nèi)容（循環(huán)、條件語句）然后拼裝代碼，具體可以參考這篇博客。其實就是正則表達(dá)式使用和字符串的操作，不需要對語法標(biāo)簽以外的內(nèi)容做識別。
但是對于和 HTML 語法已經(jīng)差別較大的模板語法（例如 Jade ），單純的正則和字符串操作已經(jīng)不夠用了，因為其語法標(biāo)簽以外的代碼片段根本不是合法的 HTML 。這種情況下一般需要編譯器相關(guān)知識發(fā)揮用途：模板引擎本質(zhì)上就是把一種語言編譯成另外一種語言。
而對于 Virtual-Template 的情況，雖然其除了語法標(biāo)簽以外的代碼都是合法的 HTML 字符串，但是我們的目的是把它編譯成返回 Virtual-DOM 的 render 函數(shù)，在構(gòu)建 Virtual-DOM 的時候，你需要知道元素的 tagName、屬性等信息，所以就需要對 HTML 元素本身做識別。
因此 Virtual-Template 也需要借助編譯原理（編譯器前端）相關(guān)的知識，把一種語言（模板語法）編譯成另外一種語言（一個叫 render 的 JavaScript 函數(shù)）。
4.1 編譯原理相關(guān)CS 本科都教過編譯原理，本文會用到編譯器前端的一些概念。在實現(xiàn)模板到 render 函數(shù)的過程中，要經(jīng)過幾個步驟：
詞法分析：把輸入的模板分割成詞法單元（tokens stream）
語法分析：讀入 tokens stream ，根據(jù)文法規(guī)則轉(zhuǎn)化成抽象語法樹（Abstract Syntax Tree）
代碼生成：遍歷 AST，生成 render 函數(shù)體代碼
所以這個過程可以分成幾個主要模塊：tokenizer（詞法分析器），parser（語法分析器），codegen（代碼生成）。在此之前，還需要對模板的語法做文法定義，這是構(gòu)建詞法分析和語法分析的基礎(chǔ)。
4.2 模板引擎的 EBNF在計算機(jī)領(lǐng)域，對某種語言進(jìn)行語法定義的時候，幾乎都會用到 EBNF（擴(kuò)展的巴科斯范式）。在定義模板引擎的語法的時候，也可以用到 EBNF。Virtual-Template 擁有非常簡單的語法規(guī)則，支持上面所提到的 each、if 等語法：
{each users as user i }
{user.name}
...
{/each}
{if user.isAdmin}
...
{elseif user.isAuthor}
...
{elseif user.isXXX}
...
{/if}
對于 {user.name} 這樣的表達(dá)式插入，可以簡單地看成是字符串，在代碼生成的時候再做處理。這樣我們的詞法和語法分析就會簡化很多，基本只需要對 each、if、HTML 元素進(jìn)行處理。
Virtual-Template 的 EBNF：
Stat -> Frag Stat | ε
Frag -> IfStat | EachStat | Node | text
IfStat -> "{if ...}" Stat {ElseIf} [Else] "{/if}"
ElseIf -> "{elseif ...}" Stat
Else -> "{else}" Stat|e
EachStat -> "{each ...}" Stat "{/each}"
Node -> OpenTag NodeTail
OpenTag -> "/[w-d]+/" {Attr}
NodeTail -> ">" Stat "/<[wd]+>/" | "/>"
Attr -> "/[w-d]/+" Value
Value -> "=" "/"[sS]+"/" | ε
可以把該文法轉(zhuǎn)換成 LL(1) 文法，方便我們寫遞歸下降的 parser。這個語法還是比較簡單的，沒有出現(xiàn)復(fù)雜的左遞歸情況。簡單進(jìn)行展開和提取左公因子消除沖突獲得下面的 LL(1) 文法。
LL(1) 文法：
Stat -> Frag Stat | ε
Frag -> IfStat | EachStat | Node | text
IfStat -> "{if ...}" Stat ElseIfs Else "{/if}"
ElseIfs -> ElseIf ElseIfs | ε
ElseIf -> "{elseif ...}" Stat
Else -> "{else}" Stat | ε
EachStat -> "{each ...}" Stat "{/each}"
Node -> OpenTag NodeTail
OpenTag -> "/[w-d]+/" Attrs
NodeTail -> ">" Stat "/<[wd]+>/" | "/>"
Attrs -> Attr Attrs | ε
Attr -> "/[w-d]/+" Value
Value -> "=" "/"[sS]+"/" | ε
4.3 詞法分析
根據(jù)上面獲得的 EBNF ，單引號包含的都是非終結(jié)符，可以知道有以下幾種詞法單元：
module.exports = {
TK_TEXT: 1, // 文本節(jié)點
TK_IF: 2, // {if ...}
TK_END_IF: 3, // {/if}
TK_ELSE_IF: 4, // {elseif ...}
TK_ELSE: 5, // {else}
TK_EACH: 6, // {each ...}
TK_END_EACH: 7, // {/each}
TK_GT: 8, // >
TK_SLASH_GT: 9, // />
TK_TAG_NAME: 10, // " }
{ type: 1, label: "NO." }
{ type: 1, label: "{i + 1} - " }
{ type: 1, label: "{user.name}" }
{ type: 13, label: "" }
{ type: 2, label: "{if user.isAdmin}" }
{ type: 1, label: "I am admin
" }
{ type: 4, label: "{elseif user.isAuthor}" }
{ type: 1, label: "I am author
" }
{ type: 5, label: "{else}" }
{ type: 1, label: "I am nobody
" }
{ type: 3, label: "{/if}" }
{ type: 13, label: "" }
{ type: 7, label: "{/each}" }
{ type: 13, label: "" }
{ type: 13, label: " 拿到 tokens 以后就可以就可以按順序讀取 token，根據(jù)模板的 LL(1) 文法進(jìn)行語法分析。語法分析器，也就是 parser，一般可以采取遞歸下降的方式來進(jìn)行編寫。LL(1) 不允許語法中有沖突（ conflicts )，需要對文法中的產(chǎn)生式求解 FIRST 和 FOLLOW 集。
FIRST(Stat) = {TK_IF, TK_EACH, TK_TAG_NAME, TK_TEXT}
FOLLOW(Stat) = {TK_ELSE_IF, TK_END_IF, TK_ELSE, TK_END_EACH, TK_CLOSE_TAG, TK_EOF}
FIRST(Frag) = {TK_IF, TK_EACH, TK_TAG_NAME, TK_TEXT}
FIRST(IfStat) = {TK_IF}
FIRST(ElseIfs) = {TK_ELSE_IF}
FOLLOW(ElseIfs) = {TK_ELSE, TK_ELSE}
FIRST(ElseIf) = {TK_ELSE_IF}
FIRST(Else) = {TK_ELSE}
FOLLOW(Else) = {TK_END_IF}
FIRST(EachStat) = {TK_EACH}
FIRST(OpenTag) = {TK_TAG_NAME}
FIRST(NodeTail) = {TK_GT, TK_SLASH_GT}
FIRST(Attrs) = {TK_ATTR_NAME}
FOLLOW(Attrs) = {TK_GT, TK_SLASH_GT}
FIRST(Value) = {TK_ATTR_EQUAL}
FOLLOW(Value) = {TK_ATTR_NAME, TK_GT, TK_SLASH_GT}
上面只求出了一些必要的 FIRST 和 FOLLOW 集，對于一些不需要預(yù)測的產(chǎn)生式就省略求解了。有了 FIRST 和 FOLLOW 集，剩下的編寫遞歸下降的 parser 只是填空式的體力活。
var Tokenizer = require("./tokenizer")
var types = require("./tokentypes")
function Parser (input) {
this.tokens = new Tokenizer(input)
this.parse()
}
var pp = Parser.prototype
pp.is = function (type) {
return (this.tokens.peekToken().type === type)
}
pp.parse = function () {
this.tokens.index = 0
this.parseStat()
this.eat(types.TK_EOF)
}
pp.parseStat = function () {
if (
this.is(types.TK_IF) ||
this.is(types.TK_EACH) ||
this.is(types.TK_TAG_NAME) ||
this.is(types.TK_TEXT)
) {
this.parseFrag()
this.parseStat()
} else {
// end
}
}
pp.parseFrag = function () {
if (this.is(types.TK_IF)) return this.parseIfStat()
else if (this.is(types.TK_EACH)) return this.parseEachStat()
else if (this.is(types.TK_TAG_NAME)) return this.parseNode()
else if (this.is(types.TK_TEXT)) {
var token = this.eat(types.TK_TEXT)
return token.label
} else {
this.parseError("parseFrag")
}
}
// ...
完整的 parser 可以查看 parser.js。
抽象語法樹（Abstract Syntax Tree）遞歸下降進(jìn)行語法分析的時候，可以同時構(gòu)建模版語法的樹狀表示結(jié)構(gòu)——抽象語法樹，模板語法有以下的抽象語法樹的節(jié)點類型：
Stat: {
type: "Stat"
members: [IfStat | EachStat | Node | text, ...]
}
IfStat: {
type: "IfStat"
label: ,
body: Stat
elifs: [ElseIf, ...]
elsebody: Stat
}
ElseIf: {
type: "ElseIf"
label: ,
body: Stat
}
EachStat: {
type: "EachStat"
label: ,
body: Stat
}
Node: {
type: "Node"
name: ,
attributes:
因為 JavaScript 語法的靈活性，可以用字面量的 JavaScript 對象和數(shù)組直接表示語法樹的樹狀結(jié)構(gòu)。語法樹構(gòu)的建過程可以在語法分析階段同時進(jìn)行。最后，可以獲取到如下圖的語法樹結(jié)構(gòu)：
完整的語法樹構(gòu)建過程，可以查看 parser.js 。
從模版字符串到 tokens stream 再到 AST ，這個過程只需要對文本進(jìn)行一次掃描，整個算法的時間復(fù)雜度為 O(n)。
至此，Virtual-Template 的編譯器前端已經(jīng)完成了。
4.5 代碼生成JavaScript 從字符串中構(gòu)建一個新的函數(shù)可以直接用 new Function 即可。例如：
var newFunc = new Function("a", "b", "return a + b")
newFunc(1, 2) // => 3
這里需要通過語法樹來還原 render 函數(shù)的函數(shù)體的內(nèi)容，也就是 new Function 的第三個參數(shù)。
拿到模版語法的抽象語法樹以后，生成相應(yīng)的 JavaScript 函數(shù)代碼就很好辦了。只需要地對生成的 AST 進(jìn)行深度優(yōu)先遍歷，遍歷的同時維護(hù)一個數(shù)組，這個數(shù)組保存著 render 函數(shù)的每一行的代碼：
function CodeGen (ast) {
this.lines = []
this.walk(ast)
this.body = this.lines.join("
")
}
var pp = CodeGen.prototype
pp.walk = function (node) {
if (node.type === "IfStat") {
this.genIfStat(node)
} else if (node.type === "Stat") {
this.genStat(node)
} else if (node.type === "EachStat") {
...
}
...
}
pp.genIfStat = function (node) {
var expr = node.label.replace(/(^{s*ifs*)|(s*}$)/g, "")
this.lines.push("if (" + expr + ") {")
if (node.body) {
this.walk(node.body)
}
if (node.elseifs) {
var self = this
_.each(node.elseifs, function (elseif) {
self.walk(elseif)
})
}
if (node.elsebody) {
this.lines.push(indent + "} else {")
this.walk(node.elsebody)
}
this.lines.push("}")
}
// ...
CodeGen 類接受已經(jīng)生成的 AST 的根節(jié)點，然后 this.walk(ast) 會對不同的節(jié)點類型進(jìn)行解析。例如對于 IfStat 類型的節(jié)點：
{
type: "IfStat",
label: "{if user.isAdmin}"
body: {...}
elseifs: [{...}, {...}, {...}],
elsebody: {...}
}
genIfStat 會把 "{if user.isAdmin}" 中的 user.isAdmin 抽離出來，然后拼接 JavaScript 的 if 語句，push 到 this.lines 中：
var expr = node.label.replace(/(^{s*ifs*)|(s*}$)/g, "")
this.lines.push("if (" + expr + ") {")
然后會遞歸的對 elseifs 和 elsebody 進(jìn)行遍歷和解析，最后給 if 語句補上 }。所以如果 elseifs 和 elsebody 都不存在，this.lines 上就會有：
["if (user.isAdmin) {", , "}"]
其它的結(jié)構(gòu)和 IfStat 同理的解析和拼接方式，例如 EachStat:
pp.genEachStat = function (node) {
var expr = node.label.replace(/(^{s*eachs*)|(s*}$)/g, "")
var tokens = expr.split(/s+/)
var list = tokens[0]
var item = tokens[2]
var key = tokens[3]
this.lines.push(
"for (var " + key + " = 0, len = " + list + ".length; " + key + " < len; " + key + "++) {"
)
this.lines.push("var " + item + " = " + list + "[" + key + "];")
if (node.body) {
this.walk(node.body)
}
this.lines.push("}")
}
最后遞歸構(gòu)造完成以后，this.lines.join(" ") 就把整個函數(shù)的體構(gòu)建起來：
if (user.isAdmin) {
...
}
for (var ...) {
...
}
這時候 render 函數(shù)的函數(shù)體就有了，直接通過 new Function 構(gòu)建 render 函數(shù)：
var code = new CodeGen(ast)
var render = new Function("el", "data", code.body)
el 是需要注入的構(gòu)建 Virtual-DOM 的構(gòu)建函數(shù)，data 需要渲染的數(shù)據(jù)狀態(tài)：
var svd = require("simple-virtual-dom")
var root = render(svd.el, {users: [{isAdmin: true}]})
從模版 -> Virtual-DOM 的 render 函數(shù) -> Virtual-DOM 的過程就完成了。完整的代碼生成的過程可以參考：codegen.js
5. 完整的 Virtual-Template其實拿到 render 函數(shù)以后，每次手動進(jìn)行 diff 和 patch 都是重復(fù)操作。可以把 diff 和 patch 也封裝起來，只暴露一個 setData 的 API 。每次數(shù)據(jù)變更的時候，只需要 setData 就可以更新到 DOM 元素上（就像 ReactJS 的 setState）：
// vTemplate.compile 編譯模版字符串，返回一個函數(shù)
var usersListTpl = vTemplate.compile(tplStr)
// userListTpl 傳入初始數(shù)據(jù)狀態(tài)，返回一個實例
var usersList = usersListTpl({
title: "Users List",
users: [
{id: "user0", name: "Jerry", isAdmin: true},
{id: "user1", name: "Lucy", isAuthor: true},
{id: "user2", name: "Tomy"}
]
})
// 返回的實例有 dom 元素和一個 setData 的 API
document.appendChild(usersList.dom)
// 需要變更數(shù)據(jù)的時候，setData 一下即可
usersList.setData({
title: "Users",
users: [
{id: "user1", name: "Lucy", isAuthor: true},
{id: "user2", name: "Tomy"}
]
})
完整的 Virtual-Template 源碼托管在 github 。
6. 結(jié)語這個過程其實和 ReactJS 的 JSX 差不多。就拿 Babel 的 JSX 語法實現(xiàn)而言，它的 parser 叫 babylon。而 babylon 基于一個叫 acorn 的 JavaScript 編寫的 JavaScript 解釋器和它的 JSX 插件 acorn-jsx。其實就是利用 acorn 把文本分割成 tokens，而 JSX 語法分析部分由 acorn-jsx 完成。
Virtual-Template 還不能應(yīng)用于實際的生產(chǎn)環(huán)境，需要完善的東西還有很多。本文記錄基本的分析和實現(xiàn)的過程，也有助于更好地理解和學(xué)習(xí) ReactJS 的實現(xiàn)。
（全文完）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78656.html
摘要：本文所實現(xiàn)的完整代碼存放在。這就是所謂的算法。兩個樹的完全的算法是一個時間復(fù)雜度為的問題。如果有差異的話就記錄到一個對象里面。如和的不同，會被所替代。這牽涉到兩個列表的對比算法，需要另外起一個小節(jié)來討論。 作者：戴嘉華 轉(zhuǎn)載請注明出處并保留原文鏈接（ https://github.com/livoras/blog/issues/13 ）和作者信息。 目錄： 1 前言 2 對前端應(yīng)用狀...
摘要：是谷歌的移動框架，可以快速在和上構(gòu)建高質(zhì)量的原生用戶界面。在全世界好了這些，大家早就知道了，來點實在的話說隔壁師兄，閑魚是最早一批與谷歌展開合作，并在重要的商品詳情頁中使用技術(shù)上線的。一切皆來自的組件皆來自。是狀態(tài)不可變的稱為無狀態(tài)。 前言 要說2018年最火的跨端技術(shù)，當(dāng)屬于 Flutter 莫屬，應(yīng)該沒人質(zhì)疑吧。一個新的技術(shù)的趨勢，最明顯的特征，就是它一定想把前浪拍死在沙灘上。這個...
摘要：是谷歌的移動框架，可以快速在和上構(gòu)建高質(zhì)量的原生用戶界面。在全世界好了這些，大家早就知道了，來點實在的話說隔壁師兄，閑魚是最早一批與谷歌展開合作，并在重要的商品詳情頁中使用技術(shù)上線的。一切皆來自的組件皆來自。是狀態(tài)不可變的稱為無狀態(tài)。 前言 要說2018年最火的跨端技術(shù)，當(dāng)屬于 Flutter 莫屬，應(yīng)該沒人質(zhì)疑吧。一個新的技術(shù)的趨勢，最明顯的特征，就是它一定想把前浪拍死在沙灘上。這個...
摘要：是谷歌的移動框架，可以快速在和上構(gòu)建高質(zhì)量的原生用戶界面。在全世界好了這些，大家早就知道了，來點實在的話說隔壁師兄，閑魚是最早一批與谷歌展開合作，并在重要的商品詳情頁中使用技術(shù)上線的。一切皆來自的組件皆來自。是狀態(tài)不可變的稱為無狀態(tài)。 前言 要說2018年最火的跨端技術(shù)，當(dāng)屬于 Flutter 莫屬，應(yīng)該沒人質(zhì)疑吧。一個新的技術(shù)的趨勢，最明顯的特征，就是它一定想把前浪拍死在沙灘上。這個...
閱讀 3378·2021-09-08 09:45
閱讀 1286·2019-08-30 15:53
閱讀 1563·2019-08-30 14:12
閱讀 1004·2019-08-29 17:01
閱讀 2602·2019-08-29 15:35
閱讀 431·2019-08-29 13:09
閱讀 2011·2019-08-29 12:32
閱讀 3113·2019-08-26 18:37
