巧用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参数实现回调，解决了页面回调耦合性强的问题。