javascript设计模式-应用示例

这篇具有很好参考价值的文章主要介绍了javascript设计模式-应用示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

事件工具类

/* addEvent: simplified event attachment */
function addEvent( obj, type, fn ) {
	if (obj.addEventListener) {
		obj.addEventListener( type, fn, false );
		EventCache.add(obj, type, fn);
	}
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
		EventCache.add(obj, type, fn);
	}
	else {
		obj["on"+type] = obj["e"+type+fn];
	}
}
	
var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
		add : function(node, sEventName, fHandler){
			listEvents.push(arguments);
		},
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				if(item[0].removeEventListener){
			item[0].removeEventListener(item[1], item[2], item[3]);
				};
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				item[0][item[1]] = null;
			};
		}
	};
}();
addEvent(window,’unload',EventCache.flush);
/* window 'load' attachment */
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

JS劫持操作—模拟JS验证框架(单例应用)

GiantCorp.RegPage = {
  FORM_ID: 'reg-form',
  OUTPUT_ID: 'reg-results',
  // Form handling methods.
  handleSubmit: function(e) {
    e.preventDefault(); // Stop the normal form submission.
    var data = {};
    var inputs = GiantCorp.RegPage.formEl.getElementsByTagName('input');
    for(var i = 0, len = inputs.length; i < len; i++) {
      data[inputs[i].name] = inputs[i].value;
    }
    GiantCorp.RegPage.sendRegistration(data);
  },
  sendRegistration: function(data) {
    // Make an XHR request and call displayResult() when the response is
  },
  displayResult: function(response) {
    GiantCorp.RegPage.outputEl.innerHTML = response;
  },

  // Initialization method.
  init: function() {
    // Get the form and output elements.
    GiantCorp.RegPage.formEl = $(GiantCorp.RegPage.FORM_ID);
    GiantCorp.RegPage.outputEl = $(GiantCorp.RegPage.OUTPUT_ID);

    // Hijack the form submission.
    addEvent(GiantCorp.RegPage.formEl, 'submit', GiantCorp.RegPage.handleSubmit);
  }
};

// Invoke the initialization method after the page loads.
addLoadEvent(GiantCorp.RegPage.init);

运行过程中动态改变类实现(工厂应用)

有些时候为了适应没的场景,有些代码没必要每次调用时都进行一次环境判断,所以可以memoizing技术动态改写运行中代码的实现。

createXhrObject: function() { // Factory method.
    var methods = [
        function () {
            return new XMLHttpRequest();
        },
        function () {
            return new ActiveXObject('Msxml2.XMLHTTP');
        }
    ];
    for (var i = 0, len = methods.length; i < len; i++) {
        try {methods[i]();}
        catch (e) {continue;}
        //如果得到与环境相同的合法参数,就改变函数的内容,下面两条语句任选其一
        this.createXhrObject = methods[i]; // Memoize the method.
        //this.constructor.prototype.createXhrObject = methods[i];
        return methods[i];
    }
}

请求序列—工厂应用

发起多个请求,程序会自动缓存,并通过setTimeOut重复调用。

var myHandler = XhrManager.createXhrHandler();
var callback = {
    success: function(responseText) { alert('Success: ' + responseText); },
    failure: function(statusCode) { alert('Failure: ' + statusCode); }
};
myHandler.request('GET', 'script.php', callback);

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() { // Do a quick request with SimpleHandler and see if
    },
    isHighLatency: function() {
        //检查请求所经历的时间,根据时间长短来判断请求成功与否
    }
};

var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXhrObject']);

