一个前端程序员的费曼技巧练习

费曼是美国著名物理学家，诺贝尔奖得主，是个非常聪明、正直而且好玩的家伙，他的自传《别闹了，费曼先生》我一口气看完了，精彩程度不逊于一部小说。费曼提出了一种高效学习的方法，即“费曼技巧”，其核心思想是：每当学习一个新东西的时候，想象自己正试着把它介绍给一个对此一无所知的外行人，不使用任何专业术语；如果能讲清楚，说明你已经掌握了它本质，如果做不到，那就继续学习。

即将成为一名Web前端工程师的我，试着用费曼方法来厘清我的工作内容和一些技术上的概念。

 

（我想象自己正在和麻麻对话，试图让她明白我的工作内容） 

 

Q1. 前端工程师是做什么的？为什么叫“前端”？

A1. 前端工程师的主要工作就是编写代码去控制浏览器的运行，包括你能看到的和看不到的：这里有张图，那里有个按钮，这是你看得到的部分；你点了“查询”以后，浏览器暗地里向服务器发个消息，这是你看不到的部分（当然，拿到查询结果后会显示给你看的）。我们写的代码需要被浏览器下载到用户的电脑里运行，而不像Java等语言的代码运行在遥远的服务器上，所以从用户视角看，我们写的代码离用户更“近”，位于前端啦！

 

Q2. HTML是什么？

A2. 我们上网时看到的花里胡哨的网页，不是用笔画出来的，而是用一种浏览器听得懂的语言告诉它要显示哪些内容，它再按照预定的规则显示出来的，这种语言就是HTML，全称是“超文本标记语言”。HTML描述了一个网页内的所有元素，以及它们之间的关系。”超“字说明元素不仅仅是文本，还可以是别的比如图片、音乐、视频等。

 

Q3. CSS是什么？

A3. HTML只是告诉了浏览器要显示哪些东西，而没有告诉它这些东西长什么样，如果直接显示出这些东西最原始的样子，那网络世界会丑得不堪入目。于是我们需要另一门语言来描述这些东西的样子，比如大小、颜色等，这门语言就是CSS，全称是“层叠样式表”。打个比方：HTML建起一座毛坯房，CSS为房子搞装修。

 

Q4. JavaScript又是什么？

A4. 网页的内容有了，样子也好看了，但就这样静静地显示在那儿，会不会太单调了点？比如，可不可以在页面上加点动画，或者播放一首歌？好主意！于是就有了JavaScript，简称JS。这种编程语言可以动用浏览器更为复杂的功能，大致分为两类：一是控制页面上的元素和样式，比如取消某些文字的加粗、弹出一个小窗口、或者开始播放音频；二是与服务器通信，即从服务器获取数据和向服务器发送数据。举个例子，你在使用网页邮箱时，点一下“收件”按钮，浏览器就会在相应的JS代码的指挥下，向邮箱服务器发个信息询问“这位用户有新邮件吗？”，邮箱服务器那边收到信息后开始检查，然后回复“有啊”并且把新邮件发回来。

 

Q5. DOM、BOM分别是什么？

A5. JS之所以能操纵浏览器的诸多高级功能，仰赖两大功臣辅佐，即DOM（“文档对象模型”）和BOM（“浏览器对象模型”），它们都是浏览器提供给程序员的“接口”，没有它们，前端工程师什么也干不了。

很抱歉这里不得不使用“接口”这一术语，但这个概念很容易理解。所谓接口，就是一种规范，符合这种规范的东西都具有它“应该”具有的功能。举个例子，方向盘就是一个接口：首先，司机要想控制车辆的前进方向，必须通过方向盘；其次，每辆车的方向盘虽然外观上有所差别，但它们实现的功能是一样的——向左打时左转，向右打时右转，决不会反着来。

现在，JS就是司机，浏览器就是车，而DOM和BOM就是方向盘、油门、刹车。

详细点说，DOM是控制页面元素的接口，通过它，JS代码可以编辑页面元素，如取消某些文字的加粗、弹出一个小窗口、或者开始播放视频；BOM是控制浏览器其他一些属性的接口，通过它，JS代码可以获取浏览器型号、当前页面地址、浏览记录等信息，或者让浏览器跳转到指定页面。

说了半天，接口在JS中到底怎么用？很简单，DOM规定了一个词“document”，在别的编程语言中这只是一个普通的字眼，但在JS里它是DOM的化身，写出它就可以为所欲为了！BOM对应的词是“window”。

 

Q6. AJAX是什么？

A6. 这是一种网络技术，全称是“异步JavaScript和XML”（不必理会名字中的术语）。这种技术提供的功能是，浏览器在不“刷新”页面的前提下，与服务器实现网络通信。所谓刷新，就是浏览器把你正在看的网页扔掉，重新从服务器下载那个网页。在互联网的早期（1998年之前，真的很早），浏览器与服务器之间的通信都是“给我一个网页”“好的，这是你要的网页”这种一板一眼的模式。后来人们想，为什么不只下载必须的那一点数据，然后用JS略微修改原来的页面呢？比如在收到新邮件后，在“收件箱”后面加个“（1）”，再把文字加粗，这比每次都把整个页面重新下载一遍要省事得多。于是就有了AJAX。当然，现代浏览器都提供了使用AJAX技术的接口。

 

Q7. “类库”和“框架”是常听到的两个概念，它们分别是什么？有何区别？

A7. 打个比方，你手头有一辆汽车的所有部件，你的任务是把它组装成一辆完整的车。

类库（如jQuery）就好比锤子、改锥等工具，有了它们，徒手很难做的事情（如拧螺丝）就变得很容易了，但你仍然需要自己想办法把每个部件拼在一起。

而框架（如React, Vue）好比装配流水线，蜿蜒的传送带两侧伸出长短不一的机械臂。你打开说明书，上面写着：“依次把部件放在传送带上，位置A放上底盘，位置B放上发动机，位置C放上座椅……”你照做了。不一会儿，一辆崭新的汽车被传送带缓缓送出。成功了！等等，但它究竟是怎么做到的？似乎一时半会儿弄不懂这个复杂的系统！

于是区别很明显了，类库是你的趁手工具，而框架是一种快速、标准化打造Web应用的“大型工具”。只用类库不用框架的是“手工艺人”，而使用框架的是“流水线工人”。如果只是做个小项目，用框架就显得小题大做；而大型的工程，不用框架几乎不可能顺利开发出来。当然，框架远远没有汽车装配流水线那么强大、死板，即使在目前这个框架满天飞的时代，软件开发仍然非常依赖程序员的“手艺”。

 

 

写在最后的话

To不了解前端的朋友：以上回答是否有让你弄不懂的地方？如果有，敬请指出~

To前端同仁：以上解读是否存在明显的错误？如果有，敬请斧正~

 

欢迎留言交流！

转载于:https://www.cnblogs.com/leegent/p/6886688.html