JS封装出现耦合,怎么解决?(上)

公司在做一个较大的项目,我一般把一些自己写的公用的js插件封装起来。

之前我封装了一个 “数量选择器”,把它封装成一个仅有数量改变功能并能正则匹配正整数的一个纯粹的选择器,它可以通过new在一个页面添加多个。

技术分享

插件内,我定义了onchange和onkeyup进行正则匹配。

change: function(){
		var self = this;
		this.numInput.onchange = function(){regNum(this)};
		this.numInput.onkeyup = function(){regNum(this)};
		function regNum(thisNum){
			var type = /^[1-9][0-9]*$/;//匹配正整数
			var re = new RegExp(type);
			if(thisNum.value.match(re)==null){
				thisNum.value = 1;
			}	
			self.moveClass();
		}		
		return this;
	},

这以上的功能都OK,没有什么问题。

 

后来我就发现问题了:

我在某些页面调用了此插件,有些页面需要根据我选择的数量做一些改变,

就比如说一个商品的页面,我改变商品的数量,价格应该相对应改变;

又比如说一个购物车结算的页面,我需要改变数量的同时,改变价格总计:

技术分享

一般做这种功能都是用一个change事件绑定,数量改变就执行相应函数,可是现在我封装的数量选择器里已经有change事件正则匹配了,

而且它是独立的插件,change事件也只能绑定一个,而且我不希望它为了某个功能再去添加函数,那样每次出现新功能我都得添加函数和修改入口。

好吧,我不知道怎么办了。

也许是我经验缺乏,应该会有一个解决办法,希望大家帮帮忙,分享一下你们的想法!

问题解决,我将会发表下篇,将把我的收获分享给更多人。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。