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