天天看點

網絡之美:JavaScript中Get和Set通路器的實作

  前兩天IE9 Beta版釋出了,對于從事Web開發的朋友們來說真是個好消息啊,希望将來有一天各個浏覽器都能遵循統一的标準。今天要和大家分享的是JavaScript中的Get和Set通路器,和C#中的通路器非常相似。

 标準的Get和Set通路器的實作

 在如下浏覽器能正常工作:

網絡之美:JavaScript中Get和Set通路器的實作

我們常用的實作方法可能是這樣的:

在DOM元素上Get和Set通路器的實作

在如下浏覽器能正常工作:

網絡之美:JavaScript中Get和Set通路器的實作

通過Object.defineProperty實作通路器

  将來ECMAScript标準的擴充對象的方法會通過Object.defineProperty來實作,這也是為什麼IE8就是通過這種方法來實作get和set通路器,看來微軟還是很有遠見的,遺憾的是目前隻有IE8+和Chrome 5.0+支援,其它的浏覽器都不支援,而且IE8+也隻支援DOM元素,不過将來的版本将和Chrome一樣支援普通的Javascript對象。

DOM元素上的Get和Set通路器的實作

網絡之美:JavaScript中Get和Set通路器的實作

普通對象的Get和Set通路器的實作

網絡之美:JavaScript中Get和Set通路器的實作

本文總結

  盡管微軟的IE隻是支援了Object.defineProperty,沒有完美的實作Get和Set通路器,但是我們已經看到了IE有了很大的進步,特别是剛釋出的IE9使用的新的javascript引擎,支援HTML5和CSS3,支援硬體加速等等,相信有一天各個浏覽器都能完全擁抱标準,帶來一個完美的WEB世界。

參考文獻:

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊!30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥!8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂!35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34個漂亮網站和應用程式背景管理界面</a>

網絡之美:JavaScript中Get和Set通路器的實作

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀:)</a>

歡迎任何形式的轉載,但請務必注明出處。

繼續閱讀