資訊專欄INFORMATION COLUMN
摘要：提交這可以說(shuō)是的第一份正式源碼，已經(jīng)有了基本的骨架原型。上面所說(shuō)的綁定操作都是針對(duì)于這個(gè)來(lái)的。如則在模板中聲明一個(gè)指令的時(shí)候，即實(shí)現(xiàn)了指令與的綁定。如上便是當(dāng)前版本的基本運(yùn)行原理。
提交：a5e27b1174e9196dcc9dbb0becc487275ea2e84c
commit: naive implementation
這可以說(shuō)是vue的第一份正式源碼，已經(jīng)有了基本的骨架原型。
源碼主要包含三個(gè)文件: main.js、directives.js、filters.js
運(yùn)行原理：節(jié)點(diǎn)收集，找到根節(jié)點(diǎn)以及根節(jié)點(diǎn)之下的所有包含指令的節(jié)點(diǎn).
解析指令節(jié)點(diǎn)
關(guān)聯(lián)數(shù)據(jù)與節(jié)點(diǎn)
監(jiān)測(cè)指令節(jié)點(diǎn)的set操作，并調(diào)用指令的更新函數(shù)
偽代碼：
/*根節(jié)點(diǎn)以及所有指令節(jié)點(diǎn)獲取，這里指令節(jié)點(diǎn)的selector采用屬性選擇器來(lái)選擇*/ root = document.getElementById(opts.id), els = root.querySelectorAll(selector) /** * 節(jié)點(diǎn)處理 */ ;[].forEach.call(els, processNode) processNode(root) /** * processNode中主要做了如下三步 */ parseDirective() bindDirective() bindAccessors()
這里需要注意一點(diǎn)是 scope 的概念，vue是采用數(shù)據(jù)響應(yīng)式的思想，這里的數(shù)據(jù)即對(duì)應(yīng)一個(gè)vue實(shí)例里的 scope(也可稱它為作用域，最新版本已改為data/vueInstance.$data)。上面所說(shuō)的綁定操作都是針對(duì)于這個(gè)scope來(lái)的。
如：
scope = {
hello: "ahahah"
}
則在模板中聲明一個(gè)v-text="hello"指令的時(shí)候，即實(shí)現(xiàn)了v-text指令與scope.hello的綁定。
如上便是當(dāng)前版本vue的基本運(yùn)行原理。
作者設(shè)計(jì)思想解讀通過(guò)指令的聲明方式實(shí)現(xiàn)某一DOM片段與某一javascript對(duì)象的關(guān)聯(lián)
數(shù)值關(guān)聯(lián)，JS中的一個(gè) String 對(duì)應(yīng)于DOM中的一個(gè)或多個(gè) textNode
函數(shù)關(guān)聯(lián)，JS中的一個(gè)方法 對(duì)應(yīng)于DOM節(jié)點(diǎn)的事件函數(shù)
set監(jiān)測(cè)
通過(guò)如下示例來(lái)觀看作者指令語(yǔ)法的設(shè)計(jì)思想：
模板JSYOYOYO
var Seed = require("seed")
var app = Seed.create({
id: "test",
// template
scope: {
msg: "hello",
hello: "WHWHWHW",
changeMessage: function () {
app.scope.msg = "hola"
}
}
})
指令語(yǔ)句即 DOM 節(jié)點(diǎn)中的一個(gè)屬性，如sd-text="msg | capitalize",等號(hào)前面為指令的名稱，等號(hào)后面為指令的值。
受于字符串所能表達(dá)信息量的限制，作者在指令名稱上采用 "-" 讓指令名變成結(jié)構(gòu)類型的數(shù)據(jù)，以此來(lái)增加指令的靈活性(標(biāo)簽的屬性是不區(qū)分大小寫(xiě)的，所以不能采用駝峰式的命名).值對(duì)應(yīng)組件作用域中的一個(gè)鍵名，這里通過(guò)管道符可以擴(kuò)展相應(yīng)的功能。
實(shí)質(zhì)上來(lái)說(shuō)，與普通的變量聲明方式是一樣的：
/*javascript 變量聲明*/
var text = "ahahah";
var onClick = function changeMessage () {};
/*vue 指令聲明, hello 和 changeMessage 則對(duì)應(yīng) scope 中的 hello 和 changeMessage的值*/
v-text="hello";
v-on-click="changeMessage";
注：組件對(duì)象數(shù)據(jù)與指令關(guān)聯(lián)是一對(duì)多的關(guān)系
這樣，一個(gè)微型的vue就成型了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/65286.html
摘要：如果你的運(yùn)行緩慢，你可以考慮是否能優(yōu)化請(qǐng)求，減少對(duì)的操作，盡量少的操，或者犧牲其它的來(lái)?yè)Q取性能。在認(rèn)識(shí)描述這些核心元素的過(guò)程中，我們也會(huì)分享一些當(dāng)我們構(gòu)建的時(shí)候遵守的一些經(jīng)驗(yàn)規(guī)則，一個(gè)應(yīng)用應(yīng)該保持健壯和高性能來(lái)維持競(jìng)爭(zhēng)力。 一個(gè)開(kāi)源的前端錯(cuò)誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團(tuán)隊(duì)最近開(kāi)發(fā)了一款前端錯(cuò)誤收集工具，名叫 frontend-tracker ，這款...
摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁(yè)的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見(jiàn)的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時(shí)也將對(duì)filter功能與computed屬性進(jìn)行對(duì)比，說(shuō)明各自的適用場(chǎng)景，也為vue2.0版本中即將刪除的部...
摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁(yè)的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見(jiàn)的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時(shí)也將對(duì)filter功能與computed屬性進(jìn)行對(duì)比，說(shuō)明各自的適用場(chǎng)景，也為vue2.0版本中即將刪除的部...
摘要：開(kāi)始研究核心代碼這個(gè)類首先是構(gòu)造函數(shù)看完上面的內(nèi)容大家應(yīng)該有點(diǎn)印象，上掛了和，是默認(rèn)的配置，顧名思義就是攔截器，目測(cè)包含了和兩種類型。喜歡就點(diǎn)個(gè)贊吧參考文章源代碼重點(diǎn)難點(diǎn)分析源代碼重點(diǎn)難點(diǎn)分析 axios是一個(gè)基于promise的http庫(kù)，支持瀏覽器和node端，最近我在做beauty-we的api設(shè)計(jì)，研讀一個(gè)成熟的http庫(kù)勢(shì)在必行，axios功能完整、api簡(jiǎn)潔、注釋清晰，再適...
閱讀 3406·2021-10-13 09:40
閱讀 3957·2019-08-30 15:54
閱讀 1462·2019-08-30 13:20
閱讀 3159·2019-08-30 11:26
閱讀 613·2019-08-29 11:33
閱讀 1218·2019-08-26 14:00
閱讀 2519·2019-08-26 13:58
閱讀 3501·2019-08-26 10:39
