摘要:的其中一個賣點,就是數據綁定。為了解決這個問題,再來一個函數最終的函數應該是下面這樣子的一個數據綁定的實例,叫做不為什么,就叫做。后記僅僅是一個用于學習數據綁定的實驗性質的項目,代碼仍然不夠優雅,功能也不夠豐富。
項目地址:https://github.com/jrainlau/mog
在線體驗:http://codepen.io/jrainlau/pe...
作為一個前端開發者,曾踩了太多的“數據綁定”的坑。在早些時候,都是通過jQuery之類的工具手動完成這些功能,但是當數據量非常大的時候,這些手動的工作讓我非常痛苦。直到使用了VueJS,這些痛苦才得以終結。
VueJS的其中一個賣點,就是“數據綁定”。使用者無需關心數據是怎么綁定到dom上面的,只需要關注數據就好,因為VueJS已經自動幫我們完成了這些工作。
這真的非常神奇,我不可救藥地愛上了VueJS,并且把它用到我自己的項目當中。隨著使用的深入,我更加想知道它深入的原理是什么。
VueJS是如何進行數據綁定的?通過閱讀官方文檔,我看到了下面這段話:
把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項,Vue 將遍歷它的屬性,用 Object.defineProperty 將它們轉為 getter/setter。
關鍵詞是Object.definProperty,在MDN文檔里面是這么說的:
Object.defineProperty()方法直接定義一個對象的屬性,或者修改對象當中一個已經存在的屬性,并返回這個對象。
讓我們寫個例子來測試一下它。
首先,建立一個鋼鐵俠對象并賦予他一些屬性:
let ironman = { name: "Tony Stark", sex: "male", age: "35" }
現在我們使用Object.defineProperty()方法來對他的一些屬性進行修改,并且在控制臺把所修改的內容輸出:
Object.defineProperty(ironman, "age", { set (val) { console.log(`Set age to ${val}`) return val } }) ironman.age = "48" // --> Set age to 48
看起來挺完美的。如果把console.log("Set age to ${val}")改為element.innerHTML = val,是不是就意味著數據綁定已經完成了呢?
讓我們再修改一下鋼鐵俠的屬性:
let ironman = { name: "Tony Stark", sex: "male", age: "35", hobbies: ["girl", "money", "game"] }
嗯……他就是一個花花公子。現在我想把一些“愛好”添加到他身上,并且在控制臺看到對應的輸出:
Object.defineProperty(ironman.hobbies, "push", { value () { console.log(`Push ${arguments[0]} to ${this}`) this[this.length] = arguments[0] } }) ironman.hobbies.push("wine") console.log(ironman.hobbies) // --> Push wine to girl,money,game // --> [ "girl", "money", "game", "wine" ]
在此之前,我是使用get()方法去追蹤對象的屬性變化,但是對于一個數組,我們不能使用這個方法,而是使用value()方法來代替。雖然這招也靈,但是并非最好的辦法。有沒有更好的方法可以簡化這些追蹤對象或數組屬性變化的方法呢?
在ECMA2015,Proxy是一個不錯的選擇什么是Proxy?在MDN文檔中是這么說的(誤):
Proxy可以理解成,在目標對象之前架設一層“攔截”,外界對該對象的訪問,都必須先通過這層攔截,因此提供了一種機制,可以對外界的訪問進行過濾和改寫。
Proxy是ECMA2015的一個新特性,它非常強大,但我并不會討論太多關于它的東西,除了我們現在需要的一個。現在讓我們一起來新建一個Proxy實例:
let ironmanProxy = new Proxy(ironman, { set (target, property, value) { target[property] = value console.log("change....") return true } }) ironmanProxy.age = "48" console.log(ironman.age) // --> change.... // --> 48
符合預期。那么對于數組呢?
let ironmanProxy = new Proxy(ironman.hobbies, { set (target, property, value) { target[property] = value console.log("change....") return true } }) ironmanProxy.push("wine") console.log(ironman.hobbies) // --> change... // --> change... // --> [ "girl", "money", "game", "wine" ]
仍然符合預期!但是為什么輸出了兩次change...呢?因為每當我觸發push()方法的時候,這個數組的length屬性和body內容都被修改了,所以會引起兩次變化。
實時數據綁定解決了最核心的問題,可以考慮其他的問題了。
想象一下,我們有一個模板和數據對象:
Hello, my name is {{name}}, I enjoy eatting {{hobbies.food}}
let ironman = { name: "Tony Stark", sex: "male", age: "35", hobbies: { food: "banana", drink: "wine" } }
通過前面的代碼,我們知道如果想要追蹤一個對象的屬性變化,我們應該把這個屬性作為第一個參數傳入Proxy實例。讓我們一起來創建一個返回新的Proxy實例的函數吧!
function $setData (dataObj, fn) { let self = this let once = false let $d = new Proxy(dataObj, { set (target, property, value) { if (!once) { target[property] = value once = true /* Do something here */ } return true } }) fn($d) }
它可以通過以下的方式被使用:
$setData(dataObj, ($d) => { /* * dataObj.someProps = something */ }) // 或者 $setData(dataObj.arrayProps, ($d) => { /* * dataObj.push(something) */ })
除此之外,我們應該實現模板對數據對象的映射,這樣才能用Tony Stark來替換{{name}}。
function replaceFun(str, data) { let self = this return str.replace(/{{([^{}]*)}}/g, (a, b) => { return data[b] }) } replaceFun("My name is {{name}}", { name: "xxx" }) // --> My name is xxx
這個函數對于如{ name: "xx", age: 18 }的單層屬性對象運行良好,但是對于如{ hobbies: { food: "apple", drink: "milk" } }這樣的多層屬性對象卻無能為力。舉個例子,如果模板關鍵字是{{hobbies.food}},那么replaceFun()函數就應該返回data["hobbies"]["food"]。
為了解決這個問題,再來一個函數:
function getObjProp (obj, propsName) { let propsArr = propsName.split(".") function rec(o, pName) { if (!o[pName] instanceof Array && o[pName] instanceof Object) { return rec(o[pName], propsArr.shift()) } return o[pName] } return rec(obj, propsArr.shift()) } getObjProp({ data: { hobbies: { food: "apple", drink: "milk" } } }, "hobbies.food") // --> return { food: "apple", drink: "milk" }
最終的replaceFun()函數應該是下面這樣子的:
function replaceFun(str, data) { let self = this return str.replace(/{{([^{}]*)}}/g, (a, b) => { let r = self._getObjProp(data, b); console.log(a, b, r) if (typeof r === "string" || typeof r === "number") { return r } else { return self._getObjProp(r, b.split(".")[1]) } }) }一個數據綁定的實例,叫做“Mog”
不為什么,就叫做“Mog”。
class Mog { constructor (options) { this.$data = options.data this.$el = options.el this.$tpl = options.template this._render(this.$tpl, this.$data) } $setData (dataObj, fn) { let self = this let once = false let $d = new Proxy(dataObj, { set (target, property, value) { if (!once) { target[property] = value once = true self._render(self.$tpl, self.$data) } return true } }) fn($d) } _render (tplString, data) { document.querySelector(this.$el).innerHTML = this._replaceFun(tplString, data) } _replaceFun(str, data) { let self = this return str.replace(/{{([^{}]*)}}/g, (a, b) => { let r = self._getObjProp(data, b); console.log(a, b, r) if (typeof r === "string" || typeof r === "number") { return r } else { return self._getObjProp(r, b.split(".")[1]) } }) } _getObjProp (obj, propsName) { let propsArr = propsName.split(".") function rec(o, pName) { if (!o[pName] instanceof Array && o[pName] instanceof Object) { return rec(o[pName], propsArr.shift()) } return o[pName] } return rec(obj, propsArr.shift()) } }
使用:
Hello everyone, my name is {{name}}, I am a mini {{lang}} framework for just {{work}}. I can bind data from {{supports.0}}, {{supports.1}} and {{supports.2}}. What"s more, I was created by {{info.author}}, and was written in {{info.jsVersion}}. My motto is "{{motto}}".
Motto:
let template = document.querySelector("#app").innerHTML let mog = new Mog({ template: template, el: "#app", data: { name: "mog", lang: "javascript", work: "data binding", supports: ["String", "Array", "Object"], info: { author: "Jrain", jsVersion: "Ecma2015" }, motto: "Every dog has his day" } }) document.querySelector("#set-motto").oninput = (e) => { mog.$setData(mog.$data, ($d) => { $d.motto = e.target.value }) }
你可以在這里進行在線體驗。
后記Mog僅僅是一個用于學習數據綁定的實驗性質的項目,代碼仍然不夠優雅,功能也不夠豐富。但是這個小玩具讓我學習了很多。如果你對它有興趣,歡迎到這里把項目fork走,并且加入一些你的想法。
感謝閱讀!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80836.html
摘要:凡是部署了屬性的數據結構,就稱為部署了遍歷器接口。調用這個接口,就會返回一個遍歷器對象。 ES6在2015年6月就得以批準,至今已兩年了。近一年多以來陸續看過很多ES6的資料,工作項目中也逐步的用上了很多ES6的特性(let,const,promise,Template strings,Class,箭頭函數等等),不得不說,這些特性給開發帶來了非常多的便利。但是做決定我的ES6知識其...
摘要:將轉換成常見的使用實現的基于迭代器的迭代。處停止迭代器基于鴨子模型接口這里使用語法僅僅為了說明問題使用支持為了使用迭代器屬性需要引入。生成器是迭代器的子類,包含了附加的與。 原文地址:http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》,請把star獻給他,你可以在此嘗試這些特性REPL。 概述 ECMAScr...
摘要:執行函數會返回一個遍歷器對象,每一次函數里面的都相當一次遍歷器對象的方法,并且可以通過方法傳入自定義的來改變函數的行為。函數可以通過配合函數更輕松更優雅的實現異步編程和控制流管理。它和構造函數的不同點類的內部定義的所有方法,都是不可枚舉的。 let const的命令 在ES6之前,聲明變量只能用var,var方式聲明變量其實是很不合理的,準確的說,是因為ES5里面沒有塊級作用域是很不合...
摘要:本文是重溫基礎系列文章的第十四篇。元,是指程序本身。有理解不到位,還請指點,具體詳細的介紹,可以查看維基百科元編程。攔截,返回一個布爾值。 本文是 重溫基礎 系列文章的第十四篇。 這是第一個基礎系列的最后一篇,后面會開始復習一些中級的知識了,歡迎持續關注呀! 接下來會統一整理到我的【Cute-JavaScript】的JavaScript基礎系列中。 今日感受:獨樂樂不如眾樂樂...
摘要:嘗試使用新特性,自己來實現一個及的各種特性。我們可以利用這個特性來實現對數據的監聽結果簡單的操作我們已經可以對簡單的數據操作進行監聽雖然還有各種問題,接下來,我們只要在監聽到后進行數據操作即可。 嘗試使用es6新特性,自己來實現一個mvvm及vue的各種特性。相關代碼放在github,會持續更新,歡迎賞個star。本篇文章為系列文章的第一篇,會比較容易理解,后續會持續更新后面的記錄。文...
閱讀 2386·2021-09-22 16:01
閱讀 3153·2021-09-22 15:41
閱讀 1171·2021-08-30 09:48
閱讀 490·2019-08-30 15:52
閱讀 3324·2019-08-30 13:57
閱讀 1713·2019-08-30 13:55
閱讀 3649·2019-08-30 11:25
閱讀 757·2019-08-29 17:25