监听者模式--前端组件引用

应用场景：

页面引用组件，为实现业务分离，解耦合，组件内部有指定的调用方法及触发事件，在引用组件的父项中声明指定方法，组件触发相应方法，监听到父项对象。

代码实现：

父项声明代码：

function monitorTree() {
  $urtp.Observer.regist('urtp-tree-click-eventHandler', function (data) {
        $("#navi_py a").removeClass("active"); //拼音导航，去掉选中状态
        //重置页面select数据筛选项
        resetOption();

        var v, f, c, u, g, pnode,pname;

        v = data.args.eventData[0].class_code;
        g = data.args.eventData[0].class_grade;
        pnode = $('a[data-id=' + "'" + v + "'" + ']').parents(".contentbox").siblings('.item').find('span');// 查找父节点，获取表信息

        //添加点击效果
        $('a[data-id=' + "'" + v + "'" + ']').parents('dd').siblings().removeClass('on');
        $('a[data-id=' + "'" + v + "'" + ']').parents('dd').addClass('on');
        $('a[data-id=' + "'" + v + "'" + ']').parents('li').siblings().find('dd').removeClass('on');
        $('a[data-id=' + "'" + v + "'" + ']').parents('li').siblings().removeClass('on');
        $('a[data-id=' + "'" + v + "'" + ']').parents('li').addClass('on');

        pname = $('a[data-id=' + "'" + v + "'" + ']').parents('dl').siblings('a').find('i').html();
        f = pnode.attr('data-field');
        c = pnode.attr('data-clsid');
        u = pnode.attr('data-useTableId');
        // data-field分级配置的不同时候：处理
        if (f.indexOf(";") > 0) {
            f = f.split(";")[Number(g) - 1]
        }
        if (!!u && config.tableid != u) {
            config = $urtp.navi.ready({
                dfield: f,
                dvalue: v,
                tableid: u
            }).config;
        } else {
            config = $urtp.navi.ready({
                dfield: f,
                dvalue: v,
                clsid: c,
                tableid: config.tableid //这里需要给tableid赋值，否则在使用其他导航表查询时会出现bug
            }).config;
        }

        //处理导航头部sitemap内容显示
        if ($urtp.isNull(pname)) {
            //当前节点未包含父节点
            if (typeof sitemap_node == "function") {
                sitemap_node($('a[data-id=' + "'" + v + "'" + ']').attr("title"));
            }
        } else {
            //当前节点包含父节点
            if (typeof sitemap_node == "function") {
                sitemap_node(pname);
            }
            if (typeof sitemap_node_children == "function") {
                sitemap_node_children($('a[data-id=' + "'" + v + "'" + ']').attr("title"));
            }
        }
        search();
        $urtp.log.search(config.sysID, 'source_code', config.pykm, 'navi', config.sysCode, null);
    });
};

子组件中的js代码，组件监听并触发事件调用父项值：

$(document).ready(function () {
        $("#DvelopmentTarget1 a").unbind('click').bind('click', function () {
            var value = $(this).attr('data-id');
            //调用setfilter()获取检索的值
            var data = setfilter(modelDataJson, 'class_code', value, '');
            //监听者模式fire()方法,dom里触发监听
            $urtp.Observer.fire('urtp-tree-click-eventHandler', {'eventData': data})

            // navi中检索框内容重置
            $('#navi-srchtext').val('');
        })
})

监听者js方法：

(function (window) {
    var u = {}
    u.Observer = (function () {
        var __messages = {};
        return {
            //父项声明的对象
            regist: function (type, fn) {
                if (typeof __messages[type] === 'undefined') {
                    __messages[type] = [fn]
                } else {
                    __messages[type].push(fn);
                }
            },
            //子项触发监听到父项值
            fire: function (type, args) {
                if (!__messages[type])
                    return;
                var events = {
                        type: type,
                        args: args || {}
                    },
                    i = 0,
                    len = __messages[type].length;
                for (; i < len; i++) {
                    __messages[type][i].call(this, events);
                }
            },
            //移除监听参数
            remove: function (type, fn) {
                if (__messages[type] instanceof Array) {
                    var i = __messages[type].length - 1;
                    for (; i >= 0; i++) {
                        __messages[type][i] === fn && __messages[type].splice(i, 1)
                    }
                }
            }
        }
    })();

 window.$urtp = u;

})(window)