首頁 > 文章 > web前端 > JavaScript框架程式設計

JavaScript框架程式設計

高洛峰原創: 2016-11-25 11:41:421001瀏覽

使用JavaScript框架
　　在講述 window 物件的時候，我們提到過，一個框架內的網頁也是 window 對象，也就是說，Frame 物件也是 window 物件。用最容易理解的話來說，每一個 HTML 檔案佔用一個 window 對象，包括定義框架的網頁（「框架網頁」）。在IE 裡用「」標記在文件中插入的框架也是window 對象，但用「包含網頁」的方法（在HTML 中顯示為「<br> <br><script language="JavaScript" type="text/javascript"><br/><br/></script><br>如果執行了這段程式碼，就會彈出「hello,ajax !」的窗口，這正是執行hello()函數的結果。那為什麼hello()變成了window物件的方法呢？因為在一個頁面內定義的所有全域變數和全域函數都是作為window物件的成員。例如：<br>var a=1;<br>alert(window.a);<br>就會彈出對話框顯示為1。同樣的原理，在不同框架之間共享變數和函數，就是要透過window物件來呼叫。 <br>例如：一個商品瀏覽頁面由兩個子框架組成，左側表示商品分類的連結；當使用者點擊分類連結時，右側顯示對應的商品清單；使用者可以點擊商品旁的【購買】連結將商品加入購物車。 <br>在這個例子中，可以利用左側導航頁面來儲存使用者想要購買的商品，因為當使用者點擊導航連結時，變化的是另一個頁面，即商品展示頁面，而導航頁面本身是不變的，因此其中的JavaScript變數不會遺失，可以用來儲存全域資料。其實作原理如下：<br>假設左側頁面為link.html，右側頁面為show.html，頁面結構如下：<br><br> <br><br><title> New Document </title> <br><br><frameset cols="20%,80%"> <br> <frame> <br> </frameset> <br><br>在show.html中展示的商品旁邊可以加入這樣一條語句：<br><a href="http://www.php1.cn%20/">其中link表示導航框架，在link.html頁面中定義了arrOrders數組來儲存商品的id，函數addToOrders()用來回應商品旁邊【購買】連結的點擊事件，它接收的參數id表示商品的id，例子中是id為32068的商品：<br><script language="JavaScript" type="text/javascript"><br/><!--<br/>var arrOrders=new Array();<br/>function addToOrders(id){ <br/> arrOrders.push(id);<br/>}</script></a>

//-->

這樣，在結帳頁面或是購物車瀏覽頁面就可以用arrOrders來取得所有準備購買的商品。

框架可以使一個頁面劃分為功能獨立的多個模組，每個模組之間彼此獨立，但又可以透過window物件的引用來建立聯繫，是Web開發中的重要機制。在Ajax開發中，還可以利用隱藏框架實現各種技巧，在後面介紹Ajax實例編程時可以發現，無刷新上傳文件以及解決Ajax的前進後退問題都會用到這種技術。 🎜🎜🎜🎜

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript的事件機制下一篇：JavaScript的事件機制

相關文章

看更多