zoukankan      html  css  js  c++  java
  • 记一次思考:中级开发的突破之道

    我是带着些许愤怒和自责写下这篇博客的,愤怒是因为一个4年经验的前端写的代码糟糕透了,自责是因为他是我招聘进来的。也正是如此,我做了很多有意思的反思,整理浓缩出来便有了此文。

    吐槽一下他的问题

    归纳一下,其实就2个问题。

    过度迷恋“最佳”实践

    tree-shaking 过度使用 现场一瞥

    vue里面有个全局注册的功能,但他从来没有用过

    UI框架使用的是ant-design,下方截图是vscode中的全局内容搜索结果,看看他是怎么安装按钮模块的:

    是的,每个vue文件都注册一遍!

    我问过他为什么要这么做,回答就是:更有利于tree-shaking,随着需求变更,当你不用某个组件时,会自动优化掉!其实tree-shaking也是我认为的最佳实践,但他用的过度了,于是产生了大量的重复的import、注册组件和安装模块的代码!

    ——我就想问,什么样的需求变更,可以把按钮从整个项目优化掉?? 

    ui交互的事故

    他在“优雅的错误提示,loading提示”和“国际化”上,可谓是做到了极致(对于前者还有一套自己的库),他负责的两个项目都强行加上了,当然这是他自己给自己加的需求。

    但是即便是他自己的东西,连最基本的功能抽取都没做好:

    这是近900行的NotFound 404页面,中间有700行的高大上的svg图案(这是他自己加的,认为没有设计的提示太丑)。Unauthorized 403页面也是这样。——更要命的是,里面的svg和404页面完全一样!即使svg不共用,也应该抽取吧!

    我在接手项目后,发现业务页面中也存在大量的重复代码(真的是大量重复),稍微复杂点的页面肯定超过1000行——恐怕他连基本的DRY原则都不知道吧。

    我只想说:连最基本的子功能提取封装 都没有做好,整这些乱七八糟的干啥?

    走不出自己过去的积累

    风格体验要和过去一致

    他以前是做angular的,所以总是在尽量将vue写的像angular。比如一定要用“ ts+注解”风格的。还比如ajax库:

    ajax库 vue用的是axios,angular用的是http,他在这里将vue的axios重命名成了http

    父到子组件的数据传递,全盘使用v-bind,导致我每次寻找数据依赖关系,都要多绕几下:

    这个有点极端了,应该不是angular风格。

    过去的代码积累一定要用上

    他以前写过一些自认为好的代码,也许觉得太好了,于是就写在自己的github上,逐渐形成了一套异步框架(这套框架也有问题)和样式库 —— 这个一定要用上!

    但其实有很多问题!除了他自己,很少有人能看懂他的设计思想(我在迫不得已下,看了好几个小时才明白大概)。

    他的框架问题很多,重复造轮子很严重,比如手动实现的merge,其实就是Object.assign,一系列的merge其实都差不多。

    过分痴迷于ts的类型提示(但代码中又经常强转为any类型)导致代码重复很多,出现了很多仅仅为了被typeof 产生类型的无用对象

    最关键的是他不懂设计,这是代码难以理解的根本原因,示例:

    这个asyncData是他的异步组件专用对象,构造时必须提供系列约定好的配置,但是很多配置完全能够彻底封装在异步组件中,而非对外暴露 受外界控制(比如这个initialized)。
    然后这个异步组件内部又修改了一些配置,比如新增了refresh方法。于是可以使用这个突然冒出的方法,初看之下莫名其妙。
    从这个异步组件的角度看,所有的配置都是外界生成的,外界可以任意修改;组件内部的修改,也都在外界提供的容器之中,外界也能访问到,—— 数据控制很混乱。
    此外,props在这里都有特殊的业务含义,并不是vue中的props。CreateAsAsyncSection 没有做什么值得去封装的事情,这种对细枝末节的过度封装进一步增加了阅读难度。

    写公共组件或框架之前,先看一下设计原则和设计模式吧,真正领悟了再来秀,别找喷!

    为什么要招他?

    当初招他有两方面原因:
    首先他的确是有货的,原生的各种api用的很6。eslint,ts这类就不说了,weex,wasm等都知道一些,技术广度是有的。考了一下他的算法,比大多数人都好。
    其次就是之前已经面了很多人,要么我看不上,要么不愿意来公司(可能最后的工资没谈好吧),再加上我还有开发任务,实在不想继续面了,感觉还行就过。

    招人其实很难,比找工作还难。
    有技术水平的本就不多,而其中还有很多像他这样“沉迷于自己的小世界”的。

    是的,无论是“过度迷恋最佳实践”还是“走不出自己过去的积累”,本质都是沉迷于自己的小世界。
    每个人都必须明白,你写的代码总有一天会交给别人,就像你现在不断在接手别人的代码一样。
    即使你一直在项目中,随着时间的推移和整个技术大环境的变迁,总有一天你也要回来修改甚至重构你的代码,试问1年后你还能看懂自己的代码吗?

    自我沉迷,是社会普遍存在的现象,所以存在很多像“angular好 还是vue好”这样无聊的争论。
    我遇到的好几位“大神”,以及我以前,都有这个问题。可以说这是中级开发甚至有些高级,都存在的问题。

    我不由得思考自己是如何走出来的,以便将破解之道分享出来。

    突破之道:保持简单和直白

    不要设计,就像新手一样简单直白的写你的代码——我以我多年的项目维护经验(挖坑经验和填坑经验)保证,这是绝对的真理。
    简单直白才容易看懂,才容易交接,才容易修改。而带着自己“精巧”的思维,设计出的东西往往晦涩难懂。

    不要设计,恰恰需要你摒弃狭隘的自我。也许你半信半疑,毕竟这种有点返璞归真的观点,是需要一定的经验才能感悟到的,~~呵呵。

    其实保持简单恰恰是非常难的!

    随着你的项目功能不断扩展,模块越来越复杂,你需要不断的拆分,组合,运用各种设计原则和设计模式,才能保持简单——这才是真正的设计,考虑项目或模块整体,而非某个细节。

    突破之道:保持开放

    我的突破,可以说完全得益于我愿意保持开放。它有2层含义。

    关注更多,你才能更好的取舍,做最佳的决策

    以前我也会执着于最佳技术方案,后来被上级批评“太关注技术,而忽视需求”。一开始我认为是自己的言行不当,给自己造成了负面的影响,因为有些问题的确存在。

    但随着我接触的事情越来越多,我发现技术问题还真不是最重要的问题,于是我渐渐的再也没有执着了。
    因为项目的发展除了技术之外,还有运营,顾客,投资和市场因素,作为技术人员,这些方面也要关注。关注更多,你才能更好的取舍,做最佳的决策。

    我第一个使用的MVVM框架是angular,从angularjs,到angular2,angular4,大概总共用了2年。刚转vue时,觉得vue太糟糕了,很多地方无法适应。
    但随着我对vue的不断深入了解,反而开始喜欢vue了,其实正是vue的优秀,让我放弃了对angular的执着。vue和angular虽然都是MVVM,但开发理念,风格和文化都有很大差异。

    每种技术都有自己的闪光点,排斥自己不熟悉的领域或文化,是没有任何好处的。

    多与人互动

    也许你只是一个码农,代码之外的东西的确接触不到。没关系,保持开放还有一层含义,那就是多与人互动。

    代码好不好,不是你自己说了算的,那纯粹叫自嗨。把你的代码拿出遛遛,让大家评价一下。把你的公共模块共享出来,让大家也用用,听听大家使用的建议。
    这个过程中,他人的任何疑问都是不好的现象,因为这就是潜在的交接成本,或潜在的推广成本,每个疑问也都是珍贵的,需要你认真对待。

    在你认真对待这些疑问的时候,你必将有很多收获,因为我就是这样!

    在这个过程中,你也必将找到真理的光——“简单直白”的光。

    最后

    我的同事,如果你看到这篇文章,请不要有任何不快,没有针对你的意思。就像我们曾一起畅聊的那样,这只是这个社会的普遍现象。额~,愿我们一起成长吧。

  • 相关阅读:
    微服务实战SpringCloud之Spring Cloud Feign替代HTTP Client
    JS如何去掉一个数组的重复元素 (数组去重)
    原生JS写了一个小demo,根据输入的数字生成不同背景颜色的小方块儿~
    请教前辈:关于JS的一个奇怪的错误,不知是解析顺序造成的,还是什么原因。。
    JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
    记录来到博客园的第一天~
    凡事预则立
    软件产品案例分析(福大公众号)
    组员交换
    事后诸葛亮
  • 原文地址:https://www.cnblogs.com/zhwc-5w4/p/14237427.html
Copyright © 2011-2022 走看看