惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

宝玉的分享
宝玉的分享
Recent Commits to openclaw:main
Recent Commits to openclaw:main
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Tailwind CSS Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
罗磊的独立博客
V
Visual Studio Blog
爱范儿
爱范儿
H
Help Net Security
J
Java Code Geeks
I
InfoQ
Recent Announcements
Recent Announcements
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Recorded Future
Recorded Future
Jina AI
Jina AI
Microsoft Security Blog
Microsoft Security Blog
WordPress大学
WordPress大学
GbyAI
GbyAI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Y
Y Combinator Blog
Google DeepMind News
Google DeepMind News
Scott Helme
Scott Helme
S
SegmentFault 最新的问题
S
Securelist
L
LINUX DO - 热门话题
Cyberwarzone
Cyberwarzone
C
Cisco Blogs
Simon Willison's Weblog
Simon Willison's Weblog
G
Google Developers Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 叶小钗
T
The Blog of Author Tim Ferriss
博客园_首页
B
Blog
F
Fortinet All Blogs
AWS News Blog
AWS News Blog
V
Vulnerabilities – Threatpost
S
Secure Thoughts
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Forbes - Security
Forbes - Security
S
Security @ Cisco Blogs
T
Threat Research - Cisco Blogs
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
Schneier on Security
Project Zero
Project Zero
Martin Fowler
Martin Fowler
C
Cybersecurity and Infrastructure Security Agency CISA
N
Netflix TechBlog - Medium
N
News and Events Feed by Topic

博客园 - dangjian

站点的安全防范都是后端的职责?非也,Web前端安全同样不可忽视 【社区公益】送《Web前端开发最佳实践》给需要的人 Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码 Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据 Web前端开发最佳实践(10):JavaScript代码不好读,不好维护?你需要改变写代码的习惯 Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码 Web前端开发最佳实践系列文章汇总 Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些 Web前端开发最佳实践(7):使用合理的技术方案来构建小图标 Web前端开发最佳实践(6):过时的块状元素和行内元素 Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性 Web前端开发最佳实践(4):在页面中添加必要的meta信息 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(1):前端开发概述 如何设计一个基于Node.js和Express的网站架构? 如何在ASP.NET中生成HTML5离线Web应用 Web程序员们,你准备好迎接HTML5了吗? 敏捷软件开发之何为敏捷开发
Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量
dangjian · 2015-03-13 · via 博客园 - dangjian

前言

JavaScript语言由于其固有的灵活性,所以导致开发者可以写出很多诡异的代码,甚至一些较为正常的特性,如类型隐式转换、this的指代等等,也会让刚接触此语言的开发者头大不已。尤其是那些熟知其他诸如Java和C#等高级语言的开发者。使用更严格的编码方式,可以最大量避免

启用严格模式

随着JavaScript的发展,开发者及规范制定者也意识到了JavaScript语言本身的一些设计缺陷,所以在ECMAScript5中引入了严格模式。设立严格模式的目的主要是为了消除JavaScript语法上不合理的地方,从而提高代码安全性、编译效率,增加运行速度且更好地兼容JavaScript未来的新版本等。

具体来说,严格模式主要是针对如下不合理的地方作了改进,包括:

禁用with关键字、防止意外地全局变量、函数中的this不再默认指向全局、防止函数参数重名、防止对象属性重名、更安全地使用eval等。具体可以参考mozilla网站上的详细介绍

在严格模式中针对一些编码的格式进行了限制。有些在普通模式下不会报错的代码,在严格模式中可能就会出现运行错误。这种显式抛出错误的方式比以怪异方式运行代码能更早地发现问题。

严格模式目前已经得到了除IE8之外的大部分主流浏览器的支持,所以推荐在代码中使用。

启用严格模式很简单,只要在代码中添加如下代码即可:

"use strict";

在不支持严格模式的浏览器中,如下代码会被当作普通的语句运行,不会产生副作用:

下面介绍在使用严格模式时需要遵循的几条最佳实践。

1. 不要在全局中启用严格模式

若全局设置严格模式,将意味着代码文件中所有的代码都必须遵守严格模式。除非所有的代码都是自己维护,否则这么做会带来风险,因为不能保证其他人维护的代码也是符合严格模式的。比如如下的代码中,在代码文件设置了全局严格模式,应该避免这样的设置方式。

"use strict";
function doSomething() {
// 这部分代码会运行于严格模式
}
function doSomethingElse() {
// 这部分代码也会运行于严格模式
}

即使是其他人维护的代码在不同的文件中也不建议这么做,因为很难保证发布时候代码不会合并,所以尽量把严格模式限定在函数作用域范围内。类似如下的设置方式:

function doSomething() {
"use strict";
// 这个函数中的代码将会运行于严格模式
}
function doSomethingElse() {
// 这个函数中代码不会运行于严格模式
}

如果想给大量的代码设置严格模式,可以把代码包含在一个立即执行的函数内,并在函数开头启用严格模式,示例代码如下:

(function (){
"use strict";
// 其他代码
})();

2. 在已有代码中谨慎启用严格模式

如果代码中还包含有不符合严格模式的代码,则启用严格模式会产生风险,因为有可能会导致代码运行错误,页面无法正常展示和交互。在已有代码中启用严格模式要和代码的重构一样受到重视——必须有足够的代码检查和测试,确保每一行代码都可以正常运行。

尽管使用严格模式有如上这些的风险,但是只要使用得当,严格模式可以帮助开发者尽早发现一些潜在的问题。所以推荐在编写JavaScript代码时启用严格模式。

使用JSHint和JSLint

如果要更严格地编写JavaScript代码,可以使用JavaScript代码检查工具。目前,流行的检查工具主要是JSLint和JSHint。JSLint是JavaScript大牛Douglas Crockford所创立的。而JSHint则是从JSLint派生出来的,比JSLint更轻量级,并且它提供了一系列的可配置项,让开发者可关掉某些觉得没有必要的错误提示。JSHint使用起来更灵活,并不带有强制性的限制,所以推荐开发者使用。

JSHint的检查规则涵盖了大部分的基本编码规范,比如:缺少分号、空格和tab混合使用、错误的转义等。JSHint官方网站上列出了详细的检查项,每个检查项都有具体的解释,这些也是学习JavaScript基本规范的好资料。

很多的代码编辑器也集成了JSLint和JSHint这两个代码检查工具,比如在WebStorm代码编辑器的设置中就有针对此工具的单独配置项,配置界面如图所示。

Imgur

图 WebStorm中配置JSLint和JSHint

在WebStorm中启用JSHint后,JavaScript代码文件中就会有进行JSHint检查的提示信息,如下图所示。

Imgur

这样就可以很方便地找到代码中不够严谨或存在问题的地方。当然,如果不想使用IDE的插件,也可以使用一些自动化的工具,我最近一直在借助Grunt工具来构建和发布Web项目,grunt-contrib-jshint就是其中一个自动化的工具,此工具的运行效果图如下:

Imgur

此工具配合grunt-contrib-watch 使用,会持续不断地检查JavaScript代码的质量。

如上就是在JavaScript编码中提高代码质量的一些基本手段,这些方式可以避免一些最基本的低级错误,并提高代码的可读性,但并不是说使用了严格模式和JSHint工具就能写出高质量的代码。高质量的代码还需要代码本身逻辑清晰,运行性能高,这些就需要开发者更深入地了解JavaScript语言特性。