单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一。它规定一个类应该只有一个发生变化的原因。

在前端开发的过程中，一个需求总会有多种解决方法，如果多人开发，其实我觉得单一职责挺适合前端的，前阵子看了下实习生的代码，就想举这个例子来说说。

需求描述：两个input框作为查询条件，一个按照名称搜索，一个按照条码搜索，input框边上各自都有一个搜索按钮。在最外侧还有一个刷新按钮。

当时实习生做完，测试写了一个bug，具体内容是：去掉input框里面的内容，点击刷新，不能搜索出全部内容。

其实按照对刷新的理解，去掉input框的内容，但用户并没有点击搜索按钮，刷新只是刷新最近一次搜索内容。如果根据所见即所得的说法的话这个bug应当是，点击刷新按钮，input框需要显示出搜索条件，即用户删掉input框内前的数据。

但有时候有些人道理是说不通的。

因为后台对于条码搜索是全匹配的，想要搜索出全部内容，搜索条件是null不是""
然后我就看了下实习生的代码，他在刷新按钮绑定click的方法里面，获取了当前名称的值，获取了当前条码的值，然后判断，是“”的情况下变成null，然后再调用了load的方法。

$("#fresh").on("click",function(){//刷新按钮
    var key_name = $("#key_name").val()||null;//获取值
    var key_barcode =  $("#key_barcode").val()||null
    tableinstance.query.key_name = key_name;
    tableinstance.query.key_barcode = key_barcode;
    tableinstance.load();//load 方法本身需要带有对query的解析
});

加上之前需要绑定两个input框外面的按钮的click 方法，和键盘绑定enter键的方法，其实这种写法是非常混乱的。

这个时候就需要用到单一职责原则

针对测试提出来的bug，我们需要做的是 input框中的值的变更实时与搜索条件进行绑定。

$("input").on("propertychange",function(){
    tableinstance.query[$(this).attr("name")] = $(this).val()||null;
});

两个input框不管是边上按钮 click 和enter键 刷新按钮都只需要用来调用load方法即可了。

这样代码看起来就会很简洁，如果将来还需要增加搜索条件，不至于还要去刷新按钮中，再去获取新增加的搜索条件的值。

附上我的订阅号，欢迎关注，一起学前端