前端开发之单一职责原则
在前端开发的过程中,一个需求总会有多种解决方法,如果多人开发,其实我觉得单一职责挺适合前端的,前阵子看了下实习生的代码,就想举这个例子来说说。 需求描述:两个input框作为查询条件,一个按照名称搜索,一个按照条码搜索,input框边上各自都有一个搜索按钮。在最外侧还有一个刷新按钮。 当时实习生做完,测试写了一个bug,具体内容是:去掉input框里面的内容,点击刷新,不能搜索出全部内容。 其实按照对刷新的理解,去掉input框的内容,但用户并没有点击搜索按钮,刷新只是刷新最近一次搜索内容。如果根据所见即所得的说法的话这个bug应当是,点击刷新按钮,input框需要显示出搜索条件,即用户删掉input框内前的数据。 但有时候有些人道理是说不通的。 因为后台对于条码搜索是全匹配的,想要搜索出全部内容,搜索条件是null不是"" $("#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方法即可了。 这样代码看起来就会很简洁,如果将来还需要增加搜索条件,不至于还要去刷新按钮中,再去获取新增加的搜索条件的值。 附上我的订阅号,欢迎关注,一起学前端
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |