lisongfeng 发布的文章

在早期网站中,JavaScript主要用于实现一些小型动效或表单验证。今天的Web应用则动辄成千上万行JavaScript代码,用于完成各种各样复杂的处理。这些变化要求开发者把可维护能力放到重要位置上。正如更传统意义上的软件工程师一样,JavaScript工程师受雇是要为公司创造价值的。现代前端工程师的使命,不仅仅是要保证产品如期上线,更重要的是要随着时间推移为公司不断积累知识资产。

编写可维护的代码十分重要,因为很多开发者都会花大量时间去维护别人写的代码。实际开发中,从第一行代码开始写起的情况是非常少见的。通常都是要在别人的代码之上来构建自己的工作。让自己的代码容易维护,可以保证其他开发者更好地完成自己的工作。

注意 可维护代码的概念并不止适用于JavaScript,其中很多概念适用于任何编程语言。当然,有部分概念可能确实是特定于JavaScript的。

1. 什么是可维护的代码

可维护的代码有几个特点。通常,说代码可维护就意味着它具备如下特点。

  • 容易理解。无需求助原始开发者,任何人一看代码就知道是干什么的,怎么实现的。
  • 符合常识。代码中的一切都显得自然而然,无论操作有多么复杂。
  • 容易适配。即使数据发生变化也不用完全重写。
  • 容易扩展。代码架构经过认真设计,支持未来扩展核心功能。
  • 容易调试。出问题时,代码可以给出明确的信息,通过它能直接定位问题。

能够写出可维护的JavaScript代码是一项重要的专业技能。这个技能是一个周末就拼凑一个网站的业务爱好者和对自己所做的一切都深思熟虑的专业开发者的重要区别。

2. 编码规范

编写可维护代码的第一步是认真考虑编码规范。编码规范在多数编程语言中都会涉及,简单上网一搜,就可以找到成千上万的相关文章。专业组织都会有为开发者建立的编码规范,旨在让人写出更容易维护的代码。优秀开源项目都有严格的编码规范,能够让社区的所有人容易理解代码的组织。

编码规范对JavaScript而言非常重要,因为这门语言实在太灵活了。与多数面向对象语言不同,JavaScript并不强迫开发者把任何东西都定义为对象。相反,JavaScript支持任何编程风格,包括传统的面向对象编程和声明式编程,以及函数式编程。简单看几个开源的JavaScript库,就会发现有很多方式可以创建对象、定义方法和管理环境。

接下来的几节会讨论制定编码规范的一些基础方面。这些主题都很重要,当然每个人的需求不同,实现方式也可以不同。

- 阅读剩余部分 -

一位伦敦的Python工程师Oliver Russell最近做了一个好玩的尝试,用33行代码“实现了”React。

他实现的“React”主要涉及如下抽象:

  • 我们传一个取得状态并返回虚拟DOM的函数
  • “React”在浏览器中将虚拟DOM渲染为真实DOM
  • 状态改变,“React”再次运行函数并返回新虚拟DOM
  • “React”高效更新真实DOM,以匹配新虚拟DOM

由此可见,这个实现的功能还十分有限。只涉及虚拟DOM生成、差异比较和真实DOM渲染。

全部实现代码如下图所示。

- 阅读剩余部分 -

本文是作者根据为“360第六届前端星计划”录制的在线培训课程整理的提纲。

Web标准是构成Web基础、运行和发展的一系列标准的总称。如果把前端开发人员比喻成“孙悟空”,那么Web标准就是“如来佛的手掌”。可以毫不夸张地说:对前端从业者来说,Web标准意味着能力,代表着舞台,象征着空间,指引着发展。

Web标准并不是由一家标准组织制定,涉及IETF、Ecma、W3C和WHATWG等。本文按Web标准组织分别简述相关Web标准,为前端学习Web标准提供指导。

IETF

IETF,全称Internet Engineering Task Force(互联网工程任务组),成立于1986年。Internet其名的TCP/IP协议由IETF标准化。

1991年,Web发明人Tim Berners-Lee总结了其Web服务器和浏览器中实现的HTTP协议,也就是HTTP 0.9:

HTTP 0.9全文不到700个单词,定义了最简单的浏览器与服务器通信获得HTML页面的协议。这个协议只定义了GET请求。

随着Web的迅速流行,很多Web服务器在0.9版基础上增加了扩展。为了把这些扩展及时记录下来,IETF成立HTTP Working Group(HTTP WG)着手制定HTTP/1.0。1996年5月,IETF发布了一份RFC(Request for Comments,征求意见稿):RFC 1945。IETF的RFC可以接受为正式标准,也可以作为参考文档。RFC 1945就是一份参考文档(也就是HTTP/1.0):

