编写可维护的JavaScript
软件生命周期中80%的成本都消耗在了维护上;而且几乎所有的维护者都不是代码的直接开发人。如何让自己写的代码让别人阅读起来更高效?当然是写代码的时候注入一些规范。那么在Javascript中有哪些编程风格值得我们去注重呢?这篇文章将总结《编写可维护的JavaScript》里面的观点。
缩进风格
语句结尾
建议不要省略分号。很多人喜欢写js代码很依赖于自动分号插入,也就是语句后面不加分号。但是这是大多数的情况,像return这样的语句是会出错的。类似的还有其他一些语法,这里就不细说自动分号插入机制了,感兴趣的童鞋可以前往JavaScript ASI 机制详解。
行的长度
这个之前在另外一篇博客中有介绍过,为了保证在小屏笔记本和大屏幕上看到的代码是一致的,通常建议每一行代码不要超过80列。
换行
代码长度超过80列,换行也是有讲究的。建议换行的代码增加两个缩进长度。例如:
callFunction(element1, element2, element3, element4, element5);
空行
整个函数代码没有空行地紧凑在一起会给阅读代码的人一定的视觉疲劳。也让人厌倦,起码我看到这样的代码就不想再看下去了。对于空行地建议:
- 在方法之间
- 在方法中的局部变量和第一条语句之间
- 在注释之前
- 在方法内的逻辑片段之间插入空行,提高可读性
命名
命名是我觉得规范中最难的点,怎么让变量或者函数名称还有意境。结合不同的场景,设置不一样的名称。让维护代码的人像看小说一般地阅读代码,就说明命名是成功的!除了变量含义之外,其他的一些规范比如:
- 驼峰写法
- 变量用名词
- 函数用动词+名词
- 对象私有属性或方法前面加_
- 常量用全部大写字母且分割单词用下划线
- 构造函数首字母大写,且以非动词开头
注释
单行注释
- 独占一行,用来解释下一行代码
if (condition) { // 如果代码执行到这里,代表通过了condition的校验 next(); }
注意注释之前要加空行、注释也要缩进。
- 与代码同一行,用来解释之前的代码
var result = something + somethingElse; // somethingElse will never be null
注意注释与代码直接至少添加一个缩进。
- 多行,用来注释掉一个代码块
// if (condition) { // doSomething(); // doSomethingElse(); // }
注释一个代码块时是在连续多行使用单行注释唯一可以接受的情况。但是最好别这样使用。
多行注释
if (condition) { /* * 如果代码执行到这里 * 说明balabala */ doSomething(); }
要注意缩进、换行、空格、空行。
使用注释声明
注释说明,主要用来做记号。主要有以下几种:
- TODO 说明代码还未完成,说明接下来要做的事情。
- HACK 表明代码实现走了一个捷径。应当包含为何使用hack的原因。同时也表明也许会有更好的解决办法。
- FIXME 说明代码存在bug,应当尽快修复。
- REVIEW 说明代码任何可能的改动都需要评审。
变量、函数和运算符
-
变量声明 变量声明习惯一般有两种:一种是“就近”原则,放在离使用最近的地方;第二种就是放在最上面,作为函数内的第一条语句。个人推荐后者,这跟JavaScript引擎解析代码的习惯是一致的。
-
函数声明 函数声明也会被JS引擎提前,建议在函数调用之前声明函数。另外,推荐函数内部的局部函数应当紧接着变量声明之后声明。
-
立即调用的函数 立即执行函数,在开发中肯定会经常使用。好的写法是:
var value = (function() { // 函数体 return { message: 'Hi' }; }());
清晰明了地的让人知道这是一个立即执行函数。
- 严格模式 ES5引入了严格模式,通过这种方式解析执行js代码,来达到减少错误的目的。代码要以strict mode去解析也很简单,只要将
use strict
放到js代码中即可。当js解析器看到这样一条没有赋给变量的字符串之后,就会以严格模式去解析代码。一个原则:尽量少地影响到更多代码!什么意思呢?use strict
可以放到任何位置,全局或者函数局部都可以。
// bad "use strict"; function doSomething() { // 代码 } // good function doSomething() { "use strict"; // 代码 }
如果有多个函数要使用严格模式,就用立即函数限制起来,避免影响到全局。
(function() { "use strict"; function doSomething() { // 代码 } function doSomethingElse() { // 代码 } })();
- 相等 使用===、!==代替==、!=,避免类型转换。类型转换的相关内容这里就不说了,自行了解。
UI层的松耦合
松耦合的原则:修改一个组件时尽可能不需要修改其他组件代码。
-
将JavaScript从CSS中抽离 避免使用CSS表达式
-
将CSS从JavaScript中抽离 避免直接修改dom的样式,通过类名去实现想要的效果。
// bad element.style.cssText = "color: red; left: 10px"; // good .reveal { color: red; left: 10px; } element.className += " reveal";
- 将JavaScript从HTML中抽离 避免直接在HTML写事件处理程序和逻辑代码
事件处理
两个规则:
- 隔离程序逻辑 将应用逻辑从所有事件处理程序中抽离出来是最佳实践,举个例子:
// bad function handleClick(event) { var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px"; popup.className = "reveal"; } // good function handleClick(event) { showPopup(event); } function showPopup(event) { popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px"; popup.className = "reveal"; }
- 不要滥用事件对象 将事件对象event一直传递下去是个很烂的实践。别人并不知道你具体使用到事件对象的什么属性或者方法。继续用上面的例子:
// bad function handleClick(event) { showPopup(event); } function showPopup(event) { popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px"; popup.className = "reveal"; } // good function handleClick(event) { showPopup(event.clientX, event.clientY); } function showPopup(x, y) { popup.style.left = x + "px"; popup.style.top = y + "px"; popup.className = "reveal"; }
vue的规范建议可以前往 vue最佳实践 ,一起讨论学习吧!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
华为快应用引擎技术架构详解
2018 年 3 月华为与小米,Oppo,Vivo 等 9 家手机厂商,联合发布快应用联盟标准。快应用是一种基于手机硬件平台的新型应用形态,无需安装,即点即用,又兼具原生应用体验(性能、系统整合、交互等)。同时,快应用在诞生之初就在开发规范、能力接入、开发者服务等层面实现了手机厂商间的标准化统一,极大地降低开发者的适配成本。 与传统应用相比,快应用具备如下特点: Instant:即点即用,用户无需等待 Everywhere:与手机的使用场景深度整合,入口无处不在(搜索,智能助手,智能推荐,应用市场,浏览器 ……) Efficient:准前端的开发方式,效率高 华为快应用引擎架构简介 上图是快应用的总体框架示意图。最上面是应用形态以及场景入口,中间是快应用引擎,底下是 OS(操作系统) 的基础设施及其硬件。从执行路径层面,有标准的 HTML5 方式支撑通用的 Web 场景(一般通过系统的 Webview 组件或定制的 Webview), 以及 JS(JavaScript)+Native 的方式,支撑更轻量、更快速的体验。 下面将按 3 个层面方面简要介绍快应用引擎的架构。 应用开发(前...
- 下一篇
容器挂载数据卷的几种情况
挂载宿主机存在的【文件】到容器不存在的【文件】 `宿主机存在文件:rainbow` $ cat rainbow This is my rainbow `运行容器` $ docker run -d -v $PWD/rainbow:$HOME/rainbow --name test_1 alpine tail -f /dev/null 38f19e99a0e00e67a605adc6e6b0b8d039bc78a49cb2491871ccf6fb761f564e `容器内查看文件,挂载成功` $ docker exec -it test_1 cat ~/rainbow This is my rainbow 挂载宿主机存在的【文件】到容器存在的【文件】 `挂载本地环境变量到容器` $ docker run -d -v /etc/profile:/etc/profile --name test_2 alpine tail -f /dev/null x569cae718223b1d1f506c2d7a597d1a1b7fb13dceadab379bf4065d89ba9605846 `挂载成功,...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果