zoukankan      html  css  js  c++  java
  • 一个前端程序员的费曼技巧练习

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

    即将成为一名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前端同仁:以上解读是否存在明显的错误?如果有,敬请斧正~

    欢迎留言交流!

  • 相关阅读:
    Js:getAttribute(转)
    javaScript(1):基础部分
    元信息标签<meta>
    HTML补充:引用脚本、特殊符号、标签、元素、多媒体
    .Net Micro Framework研究—让MF支持英文输入法
    .Net Micro Framework研究系列文章
    .Net Micro Framework研究—实现SideShow窗体界面
    .Net Micro Framework研究—MF驱动继电器
    .Net Micro Framework SDK 2.5 发布
    第二十五章补充内容 9 关键字volatile 简单
  • 原文地址:https://www.cnblogs.com/leegent/p/6886688.html
Copyright © 2011-2022 走看看