Wiki

前端修炼之路

此文献给想学习前端,并从事前端工作的朋友们。

新手朋友们想从事前端开发工作,然而前端技术栈内容繁多复杂,这样完全不知道该从哪里下手,到底有哪些技术是必须要学习的,是企业现在需要的,能帮你找到工作的呢?

HTML

首先要学习的是 HTML,目前大家使用的都是 HTML5 了,请学习时,直接看 HTML5 相关的内容即可。

HTML 的中文是超文本标记语言,里面拥有很多标签,整个网站的骨架就是靠一个又一个的 HTML 标签支撑起来的。

HTML 的标签学习难度非常小,只需要记忆常用的一些即可。

推荐教程

这里有我录制的入门视频,可以直接学习

CSS

有了 HTML 做为骨架后,想要网页变的好看美观,那就需要用 CSS 来给网页化妆。CSS 目前直接关注 CSS 3 即可,CSS 常用的属性,都需要好好学习记忆。其中里面最重要的是布局方法,无论是 float、position 还是 flex,都需要非常清晰的掌握好相关知识。

在我教学生涯中碰到过不少新手同学,容易会出现一个错误的做法。就是整个页面上全都用 position 来布局,但其实是一个非常糟糕的做法。请记住:如果不是必须要使用,例如一个元素要盖在另一个上面这种情况,会使用 postion 来实现。在整体的布局上,position 是不应该过渡使用的。

推荐教程

可以结合我录制的视频课程和文档来学习,但这里面主要是基础知识,缺少项目实践内容。

项目实践 1:豆瓣电影

将基础用法学习好后,可以先从 PC 端的项目入手练习,新手可以尝试模仿豆瓣电影,此站点布局较为标准、简单,是新手练习 CSS 非常好的入门项目。第一次做,可能会耗费您大量的时间,一个页面可能需要几天才能完成。

初始实践,做的速度慢点并不要紧,但是务必要求与原始站点效果一模一样,要求一个像素的差别都没有。项目中的动画特效部分,目前无需理会,等学了 JS 后再来完善特效。

还需要注意的是,无需查看豆瓣电影的源码,因为豆瓣电影站点年头悠久,里面有很多用打补丁的方式实现效果的代码,这并不是最佳解。

项目实践 2:小米商城

当有了豆瓣电影的基础后,可以尝试练习开发小米商城,此站点的特点是:非常标准的商城布局,难度适中,体量够大。要求依然是显示效果完全一致,包括鼠标放上去通过 CSS 3 实现位移、阴影和动画等。在布局上,要求一个像素的差距都不能有。

项目实践 3:移动端

当有了这些经验后,接着可以尝试开发移动端项目,依然可以选择开发豆瓣电影小米商城的移动端。在移动端里,因为移动设备尺寸各不相同,所以大多数情况下,都会直接采用 flex 布局,这样可以更好的适应各种不同尺寸的设备。

响应式布局

在有些情况下,需要一套代码,根据不同设备尺寸来自动调整页面布局。一般会使用 media queries 来判断设备的尺寸,然后使用不同的布局 CSS 代码。

但是也要记住,响应式布局并不是万能的。我认为响应式布局,只适合一些页面布局比较简单的项目。

自适应

对于 PC 与移动端页面差距巨大,甚至连 HTML 结构都没法复用的情况,响应式布局就不适合了。这种情况就更适合自适应方案了。

自适应一般是写两套 CSS,然后通过 user agent 来判断用户所使用的设备,然后加载不同的 CSS 和 HTML。

自适应方法做出来的项目,PC 与移动端的访问地址是完全一样的,但是显示效果却完全不同。本站点就采用自适应方法开发的,请大家尝试使用 PC 和手机来访问同一地址,可以观察到显示效果甚至里面的内容,都是不同的。

如何判断自己的 CSS 修炼功力大成了?

  • 当你写 CSS,感觉自己写的想吐了。
  • 当给你一个设计图,你可以不加思索,上手就快速写完
  • 一个常规企业站点,包含:首页、文字列表页、图片列表页、正文页,在不超过一天的时间内全部写完。如果有移动端,那么 PC + 移动端,不超过 1.5 天内全部完成。

