国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【翻譯】Chrome 43 部分更新：現(xiàn)在 DOM 的屬性將會在原型鏈上

guqiu / 1970人閱讀

摘要：翻譯自不過文章中的有一些部分確實難以理解，如果有大神能看出我這里出錯了，請及時的告訴我，謝謝團隊最近宣布我們將屬性移動到了原型鏈上。這個變化將會應用到在上。現(xiàn)在將不會像之前的那樣。

  
翻譯自DOM Attributes now on the prototype chain

  不過文章中的有一些部分確實難以理解，如果有大神能看出我這里出錯了，請及時的告訴我，謝謝

Chrome團隊最近宣布我們將DOM屬性移動到了原型鏈上。這個變化將會應用到在Chrome 43上。

這些新的行為將會在以下一個方面帶來好處，如下：

提高兼容性，IE和Firefox已經(jīng)遵循了標準

允許你一貫并且高效的在DOM對象上創(chuàng)建getter或setter

可以提高程序的hack的能力。例如，他允許你用一些兼容性工具，用來高效的模擬在一些瀏覽器上丟失的功能。并且javascript庫也可以重寫默認的DOM屬性。

例如，假設W3C規(guī)范包括一些新的功能，叫做isSuperContentEditable，Chrome瀏覽器并沒有采用它，但是它可以通過ployfill或者用一些庫來模仿新的功能。作為一個庫的開發(fā)人員，你可能自然的想去使用prototype去模仿新的功能。

js
Object.defineProperty(HTMLDivElement.prototype, "isSuperContentEditable", {
  get: function() { return true; },
  set: function() { /* some logic to set it up */ },
});

在更新之前，為了保證chrome中和其他DOM元素屬性的一致性，你不得不創(chuàng)建一個新的屬性在每一個實例上，這將會給頁面中的每一個HTMLDivElement加上那個屬性，這是非常低效的。

這次更新為了一致性、高性能和標準化的web平臺來說是非常重要的。然而你也可以發(fā)起一些issues給開發(fā)者。如果你信賴這種因為這是chrome和webkit的遺產(chǎn)，我們鼓勵你去檢查一下你的網(wǎng)站，并且看一下之后的內(nèi)容。

更新概要 
  
現(xiàn)在使用hasOwnProperty在一個DOM元素上將會返回false

有時候開發(fā)者就會使用hasOwnProperty去檢查是否一個屬性在一個對象上。現(xiàn)在將不會像之前的那樣。因為DOM屬性現(xiàn)在是原型鏈的一部分，并且hasOwnProperty僅僅檢查當前的對象是否定義了它。

在Chrome 42 中下面將會返回true

js
> div = document.createElement("div");
> div.hasOwnProperty("isContentEditable");

true

在Chrome 43中前面的將會返回false


> div = document.createElement("div");
> div.hasOwnProperty("isContentEditable");

false

這個現(xiàn)在意思著如果你想要檢查isContentEditable是否在元素上可用，你需要檢查html元素對象的原型上。
假設，HTMLDivElement繼承自HTMLElement。并且HTMLElement定義了isContentEditable屬性

js
> HTMLElement.prototype.hasOwnProperty("isContentEditable");

true

你不必一定要使用hasOwnProperty。我們推薦去使用非常簡單的in操作符。就像下面這個代碼去檢查是否一個屬性在整個原型鏈中存在。

js
if("isContentEditable" in div) {
  // We have support!!
}



  
Object.getOwnPropertyDescript在DOM實例上將不再返回對這個屬性的描述

如果你的網(wǎng)站需要獲得屬性的描述符在一個DOM對象上，你現(xiàn)在需要在原型鏈上進行操作。
如果你想要獲得屬性的描述符在Chrome 42 或者更早，你可以這樣做


> Object.getOwnPropertyDescriptor(div, "isContentEditable");

Object {value: "", writable: true, enumerable: true, configurable: true}

在Chrome 43中將會返回 undefined 在這斷代碼中


> Object.getOwnPropertyDescriptor(div, "isContentEditable");

undefined

這將意味著，想要獲得屬性的描述符，你需要在原型鏈上進行操作，如下：


> Object.getOwnPropertyDescriptor(HTMLElement.prototype, "isContentEditable");

Object {get: function, set: function, enumerable: false, configurable: false}



  
JSON.stringify 將不再序列化DOM屬性

