JS设计模式——7.工厂模式(示例-RSS阅读器)

RSS阅读器

由于我们只想跟RSS容器对象打交道,所以用一个工厂来实例化这些内部对象并把它们组装到一个RSS阅读器中.

使用工厂方法在好处在于,我们创建的RSS阅读器类不会与那些成员对象紧密耦合在一起.

RSS阅读器的成员对象

成员对象1: xhr

这个对象就是上一篇中介绍过的,所以就不再说了.

成员对象2: 显示类

为了满足RSS阅读器类的需要,它需要实现几个方法.

var DisplayModule = new Interface('DisplayModule', ['append', 'remove', 'clear']);
var ListDisplay = function(id, parent){
    this.list = document.createElement('ul');
    this.list.id = id;
    parent.appendChild(this.list);
};
ListDisplay.prototype = {
    append: function(text){
        var newEl = document.createElement('li');
        this.list.appendChild(newEl);
        newEl.innerHTML = text;
        return newEl;
    },
    remove: function(el){
        this.list.removeChild('el');
    },
    clear: function(){
        this.list.innerHTML = '';
    }
};

成员对象3: 配置对象

这只是一个对象字面量,它包含着一些借位阅读器类及其成员对象使用的设置

var conf = {
    id: 'con-top-stories',
    feedUrl: 'http://www.baidu.com',
    updateInteval: 60,
    parent: $('feed-readers')
};

RSS阅读对象类

上面介绍的类都由一个名为FeedReader的类组合使用.它用xhr处理器从RSS源获取XML格式的数据并用一个内部方法进行解析,然后用显示模块将解析出来的信息输出到网页上.

var FeedReader = function(display, xhrHandler, conf){
    this.display = display;
    this.xhrHandler = xhrHandler;
    this.conf = conf;
 
    this.startUpdates();
};
FeedReader.prototype = {
    fetchFeed: function(){
        var that = this;
        var callback = {
            success: function(text, xml) {that.parseFeed(text, xml)},
            failure: function(status) {that.showError(status);}
        };
        this.xhrHandler.request('GET', 'feedProxy.php?feed='+this.conf.feedUrl, callback);
    },
    parseFeed: function(responseText, responseXML){
        this.display.clear();
        var items = responseXML.getElementsByTagName('item');
        for(var i= 0, len=items.length; i<len; i++){
            var title = items[i].getElementsByTagName('title')[0];
            var link = items[i].getElementsByTagName('link')[0];
            this.display.append('<a href="'+link.firstChild.data+'">'+this.firstChild.data+'</a>');
        }
    },
    showError: function(statusCode){
        this.display.clear();
        this.display.append('Error fetching feed.');
    },
    stopUpdates: function(){
        clearInterval(this.interval);
    },
    startUpdates: function(){
        this.fetchFeed();
        var that = this;
        this.interval = setInterval(function(){that.fetchFeed();}, this.conf.updateInteval*1000);
    }
};

使用工厂方法

现在还差一个部分,即把所有这些类和对象拼装起来的那个工厂方法.它被实现为一个简单工厂,如下所示.

var FeedManager = {
    createFeedReader: function(conf){
        var displayModule = new ListDisplay(conf.id+'-display',conf.parent);
        Interface.ensureImplements(displayModule, DisplayModule);
 
        var xhrHandler = XhrManager.createXhrHandler();
        Interface.ensureImplements(xhrHandler, AjaxHandler);
 
        return new FeedReader(displayModule, xhrHandler, conf);
    }
}

使用这个工厂方法,可以把FeedReader类所需的复杂设置封装起来,并且可以确保其成员对象都实现所需接口.

它还把对所使用在特定模块的硬性设定集中在一个位置(ListDisplay和createXhrHandler),哪天要是想使用ParagraphDisplay和QueueHandler,做起来也同样简单,只要改改这个工厂方法内部的代码就行.

等.