前端应该怎么学？

太过爱你忘了你带给我的痛 2022-08-31 15:28 215阅读 0赞

世界的变化通常不是革命，而是四季更替。

在学之前，先“玩”

Chrome Dev Tools

前端核心工具，没有之一，浏览器是前端项目的“操作系统”，Devtools是这个操作系统的控制台。

用Devtools分析页面，“解构”某个前端实现，用Devtools“试验”小段代码，做Hack，用Devtools能做很多东西。

最重要的，用Devtools“探索”前端系统，最核心的概念都在这个工具里。

你应该关注Chrome Dev Tools团队的官方博客，Twitter，Youtube。

快速原型与代码分享工具

http://jsbin.com 和 http://codepen.io，不碰编辑器把想法快速实现出来。

最好的思维工具往往是能帮你动手的工具。

提取封装：最基本的程序设计技巧

很多人学了半天编程，学了各种“技巧”，还不知道“提取、封装”的通用性和重要性。

有提取封装，才有可能产生高质量的“抽象”，才有后面的“信息隐藏”，“可读性”，“复用”，“模块化”，“低耦合”，“架构设计”，“Simplicity”，“DRY”，“可维护性”，“代码质量”这一堆东西。

现在的编程教育太多本本教育，啰嗦了半天“模块化”，铺陈各种技巧，却没有提程序设计最最普世最最根本的常识：提取封装。

我说它是常识，就像你要出远门，带很多行李，于是分门别类，分箱子打包好了递送，提取封装无非如此，理解概念间的联系和区别，远近亲疏，做一个选择，把他们“合理”地归置起来。

这是无处不在的，HTML，CSS，JS，PHP，Java … 好的程序设计无非合理的提取封装。只不过虽然说起来简单，做起来未必，问题是复杂的，合理地提取封装变得困难，就像你出远门要多带很多东西打包变得困难一样。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

HTML5

HTML5不难，但每个标记用得恰到好处没你想象的容易。

HTML5容错率高，该用section的地方你用div也不会报错，但仍有不少讲究，比如把Table系列标签用得恰到好处。我可以肯定市场上有90%+的前端程序员并不100%掌握Table系列标记的确切语义和用法。

HTML5的很多书本都大谈特谈HTML5的新功能，新API（JS），这些东西有用，但并不重要，要用的时候拿起来用就行了。

HTML的重要性，体现在理解HTML本身已经不再只是文档结构标记语言，现代前端开发，HTML本身是“编程接口”，是抽象的基本形态，如何理解？举例来说：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]  
这是现代前端模块化的基石，前端组件化的基础，产生这样的HTML代码是一个“设计问题”，接口设计，输入输出设计，模块设计，你怎么叫都行，反正现代前端开发语境下的HTML不是简单用用HTML定义好的标签这么简单，这是前端开发的强大、美妙之处。

不要看轻HTML，它不复杂，但很重要。

CSS3

CSS是一种很深的技术，是非常值得投资的技能，光是一个transition最小白的使用，能给一个单调的页面带来生机。尽管多数前端项目对开发者CSS的能力要求不高。

这个技能能给项目带来质变，视觉，交互，甚至能直接影响程序设计本身。很多用JS做的低效实现，现在都有成熟的CSS方案，比如超级灵活的适应性布局，状态转换，动画等等。

带着兴趣与尊重学HTML5，CSS3

两者结合起来，是很深的技术，有时候我们经常纳闷一个页面实现实现的关键技术是什么，很多时候这个关键技术并非高超的JS编程技巧，而是对HTML5，CSS3的深刻理解、创造性地应用，这种用例往往给我们醍醐灌顶的感觉。

是的，HTML5，CSS3也有大师，并不是开玩笑。表面看起来简单的东西，比如骑自行车，也可以玩成极限运动。

区别在于“主动探索”。

说回基础，CSS3的核心并不难列出，布局定位，盒子模型，度量衡，字体规则等等。

但列出来并没有意义，因为学编程不是画好重点照本宣科，而必须实际运用中理解，没有替代方案。

就是将HTML5和CSS3做有相当复杂度的静态页面。

没有耐心的人觉得做这种东西简直索然无味，HTML5，CSS3我都会啊，我看看就懂了。

这类孩子会绕一大个圈子。

怎么学Javascript语法

我们学编程不学语法，而是学概念，这是一个重要的意识上的区别。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]  
这里统统是语法，但同时又统统是概念：函数声明（输入），函数名，参数列表，参数校验，局部作用域，输出返回，函数签名（signature），调用等等。 语法只是概念的呈现，是概念的皮囊，学编程该问的不是这个怎么写，而是“这是什么，作用是什么”，概念明了，语法是不用学和记的。

如果学习者只记忆表象，“这个该用大括号，这个该用return”，将只能建立起很肤浅的直觉。

