資訊專欄INFORMATION COLUMN
摘要：翻譯自不過文章中的有一些部分確實(shí)難以理解，如果有大神能看出我這里出錯(cuò)了，請(qǐng)及時(shí)的告訴我，謝謝團(tuán)隊(duì)最近宣布我們將屬性移動(dòng)到了原型鏈上。這個(gè)變化將會(huì)應(yīng)用到在上?，F(xiàn)在將不會(huì)像之前的那樣。
翻譯自DOM Attributes now on the prototype chain
不過文章中的有一些部分確實(shí)難以理解，如果有大神能看出我這里出錯(cuò)了，請(qǐng)及時(shí)的告訴我，謝謝
Chrome團(tuán)隊(duì)最近宣布我們將DOM屬性移動(dòng)到了原型鏈上。這個(gè)變化將會(huì)應(yīng)用到在Chrome 43上。
這些新的行為將會(huì)在以下一個(gè)方面帶來好處，如下：
提高兼容性，IE和Firefox已經(jīng)遵循了標(biāo)準(zhǔn)
允許你一貫并且高效的在DOM對(duì)象上創(chuàng)建getter或setter
可以提高程序的hack的能力。例如，他允許你用一些兼容性工具，用來高效的模擬在一些瀏覽器上丟失的功能。并且javascript庫也可以重寫默認(rèn)的DOM屬性。
例如，假設(shè)W3C規(guī)范包括一些新的功能，叫做isSuperContentEditable，Chrome瀏覽器并沒有采用它，但是它可以通過ployfill或者用一些庫來模仿新的功能。作為一個(gè)庫的開發(fā)人員，你可能自然的想去使用prototype去模仿新的功能。
js
Object.defineProperty(HTMLDivElement.prototype, "isSuperContentEditable", { get: function() { return true; }, set: function() { /* some logic to set it up */ }, });
在更新之前，為了保證chrome中和其他DOM元素屬性的一致性，你不得不創(chuàng)建一個(gè)新的屬性在每一個(gè)實(shí)例上，這將會(huì)給頁面中的每一個(gè)HTMLDivElement加上那個(gè)屬性，這是非常低效的。
這次更新為了一致性、高性能和標(biāo)準(zhǔn)化的web平臺(tái)來說是非常重要的。然而你也可以發(fā)起一些issues給開發(fā)者。如果你信賴這種因?yàn)檫@是chrome和webkit的遺產(chǎn)，我們鼓勵(lì)你去檢查一下你的網(wǎng)站，并且看一下之后的內(nèi)容。
更新概要現(xiàn)在使用hasOwnProperty在一個(gè)DOM元素上將會(huì)返回false
有時(shí)候開發(fā)者就會(huì)使用hasOwnProperty去檢查是否一個(gè)屬性在一個(gè)對(duì)象上?，F(xiàn)在將不會(huì)像之前的那樣。因?yàn)镈OM屬性現(xiàn)在是原型鏈的一部分，并且hasOwnProperty僅僅檢查當(dāng)前的對(duì)象是否定義了它。
在Chrome 42 中下面將會(huì)返回true
js
> div = document.createElement("div"); > div.hasOwnProperty("isContentEditable"); true
在Chrome 43中前面的將會(huì)返回false
> div = document.createElement("div"); > div.hasOwnProperty("isContentEditable"); false
這個(gè)現(xiàn)在意思著如果你想要檢查isContentEditable是否在元素上可用，你需要檢查html元素對(duì)象的原型上。
假設(shè)，HTMLDivElement繼承自HTMLElement。并且HTMLElement定義了isContentEditable屬性
js
> HTMLElement.prototype.hasOwnProperty("isContentEditable"); true
你不必一定要使用hasOwnProperty。我們推薦去使用非常簡單的in操作符。就像下面這個(gè)代碼去檢查是否一個(gè)屬性在整個(gè)原型鏈中存在。
js
if("isContentEditable" in div) { // We have support!! }
Object.getOwnPropertyDescript在DOM實(shí)例上將不再返回對(duì)這個(gè)屬性的描述
如果你的網(wǎng)站需要獲得屬性的描述符在一個(gè)DOM對(duì)象上，你現(xiàn)在需要在原型鏈上進(jìn)行操作。
如果你想要獲得屬性的描述符在Chrome 42 或者更早，你可以這樣做
> Object.getOwnPropertyDescriptor(div, "isContentEditable"); Object {value: "", writable: true, enumerable: true, configurable: true}
在Chrome 43中將會(huì)返回 undefined 在這斷代碼中
> Object.getOwnPropertyDescriptor(div, "isContentEditable"); undefined
這將意味著，想要獲得屬性的描述符，你需要在原型鏈上進(jìn)行操作，如下：
> Object.getOwnPropertyDescriptor(HTMLElement.prototype, "isContentEditable"); Object {get: function, set: function, enumerable: false, configurable: false}
JSON.stringify 將不再序列化DOM屬性
JSON.stringify 不會(huì)序列化DOM在原型上的屬性。
例如，這個(gè)將會(huì)影響你的網(wǎng)站如果你嘗試去序列化一個(gè)推送提醒對(duì)象 PushSubscription
Chrome 43 或者更早的版本，將會(huì)按照下面的結(jié)果返回
> JSON.stringify(subscription); { "endpoint": "https://something", "subscriptionId": "SomeID" }
Chrome 43 按照上面的代碼將不會(huì)序列化定義在原型鏈上的屬性，并且返回一個(gè)空的對(duì)象
> JSON.stringify(subscription); {}
你將要不得不提供自己的格式化方法，例如，你可以這樣弄：
function stringifyDOMObject(object) { function deepCopy(src) { if (typeof src != "object") return src; var dst = Array.isArray(src) ? [] : {}; for (var property in src) { dst[property] = deepCopy(src[property]); } return dst; } return JSON.stringify(deepCopy(object)); } var s = stringifyDOMObject(domObject);
在嚴(yán)格模式下，修改只讀屬性將會(huì)拋出錯(cuò)誤
當(dāng)你使用嚴(yán)格模式的時(shí)候，修改只讀屬性將會(huì)拋出一個(gè)錯(cuò)誤。
例如：
function foo() { "use strict"; var d = document.createElement("div"); console.log(d.isContentEditable); d.isContentEditable = 1; console.log(d.isContentEditable); }
Chrome 43 或者更早版本，函數(shù)將會(huì)繼續(xù)的執(zhí)行，并且不會(huì)拋出任何異常，盡管isContentEditable 并不會(huì)改變。
// Chrome 42 and earlier behavior > foo(); false // isContentEditable false // isContentEditable (after writing to read-only property)
現(xiàn)在在Chrome 43 中將會(huì)拋出一個(gè)異常。
// Chrome 43 and onwards behavior > foo(); false Uncaught TypeError: Cannot set property isContentEditable of #which has only a getter
Chrome 43 關(guān)于DOM的更新就到這里結(jié)束了，如果大家對(duì)我翻譯的這篇文章如果有任何疑問，歡迎提意見。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85701.html
摘要：當(dāng)用戶滾動(dòng)頁面時(shí)，合成線程會(huì)通知主線程更新頁面中最新可見部分的位圖。但是，如果主線程響應(yīng)地不夠快，合成線程不會(huì)保持等待，而是馬上繪制已經(jīng)生成的位圖，還沒準(zhǔn)備好的部分用白色進(jìn)行填充。 動(dòng)畫做多了，自然就要考慮性能，我打算出一個(gè)系列的日志，詳細(xì)的講解一下網(wǎng)頁動(dòng)畫性能相關(guān)的知識(shí)，如果你已經(jīng)可以運(yùn)用css3 canvas來做動(dòng)畫，可以來參考一下。 目前我做的最復(fù)雜的動(dòng)畫就是360搜索中PC端的...
摘要：在中，每一個(gè)節(jié)點(diǎn)被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構(gòu)建頁面。而就是通過調(diào)用構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例的原型對(duì)象原型所指的就是一個(gè)對(duì)象，實(shí)例繼承對(duì)象的屬性。 亂序 不間斷更新 絕大多數(shù)寫的比較淺顯 看個(gè)樂子 display:none 和visibility:hidden的區(qū)別 display:none徹底消失將會(huì)隱藏它以及所有的后代元素占據(jù)的空間消失，瀏覽器不會(huì)...
摘要：在中，每一個(gè)節(jié)點(diǎn)被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構(gòu)建頁面。而就是通過調(diào)用構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例的原型對(duì)象原型所指的就是一個(gè)對(duì)象，實(shí)例繼承對(duì)象的屬性。 亂序 不間斷更新 絕大多數(shù)寫的比較淺顯 看個(gè)樂子 display:none 和visibility:hidden的區(qū)別 display:none徹底消失將會(huì)隱藏它以及所有的后代元素占據(jù)的空間消失，瀏覽器不會(huì)...
摘要：在中，每一個(gè)節(jié)點(diǎn)被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構(gòu)建頁面。而就是通過調(diào)用構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例的原型對(duì)象原型所指的就是一個(gè)對(duì)象，實(shí)例繼承對(duì)象的屬性。 亂序 不間斷更新 絕大多數(shù)寫的比較淺顯 看個(gè)樂子 display:none 和visibility:hidden的區(qū)別 display:none徹底消失將會(huì)隱藏它以及所有的后代元素占據(jù)的空間消失，瀏覽器不會(huì)...
摘要：比如，我們可以監(jiān)聽事件由實(shí)例發(fā)出，然后在任何瀏覽器中就是變化的時(shí)候都會(huì)得到通知，如下所示每一個(gè)作用域?qū)ο蠖紩?huì)有這個(gè)方法，可以用來注冊(cè)一個(gè)作用域事件的偵聽器。這個(gè)函數(shù)所扮演的偵聽器在被調(diào)用時(shí)會(huì)有一個(gè)對(duì)象作為第一個(gè)參數(shù)。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（二） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（四） 書名：Mastering W...
閱讀 2661·2021-11-23 09:51
閱讀 3184·2019-08-30 15:54
閱讀 1151·2019-08-30 14:14
閱讀 3631·2019-08-30 13:59
閱讀 1534·2019-08-29 17:09
閱讀 1560·2019-08-29 16:24
閱讀 2925·2019-08-29 15:43
閱讀 1038·2019-08-29 12:45