/* SimpleHandler class. */
var SimpleHandler = function() {}; // implements AjaxHandler
SimpleHandler.prototype = {
    request: function(method, url, callback, postVars) {
        var xhr = this.createXhrObject();
        xhr.onreadystatechange = function() {
            if(xhr.readyState !== 4) return;
            (xhr.status === 200) ?
                callback.success(xhr.responseText, xhr.responseXML) :
                callback.failure(xhr.status);
        };
        xhr.open(method, url, true);
        if(method !== 'POST') postVars = null;
        xhr.send(postVars);
    },
    createXhrObject: function() { // Factory method.
        var methods = [
            function() { return new XMLHttpRequest(); },
            function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
        ];

        for(var i = 0, len = methods.length; i < len; i++) {
            try {methods[i]();}
            catch(e) {continue;}
            this.createXhrObject = methods[i];
            return methods[i];
        }
        throw new Error('SimpleHandler: Could not create an XHR object.');
    }
};

/* 用户处于离线状态时会把所有请求缓存起来. */
var OfflineHandler = function() { // implements AjaxHandler
    this.storedRequests = [];
};
extend(OfflineHandler, SimpleHandler);
OfflineHandler.prototype.request = function(method, url, callback, postVars) {
    if(XhrManager.isOffline()) { // Store the requests until we are online.
        this.storedRequests.push({
            method: method,
            url: url,
            callback: callback,
            postVars: postVars
        });
    }
    else { // Call SimpleHandler's request method if we are online.
        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);
    }
};

/* 在发起新请求之前确保所有的请求都已成功处理. 如果有未完成的或有正在处理的则在请定时间后再调用*/
var QueuedHandler = function() { // implements AjaxHandler
    this.queue = [];
    this.requestInProgress = false;
    this.retryDelay = 5; // In seconds.
};
extend(QueuedHandler, SimpleHandler);
QueuedHandler.prototype.request = function(method, url, callback, postVars,
                                           override) {
    if(this.requestInProgress && !override) {
        this.queue.push({
            method: method,
            url: url,
            callback: callback,
            postVars: postVars
        });
    }
    else {
        this.requestInProgress = true;
        var xhr = this.createXhrObject();
        var that = this;
        xhr.onreadystatechange = function() {
            if(xhr.readyState !== 4) return;
            if(xhr.status === 200) {
                callback.success(xhr.responseText, xhr.responseXML);
                that.advanceQueue();
            }
            else {
                callback.failure(xhr.status);
                setTimeout(function() { that.request(method, url, callback, postVars); },
                    that.retryDelay * 1000);
            }
        };
        xhr.open(method, url, true);
        if(method !== 'POST') postVars = null;
        xhr.send(postVars);
    }
};
QueuedHandler.prototype.advanceQueue = function() {
    if(this.queue.length === 0) {
        this.requestInProgress = false;
        return;
    }
    var req = this.queue.shift();
    this.request(req.method, req.url, req.callback, req.postVars, true);
};

性能检查器—装饰应用

这个例子充分应用了通道方法,利用此模式应该可以做到AOP的功能。文章来源地址https://www.toymoban.com/news/detail-817671.html

var ListBuilder = function(parent, listLength) {
    this.parentEl = document.createElement(parent);
    this.listLength = listLength;
};

ListBuilder.prototype = {
    buildList: function() {
        var list = document.createElement('ol');

        this.parentEl.appendChild(list);

        for(var i = 0; i < this.listLength; i++) {
            var item = document.createElement('li');
            list.appendChild(item);
        }
    }
};

var MethodProfiler = function(component) {
    this.component = component;
    this.timers = {};

    for(var key in this.component) {
        // Ensure that the property is a function.
        if(typeof this.component[key] !== 'function') {
            continue;
        }

        // Add the method.
        var that = this;
        (function(methodName) {
            that[methodName] = function() {
                that.startTimer(methodName);
                var returnValue = that.component[methodName].apply(that.component,
                    arguments);
                that.displayTime(methodName, that.getElapsedTime(methodName));
                return returnValue;
            };
        })(key); }
};
MethodProfiler.prototype = {
    startTimer: function(methodName) {
        this.timers[methodName] = (new Date()).getTime();
    },
    getElapsedTime: function(methodName) {
        return (new Date()).getTime() - this.timers[methodName];
    },
    displayTime: function(methodName, time) {
        console.log(methodName + ': ' + time + ' ms');
    }
};