以上都能完成,CSS 的功力就算小成了。

jQuery

如果精力足够,我是推荐先学习 jQuery 的。虽然现今商业公司中,对 jQuery 的要求相对比较少了。但还是有大量的政府站点、大学站点、央企国企站点,包括 12306,都是使用 jQuery 来实现页面特效的。如果您有机会进入这些地方上班,那 jQuery 的修炼,必不可少!

但我之所以推荐先学习 jQuery,是因为从这里上手学习 JS,要比直接去啃原生 JS,要容易的太多了。想实现各种 dom 操作,实现各种特效,在 jQuery 下,要比直接用原生 JS 来实现,简单的太多太多了。

新手可以先从 jQuery 入门,这样可以用最快的速度上手,如何通过代码来操作 dom,来实现一个个有趣的特效。

推荐教程

jQuery 项目实践

完成之前做的豆瓣电影与小米商城的所有 JS 特效。

原生 JavaScript

当有了 jQuery 的基础后,再来学习原生 JavaScript。这时你就会发现,也没有什么难的啊,思路都是一样的,只不过代码要麻烦点而已~

这里的有几个面试中经常问的内容,虽然日常工作中几乎用不到,但是面试几乎是必问的,请各位注意:

  • 闭包
  • 原型与原型链
  • 引用类型
  • 深浅拷贝
  • this 的指向

推荐教程

原生 JavaScript 项目实践

将之前 jQuery 做的豆瓣电影与小米商城代码,复制一份。删掉所有 jQuery 代码,使用原生 JS 重新实现。

AJAX 与后端交互

有了以上的功底后,您对静态页面的开发,就算小成了。

现在可以尝试与后端接口交互了,既可使用 jQuery 的$.get、$.post、$.ajax,也可以使用原生 JS 的 fetch。

ECMAScript 6 学习

ES 6 是新版本的 JavaScript,里面解决了不少 JS 的历史遗留问题,重点要关注的是:

  • let 与 const
  • 箭头函数,以及箭头函数中 this 的指向
  • forEach、map、filter 等各种新增的遍历方法
  • promise
  • async 与 await

至于面向对象的 class,我认为目前可以先不学,因为后面要学的,无论是 vue 还是 react,目前都不使用 class 了。在历史上,react 曾经大家都是用 class 来开发的,但目前社区基本全面转向了 hook 写法,不再使用 class 了。

推荐教程

TypeScript 学习

TypeScirpt,是微软出的,给 JS 又做了一些增强,最重要的是添加了:类型。

类型这个东西,喜欢的人就非常喜欢,不喜欢的人就非常讨厌(例如我)。

我个人认为,人是主人,程序是仆人。不应该为了满足程序,去委屈人类。类型这种东西,就应该是程序自动推导的,而不应该要人类一个个定义。这感觉就是给自由的人类带上了手铐脚镣。

  • 目前国内一些公司,非常迷信大厂使用技术。导致一些非常小,整个团队就一个前端,也没两个用户的项目,也要求上 TS。
  • 而国外,例如 Ruby On Rails 的作者 DHH,多次在推特上声讨 TS。Node.js 的作者 Deno,也宣布弃用 TS。

我虽然不喜欢,但依然推荐你学习,因为可能对你找工作有帮助。

推荐教程

Vue.js 开发

有了前端的基本功,也会了 Ajax 和 ES6 后,现在才能正式的进入前端的大门 Vue.js,之前学的都只能算是门外汉。

Vue 与您找工作密切相关,目前新项目一般都会采用 Vue 3 来开发,也有大量历史老项目使用 Vue2。这里推荐新手关注 Vue3,当然如果有多余的精力,也可以去看 Vue2。但其实你只要一个掌握好了,另一个也会非常快的上手。

然后推荐使用 Vite 而不是 Webpack。

在 Vue 的学习中,要完成一个个真实的项目前、后台开发。需要掌握基础技术的有:

  • 项目的搭建
  • 使用各种 UI 组件
  • 封装网络请求
  • 处理跨域
  • 生命周期
  • 路由配置
  • 路由懒加载
  • 实现动态路由
  • Element Plus 与 Ant Design 组件
  • 使用 pinia 状态管理
  • 权限管理开发
  • 首页白屏优化
  • 打包上线