HTTP/1.0增加了HEAD和POST方法。增加了可选的HTTP版本号。增加了HTTP头部字段描述请求和响应。增加了3位数的响应码(1xx保留,2xx成功,3xx重定向,4xx客户端错误,5xx服务器错误。)HTTP/1.0已经达到20000单词。

仅仅9个月后,1997年1月HTTP/1.1就发布了。HTTP/1.1很大程度上也是对HTTP/1.0的改进,增加了持久连接、强制服务器头部、更好的缓存和分块编码。为Web的发展奠定了基础。

1999年5月被更新版替代。2014年5月再次被更新。每次更新,之前的版本就废弃了。HTTP/1.1已经长达305页,100000单词。

HTTP最初是纯文本协议。HTTP消息是明文发送的。可以被任意截获和查看。HTTPS通过使用TLS(Transport Layer Security)协议对传输消息进行加密

HTTP/1.1是纯文协议,解析不便,而且一个连接只能请求一个资源。随着HTTP请求量越来越大,这种低效越来越明显。尽管人们想出各种方案来提升效率,比如静态资源服务器分片、合并请求,但效果有限,而且会带来新问题。

HTTP/2是对谷歌SPDY的标准化。包括多路利用的字节流、请求优化级和HTTP头部压缩。2012年,HTTP Working Group注意到SPDY的成功,提议制定新版本的HTTP。2015年5月,HTTP/2也就是RFC 7450被批准为正式标准:

因为HTTP/2是基于SPDY的,在此之前,很多浏览器其实已经支持HTTP/2(Firefox、Chrome、Opera),2015年年底前所有浏览器都支持HTTP/2(Internet Explorer 11、Edge、Safari)。

目前HTTP/2通信已经占全球43.8%(https://w3techs.com/technologies/details/ce-http2)。

- 阅读剩余部分 -

本文源自3月11日作者在公司内部的一次“泛前端分享”,是作者在开发IoT智能设备联动场景项目过程中的一些经验总结。文中代码可以视作伪代码,不包含任何涉及真实项目的内容。

Vuex是开发复杂Vue应用的必备工具,为跨组件共享数据提供了适合Vue自身的解决方案。关于Vuex的详细介绍,推荐阅读官网文档:https://vuex.vuejs.org/

Vuex调用接口的三个阶段,总体上体现了项目在迭代中不断优化调用逻辑、重新组织代码和抽象实现细节的过程。

  • 关注点分离及可维护代码:关注点分离(SoC,Separation of Concerns)是软件架构设计的一个重要原则,体现为以单一职责为目标来划分模块,通过将逻辑归类、分组,创建出相互独立但又有机统一的代码实体。关注点分离的代码,其模块职责清晰、关系明确,便于排错和维护,是代码整体可维护性的基础。
  • 橄榄形接口与同构映射器:橄榄形接口比喻调用服务从整体上入口和出口小,但内涵逻辑丰富。这种接口对外部收敛,简单、直接,但将主要逻辑封装在了内部,便于集中处理请求和响应。同构映射(isomorphism mapping)是一个数学概念,在这里借用于形容自定义的、与Vuex辅助方法一致的服务映射。
  • 响应归一及三级错误处理:响应的归一化(normaliztion)的目的是统一不同服务端接口返回数据的格式,以及请求错误的响应格式。三级错误处理分别是网络错误、服务错误和接口错误,这些错误可以作为响应以归一化的形式返回,也可以同步设置到Vuex的状态对象,成为响应式数据实时体现在界面组件上。

- 阅读剩余部分 -

北京时间2020年2月27日,Facebook宣布其实验性JavaScript工具链Rome开源。Rome是Babel和Yarn作者、React Native团队成员Sebastian McKenzie的新作品。开源之前,Rome基本上Sebastian McKenzie的个人项目,只不过Facebook愿意付薪水让他潜心开发。

Rome项目地址:https://github.com/facebookexperimental/rome

Rome(罗马)这个名字是这个项目的第三个名字。2016年,Sebastian McKenzie给这个项目起的第一个名字是Sonic(声速/音速),“因为追求速度”,后来又改为Hydra(九头蛇),因为“有多个头”。2019年3月改为Rome,因为“罗马有很多非常恰当的隐喻,如「罗马不是一天建成的」「条条大路通罗马」”(https://twitter.com/sebmck/status/1108408813864906752)。

- 阅读剩余部分 -