巧用JavaScript語言特性解耦頁面間調用

一個很小的技巧，留下一筆，供往後查看。

業務場景：

一個頁面A，打開一個新窗口頁面B，執行業務操做，B執行完後，回調A頁面方法，並關閉自身。

最原始方法：

最直接的方法莫過於在B頁面直接調用A頁面的某一個方法，示例代碼以下：

A頁面打開B頁面的方法以下：

 function showIndustry() {
        var title = "行業選擇";
        layer.open({
            title: title,
            type: 2,
            area: ['768px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: ctxPath + 'sgjXzzfCommon/industryView'
        });
    }

B頁面保存方法以下：

    function saveInfo() {
        var a = $("#selectId").val();
        var b = $("#selectName").val();
        parent.initIndustrySelect(a, b);
        closeLayer();
    }

這樣寫徹底知足須要，可是若是B頁面是一個公共的頁面，供不少頁面調用的話，那麼這種寫法就存在以下2個問題：

1.寫頁面的人不少，不可能把回調函數都命名爲相同的方法名稱，讓B頁面回調。這樣會增長頁面間調用出錯的可能性。

2.B頁面根據不一樣的父頁面，編寫各類if else語句或者switch語句，用來判斷應該回調那些頁面的函數，增長了代碼量和出錯的機率。

爲此，若是能有一種方法讓B根據調用者的意圖來回調，又不增長額外的代碼，那麼簡直就是極好的。因而，有了以下的辦法：

新方法：

A頁面打開B頁面時，增長一個參數callbackFun，用於告訴B頁面回調函數名稱叫什麼，而後B頁面在完成自身操做後，直接回調這個函數。

 function showIndustry() {
        var title = "行業選擇";
        layer.open({
            title: title,
            type: 2,
            area: ['768px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: ctxPath + 'sgjXzzfCommon/industryView?callbackFun=initIndustrySelect'
        });
    }

function initIndustrySelect(obj) {
        if (obj!= null) {
            currentForm.find("input[name=industry]").first().val(obj.id);
            currentForm.find("input[name=industryName]").first().val(obj.name);
        }
    }

B頁面的回調方法以下：

function saveInfo() {
        if (currentForm.valid() == false) {
            return;
        }
        $("#btnSubmit").prop("disabled", true);
        currentForm.ajaxSubmit({
            type: 'post',
            url: ctxPath + "sgjXzzfCommon/add",
            success: function (data) {
                $("#btnSubmit").prop("disabled", false);
                if (data.success == true) {
                    callback(data.data);
                    closeLayer("保存成功");
                }
                else {
                    layer.alert("提交失敗：" + data.error);
                }
            },
            error: function (data) {
                $("#btnSubmit").prop("disabled", false);
                layer.alert("提交失敗：" + data.statusText);
            }
        });
    }

 function callback(obj) {
        var fun = /*[[${callbackFun}]]*/;
        if (fun!=null && fun.length > 0) {
            var callbackFun = parent[fun];
            if (typeof callbackFun != "undefined") {
                callbackFun(obj);
            } else {
                callbackFun = parent.frames[0][fun];
                callbackFun(obj);
            }
        }
    }

如此，A、B頁面直接經過callbackFun參數實現回調，解決了頁面回調耦合性強的問題。