资深前端程序员，如何提升自己的核心竞争力？

前言

作为一个工作多年的前端程序员，我经历过各种大中小项目。

我搞过PC端，移动端，小程序，app等。

可谓是资深程序员的典范。

任何经过我手的项目，都无法摆脱对我的依赖。

每个和我合作过的前端同事，都对我闻风丧胆。

每次迭代开发的时候，同事们都必须要卑躬屈漆的来先请教我，否则开发工作就无法展开。

下面，我把我这么多年所学的奇技淫巧全部传授给大家。

好让大家能像我一样优秀。

尽量复制

开发的原则之一，就是能复制的尽量复制。

毕竟想要成为一个优秀的程序员，CV是必备的技能。

你如果连CV都不会，怎么提升自己的段位呢。

我工作这么多年，能力为什么猛进呢。

就是因为精通CV之道。

CV不仅能减少大脑的负担，让大脑留着思考更重要的东西。

还能让我每天保持大脑低速的运转，每天都有充沛的精力和产品经理斗智斗勇。

其实，这也就是各位和我的差距所在。

我举个具体的栗子，你们就会明白了。

比如我们在开发表单的时候，同一个表单，在保存和新建的时候，字段肯定是大部分都一样的。

但是，考虑到以下几点：

仍然有少部分字段不一样
保存和新建的时候，接口名称也不一样

我在 add.tsx 文件开发完新建功能，往往毫不犹豫的复制一份，把复制的文件改为 edit.tsx，再改改少数几行代码，编辑功能就完成了。

就是如此迅速，大家好好学着点。

文件结构

第一点其实是比较简单的，相信大家都已经学会了。

那么接下来要说的，就是文件结构的问题了。

我在开发A页面的时候，写了个组件Comp。

/page-a/components/comp

但是我在B页面也要引用到这个组件，我直接从

/page-b/index.tsx里去引用 /pagea/components/comp 即可，省时省力，这时候就没必要去重新移动comp的文件夹层级了。

组件封装

关于组件，我们要尽可能抱着开放的心态去开发。

组件里内部的属性和状态，还有一些方法以及请求过程，能放到父组件的，尽可能放到父组件。

这种高级技巧在react官网中也提到过，叫做“状态提升”。

所以，能不封装的内容，就不要封装在组件内部。

让组件与外部逻辑充分混合，这样才能做到对整个系统的完全了解。

我在工作就是这样去深知系统的每一个逻辑细节的。

分布式代码

后端有分布式的概念，前端也应该有，举一反三，才是提升技术的门道。

前端，比如我在写一个业务逻辑的时候，接口请求、组件的显示和隐藏控制、逻辑的属性状态等，我都要写在不同的地方。

分开写，才叫分布式代码。

不要让人一眼就看出这段需求的代码分布在哪里。

magic Number

它有一个诗意的名字，叫做magic number。魔术代码。

if （orderStatus == 1） {
    ...
} else if （orderStatus == 2） {
    ...
} else if （orderStatus == 3） {
    ...
}

简单明了，1,2,3,4

切忌使用具体含义的字符串，不如1,2,3,4来的简洁。

能把代码写的简洁，才能体现程序员的真正实力。

命名要精简

例如

变量名：订单状态可以简写为 ddzt 变量名：收件地址可以简写为 sjdz

千万别命名为orderStatus、postAddress等。这样写的太繁琐了。

这其实和上一个技巧是异曲同工之妙。简洁，还是简洁。

平铺，而不是foreach

<comp>
    ...
    <span>name_1</span>
    <span>status_1</span>
<\comp>

<comp>
    ...
    <span>name_2</span>
    <span>status_2</span>
<\comp>

<comp>
    ...
    <span>name_3</span>
    <span>status_3</span>
<\comp>

...
.
<comp>
    ...
    <span>name_n</span>
    <span>status_n</span>
<\comp>

就明显优于：


const list = [
    {name: 'name1',status:'status1'},
    {name: 'name1',status:'status1'},
    ...
    {name: 'namen',status:'statusn'},
]

{
    list.map(item=>{
        <comp>
           <span>{item.name}</span>
           <span>{item.status}</span>
        </comp>
    }
}

代码一定要平铺，一定要整整齐齐。看着就有气势。

保持主文件的规模

保持主文件的规模，而不是全部塞进每个组件。

如果写一个列表文件，我们只写成下面这样，就可能过于简单了，无法体现实力

import header from './header'
import list from '/list'
import footer from '/footer

...
    render (
        <hedaer></header>
        <list></list>
        <footer></footer>
    )
...

实际上，我们应该按照下列方式写，这样。主文件的代码行分分钟数超过1000行。甚至超过2000行。

import header from './header'
import list from '/list'
import footer from '/footer

import {headerapi, listapi, footerapi} from '@/api'



const header_api_params = ......
const list_api_params = ......
const footer_api_params = ......


const [headerAttr1, setHeaderAttr1] = useState()
const [listAttr1, setListAttr1] = useState()
const [footerAttr1, setFooterAttr1] = useState()

useEffect(() =>{
    headerapi(header_api_params).then() {
            setAttr
    }
},[])

useEffect(() =>{
    headerapi(header_api_params).then() {
            setAttr
    }
},[])

useEffect(() =>{
    headerapi(header_api_params).then() {
            setAttr
    }
},[])

...
    render (
        <hedaer
            attrs = ...
            mthods = ...>
        </header>
        
        <list
            attrs = ...
            mthods = ...>
        </list>
        
        
        <footer
            attrs = ...
            mthods = ...>
        </footer>
        
    )
...

后记

相信不少同学还未真正感受到我的实力，我暂且就传授这么多内容给大家了。

你们要是不服气的话，就说说你们的拿手绝活，我就不信有人比我还厉害。

不服来战。