我曾经一度很迷茫,在学了Vue、React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题,这篇文章,笔者想结合自己的一些成长经历整理出一些路线,帮助各位初中级前端工程师少走一些弯路。
笔者毕业于一个很普通的本科学校,非计算机专业,17年的时候刚毕业的时候还不知道自己的方向在哪(实习做过销售、运营、推广)。后来机缘巧合走上了开发这条路,第一年的时候 Java 和前端都做,慢慢发现了自己的兴趣所在转向前端。第二年的时候跳槽来到杭州,开始前端工程师的生涯。
目前开发经验一共是2年8个月,目前带一个5人的团队,前任的组长让我带领团队的主要原因是个人技术 + 沟通能力相对较好,但是在技术能力成长的背后需要怎么去走呢,相信有很多小伙伴会迷失方向。
这篇文章会提到非常非常多的学习路线和链接,如果你还在初中级的阶段,不必太焦虑,可以把这篇文章作为一个进阶的路线图
,在未来的时日里朝着这个方向努力就好。
我也并不是说这篇文章是进阶高级工程师的唯一一条路线,如果你在业务上做的精进,亦或是能在沟通上八面玲珑,配合各方面力量把项目做的漂漂亮亮,那你也一样可以拥有这个头衔。本文只是我自己的一个成长路线总结。
本篇文章面对的人群是开发经验1到3年的初中级前端工程师
,希望能和你们交个心。
已经晋升高级前端的同学,欢迎你在评论区留下你的心得,补充我的一些缺失和不足。
我的github地址,欢迎follow,我会持续更新一些值得你关注的项目。
我的blog地址,这里会持续更新,点个star不失联!✨
我整理了一篇中级前端的必备技术栈能力,写给女朋友的中级前端面试秘籍 。这篇文章里的技术栈当然都是需要扎实掌握的,(其实我自己也有一些漏缺,偷偷补一下)。
当然了,上进心十足的你不会一直满足于做中级前端,我们要继续向上,升职加薪,迎娶白富美!
冴羽大佬的这篇博客里,除了undescore的部分,你需要全部都能掌握。并且灵活的运用到开发中去。
JavaScript深入系列、JavaScript专题系列、ES6系列
tasks-microtasks-queues-and-schedules
题外话,当时精炼这20行真的绕了我好久?,但是搞明白了会有种恍然大悟的感觉。这种异步队列的技巧要融会贯通。
对于Promise我们非常熟悉了,进一步延伸到async await,这是目前开发中非常非常常用的异步处理方式,我们最好是熟悉它的babel编译后的源码。
babel对于async await配合generator函数,做的非常巧妙,这里面的思想我们也要去学习,如何递归的处理一个串行的promise链?
这个技巧在axios的源码里也有应用。平常经常用的拦截器,本质上就是一串promise的串行执行。
当然,如果你还有余力的话,也可以继续深入的去看generator函数的babel编译源码。不强制要求,毕竟generator函数在开发中已经用的非常少了。
ES6 系列之 Babel 将 Generator 编译成了什么样子
你必须精通异步场景下的错误处理,这是高级工程师必备的技能,如果开发中的异常被你写的库给吞掉了,那岂不是可笑。
Callback Promise Generator Async-Await 和异常处理的演进
你需要大概理解前端各个库中的插件
机制是如何实现的,在你自己开发一些库的时候也能融入自己适合的插件机制。
Koa的洋葱中间件,Redux的中间件,Axios的拦截器让你迷惑吗?实现一个精简版的就彻底搞懂了。
对于一些复杂场景,你的开发不能再是if else
嵌套一把梭了,你需要把设计模式好好看一遍,在合适的场景下选择合适的设计模式。这里就推荐掘金小册吧,相信这篇小册会让你的工程能力
得到质的飞跃,举例来说,在Vue的源码中就用到了观察者模式
、发布订阅模式
、策略模式
、适配器模式
、发布订阅模式
、工厂模式
、组合模式
、代理模式
、门面模式
等等。
而这些设计模式如果你没学习过可能很难想到如何应用在工程之中,但是如果你学习过,它就变成了你内在的工程能力
,往大了说,也可以是架构能力
的一部分。
在《设计模式》这本小册中我们提到过,即使是在瞬息万变的前端领域,也存在一些具备“一次学习,终生受用”特性的知识。从工程的角度看,我推荐大家着重学习的是设计模式。 -修言
掌握一些基础算法核心思想或简单算法问题,比如排序。
你需要知道组合优于继承的思想,不要再满口都是oop,写什么都来个class extends了,在前端ui扁平化的前提下,真的没那么多需要继承的场景。
“…the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong — “Coders at Work” 面向对象语言的问题在于它们带来了所有这些隐含的环境。 你想要一个香蕉,但你得到的是拿着香蕉和整个丛林的大猩猩。
你需要熟读clean-code-javascript,并且深入结合到日常开发中,结合你们小组的场景制定自己的规范。
对于高级工程师来说,你必须要有一个你趁手的框架,它就像你手中的一把利剑,能够让你披荆斩棘,斩杀各种项目于马下。
下面我会分为Vue
和React
两个方面深入去讲。
Vue方面的话,我主要是师从黄轶老师,跟着他认真走,基本上在Vue这方面你可以做到基本无敌。
slot-scope
去做一些数据和ui分离的封装。 以vue-promised这个库为例。 Promised组件并不关注你的视图展示成什么样,它只是帮你管理异步流程,并且通过你传入的slot-scope
,在合适的时机把数据回抛给你,并且帮你去展示你传入的视图。<template>
<Promised :promise="usersPromise">
<!-- Use the "pending" slot to display a loading message -->
<template v-slot:pending>
<p>Loading...</p>
</template>
<!-- The default scoped slot will be used as the result -->
<template v-slot="data">
<ul>
<li v-for="user in data">{{ user.name }}</li>
</ul>
</template>
<!-- The "rejected" scoped slot will be used if there is an error -->
<template v-slot:rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
复制代码
Vue.extends
,配合项目做一些命令式api
的封装。并且知道它为什么可以这样用。(需要具备源码知识) confirm组件export const confirm = function(text, title, onConfirm = () => {}) {
if (typeof title === "function") {
onConfirm = title
title = undefined
}
const ConfirmCtor = Vue.extend(Confirm)
const getInstance = () => {
if (!instanceCache) {
instanceCache = new ConfirmCtor({
propsData: {
text,
title,
onConfirm
}
})
// 生成dom
instanceCache.$mount()
document.body.appendChild(instanceCache.$el)
} else {
// 更新属性
instanceCache.text = text
instanceCache.title = title
instanceCache.onConfirm = onConfirm
}
return instanceCache
}
const instance = getInstance()
// 确保更新的prop渲染到dom
// 确保动画效果
Vue.nextTick(() => {
instance.visible = true
})
}
复制代码
JSX
来编写你项目中的复杂组件了,比如在我的网易云音乐项目中,我遇到了一个复杂的音乐表格需求,支持搜索文字高亮、动态隐藏列等等。
当然对于现在版本的Vue,JSX还是不太好用,有很多属性需要写嵌套对象,这会造成很多不必要的麻烦,比如没办法像React一样直接把外层组件传入的props透传下去,Vue3的rfc中提到会把vnode节点的属性进一步扁平化,我们期待得到接近于React的完美JSX开发体验吧。 const tableAttrs = {
attrs,
on: {
...this.$listeners,
["row-click"]: this.onRowClick,
},
props: {
...props,
headerCellClassName: "title-th",
cellClassName: this.tableCellClassName,
data: this.songs,
},
}
复制代码
异步合并优化
的知识体系中去。
Vue源码详解之nextTick:MutationObserver只是浮云,microtask才是核心!demo
,非常适合入门源码:
Hook
相关的开发模式了,面向未来的异步请求管理是zeit/swr这种自定义Hook库所带来的。 在讲解之前,先举个例子,在Vue2中如果我需要请求一份数据,并且在loading
和error
时都展示对应的视图,一般来说,我们会这样写:<template>
<div v-if="error">failed to load</div>
<div v-else-if="loading">loading...</div>
<div v-else>hello {{fullName}}!</div>
</template>
<script>
import { createComponent, computed } from 'vue'
export default {
data() {
// 集中式的data定义 如果有其他逻辑相关的数据就很容易混乱
return {
data: {
firstName: '',
lastName: ''
},
loading: false,
error: false,
},
},
async created() {
try {
// 管理loading
this.loading = true
// 取数据
const data = await this.$axios('/api/user')
this.data = data
} catch (e) {
// 管理error
this.error = true
} finally {
// 管理loading
this.loading = false
}
},
computed() {
// 没人知道这个fullName和哪一部分的异步请求有关 和哪一部分的data有关 除非仔细阅读
// 在组件大了以后更是如此
fullName() {
return this.data.firstName + this.data.lastName
}
}
}
</script>
复制代码
这段代码,怎么样都谈不上优雅,凑合的把功能完成而已,并且对于loading
、error
等处理的可复用性为零。
数据和逻辑也被分散在了各个option
中,这还只是一个逻辑,如果又多了一些逻辑,多了data
、computed
、methods
?如果你是一个新接手这个文件的人,你如何迅速的分辨清楚这个method
是和某两个data
中的字段关联起来的?
让我们把zeit/swr的逻辑照搬到Vue3中,
看一下swr
在Vue3中的表现:
<template>
<div v-if="error">failed to load</div>
<div v-else-if="loading">loading...</div>
<div v-else>hello {{fullName}}!</div>
</template>
<script>
import { createComponent, computed } from 'vue'
import useSWR from 'vue-swr'
export default createComponent({
setup() {
// useSWR帮你管理好了取数、缓存、甚至标签页聚焦重新请求、甚至Suspense...
const { data, loading, error } = useSWR('/api/user', fetcher)
// 轻松的定义计算属性
const fullName = computed(() => data.firstName + data.lastName)
return { data, fullName, loading, error }
}
})
</script>
复制代码
就是这么简单,对吗?逻辑更加聚合了。
有人要问,全部逻辑都写在setup里了,这是面条式代码!而且针对我上面提出的代码逻辑分散的问题,哪里进步了。
那么我们用自定义hook
把逻辑统一抽出来?
<template>
<div v-if="error">failed to load</div>
<div v-else-if="loading">loading...</div>
<div v-else>hello {{fullName}}!</div>
</template>
<script>
import { createComponent, computed } from 'vue'
import useSWR from 'vue-swr'
export default createComponent({
setup() {
return { ...useName() }
}
})
// 姓名相关逻辑
function useName() {
// useSWR帮你管理好了取数、缓存、甚至标签页聚焦重新请求、甚至Suspense...
const { data, loading, error } = useSWR('/api/user', fetcher)
// 轻松的定义计算属性
const fullName = computed(() => data.firstName + data.lastName)
return { data, fullName, loading, error }
}
</script>
复制代码
这下好了,useName
这个hook甚至成为了一个所有组件都可以共用的hook。在Vue2里,你怎么抽取?难道用mixins
?
那么你应该看这篇知乎:为何不要用mixins来实现组件复用
对于响应式部分,如果你已经非常熟悉Vue2的响应式原理了,那么Vue3的响应式原理对你来说应该没有太大的难度。甚至在学习之中你会相互比较,知道Vue3为什么这样做更好,Vue2还有哪部分需要改进等等。
Vue3其实就是把实现换成了更加强大的Proxy,并且把响应式部分做的更加的抽象,甚至可以,不得不说,Vue3的响应式模型更加接近响应式类库
的核心了,甚至react-easy-state
等React的响应式状态管理库,也是用这套类似的核心做出来的。
再次强调,非常非常推荐学习Vue3的@vue/reactivity
这个分包。
推一波自己的文章吧,细致了讲解了Vue3响应式的核心流程。
在学习之后,我把@vue/reactivity
包轻松的集成到了React中,做了一个状态管理的库,这也另一方面佐证了这个包的抽象程度:
React已经进入了Hook为主的阶段,社区的各个库也都在积极拥抱Hook,虽然它还有很多陷阱和不足,但是这基本上是未来的方向没跑了。这篇文章里我会减少class组件的开发技巧的提及,毕竟好多不错的公司也已经全面拥抱Hook了。
1. 诚身大佬(悄悄告诉你,他的职级非常高)的企业级管理系统小册,这个项目里的代码非常深入,而且在抽象和优化方面也做的无可挑剔,自己抽象了`acl`权限管理系统和`router`路由管理,并且引入了`reselect`做性能优化,一年前我初次读的时候,很多地方懵懵懂懂,这一年下来我也从无到有经手了一套带`acl`和`权限路由`的管理系统后,才知道他的抽象能力有多强。真的是 初闻不知曲中意,再闻已是曲中人。
2. 三元大佬的React Hooks 与 Immutable 数据流实战,深入浅出的带你实现一个音乐播放器。三元大家都认识吧?那是神,神带你们写应用项目,不学能说得过去吗? [React Hooks 与 Immutable 数据流实战](https://juejin.im/book/5da96626e51d4524ba0fd237)
key
understanding-reacts-key-prop
react中为何推荐设置key派生状态
的思考:
you-probably-dont-need-derived-state你必须熟练掌握Hook的技巧,除了官网文档熟读以外:
闭包陷阱
产生的原因和设计中的权衡。
函数式组件与类组件有何不同?React中优化组件重渲染,这里有几个隐含的知识点。
如何对React函数式组件进行性能优化?这篇文章讲的很详细,值得仔细阅读一遍。 [juejin.im/post/5dd337…](https://juejin.im/post/5dd337985188252a1873730f)
@testing-library/react
测试组件,这个库相比起enzyme更好的原因在于,它更注重于站在用户的角度去测试一个组件,而不是测试这个组件的实现细节。
Introducing The React Testing Library
Testing Implementation Details@testing-library/react-hooks
测试自定义Hook
how-to-test-custom-react-hooks自从Vue3横空出世以来,TypeScript好像突然就火了。这是一件好事,推动前端去学习强类型语言,开发更加严谨。并且第三方包的ts类型支持的加入,让我们甚至很多时候都不再需要打开文档对着api撸了。
关于TypeScript学习,其实几个月前我还对于这门JavaScript的超集一窍不通,经过两三个月的静心学习,我能够去理解一些相对复杂的类型了,
可以说TypeScript的学习和学一个库或者学一个框架是完全不同的,
1. ?TypeScript的高级类型(Advanced Type)
2. ?Conditional Types (条件类型)
3. ?Distributive conditional types (分布条件类型)
4. ?Mapped types(映射类型)
5. ?函数重载
1. ?TypeScript的高级类型([Advanced Type](https://www.typescriptlang.org/docs/handbook/advanced-types.html))
2. ?TypeScript中利用泛型进行反向类型推导。([Generics](https://www.typescriptlang.org/docs/handbook/generics.html))
3. ?Mapped types(映射类型)
4. ?Distributive Conditional Types(条件类型分配)
5. ?TypeScript中Infer的实战应用([Vue3源码里infer的一个很重要的使用](https://github.com/vuejs/vue-next/blob/985f4c91d9d3f47e1314d230c249b3faf79c6b90/packages/reactivity/src/ref.ts#L89))
它几乎是一门新的语言(在类型世界里来说),需要你花费很大的精力去学好它。
我对于TypeScript的学习建议其实就是一个关键词:刻意训练
,在过基础概念的时候,不厌其烦的在vscode
中敲击,理解,思考。在基础概念过完以后去寻找实践文章,比如我上面进阶
和实战
部分推荐的几篇,继续刻意训练
,一定要堆积代码量,学习一门新的语言是不可能靠看文档获得成功的。
我会建立一个仓库,专门记录我遇到的TypeScript的有趣代码,自己动手敲一遍,并且深入理解。
其实TypeScript的能力也是两级分化的,日常写业务来说,你定义一些interface,配合React.FC这种官方内置的类型也就跑通了,没什么特别难的点。
但是如果是造轮子呢?如果你自己写了一个工具库,并且类型比较复杂,你能保证推导出来吗?亦或者就拿Vue3来说,ref是一个很复杂的嵌套类型,
假如我们这样定义一个值const value = ref(ref(2))
,对于嵌套的ref,Vue3会做一层拆包
,也就是说其实ref.value
会是2,
那么它是如何让ts提示出value的类型是number的呢?
如果你看到源码里的这段代码,你只有基础的话,保证懵逼。
// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
ref: T extends Ref<infer V> ? UnwrapRef<V> : T
array: T
object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
? 'cRef'
: T extends Array<any>
? 'array'
: T extends Ref | Function | CollectionTypes | BaseTypes
? 'ref' // bail out on types that shouldn't be unwrapped
: T extends object ? 'object' : 'ref']
复制代码
如果短期内你对自己的要求是能上手业务,那么你理解TypeScript基础的interface
和type
编写和泛型的普通使用(可以理解为类型系统里的函数传参)也已经足够。
但是长期来看,如果你的目的是能够自己编写一些类型完善的库或框架,或者说你在公司扮演前端架构师
、轮子专家
等等角色,经常需要写一些偏底层的库给你的小伙伴们使用,那么你必须深入学习,这样才能做到给你的框架使用用户完美的类型体验。
TypeScript相关的面试题我见得不多,不过力扣中国
的面试题算是难度偏高的,其中有一道TS的面试题,可以说是实用性和难度都有所兼顾,简单来说就是解包。
// 解开参数和返回值中的Promise
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>
↓
asyncMethod<T, U>(input: T): Action<U>
// 解开参数中的Action
syncMethod<T, U>(action: Action<T>): Action<U>
↓
syncMethod<T, U>(action: T): Action<U>
复制代码
我在高强度学习了两三个月TS的情况下,已经能把这道题目相对轻松的解出来,相信这也是说明我的学习路线没有走偏(题解就不放了,尊重面试题,其实就是考察了映射类型
和infer
的使用)。
fix
、test
、修复
,这么糊弄的话是会被leader揍的!
[译]如何撰写 Git 提交信息
Git-Commit-Log规范(Angular 规范)
commitizen规范流程的commit工具,规范的commit格式也会让工具帮你生成友好的changelog
webpack
到网络
到dom操作
,全方位的带你做一些性能优化实战。这本小册我当时看的时候真的是完全停不下来,修言大佬的风格既轻松又幽默。但是讲解的东西却能让你受益匪浅。
层爆炸
,当然需要仔细关注啦。起码,在性能遇到瓶颈的时候,你可以打开chrome的layer
面板,看看你的页面到底是怎么样的一个层分布。
详谈层合成(composite)作为一个合格的前端工程师,一定要积极的深入社区去了解最新的动向,比如在twitter
上关注你喜欢的技术开发人员,如Dan、尤雨溪。
另外Github上的很多issue也是宝藏讨论,我就以最近我对于Vue3的学习简单的举几个例子。
尤雨溪解释关于为什么在Vue3中不加入React时间切片功能?并且详细的分析了React和Vue3之间的一些细节差别,狠狠的吹了一波Vue3(爱了爱了)。
Why remove time slicing from vue3?
composition-api
到底好在哪?Vue3的functional-api相关的rfc,尤大舌战群儒,深入浅出的为大家讲解了Vue3的设计思路等等。
Amendment proposal to Function-based Component API
composition-api
的第一手文档vue-composition-api的rfc文档,在国内资料还不齐全的情况下,我去阅读了
vue-composition-api-rfc 英文版文档,对于里面的设计思路叹为观止,学到了非常非常多尤大的思想。
总之,对于你喜欢的仓库,都可以去看看它的issue有没有看起来感兴趣的讨论,你也会学到非常多的东西。并且你可以和作者保持思路上的同步,这是非常难得的一件事情。
我在狠狠的吸收了一波尤大对于Vue3 composition-api
的设计思路的讲解,新旧模式的对比以后,这篇文章就是我对Vue3新模式的一些见解。
Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。
在Vue2里,可以通过plugin
先体验composition-api
,截取这篇文章对应的实战项目中的一小部分代码吧:
<template>
<Books :books="booksAvaluable" :loading="loading" />
</template>
<script lang="ts">
import { createComponent } from '@vue/composition-api';
import Books from '@/components/Books.vue';
import { useAsync } from '@/hooks';
import { getBooks } from '@/hacks/fetch';
import { useBookListInject } from '@/context';
export default createComponent({
name: 'books',
setup() {
const { books, setBooks, booksAvaluable } = useBookListInject();
const loading = useAsync(async () => {
const requestBooks = await getBooks();
setBooks(requestBooks);
});
return { booksAvaluable, loading };
},
components: {
Books,
},
});
</script>
<style>
.content {
max-width: 700px;
margin: auto;
}
</style>
复制代码
本实战对应仓库:
并且由于它和React Hook
在很多方面的思想也非常相近,这甚至对于我在React Hook
上的使用也大有裨益,比如代码组织的思路上,
在第一次使用Hook
开发的时候,大部分人可能还是会保留着以前的思想,把state
集中起来定义在代码的前一大段,把computed
集中定义在第二段,把mutation
定义在第三段,如果不看尤大对于设计思想的讲解,我也一直是在这样做。
但是为什么Logical Concerns 优于Vue2和React Class Component的Option Types?看完detailed-design这个章节你就全部明白了,并且这会融入到你日常开发中去。
总之,看完这篇以后,我果断的把公司里的首屏组件的一坨代码直接抽成了n个自定义hook,维护效率提升简直像是坐火箭。
当然,社区里的宝藏issue肯定不止这些,我只是简单的列出了几个,但就是这几个都让我的技术视野开阔了很多,并且是真正的融入到公司的业务实战中去,是具有业务价值
的。希望你养成看issue,紧跟英文社区的习惯,Github issue里单纯的技术探讨氛围,真的是国内很少有社区可以媲美的。
function AppInner({ children }) {
const [menus, setMenus] = useState({});
// 用户信息
const user = useUser();
// 主题能力
useTheme();
// 权限获取
useAuth({
setMenus,
});
// 动态菜单也需要用到菜单的能力
useDynamicMenus({
menus,
setMenus,
});
return (
<Context.Provider value={user}>
<Layout routers={backgrounds}>
{children}
</Layout>
</Context.Provider>
);
}
复制代码
可以看到,Hook
在代码组织的方面有着得天独厚的优势,甚至各个模块
之间值的传递都是那么的自然,仅仅是函数传参而已。
总之,社区推出一些新的东西,它总归是解决了之前的一些痛点。我们跟着大佬的思路走,一定有肉吃。
相学长的文章你的Tree-Shaking并没什么卵用中,也详细的描述了他对于副作用
的一些探寻过程,在UglifyJS的Issue中找到了最终的答案,然后贡献给中文社区,这些内容最开始不会在任何中文社区里出现,只有靠你去探寻和发现。
从初中级前端开始往高级前端进阶,有一个很重要的点,就是很多情况下国内社区能找到的资料已经不够用了,而且有很多优质资料也是从国外社区二手、三手翻译过来的,翻译质量也不能保证。
这就引申出我们进阶的第一个点,开始接受英文资料。
这里很多同学说,我的英文能力不行啊,看不懂。其实我想说,笔者的英语能力也很一般,从去年开始我立了个目标,就是带着划词翻译插件也要开始艰难的看英文文章和资料,遇到不懂的单词就划出来看两眼(没有刻意去背),第五六次遇见这个单词的时候,就差不多记得它是什么意思了。
半年左右的时间下来,(大概保持每周3篇以上的阅读量)能肉眼可见的感觉自己的英语能力在进步,很多时候不用划词翻译插件,也可以完整的阅读下来一段文章。
这里是我当时阅读英文优质文章的一些记录,
后面英文阅读慢慢成了一件比较自然的事情,也就没有再刻意去记录,前期可以用这种方式激励自己。
推荐两个英文站点吧,有很多高质量的前端文章。
medium可能需要借助一些科学工具才能查看,但是里面的会员付费以及作者激励机制使得文章非常的优质。登录自己的谷歌账号即可成为会员,前期可能首页不会推荐一些前端相关的文章,你可以自己去搜索关键字如Vue
、React
、Webpack
,任何你兴趣的前端技术栈,不需要过多久你的首页就会出现前端的推荐内容。好好享受这个高质量的英文社区吧。
社区有很多大佬实力很强,但是对新手写的代码嗤之以鼻,认为有 any
的就不叫 TypeScript
、认为没有单元测试
就没资格丢到 Github 上去。这种言论其实也不怪他们,他们也只是对开源软件的要求高到偏执而已。但是对于新手学习来说,这种言论很容易对大家造成打击,导致不敢写 ts,写的东西不敢放出来。其实大可不必,工业聚
对于这些观点就发表了一篇很好的看法,让我觉得深受打动,也就是这篇文章开始,我慢慢的把旧项目用 ts 改造起来,慢慢的进步。
本篇文章是我在这一年多的学习经历抽象中总结出来,还有很多东西我会陆续加入到这篇文章中去。
希望作为初中级前端工程师的你,能够有所收获。如果能够帮助到你就是我最大的满足。
未完待续... 持续更新中。
1.如果本文对你有帮助,就点个赞支持下吧,你的「赞」是我创作的动力。
2.关注公众号「前端从进阶到入院」即可加我好友,我拉你进「前端进阶交流群」,大家一起共同交流和进步。