摘要:原理的雙向數據綁定的原理相信大家都十分了解主要是通過的對象的屬性重寫的和函數來實現的所以接下來不使用進行實際的代碼開發過程中如果函數使用父級的情況還是使用顯示緩存中間變量和閉包來處理原因是箭頭函數沒有獨立的執行上下文所以箭頭函數內部出現對象
1.原理
vue的雙向數據綁定的原理相信大家都十分了解;主要是通過ES5的Object對象的defineProperty屬性;重寫data的set和get函數來實現的
所以接下來不使用ES6進行實際的代碼開發;過程中如果函數使用父級this的情況;還是使用顯示緩存中間變量和閉包來處理;原因是箭頭函數沒有獨立的執行上下文this;所以箭頭函數內部出現this對象會直接訪問父級;所以也能看出箭頭函數是無法完全替代function的使用場景的;比如我們需要獨立的this或者argument的時候1.2 defineProperty是什么
語法:
Object.defineProperty(obj, prop, descriptor) 參數: obj:必要的目標對象 prop:必要的需要定義或者修改的屬性名 descriptor:必要的目標屬性全部擁有的屬性 返回值: 返回傳入的第一個函數;即第一個參數obj
該方法允許精確的添加或者修改對象的屬性;通過賦值來添加的普通屬性會創建在屬性枚舉期間顯示(fon...in;object.key);這些添加的值可以被改變也可以刪除;也可以給這個屬性設置一些特性;比如是否只讀不可寫;目前提供兩種形式:數據描述(set;get;value;writable;enumerable;confingurable)和存取器描述(set;get)
數據描述當修改或者定義對象的某個屬性的時候;給這個屬性添加一些特性
var obj = { name:"xiangha" } // 對象已有的屬性添加特性描述 Object.defineProperty(obj,"name",{ configurable:true | false, // 如果是false則不可以刪除 enumerable:true | false, // 如果為false則在枚舉時候會忽略 value:"任意類型的值,默認undefined" writable:true | false // 如果為false則不可采用數據運算符進行賦值 }); 但是存在一個交叉;如果wrirable為true;而configurable為false的時候;所以需要枚舉處理enumerable為false --- 我是一個writable栗子 --- var obj = {}; Object.defineProperty(obj,"val",{ value:"xiangha", writable:false, // false enumerable:true, configurable:true }); obj.val = "書記"; // 這個時候是更改不了a的 --- 我是一個configurable栗子 --- var obj = {}; Object.defineProperty(obj,"val",{ value:"xiangha", writable:true, // true enumerable:true, configurable:false // false }); obj.val = "書記"; // 這個時候是val發生了改變 delete obj.val 會返回false;并且val沒有刪除 --- 我是一個enumerable栗子 --- var obj = {}; Object.defineProperty(obj,"val",{ value:"xiangha", writable:true, enumerable:false, // false configurable:true }); for(var i in obj){ console.log(obj[i]) // 沒有具體值 } 綜上:對于我們有影響主要是configurable控制是否可以刪除;writable控制是否可以修改賦值;enumerable是否可以枚舉
所以說一旦使用Object.defineProperty()給對象添加屬性;那么如果不設置屬性的特性;則默認值都為false
var obj = {}; Object.defineProperty(obj,"name",{}); // 定義了心屬性name后;這個屬性的特性的值都為false;這就導致name這個是不能重寫不能枚舉不能再次設置特性的 obj.name = "書記"; console.log(obj.name); // undefined for(var i in obj){ console.log(obj[i]) }
總結特性:
value:設置屬性的值
writable ["ra?t?bl] :值是否可以重寫
enumerable [?"nju:m?r?b?l]:目標屬性是否可以被枚舉
configurable [k?n"f?g?r?bl]:目標屬性是否可以被刪除是否可以再次修改特性
存取器描述var obj = {}; Object.defineProperty(obj,"name",{ get:function(){} | undefined, set:function(){} | undefined, configuracble:true | false, enumerable:true | false }) 注意:當前使用了setter和getter方法;不允許使用writable和value兩個屬性
gettet&& setter
當設置獲取對象的某個屬性的時候;可以提供getter和setter方法
var obj = {}; var value = "xiangha"; Object.defineProperty(obj,"name",{ get:function(){ // 獲取值觸發 return value }, set:function(val){ // 設置值的時候觸發;設置的新值通過參數val拿到 value = val; } }); console.log(obj.name); // xiangha obj.name = "書記"; console,.log(obj.name); // 書記
get和set不是必須成對出現對;任寫一個就行;如果不設置set和get方法;則為undefined
哈哈;前戲終于鋪墊完成了
補充:如果使用vue開發項目;嘗試去打印data對象的時候;會發現data內的每一個屬性都有get和set屬性方法;這里說明一下vue和angular的雙向數據綁定不同
angular是用臟數據檢測;Model發生改變的時候;會檢測所有視圖是否綁定了相關的數據;再更新視圖
vue是使用的發布訂閱模式;點對點的綁定數據
網上圖
2.實現頁面很簡單;包含:
1. 一個input,使用v-model指令 2. 一個button,使用v-click指令 3. 一個h3,使用v-bind指令。
我們最后也會類似vue對方式來實現雙向數據綁定
var app = new xhVue({ el:"#app", data: { number: 0 }, methods: { increment: function() { this.number ++; }, } })2.1 定義
首先我們需要定義一個xhVue的構造函數
function xhVue(options){ }2.2 添加
為了初始化這個構造函數;給其添加一個_init屬性
function xhVue(options){ this._init(options); } xhVue.prototype._init = function(options){ this.$options = options; // options為使用時傳入的結構體;包括el,data,methods等 this.$el = document.querySelector(options.el); // el就是#app,this.$el是id為app的Element元素 this.$data = options.data; // this.$data = {number:0} this.$methods = options.methods; // increment }2.3 改造升級
改造_init函數;并且實現_xhob函數;對data進行處理;重寫set和get函數
xhVue.prototype._xhob = function(obj){ // obj = {number:0} var value; for(key in obj){ if(obj.hasOwnProperty(ket)){ value = obj[key]; if(typeof value === "object"){ this._xhob(value); } Object.defineProperty(this.$data,key,{ enumerable:true, configurable:true, get:function(){ return value; }, set:function(newVal){ if(value !== newVal){ value = newVal; } } }) } } } xhVue.prototype._init = function(options){ this.$options = options; this.$el = document.querySelector(options.el); this.$data = options.data; this.$method = options.methods; this._xhob(this.$data); }2.4 xhWatcher
指令類watcher;用來綁定更新函數;實現對DOM更新
function xhWatcher(name,el,vm,exp,attr){ this.name = name; // 指令名稱;對于文本節點;例如text this.el = el; // 指令對應DOM元素 this.vm = vm; // 指令所屬vue實例 this.exp = exp; // 指令對應的值;例如number this.attr = attr; // 綁定的屬性值;例如innerHTML this.update(); } xhWatcher.prototype.update = function(){ this.el[this.attr] = this.vm.$data[this.exp]; // 例如h3的innerHTML = this.data.number;當numner改變則會觸發本update方法;保證對應的DOM實時更新 }2.5 完善_init和_xhob
繼續完善_init和_xhob函數
// 給init的時候增加一個對象來存儲model和view的映射關系;也就是我們前面定義的xhWatcher的實例;當model發生變化時;我們會觸發其中的指令另其更新;保證了view也同時更新 xhVue.prototype._init = function(options){ this.$options = options; this.$el = document.querySelector(options.el); this.$data = options.data; this.$method = options.methods; this._binding = {}; // _binding this._xhob(this.$data); } // 通過init出來的_binding xhVue.prototype._xhob = function(obj){ // obj = {number:0} var value; for(key in obj){ if(obj.hasOwnProperty(ket)){ this._binding[key] = { // _binding = {number:_directives:[]} _directives = [] } value = obj[key]; if(typeof value === "object"){ this._xhob(value); } var binding = this._binding[key]; Object.defineProperty(this.$data,key,{ enumerable:true, configurable:true, get:function(){ return value; }, set:function(newVal){ if(value !== newVal){ value = newVal; // 當number改變時;觸發_binding[number]._directives中已綁定的xhWatcher更新 binding._directives.forEach(function(item){ item.update(); }); } } }) } } }2.6 解析指令
怎么才能將view與model綁定;我們定義一個_xhcomplie函數來解析我們的指令(v-bind;v-model;v-clickde)并這這個過程中對view和model進行綁定
xhVue.prototype._xhcompile = function (root) { // root是id為app的element的元素;也就是根元素 var _this = this; var nodes = root.children; for (var i = 0,len = nodes.length; i < len; i++) { var node = nodes[i]; if (node.children.length) { // 所有元素進行處理 this._xhcompile(node) }; // 如果有v-click屬性;我們監聽他的click事件;觸發increment事件,即number++ if (node.hasAttribute("v-click")) { node.onclick = (function () { var attrVal = nodes[i].getAttribute("v-click"); // bind讓data的作用域與methods函數的作用域保持一致 return _this.$method[attrVal].bind(_this.$data); })(); }; // 如果有v-model屬性;并且元素是input或者textrea;我們監聽他的input事件 if (node.hasAttribute("v-model") && (node.tagName = "INPUT" || node.tagName == "TEXTAREA")) { node.addEventListener("input", (function (key) { var attrVal = node.getAttribute("v-model"); _this._binding[attrVal]._directives.push(new xhWatcher( "input", node, _this, attrVal, "value" )); return function () { // 讓number的值和node的value保持一致;就實現了雙向數據綁定 _this.$data[attrVal] = nodes[key].value } })(i)); }; // 如果有v-bind屬性;我們要讓node的值實時更新為data中number的值 if (node.hasAttribute("v-bind")) { var attrVal = node.getAttribute("v-bind"); _this._binding[attrVal]._directives.push(new xhWatcher( "text", node, _this, attrVal, "innerHTML" )) } } }
并且將解析函數也加到_init函數中
xhVue.prototype._init = function(options){ this.$options = options; this.$el = document.querySelector(options.el); this.$data = options.data; this.$method = options.methods; this._binding = {}; // _binding this._xhob(this.$data); this._xhcompile(this.$el); }最后
Document
所有的代碼;復制到編輯器就可查看效果了~~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52194.html
摘要:它由微軟架構師和開發,通過利用微軟圖形系統和的互聯網應用派生品的特性來簡化用戶界面的事件驅動程序設計。微軟的和架構師之一于年在他的博客上發表了。更改時會得到提醒這個情況是一個單向流。 前言 記得四個月前有一次面試,面試官問我 MVVM 是什么,MVVM 的本質是什么。我大腦一片混亂,那時我對 MVVM 的認知就只是雙向綁定和Vue,以這個關鍵字簡單回答了幾句,我反問 MVVM 的本質是...
摘要:原理的雙向數據綁定的原理相信大家都十分了解主要是通過的對象的屬性重寫的和函數來實現的所以接下來不使用進行實際的代碼開發過程中如果函數使用父級的情況還是使用顯示緩存中間變量和閉包來處理原因是箭頭函數沒有獨立的執行上下文所以箭頭函數內部出現對象 1.原理 vue的雙向數據綁定的原理相信大家都十分了解;主要是通過ES5的Object對象的defineProperty屬性;重寫data的set...
摘要:響應式原理為了探究這一切的原因,我再次點開了的官網。在官網很下面的位置,找到了關于響應式原理的說明。因此,新添加到數組中的對象中的屬性,就成了非響應式的屬性了,改變它自然不會讓組件重新渲染。響應式屬性的對象,有這個對象就代表是響應式的。 ??最近在用Vue開發一個后臺管理的demo,有一個非常常規的需求。然而這個常規的需求中,包含了大量的知識點。有一個產品表格,用來顯示不同產品的信息。...
摘要:的模式之間不同主要是與的數據傳遞的流程不同。所以無論是復雜化簡單化還是修改流程,基本都是因為技術棧變化了對應做的調整。實例實際項目往往采用更靈活的方式,以為例。用戶可以向發送指令事件,再由直接要求改變狀態。與不發生聯系,都通過傳遞。 概述 M -V- X 本質都是一樣的 重點還是在于M-V 的橋梁要靠 X來牽線。 X的模式之間不同 主要是 M與V 的數據傳遞的流程不同。數據傳遞的流程不...
閱讀 2571·2021-09-26 10:13
閱讀 5969·2021-09-08 10:46
閱讀 686·2019-08-30 15:53
閱讀 2957·2019-08-29 16:13
閱讀 2750·2019-08-26 12:23
閱讀 3478·2019-08-26 11:24
閱讀 1085·2019-08-23 18:09
閱讀 1028·2019-08-23 17:08