推荐教程

小程序开发

目前有大量工作都需要开发小程序,也是工作必备技能之一。

当您有 Vue 的技能后,再去学小程序,其实就非常简单了,一般只要看看官方文档,就能很快的掌握。

小程序开发的整体思路,与开发 Vue 一致,只是部分不同代码需要熟悉一下而已。重点需要掌握的是:

  • 小程序的路由(和 Vue 开发网页有一定的差距)
  • 生命周期
  • 小程序的优化(分包加载等)
  • 小程序的发布与管理
  • 小程序专有的 api(微信登录、微信支付、分享、扫码、调用设备硬件等)

推荐教程

uni-app 开发

uni-app,使用一套代码,就可以实现小程序、App、网站。但 uni-app 几乎不需要学习,因为 uni-app = Vue + 小程序

  • 使用 Vue 部分:页面逻辑代码
  • 使用小程序部分:组件、生命周期、路由、各种 api(支付、登录等)

所以,大家只需要简单看下文档,就能直接开始开发项目了。

推荐教程

可以上班了

以上技能都是去工作必须要会的,是能找到工作的最基础的技能。如果你对自己有更高要求,想进更好的公司,拿更高的薪资,请继续往下看。

React 开发

React 是 FaceBook 出的另一套框架。学习难度,相对与 Vue 来说要大一些。里面重点要掌握的是:

  • hook 写法(useState、useEffect、自定义 hook、useReducer、useContext、memo、useCallback、useMemo)
  • 路由的用法
  • Ant Design 组件的使用

一般来说,大公司更偏向于使用 React,同样带来的是工资更高。大公司选用 React,并不是说用 React 开发更好,其实 React 能做的项目,Vue 也同样也能做。我觉得更主要的原因是:

  • 大厂更迷信大牌,因为 React 是 FaceBook 出的,而 Vue 是个人与社区作品。
  • React 的学习难度,要比 Vue 更大一些。这样会 Vue 的人更多,人多了工钱也更低。

推荐教程

React Native 开发

使用 React 还有一个巨大的好处,是可以从事 React Native 开发工作。

React Native 是使用 React 代码来开发原生 App。虽然你写的是 JS 代码,但你调用的组件,却都是由 Objective C、Swift、Java 开发的,所以它的运行性能很高。

学习 React Native 开发,有以下难点:

  • 开发环境难以安装,这里推荐使用 expo,可以快速解决这个问题。
  • React Navigation 部分,对于新手十分复杂,难以理解。这里也推荐使用 expo-router,更有 Web 开发的感觉,更容易上手。
  • 开发中会碰到各种问题,对于新手来说,十分难以解决。
  • 打包上架困难,iOS 上架有大量的申请流程,Android 上架还需要有软件著作证书。
  • 所碰到的学习资料,大部分都是英文。

当然如果你掌握了 React Native 开发,获得的收益也是巨大的,在武汉这种 18 线小城市,也可以轻松找到至少 10K+ 的工作。

推荐教程

Node.js 开发

前端技能点差不多加完了,想进一步的深入,还可以学习后端开发,Node.js 就是非常好的选择。

这样一个人,无需学习新语言,只用 JS 一门语言,就能全栈开发网页、小程序、原生 App。无论自己接单干项目,还是在公司全栈开发项目,都是非常好的技能。

Node.js 的学习难度并不大,对于前端同学最陌生的可能是数据库的操作,经过一点点时间学习后,上手后其实也并不太难。

但目前 Node.js 的工作不算多,但如果碰到要求 Node.js 的全栈工作,在武汉工资一般不会低于 15K+。

推荐课程

总结一下

找工作最低要求技能:

  • Vue.js
  • 小程序
  • uni-app

不是可选,是以上 3 项全部都能做到独立开发,一去公司马上能干活,才能找到基础工作。

进阶技能:

  • React
  • React Native
  • Node.js

目前的行情,会 React 相关技术,面试机会会多很多。因为会 Vue 的实在太多了,搞 React 的却没那么好招。