mootools【十】- window的擴充及多彩世界

一.Mootools架構對Window的擴充:

瀏覽器的window對象本身就提供了我們很多的對瀏覽器本身屬性的擷取或設定的方法，但是我們也知道，由於各大瀏覽器之間對標準的實現不統一，導致很多方法功能上有所出入，mootools為我們統一了我們最常用的一些方法：

mootools的Window.Base.js裡面，主要實現了對DOM樹建立完成的事件監聽。以前，我們可能經常把javascript代碼寫在html代碼的最後面獲者加上defer屬性，以保證javascript代碼要操作的html先於javascript代碼裝載(如果不是這樣的話，javascript將擷取不到目標元素而出錯)，但是，這種方式看起來還是太雜亂，保險係數也不是最高的。其實像ie的話可以根據document的readyState屬性來判斷文檔樹的建立狀態，而有些瀏覽器在建立文檔樹之後會觸發onload事件，mootools把這些都封裝了起來，形成一個統一的自訂事件"domready"，你可以像添加其他監聽器一樣來為window添加這個domready事件的監聽器方法：

window.addEvent('domready',function(){

alert('the dom is ready');

});

備忘:---這就是為什麼只要用到mootools架構的地方總是以給頁面添加事件:window.addEvent('domready',function(){//操作內容...}開始的原因.這樣這可保證javascript代碼要操作的html先於javascript代碼裝載(如果不是這樣的話，javascript將擷取不到目標元素而出錯)

另外，有個快捷方法，效果和以上相同：

window.onDomReady(function(e){

alert('dom is ready!!!');

});

mootools的Window.Size.js提供了一系列和瀏覽器window的尺寸有關的工具方法。

window的擴充方法：

getWidth：擷取window的當前高度(不包含捲軸的滾動量，即當前能見

視野高度)

getHeight：擷取window的當前寬度(不包含捲軸的滾動量，即當前能見 視野寬度)

getScrollWidth：擷取window的當前高度(包含了整個內容地區，即可滾動 部分也計算在內)

getScrollHeight：擷取window的當前寬度(包含了整個內容地區，即可滾動 部分也計算在內)

getScrollLeft：擷取window滾動的水平位移量

getScrollTop：擷取window滾動的垂直位移量

getSize：擷取window上面幾個方法的提供的資料，格式：

{

'size':{'x':this.getWidth(),'y':this.getHeight()},

'scrollSize':{'x':this.getScrollWidth(),'y':this.getScrollHeight()},

'scroll':{'x':this.getScrollLeft(),'y':this.getScrollTop()}

}