在我们眼里，每一段代码都应该是一台活动的机器，有着内在的机理和逻辑，你看到代码应该像看到工作中的机器呼呼冒着白气，看代码不是看静止的文本，这是普通技术和顶级技术的根本意识区别。

算法是否重要

好一点的公司面试都有算法考核，这是应该的，就像大馆子招厨师，基本修养是一定要过关的，八大菜系这种是业内“常识“，你一个专业厨师能不掌握吗？

算法思维对编程的影响是潜移默化的，我这里用文字说是说不明白的，哪天算法给你灵感的时候你自然明白。

算法与Javascript的关系

算法和语言无关，语言只是对算法的实现而已，实现五花八门，纯过程，OO还是怎么样，随便，Javascript照样可以实现算法，这重要，但不是关键。

学算法的关键是”理解算法原理“，”理解“的最好方法，我认为是”可视化“。你可以自行Google ”algorithm visualization“。如果你能看到一个算法的执行过程，慢镜头看得清清楚楚，把算法原理映射到脑子里，随着对语言的熟悉，你自然能用JS写出代码来。

掌握Javascript DOM操作的必要性

你要理解DOM是HTML文档结构在浏览器内部的逻辑表示，是前端应用的底层接口，而学习编程收益最高的投入之一，就是在前期理解底层工作原理，理解了底层工作原理，可以一通百通，扫除后续很多障碍。

有时候我们做应用会怀疑底层的意义，学习底层有没意义，我有一个不是回答的回答，学了你才知道意义，不学你很可能意识不到。即使现代前端框架潮流执之下，DOM操作被充分隔离屏蔽，理解DOM底层仍然重要。

还得明白，不是所有的应用都依赖现代框架，业务的世界是复杂的，没有放之四海皆准的技术方案，框架开发方法在增值的同时，并非完全对传统开发方法的替代，世界是多远的，不是非此即彼的标准答案。

学习DOM编程

第一，如果零基础，从“DOM编程艺术”这本书开始，目的是提取DOM知识，做一些适应性训练，全面地完成这本书，同时熟悉JS语言

第二，做一个完整项目，作大量DOM操作，学习者应该自己确定一个项目（如todoist这样的应用就很值得模仿），用纯JS（ES5）配合原生DOM API操作完成

DOM核心也不难列：节点的增删改查，获取节点（及属性）的方法，css selector api，事件操作，样式操作等。把注意力放在理解概念上，理解各种概念在代码上下文是如何工作的。

从第一步到第二部是“不平滑”的，不要假设“我”把书上的代码都做了一遍，就立刻能独立开发出东西来，通常并非如此。

事实是头一个完整项目会让很多学习者倍感艰难挫折，“我看了书，之前消化了那么多资料，为什么还是写不出来“。

这是正常的，但很多人的假设和期望错了，在我们认知水平低的时候，往往越容易有不切实际的期望，我们会低估问题的复杂程度。

训练代码怎么写

工作流和工具链的意义这时候就体现出来了，所有的训练代码都该这么写：

训练项目应该放到github，不懂git就去学，这是不用教的

项目必须有规范的README.md，交代项目内容，实施计划等内容，中英文均可

用npm（或者yarn）来管理依赖，项目应该用npm init来初始化，应该有package.json

项目应该有代码规范，应该集成eslint，做好相应配置（包括编辑器）

第一个项目应该基于ES5，因为传统JS语法有一些宝贵的概念你需要掌握

如果项目基于ES6，就该集成Babel

是否使用gulp或webpack是学习者的选择

好好做commit

放慢速度，学习越是开始阶段，基础越是薄弱，速度越应该慢（很多孩子是被自己的速度击败的）

做事有板有眼不只是给自己看，更重要的是给别人看，你在github上的每一次提交，每个README都能潜在决定别人对你水平的判断，这是和求职直接相关的，所以一定要重视，招聘方不会希望招你进去帮你改掉坏习惯，他们希望你带去好习惯，好实践。

熟悉jQuery的重要性

你也许在哪里读过jQuery已死的文章，我不知道你怎么判断。但你得注意到jQuery是一个仍在迭代的项目，而且仍是使用最多的前端基础库之一，你可以自己去google数据。

中文技术圈在给成熟技术判死刑，和把新技术捧上天这两件事情上做的极好，尤其是国内一线互联网公司的人竟也一般鼓吹，粗俗武断，让我觉得遗憾。

技术人品位的内核，是一种笃定的理性。世界的变化通常不是革命，而是四季交替。

jQuery在前端开发社区的作用不需要我来强调，jQuery在Javascript语言运用和对DOM底层的理解上，jQuery的API设计，有宝藏，即使你不直接用jQuery，他山之石，可以攻玉。

