如何优雅的管理DISABLED行为

发表于

禁止用户进行DOM操作，是前端工程师在交互开发过程中最常遇到的一种需求。比如:防止表单重复提交、勾选阅读协议才开放提交按钮等等… 本文介绍了一种作者在平时工作中管理DISABLED行为的便捷方案，利用极少量的代码，通过简单的约定，即可轻松管理交互过程中的DISABLED，ENABLE。

开始编码前，首先我们来抽像下行为模型：

  1. 监控用户触发DOM事件
  2. 事件触发前判断DOM是否标识禁用
  3. yes,不触发任何操作 | no, 触发dom绑定事件

细想下来用户行为非常简单，判断逻辑也非常简单，哪我们开始构思如何实现统一便捷的管理方法。

第一步：首先来看看上面第2点，判断DOM是否具有禁用标识。 这个非常容易实现，通过固定的class，dom 属性等等特征都可以做到。

第二步：回头再查看第1点，这一步，我们要在用户事件绑定的方法触发前，进行dom状态的识别。这里我们从jQuery事件绑定出发 (按照同样的思路，走深一层，也可以在原生JAVASCRIPT做出同样的扩展，这里作者就偷偷懒啦)，只要在jQuery事件触发前，前置一个判断不就好了嘛。这一步也非常容易实现。SO，实现逻辑清晰了。下面来看看具体实现方案吧：

实现步骤：

  1. 定义一个标识，这里我们定义.disabled为禁用标识。符合大部分的开发逻辑.
  2. 对jQuery事件绑定进行改写，这也是最核心，最简单的地方, 由于代码非常简单我也就不多作说明了，大家往下看吧:
1
2
3
4
5
6
7
8
9
//基于这种方式大家也可以做出更多的前置规则扩展
var origAdd = $.event.add;
$.event.add=function(elem, types, handler, data, selector){
	var origHandler = handler;
	handler=function(){
		if(!$(this).hasClass('disabled')) origHandler.call(this,e);
	}
	origAdd.apply(this,arguments);
};
  1. 在需要控制用户事件的DOM上，动态的添加删除.disabled就好了。

用例：

1
2
3
4
Site.send({
  antiBtn: $dom //触发元素的jQuery选器，用于防重复提交。
  ...
});

这是作者在某项目中，通信模块的防重复提交的代码实例, 只用简单在异步请求中指定要防重复提交的按钮，让其在触发前、success、error中自动控制对按钮.diabled的添加删除。在调用时指定好元素jQuery选择器，即可轻松实现对按钮的禁用状态控制。

本文仅分享作者工作中的经验心得，欢迎大家提出新的思路。