前端开发之单一职责原则

WrBug 发布于2019-08-19 18:41 / 3301人阅读

摘要：单一职责原则又称单一功能原则，面向对象五个基本原则之一。在前端开发的过程中，一个需求总会有多种解决方法，如果多人开发，其实我觉得单一职责挺适合前端的，前阵子看了下实习生的代码，就想举这个例子来说说。

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

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

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

专线服务私有云单一职责原则单一职责 web开发原则云栖大会开发者之夜

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79880.html

前端开发之单一职责原则

摘要：单一职责原则又称单一功能原则，面向对象五个基本原则之一。在前端开发的过程中，一个需求总会有多种解决方法，如果多人开发，其实我觉得单一职责挺适合前端的，前阵子看了下实习生的代码，就想举这个例子来说说。单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一。它规定一个类应该只有一个发生变化的原因。在...

Dean 2019-08-29 10:56 评论0 收藏0
前端开发之单一职责原则

摘要：单一职责原则又称单一功能原则，面向对象五个基本原则之一。在前端开发的过程中，一个需求总会有多种解决方法，如果多人开发，其实我觉得单一职责挺适合前端的，前阵子看了下实习生的代码，就想举这个例子来说说。单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一。它规定一个类应该只有一个发生变化的原因。在...

FingerLiu 2019-08-01 15:25 评论0 收藏0
《前端架构设计》读后笔记

摘要：作为一名前端架构师，你的工作是不断地探索和评估新的技术平台方法和框架。世界上没有一刀切式的解决方案，而前端架构师的使命正是将项目的需求与前端开发的实际情况相结合。做前端工作一段时间了，也写了不少的项目。但是突然好像快要失去了兴趣。美工、后台、项目经理、测试等人员多层夹击。美工说就这么设计，你就得完全按着来。后台说这个需求做不了，得那样做，于是已经做好的页面推倒重来。测试说，这样做更符...

Ocean 2019-08-22 17:02 评论0 收藏0
可靠React组件设计的7个准则之组合和复用

摘要：幸运的是，组合易于理解。组件的组合是自然而然的。高效用户界面可组合的层次结构，因此，组件的组合是一种构建用户界面的有效的方式。这个原则建议避免重复。只有一个组件符合单一责任原则并且具有合理的封装时，它是可复用的。翻译：刘小夕原文链接：https://dmitripavlutin.com/7-... 原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和...

Amos 2019-08-26 10:43 评论0 收藏0
深入理解JavaScript系列6:S.O.L.I.D五大原则之单一职责

摘要：，开始我们的第一篇单一职责。通过解耦可以让每个职责工更加有弹性地变化。关于本文本文转自大叔的深入理解系列。深入理解系列文章，包括了原创，翻译，转载，整理等各类型文章，原文是大叔的一个非常不错的专题，现将其重新整理发布。前言 Bob大叔提出并发扬了S.O.L.I.D五大原则，用来更好地进行面向对象编程，五大原则分别是： The Single Responsibility Princi...

walterrwu 2019-08-19 17:20 评论0 收藏0