web前端开发需要学什么
web前端开发需要学什么
打开招聘网站,搜“前端开发”,发需薪资范围从8k到40k都有。端开但仔细看要求,发需几乎都绕不开三样东西:HTML、端开CSS、JavaScript。这就像学做菜得先认盐和酱油——没它们,再花哨的摆盘也白搭。我见过不少新人一上来就啃React源码,结果连个盒子居中都写不利索,面试官一问就露馅。
先说最基础的HTML。别觉得它简单,标签语义化就是一道分水岭。有人写导航栏用<div class="nav">,有人用<nav>。后者不仅对屏幕阅读器友好,在SEO上也有微弱优势。我参与过的一个政府项目,因为无障碍规范,硬性要求所有按钮必须用<button>而不是<div>。这些细节课本不讲,但真实项目会卡你。
CSS才是前端第一个大坑。盒模型、浮动、定位这些老概念,现在依然要懂。但更关键的是Flexbox和Grid。我敢说,90%的页面布局用Flex能三行代码搞定。有个同事用float写三栏布局,调了一下午边距,换成display: flex; justify-content: space-between;,五分钟收工。另外,响应式设计不是可选项——媒体查询@media得会,相对单位rem、vw得用。手机端适配搞不定,项目直接没法上线。
transform: translate(-50%, -50%)实现绝对居中时的爽感。 JavaScript是前端的灵魂。变量、函数、循环这些语法任何语言都差不多,但JS的坑在于它的“灵活”。比如this指向,有人工作三年还靠猜。还有原型链、闭包、事件循环——面试必问,工作中也真用。举个真实例子:之前做一个搜索框防抖,用setTimeout加闭包保存timer,如果不懂闭包,变量就会被污染。ES6之后,箭头函数、解构、Promise、async/await成了标配。你写个fetch请求,总不能用回调地狱吧?
DOM操作和事件机制也得熟。虽然现在框架帮你操作DOM,但面试官会让你手写一个addEventListener的兼容写法,或者解释事件冒泡和捕获。我面过一个小伙子,问他怎么阻止事件冒泡,他说“用return false”——那是jQuery时代的答案,原生里得用event.stopPropagation()。细节见真章。
接下来是框架。Vue、React、Angular三选一,国内Vue和React占大头。别贪多,先吃透一个。Vue的响应式原理、React的虚拟DOM和Hooks,这些是面试高频。但注意:框架只是工具,底层还是JS。我见过有人Vue用得飞起,但问他v-model怎么实现的,他说“就是双向绑定啊”——这等于没答。自己用Object.defineProperty或Proxy写个简易版,理解会深很多。
工程化是另一个分水岭。Webpack、Vite、Babel、ESLint、Git——这些不要求你精通,但得会用。比如配置个alias路径别名,或者用.env文件区分环境。我见过一个项目,所有人提交代码前不跑lint,结果上线后一堆格式错误。后来加了husky做pre-commit检查,世界清净了。还有包管理,npm、yarn、pnpm各有拥趸,但至少得会看package.json,知道dependencies和devDependencies的区别。
浏览器原理和网络基础也不能跳过。从输入URL到页面展示发生了什么?这道题能筛掉一半人。DNS解析、TCP握手、HTTP缓存、重排重绘……不需要背得一字不差,但得理解流程。比如强缓存和协商缓存的区别,直接关系到你打包时怎么设hash。还有跨域问题,CORS、JSONP、代理,实际开发天天遇到。
最后说点虚的但很重要的:调试能力和搜索能力。Chrome DevTools里Sources面板打断点、Network面板看请求、Performance面板分析性能——这些比背API有用。遇到报错别急着问人,先复制错误信息去搜。我自己的经验是,Stack Overflow和GitHub Issues能解决80%的问题。剩下20%?看源码或者读规范。
前端这行变化快,但基础永远值钱。别被新名词吓到,什么微前端、Serverless、WebAssembly——它们都是建立在HTML/CSS/JS之上的。你先把这三样练到肌肉记忆,再学框架和工具,路会顺很多。我见过太多人追新,结果连一个轮播图都写不流畅。踏实点,从今天开始写个静态页面,比收藏一百篇“前端学习路线”有用。
```