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事件也只能绑定一个,而且我不希望它为了某个功能再去添加函数,那样每次出现新功能我都得添加函数和修改入口。

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

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

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

时间: 2024-10-24 18:20:26

JS封装出现耦合,怎么解决?(上)的相关文章

使用原生JS封装Tap事件,解决移动端300ms延迟

为了防止误操作,移动端iOS操作系统针对原生click事件做了300ms的延迟,这在一定程度上影响了我们的使用体验. GitHub项目地址:https://github.com/SimonZhangITer/MyTapEvent FastClick 现在有现成的插件fastclick可以解决这个问题,但是也有弊端: GitHub上最新版本的插件大小为25.4kb,轻量为趋势,能省则省. 它的核心思想是取消默认的click时间,判断当前dom节点的类型进行相应的操作,这个判断过程较为繁琐. MyT

一款在论坛上看到的JS封装的随机过渡方式的图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js仿百度文库文档上传页面的分类选择器_第二版

仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器: 此版本把HTML,CSS,以及图片都封装到"category.js"中,解决因文件路径找不到样式及图片的问题: 源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577 初始状态,一个页面使用两个,可以初始化之前选中的分类: 选择状态: 当选中一个分类后,会触发"onChange"事件,如上图中的"您选择的分类编

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

ECSHOP中transport.js和jquery冲突的解决方法

jQuery 和global.js 冲突 百度和google多次,根据网上的大多数建议和自己测试,解决办法如下:删除global.js 或者global.js 文件的10-13行屏蔽//Object.prototype.extend = function(object)//{// return Object.extend.apply(this, [this, object]);//}并且希望官网的人能解释下 global.js 文件的实际用处,上面的解决办法影响平台不 在html文件的最后面添加

JS 无法清除Cookie的解决方法

JS 无法清除Cookie的解决方法 项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString()

Bootstrap fileinput.js,最好用的文件上传组件

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" /> <script type="text/javascri

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.