JSON.stringify 不會序列化DOM在原型上的屬性。
例如，這個將會影響你的網(wǎng)站如果你嘗試去序列化一個推送提醒對象 PushSubscription

Chrome 43 或者更早的版本，將會按照下面的結果返回


> JSON.stringify(subscription);

{
  "endpoint": "https://something",
  "subscriptionId": "SomeID"
}

Chrome 43 按照上面的代碼將不會序列化定義在原型鏈上的屬性，并且返回一個空的對象


> 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);



  
在嚴格模式下，修改只讀屬性將會拋出錯誤

當你使用嚴格模式的時候，修改只讀屬性將會拋出一個錯誤。
例如：


function foo() {
  "use strict";
  var d = document.createElement("div");
  console.log(d.isContentEditable);
  d.isContentEditable = 1;
  console.log(d.isContentEditable);
}

Chrome 43 或者更早版本，函數(shù)將會繼續(xù)的執(zhí)行，并且不會拋出任何異常，盡管isContentEditable 并不會改變。


// Chrome 42 and earlier behavior
> foo();

false // isContentEditable
false // isContentEditable (after writing to read-only property)

現(xiàn)在在Chrome 43 中將會拋出一個異常。


// Chrome 43 and onwards behavior
> foo();

false
Uncaught TypeError: Cannot set property isContentEditable of # which has only a getter



  
Chrome 43 關于DOM的更新就到這里結束了，如果大家對我翻譯的這篇文章如果有任何疑問，歡迎提意見。

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85701.html

相關文章

  • 網(wǎng)頁動畫性能日志（一）

    摘要：當用戶滾動頁面時，合成線程會通知主線程更新頁面中最新可見部分的位圖。但是，如果主線程響應地不夠快，合成線程不會保持等待，而是馬上繪制已經(jīng)生成的位圖，還沒準備好的部分用白色進行填充。 動畫做多了，自然就要考慮性能，我打算出一個系列的日志，詳細的講解一下網(wǎng)頁動畫性能相關的知識，如果你已經(jīng)可以運用css3 canvas來做動畫，可以來參考一下。 目前我做的最復雜的動畫就是360搜索中PC端的...

    zhiwei 評論0 收藏0

  • 前端部分知識總結

    摘要：在中，每一個節(jié)點被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構建頁面。而就是通過調(diào)用構造函數(shù)創(chuàng)建的對象實例的原型對象原型所指的就是一個對象，實例繼承對象的屬性。 亂序 不間斷更新 絕大多數(shù)寫的比較淺顯 看個樂子 display:none 和visibility:hidden的區(qū)別 display:none徹底消失將會隱藏它以及所有的后代元素占據(jù)的空間消失，瀏覽器不會...

    wuaiqiu 評論0 收藏0

  • 前端部分知識總結

    摘要：在中，每一個節(jié)點被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構建頁面。而就是通過調(diào)用構造函數(shù)創(chuàng)建的對象實例的原型對象原型所指的就是一個對象，實例繼承對象的屬性。 亂序 不間斷更新 絕大多數(shù)寫的比較淺顯 看個樂子 display:none 和visibility:hidden的區(qū)別 display:none徹底消失將會隱藏它以及所有的后代元素占據(jù)的空間消失，瀏覽器不會...

    Yujiaao 評論0 收藏0

  • 前端部分知識總結

    摘要：在中，每一個節(jié)點被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構建頁面。而就是通過調(diào)用構造函數(shù)創(chuàng)建的對象實例的原型對象原型所指的就是一個對象，實例繼承對象的屬性。 亂序 不間斷更新 絕大多數(shù)寫的比較淺顯 看個樂子 display:none 和visibility:hidden的區(qū)別 display:none徹底消失將會隱藏它以及所有的后代元素占據(jù)的空間消失，瀏覽器不會...

    姘存按 評論0 收藏0

  • 【譯】《精通使用AngularJS開發(fā)Web App》（三）--- 深入scope，繼承結構，事件系

    摘要：比如，我們可以監(jiān)聽事件由實例發(fā)出，然后在任何瀏覽器中就是變化的時候都會得到通知，如下所示每一個作用域對象都會有這個方法，可以用來注冊一個作用域事件的偵聽器。這個函數(shù)所扮演的偵聽器在被調(diào)用時會有一個對象作為第一個參數(shù)。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（二） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（四） 書名：Mastering W...

    wind5o 評論0 收藏0

發(fā)表評論

0條評論

guqiu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<