var list = new ListBuilder('list-container', 5000);
list = new MethodProfiler(list);//装饰者应用
list.buildList('ol'); // Displays "buildList: 301 ms".
list.buildList('ul'); // Displays "buildList: 287 ms".
list.removeLists('ul'); // 未实现,如果有此方法则会自动计算时间.

到了这里,关于javascript设计模式-应用示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javaScript设计模式-工厂

    它的好处是消除对象间的耦合度,在派生子类时提供了更大的灵活性。但盲目的把普通的构造函数扔在一边,并不值得提倡。如果要采一不可能另外换用一个类,或都不需要在运行期间在一系列可互换的类中进行选择,就不应该使用。这样在后期代码重构时还有机会使用。

    2024年01月20日
    浏览(56)
  • javascript设计模式-组合

    组合模式 是一种专为创建WEB上的动态用户界面而量身定制的模式。使用它,可以用一条命令在多个对象上激发复杂或递归行为,那些复杂行为被委托给各个对象。前提是每个对象必须实现相同的接口。接口检查越严格,其稳定性越高。 可以用同样的方法处理对象的集合与其

    2024年01月21日
    浏览(42)
  • javaScript设计模式-单例

    确保一个类只有一个实例,并提供全局访问点。 这个模式有三种不同的实现方式,每种都合理。但各有各的用处,其实用static类也可以实现相似的功能,不同的是单例是使用再创建,static是JVM加载时就创建。 单例提供了将代码组织为一个逻辑单元的手段,它有许多用途:可

    2024年01月19日
    浏览(40)
  • JavaScript设计模式详解

    JavaScript设计模式是解决软件设计中常见问题的可重复使用的解决方案。本博客将深入探讨JavaScript设计模式的各个方面,包括设计模式的类别、创建型、结构型、行为型、并发型和架构型设计模式。 设计模式是一种在软件设计中解决常见问题的可重用解决方案。它们是经过验

    2024年01月19日
    浏览(51)
  • JavaScript 设计模式之享元模式

    将一部分共用的方法提取出来作为公用的模块 享元模式的应用目的是为了提高程序的执行效率与系统的性能。因此在大型系统开发中应用是比较广泛的,有时可以发生质的改变。它可以避免程序中的数据重复。有时系统内存在大量对象,会造成大量存占用,所以应用享元模式

    2024年02月22日
    浏览(42)
  • javascript设计模式-责任链

    责任链 可以用来消除请求的发送者和接收者之间的耦合,这是通过实现一个由隐式地对请求进行处理的对象组成的链而做到的。链中的每个对象可以处理请求,也可以将其传给下一个对象。JS内部就使用了这种模式来处一事件捕获和冒泡问题。一般的结构如下: 发送者知道链

    2024年01月23日
    浏览(44)
  • JavaScript中的设计模式

    本文作者为 360 奇舞团前端开发工程师 JavaScript 设计模式是编程世界的智慧结晶,提供了解决常见问题的优秀方案。无论你是初学者还是经验丰富的开发者,掌握这些模式都能让你的代码更清晰、更灵活。本文将为你介绍一些常见的设计模式,帮助你提高代码质量,构建更可

    2024年02月21日
    浏览(40)
  • javascript设计模式-装饰者

    基本实现 是一种为对象增加我的技术,它并不使用创建新子类手段,一切都在动态完成。这个过程相对于使用者来说是透明的。透明地把对象包装在具有同样接口的另一个对象之中。 比如可以动态的为自行车对象添加可选的特色配件上。比如添加4个选件,可以新定义4个超类

    2024年01月22日
    浏览(48)
  • JavaScript设计模式(五)——发布订阅模式、桥接模式、组合模式

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月09日
    浏览(49)
  • JavaScript设计模式(一)——构造器模式、原型模式、类模式

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包