一步步做组件-学校选择器(3)
发布在一步步做组件-学校选择器2015年4月8日view:2013BrettBatWeb组件,模块化
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在上一篇中我们使用了封装的设计方法,实现了一个学校选择器的“类”,降低了页面中使用该功能的难度。但同时我们发现页面中需要的回调都得写在同一个地方,这使得随着页面功能的迭代,学校选择器的回调函数将变得越来越庞大。为了解决这个隐患,需要自定义事件,然后在页面中需要用到回调的地方改成监听事件。我们首先要了解下观察者模式。

观察者模式

在之前的javascript设计模式中有一个观察者模式的例子,在那个例子中的记录了事件类型、回调函数以及回调context。这里我们对其简化,暂不考虑回调函数的context

1.由于需要在对象外部监听/订阅事件,我们在SchoolBoxprototype中添加两个方法。

SchoolBox.prototype = {
    // 以上省略...

    on: function(type, handler){
        if(typeof this.handlers[type] === 'undefined'){
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    },
    fire: function(type, data){
        if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for(var i=0, len=handlers.length; i<len; i++){
                handlers[i](data);
            }
        }
    }
};

on是用于监听的,供对象外部(应用层)使用。而fire用于触发事件,在对象内部使用。handlers是用来存储事件类型和回调函数的一个map,它的key就是事件类型,而value是一个数组,数组里面就是监听该事件类型的所有回调函数。

2.这里的handlers需要在对象构造的时候初始化,在真正的构造函数里添加一行this.handlers = {};即可。

3.触发事件

$schoolDiv.find('a').live('click', function(event){
    // 以上省略...

    // 自定义事件回调
    instance.fire('schoolChosen', {
        schoolId: $(this).attr('data-school'),
        schoolName: $(this).text()
    });
});

4.应用层监听事件

schoolBox.on('schoolChosen', function(data){
    $schoolInput.val(data.schoolName);
    $schoolId.val(data.schoolId);
    $chooseBoxLink.show();
});

学校选择器v4 Demo

还有吗?

观察者模式也叫做自定义事件,现在SchoolBox内部可以触发各种事件,而在应用层页面各部分只需要选择监听它需要的事件即可,这样就解决了先前的schoolClickCallback过大的问题。

那么到这儿就结束了吗?在下一篇中我们会添加搜索框的功能。

我的博客

原文链接:http://fuxiaode.cn/blog/2015/01/20/step-by-step-js-component-schoolbox-3/

合集链接:http://fuxiaode.cn/blog/2015/02/11/step-by-step-js-component-schoolbox-collections/

评论
发表评论
暂无评论
PUBLISHED IN
一步步做组件-学校选择器

这学期来一直在忙项目,整整一个学期都在做,自己的看书计划也没能实施。不过还是有不少收获的,是对以前看过的 JS Patterns 系列的综合运用,所以光看是不够的,一定要能应用到实际的业务中,并根据具体业务相应调整。趁着现在这段时间,想把以前写过的代码重新review一遍,并抽出可复用的功能把它们改写成通用组件,既是自己总结和提升的机会,也把它们作为以后的代码积累。原文博客合集链接:http://fuxiaode.cn/blog/2015/02/11/step-by-step-js-component-schoolbox-collections/

我的收藏