面試問 如何在IE8以下實現資料的雙向繫結

2021-09-24 07:55:59 字數 1710 閱讀 4757

我們都知道vue是使用object.defineproperty來實現的資料雙向繫結。我們先來實現一下資料的雙向繫結。

var obj = {};

var a;

object.defineproperty(obj,'a',,

set: function(newval)

})複製**

這樣就可以實現乙個資料的雙向繫結。如果加上input只要稍微改造一下就可以

type="text"

id="input">

複製**

js部分

var input = document.queryselector("#input");

var obj = {};

var a;

object.defineproperty(obj, 'a', ,

set: function (newval)

})input.addeventlistener('input', function (e) )

複製**

這樣就實現了乙個雙向資料繫結,但是object.defineproperty並不是完美的,它有優點也有缺點。

面試有時候也經常會問到:怎麼樣實現ie8及一下的雙向資料繫結。

對於上面這個問題,我們可以使用api的私有屬性。

我們經常見到的__proto__凡是以__開頭結尾的是瀏覽器的私有屬性,__definegetter__和__definesetter__同樣也是私有屬性,這兩個屬性和object.defineproperty一樣都是對物件新增屬性,object.defineproperty相當於這兩個方法的合併。

怎麼使用它呢?

這兩個方法接收兩個引數:

例如:給obj物件新增乙個name屬性

obj.__definesetter__('name',function(val))

obj.__definegetter__('name',function())

複製**

如何使用這個api實現資料的雙向繫結呢?我們來實現一下。

var input = document.queryselector("#input");

var obj = {};

input.addeventlistener('input', function (e) )

var name;

obj.__definesetter__('name',function(val))

obj.__definegetter__('name',function())

複製**

哎呦,不錯哦。

在vue未出現之前,也是有mvvm框架產生的,比如說san.js,它也是傳統的mvvm資料雙向繫結並且相容ie6。還有vbscript,在vbscript中可以寫類,類中可以定義getter和setter,同樣可以實現資料的雙向繫結。

由於我自己能力有限,在這裡就實現這麼多了,如果各位有興趣的話,可以自己實現一下。

如何在ie8中新增事件控制代碼?

ie 8 及更早 ie 版本,opera 7.0及其更早版本不支援 addeventlistener 和 removeeventlistener 方法。但是,對於這類瀏覽器版本可以使用 attachevent detachevent 方法來新增 移除事件控制代碼。跨瀏覽器解決方法 var x doc...

如何刪除IE8

之前安裝了一下ie8 beta2感受了一下新的功能。執行起來也挺不錯的,但當我公升級到ie8 rc版本的時候問題就非常的多,不知道是不是公升級的問題,每次關掉ie都會報乙個錯誤,非常的鬱悶。而且在使用bs系統的時候也會報一些錯誤,然後就不能正常工作了,實在是沒有辦法,特別是給客戶演示系統的時候出現錯...

IE9如何相容IE8以及以下的瀏覽模式

自己寫了個js指令碼,本人一直用的是ie9 在一次測試中發現自己在外部寫的js指令碼缺不能在ie8及ie8以下的瀏覽模式中執行,網上搜了很多,都沒找到解決辦法,求各位大神給個辦法啊 在此多謝了 經過一下午的查閱 最後知道了在ie8一下呼叫js檔案時,回傳會說json未定義 有三個解決辦法 方法一 加...