• JavaScript面向对象的设计原则(一)


    --> 面向对象是现代软件开发的主流思想,在前端工程师的招聘中我们也经常会看到要求熟悉面向对象的开发思想,那么如何设计JavaScript代码才算是面向对象呢,在深入面向对象设计之前我罗列了一些系统设计上的基本原则,大家可以相互对照自己的代码,或许能从中得到一些启发.

    糟糕的设计

    1.僵化的代码:设计无法响应需求和外部环境的变化,当需求发生变化,对多处代码都需要进行更改

    示例

    tempalte:require('/js/tpl/index.tpl')
    写死引用路径

    $.post('/addOrder.htm')
    写死接口地址

    2.脆弱的代码:JavaScript作为一种脚本语言并不健壮,一个undefined错误就能让整个脚本挂掉,从而导致依赖这个脚本的脚本也挂掉,对于软件来说这是令人崩溃的.

    示例

    $.post(url,function(data){  
    	warning(data.message);
    });
    

    当后端返回的data是undefined的时候整个脚本就挂了.

    另一种场景,一个软件的依赖很复杂,如同蜘蛛网一样互相依赖甚至是环形依赖,一处改动就可能导致整个系统崩溃.

    3.无法重用的代码:你被分配到一个新项目或者你跳槽到了另一家公司,发现新项目中有部分系统和之前开发过的几乎完全一样,你想将其复用,结果发现需要copy的代码超出了你的预计,几乎80%的代码是跟复用的功能无关但却必须的.因为复用的功能依赖这些代码作为其运行的上下文.

    4.过度设计的代码:作为一个有经验的但是经验又不那么丰富的开发者可能会犯这个毛病,那就是对代码过度设计,想得太多,最好写一次代码然后几乎可以不重构.

    示例

    /js/
    /js/ajaxService/
    /js/ajaxService/login.js
    /js/admin/
    /js/admin/index.js
    

    实际需求是只需要一个登陆的模块,并且对接的后端接口也只有1个,仅仅是login.htm,可能admin模块会对接更多的接口,但这个问题至少目前来看还没有发生,而且发生的时间也未知,在没有确定改动可能发生的周期的情况下就对为未来而设计代码是不合适的,这会造成不必要的复杂性,我们所做的那就是做好准备,能够应对变化的需求而对代码进行重构,总结一句,你知道未来会变化,但不必现在就是实现它,仅仅是做出一种能够被重构的设计.

    系统软件设计的基本原则

    1.DRY原则

    Don`t Repeat Yourself,这个可能是大家耳熟能详的原则,但到底是什么意思呢?

    在我的理解看来就是要杜绝copy & paste的开发方式,一个典型的示例就是可能我们存在一个如下计算时间的函数:

    function getLocalTime(date){
    	code...
    }     
    

    接下来我们可能在多个不同的脚本中发现需要用这个功能于是我四处copy它,copy了十七八处,然后需求变了这个函数发生了bug,于是悲剧了.所有copy过的地方都需要修改...0-0

    所以DRY原则指导我们对于需要重用的代码,应当将其抽象成组件的形式进行复用,隐藏内部的实现细节.

    2.YAGNI原则

    You Ain`t Gonna Need It,不要画蛇添足,这个原则正好是糟糕设计中过度设计的正向例子

    3.KISS原则

    Keep It Simple, Stupid,简单即美.将未来交给重构,在可预期的情况下软件设计的实现应当保持简单,因为简单的设计更利于重构.

    4.DDIY原则

    Dont`t Do It Yourself,不要啥都自己来,对于菜鸟和老年来说都有一个改变世界的梦,然而实际上作为生产者,大多数程序员都是基于商业需求在开发产品,我们应当灵活的运用业界设计良好,生态健全的工具和框架来提高我们自己的生产力,真正能提高你水平的不是工作中的重复造轮子而是工作之外的学习和探究.

    这一期还没有深入到面向对象的概念,但这些基本的设计原则也是我们做代码设计的基本思维,对于缺乏软件工程概念的前端来说还是很适用的.

    内容参考

    面向对象的设计原则

  • 相关阅读:
    js简单对象List自定义属性排序
    我所理解的Vue——学习心得体会1(Vue对象)
    vue的checkbox或多选的select的代码例子
    display:inline; display:block;
    托管到github上的网页图片在百度浏览器中显示不全
    background-position
    鼠标焦点变化引起mouseout事件
    jquery检查元素存在性
    nodevalue
    链接被点击的默认行为——带到另一个窗口
  • 原文地址:https://www.cnblogs.com/jackyKin/p/5181706.html
Copyright © 2020-2023  润新知