前端开发之单一职责原则

单一职责原则(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方法即可了。

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

关键字:JavaScript, html, css

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部