单一职责准绳（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要领即可了。

如许代码看起来就会很简约，假如未来还须要增添搜刮前提，不至于还要去革新按钮中，再去猎取新增添的搜刮前提的值。

附上我的定阅号，迎接关注，一同学前端