天天看點

浏覽器對象BOM模型開發示意圖分析(應用設計)

  這是一款浏覽器設計對象的模型,通常應用在JavaScriptde的用戶端;使頁面中的内容都可以通過JavaScript來進行修改和設計,這來說對網頁設計者來說是一個很好的開發;這樣可以制作出更多更廣範和完整的、時尚的來應用創作。我們通常可以應用比較的手法來把它進行進步性的修改和自拟定義;同時能夠一些大量的能被控制頁面元素(HTML标簽)來有序應用這樣便不會造成混亂。它們便成為浏覽器定義浏覽器運用對象的的模型。我們首先以Window來示範BOM的以下圖(490*480像素)流程圖說明:

<a href="http://huangyouliang10.blog.51cto.com/attachment/201010/1/1562091_1285935967Pl8K.png"></a>

      從Window中顯示出層次順序的步驟,形成流水線的一個可觀模型流程圖形;我們便可以根據它内局結構來進行設計、修改和進行開發。Window的對象是BOM模型中的頂層對象,我們通常可以把它了解為包含文檔的(document)的視窗容器,在一個浏覽器視窗就是一個Window對象的界面表現;即使文檔沒有加載視窗依然存在。隻要打開一個浏覽器視窗,Window的對象就存在運作了,它的運作也就是視窗的本身。在Window中的面向對象BOM的名稱是(Browser Object Model)

,BOM并不标準,因為它所關注的是浏覽器的整體結構,同時也包括浏覽器的屬性和行為。之是以每個浏覽器都有他自己的BOM,它們并不完全一緻的,上圖是大多數浏覽器廉容的部分。

      這些對象是ECMAscript規範中所指出的宿主(浏覽器)的Window對象,它們與ECMAScript一同構成了浏覽器用戶端的JavaScript的應用程式。以下圖表(640*452像素)是關于浏覽器對象的一些适用方法

<a href="http://huangyouliang10.blog.51cto.com/attachment/201010/1/1562091_1285935972780p.png"></a>

  alert()函數的另一個用途是可以對編碼進行跟蹤;當我們把腳本在沒有到執行預定的位置時就表示在什麼地方出現錯誤的判斷,在調用函數之前、函數執行中、函數傳回時,這些應用過程都可以添加alert()的方法來輸出一些變量或者參數,用于表示流程并沒出錯。這些方法是定位錯誤最快的,當然不一定是有效的,對于遞歸或者周遊數節點這樣的操作,還是使用調試工具比較好。

Window對象地方法在“聊天軟體”中也有很多流行的“震屏”效果,應用setInterval的函數來對對象的重複移動視窗位置,産生震動的效果。

操作步驟如: 

        (1) 改變視窗大小為400*400像素: (首先将原來的視窗調到一定範圍有限的像素如上圖表中所提到“控制視窗大小與位置)

          window.resizeTo(400, 400); //改變視窗的大小     

        (2) 定義參數:

          var loop = 0; //震動次數   (在沒有進行執行任務時的進度如例)

          var timer; //定時器引用        

          var offx; 

          var offY; 

          var dir = 1; //震動的方向。1 正,-1 反 

         (3) 使用 setInterval 函數來重複移動視窗位置,達到震動效果: 

           //震動特效 

           timer = setInterval(function() { 

               window.moveTo(500, 180); //改變視窗的位置 

               if(loop &amp;gt; 100) { //震動次數超過100次就停止定時器 

                   clearInterval(timer); 

               } 

               //随機擷取震動方向 

               dir = Math.random()*10 &amp;gt; 5 ? 1 : -1; 

               //随機擷取X軸移動量 

               offX = Math.random()*20*dir; 

               //随即擷取Y軸移動量 

               offY = Math.random()*20*dir*-1; 

               window.moveBy(offX, offY); //移動偏移 

               loop++; //震動次數增加 

           },10) //每個10毫秒震動一次

     Window對象的架構集中繪制,當頁面被通過frameSet或者iframe進行嵌套時,每一個頁面都對任何其他頁面有一個引用,而互相引用的入口也就是Window對象。以下圖(640*480像素)是頁面間的嵌套對象關系示範圖,并且進行腳本編寫

(1)  頁面A中編寫的腳本: 

             frameA.contentwindow 

             frameA 是頁面A中的iframe對象的引用,可以通路到頁面B和頁面D的window對象,但無法直接通路頁面C. 

       (2)   頁面B中的腳本: 

             frameB.contentwindow 

             frameB.是頁面B中的iframe或者frame标簽對象的引用,可以通路到頁面C的window 對象。下面的代碼可以通路到頁面             A的window 

             對象: 

             //window 表示頁面B自身 

             window.parent 

       (3)   頁面C中的腳本: 

             //window 表示頁面C自身 

             可以通路到頁面B的window對象。 

             下面的代碼可以通路到頁面A的window對象: 

             window.top 

       (4)   頁面D中的腳本: 

             //window表示頁面D自身 

             可以通路到頁面A的window對象。 

             嵌套結構也是一個樹型結構,不同分支上的頁面如果要互相通路的話,那我們必須先得掌握到共同節點的引用,這  樣便于在運用腳本時可以有序而不會導入混亂,因為腳本的應用是講究有序正确的控制在制定的範圍運作的;是以Window對象是需要适用性的。 

          例如:頁面B要通路頁面D,那我們必須先得到頁面A的引用,例如:

本文轉自huangyouliang10 51CTO部落格,原文連結:http://blog.51cto.com/1572091hyl10/400130

繼續閱讀