資訊專欄INFORMATION COLUMN
摘要：進(jìn)入報表頁面的入口不是固定的頁面，也不是固定的按鈕，因此不同種類的報表傳遞的參數(shù)不同，并且各組參數(shù)之間沒什么共同性。鑒于以上幾點，我利用父子頁面能夠互相訪問對方對象的特性，想了一個頁面間隱式傳遞參數(shù)的方式。
該文寫于 2012-08-10
在工作的開發(fā)過程中有個查看報表的需求——從某個頁面點擊按鈕打開報表頁面（該頁面為新建窗口）。進(jìn)入報表頁面的入口不是固定的頁面，也不是固定的按鈕，因此不同種類的報表傳遞的參數(shù)不同，并且各組參數(shù)之間沒什么共同性。原本的實現(xiàn)方式是通過 URL 的 queryString 將參數(shù)傳遞到報表頁面，正如前面所說，不同種類的報表傳遞的參數(shù)不同，于是報表頁面就會出現(xiàn)以下一些問題：
URL 過長，看起來很不美觀；
需要對 queryString 進(jìn)行解析與判斷來判別是什么類型的報表；
如果未來多加一些類型的報表的話，判斷也會隨之增多，這樣不僅代碼量增加，維護(hù)起來也有點困難，還影響性能；
安全性欠佳，通過 queryString 找到規(guī)律的話，通過瀏覽器地址欄隨便地輸入一個符合規(guī)律的 URL 就能獲得想要看的數(shù)據(jù)。
鑒于以上幾點，我利用父子頁面能夠互相訪問對方 window 對象的特性，想了一個“頁面間隱式傳遞參數(shù)”的方式。
父頁面（入口頁面） JavaScript 代碼javascriptwindow.windowPool = []; // 用于存儲子頁面的 window 對象及隱式傳遞的參數(shù)
var newWin = window.open( url ), // 新建窗口，url 為報表頁面地址
reportParams = {}; // 報表所需參數(shù)
window.windowPool.push({
"window": newWin,
"parameter": reportParams
});
看到上段代碼，也許會奇怪地問：“為什么要將子頁面的 window 對象和報表參數(shù)分開，而不是將報表參數(shù)綁定在子頁面的 window 對象上？”這是因為子頁面如果刷新了的話，報表參數(shù)就會失效了。將子頁面（報表頁面）的 window 對象與報表參數(shù)組合成一個 JSON 添加到數(shù)組里是為了避免當(dāng)從父頁面（入口頁面）打開多個顯示不同種類報表的報表頁面時，早先打開的報表頁面刷新操作而引起的顯示后打開的報表頁面內(nèi)容的問題。
子頁面（報表頁面） JavaScript 代碼javascriptvar params, index = 0;
for( ; index < opener.windowPool.length; index++ ) {
if ( opener.windowPool[index].window === window ) {
params = opener.windowPool[index].parameter;
break;
}
}
該方式在除了 IE6 之外的瀏覽器都能正常運行，IE6 沒測試過，不清楚兼容性如何。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91514.html
摘要：，表明執(zhí)行操作的字符串。，這個屬性可以指示系統(tǒng)如何啟動一個，以及啟動之后如何處理。是一個字符串，例如這里的的構(gòu)造函數(shù)傳入了兩個參數(shù)，和組件名，調(diào)用了方法后，會在當(dāng)前的應(yīng)用中啟動這個服務(wù)。 1. 前言 ? ? ? ?在Android中有四大組件，這些組件中有三個組件與Intent相關(guān)，可見Intent在Android整個生態(tài)中的地位高度。Intent是信息的載體，用它可以去請求組件做相應(yīng)...
摘要：瀏覽器總是運行位于作用域鏈頂部的當(dāng)前執(zhí)行上下文。作用域的前端永遠(yuǎn)是當(dāng)前執(zhí)行代碼所在環(huán)境的變量對象而全局執(zhí)行環(huán)境的變量對象始終是作用域鏈中的最后一個對象。調(diào)用棧為了達(dá)到當(dāng)前執(zhí)行位置所調(diào)用的所有函數(shù)。 ECMAScript中的變量值類型 基本類型 : Number, String, Boolean, Undefined, Null 引用類型 : Object, Array, Func...
摘要：總結(jié)方法自執(zhí)行時，指向，被對象調(diào)用時，指向?qū)ο?。可以用和改變指向? 總結(jié)： 方法自執(zhí)行時，this指向window，被對象調(diào)用時，this指向?qū)ο??？梢杂胏all(),apply()和bind()改變this指向。 默認(rèn)綁定 全局環(huán)境中this默認(rèn)綁定到window console.log(this); //window ...
摘要：調(diào)用棧就是為了到達(dá)當(dāng)前執(zhí)行位置所調(diào)用的所有函數(shù)。由于無法控制回調(diào)函數(shù)的執(zhí)行方式，因此就沒有辦法控制調(diào)用位置得到期望的綁定，下一節(jié)我們會介紹如何通過固定來修復(fù)這個問題。 在《你不知道的this》中我們排除了對于this的錯誤理解，并且明白了每個函數(shù)的this是在調(diào)用時綁定的，完全取決于函數(shù)的調(diào)用位置。在本節(jié)中我們主要介紹一下幾個主要內(nèi)容： 什么是調(diào)用位置 綁定規(guī)則 this詞法 調(diào)用...
閱讀 1256·2023-04-26 00:47
閱讀 3601·2021-11-16 11:53
閱讀 824·2021-10-08 10:05
閱讀 2784·2021-09-22 15:19
閱讀 3002·2019-08-30 15:55
閱讀 2780·2019-08-29 16:55
閱讀 2960·2019-08-29 15:20
閱讀 1133·2019-08-23 16:13