程序设计的意识

国内外编程教育的根本不同，国外的编程教育强调程序设计（有很多为什么，很多尝试），国内的编程培训不强调程序设计过程，强调结果，一般问题的解决方案是很容易到达的，所以总是止步于work但没有工程品位的实现。

而做这一行的真正乐趣，在程序”设计“之中。设计是开放的思维活动，设计有约束，但设计没有标准答案，设计不是一蹴而就的，设计是演化的，但设计达成的问题最终解决是本质的。

如果我们觉得解决问题就”只是“达成某个特定结果，并止于这个特定结果，那么我们将会失去发现方法论、或作出创新的宝贵机会，就像拿红酒来解渴的人体味不到佳酿的醇厚。红酒的目的并非解渴，同样解决问题的目的并非解决那个”问题“，而是发现规律本身，前者只是解决方案，而规律确实智力资产，哪个更有价？

学编程的人，要习惯“设计”程序，设计不来源于灵感，来源于常识，只不过很多时候常识被我们忽略而已。我相信等你体会到这一点的时候，将得到编程的莫大乐趣。

做第一个完整前端项目

如前所述，这应该是你的第一个DOM编程项目，一个实实在在的应用。

做好项目准备工作，集成工具链，走专业工作流

先用HTML5实现页面结构

考虑移动端友好，响应式等UI关键指标

充分运用CSS3布局实践

学会管理CSS代码

然后用ES5实现交互

用原生DOM API

运用CSS selector

运用异步程序设计的基本方法，回调，Promise

运用事件管理应用状态，事件流，应该学会事件代理这样的模式

运用IIFE的封装，closure的运用，ES5模块化，ES5模块化的区别

用indexeddb存储数据

先关注功能设计与实现

再关注程序改善

找老师review你的代码

配合书本 “Javascript模式” 重构你的代码

你要在这时候学会原型，闭包等JS核心概念

这是一个至关重要的项目，你不应该追求尽快把它做完，而应该最大限度地把技术用透，这个项目会让你真正跨过”入门“的门槛。

你会做得非常磕巴，如果不磕巴只说明你对应用本身和技术的探索不够。

异步程序设计，习惯回调

无论如何，回调是异步程序设计的根本结构，它本身很简单。

function foo(callback) \{ /\* 执行上下文 \*/ callback(); \}

把函数作为参数传入某个执行上下文，伺机执行，称为”回“调。

变化一下，每当你οnclick=handleClick，即把函数传入事件触发上下文，称之为”事件“回调。

这是异步程序设计的基本模式，我们每次封装Javascript function，考虑的一个方面是它需不需要接受回调函数。

另一个设计工具是Promise，每当我们设计一个Javascrpt function，可以考虑它可否返回Promise。

还有其他的异步程序设计结构可用，程序设计归根到底，无非接口设计，理解接口设计工具至关重要。

我想特别支出，请你习惯所谓的“回调地狱”学会用程序设计技巧去化解它，你用的是一种异步语言，你不应该害怕它的自然形式。

第二个实际项目

自己决定做什么，但不管做什么，要选有相当复杂度的应用

做什么不重要，重要的是做深

按照第一个项目的大致开发流程进行，但多一点顶层设计

可以考虑使用ES6

考虑数据类型，数据结构，数据流和数据存储

分析应用有哪些自包含的UI部分

理解事件流，哪些事件，哪些交互，改变哪些状态

考虑是否可以适当集成第三方类库

UI是如何初始化的，初始化要做哪些事

整个应用程序有哪些部分，如何彼此分离，又如何相互通信

找人专门来评价你的程序设计，而不是简单帮你看看“代码”

做深两个项目，你对前端的一切应该已经相当熟悉。

把框架捡起来用

我认为框架是不需要教的，如果你的前端基础扎实，不可能学不会框架，基础扎实，你不可能不具备自学框架的能力。如果你基础好，框架将给你的开发插上翅膀，如果你基础漏洞百出，框架不会自动让你成为好程序员，它可能放大你的技能缺陷。

框架比原生前端开发简单，但也比它复杂，框架开发有独立于原生技术的概念体系，使用框架是习惯它的“约束”，约束就是做某件事的特定方法，特定形式。

第三个实际项目

自己决定做什么，不管做什么，一定要做有相当复杂度的应用

使用框架

接受框架的特定工具链和工作流，如React的create-react-app

在框架的语境下做好程序设计

争取一次性地理解框架的核心概念

把框架提供的概念工具用透，框架就是你的了

最后，学习编程最重要的是什么？

答曰：主动探索。前端也不例外。

一定要主动探索。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]: /images/20220829/8fd349bc40ee475eb88368d6d28230bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]: /images/20220829/66ff4d59628b476aa1f142d11306464c.png