设为首页 加入收藏

TOP

读书笔记之 - javascript 设计模式 - 工厂模式(三)
2019-09-03 03:33:35 】 浏览:78
Tags:读书 笔记 javascript 设计模式 工厂 模式
fline()){
this.storedRequests.push({ method:method, url:url, callback:callback, postVars:postVars }); }else{ this.flushStoredRequests(); OfflineHandler.superclass.request(method,url,callback,postVars); }; OfflineHandler.prototype.flushStoredRequests = function(){ for(var i=0,len=storedRequests.length;i<len;i++){ var req = storedRequests[i]; OfflineHandler.superclass.request(req.method,req.url,req.callback,req.postVars); } } }

xhrManager.isOffline 方法的作用在于判断用户是否处于在线状态。

现在用到工厂模式了,因为程序员根本根本不肯知道各个最终用户实际面临的网络条件,所以不可能要求他们在开发过程中选择使用哪个处理器类,而是应该用一个工厂在运行时选择最合适的类。

var xhrManager = {
    createXhrHandler:function(){
        var xhr;
        if (this.isOffline()) {
            xhr = new offlineHandler();
        }else if(this.isHighLatency()){
            xhr = new QueuedHandler();
        }else{
            xhr = new SimpleHandler();
        };

        Interface.ensureImplements(xhr,AjaxHandler);
        return xhr;
    },
    isOffline:function(){},
    isHighLatency:function(){}
}

现在程序员就可以使用这个工厂方法,而不必实例化一个特定的类了:

var myHandler = xhrManager.createXhrHandler();
var callback = {
    success:function(responseText){},
    failure:function(statusCode){}
}
myHandler.request('GET','script.php',callback);

示例:RSS阅读器:

RSS 阅读器对象,它的成员对象包括一个XHR处理器对象,一个显示对象,一个配置对象,XHR处理器类我们使用上面的xhrManager.createXhrHandler方法所创建的处理器对象,下面是一个显示类(显示对象):

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 = '';
    }
}

下面是一个配置对象,这只是一个对象字面量,包含一些供阅读器以及成员对象使用的设置:

var conf = {
    id:'cnn-top-stories',
    feedUrl:'http://.....rss',
    updateInterval:60,
    parent:$('feed-readers')
}

这些类由FeedReader组合使用。它使用XHR获取数据,并解析,最后显示模块将信息输出到网页:

var FeedReader = function(display,xhrHandler,conf){
    this.display = display;
    this.xhrHandler = xhrHandler;
    this.conf = conf;
    this.startUpdates();
}
FeedReader.prototype  = {
    fetchFeed:function(){
        var _this = this;
        var callback = {
            success:function(text,xml){
                _this.parseFeed(text,xml);
            },
            failure:function(status){
                _this.showError(status);
            }
        };
        this.xhrHandler.request('GET',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+'">'+title.firstChild.data+'</a>');
        }
    },
    showError:function(status){
        this.display.clear();
        this.display.append('Error fetching feed.');
    },
    stopUpdates:function(){
        clearInterval(this.interval);
    },
    startUpdates:function(){
        this.fetchFeed();
        var _this = this;
        this.interval = setInterval(function(){_this.fetchFeed();},
                this.conf.updateI
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇说说设计模式~大话目录(Design Pa.. 下一篇设计模式-单例模式,观察者模式

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目