15条JavaScript最佳实践很经典噢
感觉比较经典,特转载腾讯大讲堂。本文档整理大部分公认的、或者少有争议的JavaScript良好书写规范(Best Practice)。一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断;比如不要嵌套太深)。条目顺序按重要级粗略的从高到低排列。
把外部JavaScript文件放在HTML底部
我们的目标是相同的:为用户尽可能快地显示内容。当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕。因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生。如果你的JavaScript代码只是增加一些功能(比如按钮的点击动作),那么尽管大胆地把文件引用放在HTML底部吧(就在</body>之前),你会看到明显的速度提升。如果是用于其他目的的脚本文件,则需要慎重地考虑。但无论如何,这毫无疑问是一个非常值得考虑的地方。
优化循环
循环遍历一个数组
![]()
![]()
![]()
![]()
![]()
用尽量简短的代码
如果可以增加可读性的话,那么使用代码的简短格式是有意义的,下面是一份不完全的列表:
![]()
![]()
![]()
![]()
![]()
![]()
单引号和双引号
为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号。
![]()
避免混入其他技术
CSS:假设我们的页面上有必须填入的输入框(拥有class“mandatory”),如果它没有被输入数据,周围就会加上红色边框。
![]()
![]()
HTML:假设我们有内多HTML内容需要用JavaScript来载入,那么使用Ajax载入单独的文件,而不是通过JavaScript处理DOM,后者会让代码难以处理,并且出现难以维护的兼容性问题。
验证JavaScript代码
浏览器处理JavaScript代码可能会非常宽容,但我建议你不要依赖浏览器的解析能力,因此养成了懒散的编码习惯。
最简单的检测你的代码质量的方法是通过一个在线JavaScript验证工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation
使用更简单的格式来写innerscript
![]()
总是检查数据
要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢,而是因为他们很忙,并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法。
![]()
![]()
另一个安全隐患是直接从DOM中取出数据使用。比如说你的function从用户名输入框中取得用户名做某项操作,但用户名中的单引号或者双引号可能会导致你的代码崩溃。
避免全局变量
全局变量和全局函数是非常糟糕的。因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话,后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉(overwrite)你的。
![]()
![]()
![]()
声明变量的话,总是用var
JavaScript中的变量可能是全局域或者局部域,用var声明的话会更加直观。
![]()
![]()
使用前置+号来把字符串转化为数字
JavaScript中,“+”操作符即被用来作为数字加,也被用来连接字符串。如果需要求表单中几个值的和,那么用+可能会出现问题。
![]()
![]()
避免使用eval()方法
JavaScript中的eval()方法是在运行时把任何代码当作对象来计算/运行的方法。实际上由于安全性的缘故,大部分情况下都不应该用eval(),总是有一种更“正确”的方法来完成同样的工作的。基本原则是,eval is evil,在任何时候都不要用它,除非你是一个老手,并且知道你不得不这样做。
for in语句
遍历一个对象中的所有条目的时候,用for in语句是非常方便的。但有时候我们不需要遍历对象中的方法,如果不需要的话,可以加上一条filter。
![]()
不要偷懒省略”和{}
从技术上说,你可以忽略很多花括号和分号。
![]()
所以,要记住的原则是:1.永远不要省略分号;2.不要省略花括号,除非在同一行中。
![]()
获取对象属性的时候用方括号而不是点号
在JavaScript中取得某对象的属性有两种方法:
![]()
如果是用点号标记取得对象的属性,属性名称是硬编码,无法在运行时更改;而用方括号的话,JavaScript会求得方括号内值然后通过计算结果来求得属性名。也就是说用方括号标记的方式,属性名称可以是硬编码的,也可以是变量或者函数返回值。
![]()
假设JavaScript会被禁用
我知道这样的假设会伤害JavaScript开发者的感情,可是在目前数据不明朗的情况下我们为了安全起见应该做这样的假设。这是渐进增强中很重要的一部分。
使用JavaScript库
现在有很多非常流行的JavaScript库,比如YUI和jQuery、Dojo。它们的缺点是需要下载一个额外的文件,优点却更多:兼容性更强;代码更简单易懂。好的库有很多,但你不应该在一个项目中把它们都用上,因为可能存在兼容性问题。选择一个自己习惯的就好。
不要忘记的一点是,原生的JavaScript毫无疑问更快,如果是小规模的使用,最好还是用原生的。
15条JavaScript最佳实践很经典噢的更多相关文章
- 15条JavaScript最佳实践【转】
本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深). ...
- 【SpringMVC】SpringMVC系列15之SpringMVC最佳实践
15.SpringMVC最佳实践 15.1.遵循Restful API最佳实践 参考:http://segmentfault.com/a/1190000002949234 15.2.统一返回字段 15 ...
- SmartbBear给出的11条代码审查最佳实践
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:SmartbBear给出的11条代码审查最佳实践.
- JavaScript 最佳实践
这个文档是基于JavaScript社区众多开发者的意见和经验,在开发JavaScript代码上的最佳实践和首选的方案的明细表.因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有 ...
- 17条 Swift 最佳实践规范
本文由CocoaChina译者小袋子(博客)翻译自schwa的github主页原文作者:schwa 这是一篇 Swift 软件开发的最佳实践教程. 前言 这篇文章是我根据在 SwiftGraphics ...
- 【原】javascript最佳实践
摘要:这篇文章主要内容的来源是<javascript高级程序设计第三版>,因为第二遍读完,按照书里面的规范,发觉自己在工作中没有好好遵守.所以此文也是对自己书写js的一种矫正. 1.可维护 ...
- JavaScript最佳实践:可维护性
代码约定 一.可读性 代码缩进 包含注释 二.变量和函数命名 变量名应为名词如car或person 函数名应该以动词开始,如getName().返回布尔类型值的函数一般以is开头,如isEnable( ...
- 学习JavaScript最佳实践方法
首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说. 你叫一个大学生去教小学数 ...
- javascript 最佳实践 ( 24 章 )
代码约定 易于维护, 形成了一套 JavaScript 代码书写的约定: 跟别的语言差不多, 不过 javascript 中的大括号一定要放在 行尾, 例如: function abc() { // ...
随机推荐
- Codeforces Gym 100803D Space Golf 物理题
Space Golf 题目连接: http://codeforces.com/gym/100803/attachments Description You surely have never hear ...
- Codeforces Gym 100463E Spies 并查集
Spies Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments Desc ...
- ntoskrnl.exe损坏或丢失的解决方式
同事的电脑启动时出现下面提示:"因下面文件损坏或丢失Windows无法启动 %systemroot%\system32\ntoskrnl.exe,请又一次安装以上文件的拷贝"(Wi ...
- .net处理JSON简明教程
.net处理JSON简明教程 Json.Net是.net中的一种流行的高性能的JSON框架. 特点 灵活的JSON序列化转化.net对象为JSON字符串.和把JSON字符串转换为.net对象. 手动读 ...
- Android自定义长按事件
Android系统自带了长按事件,setOnLongClickListener即可监听.但是有时候,你不希望用系统的长按事件,比如当希望长按的时间更长一点的时候.这时候就需要自己来定义这个长按事件了. ...
- linux消息队列操作
对消息队列的操作无非有以下三种类型: 1. 打开或创建消息队列消息队列的内核持续性要求每一个消息队列都在系统范围内相应唯一的键值,所以,要获得一个消息队列的描写叙述字,仅仅需提供该消息队列的键值就可以 ...
- Cassandra在CQL语言层面支持多种数据类型
Cassandra在CQL语言层面支持多种数据类型. CQL类型 对应Java类型 描述 ascii String ascii字符串 bigint long 64位整数 blob ByteBuffer ...
- curl模拟Http请求
一.get请求 curl "http://www.baidu.com" 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "http://w ...
- 顺丰接口 api对接说明
1 功能说明 物流轨迹查询-使用的物流单号和快递单号即可实现查询物流信息. 1.1 接口规则 (1).查询接口支持按照运单号查询(单个查询). (2).指定的物流运单号选择相应的快递公 ...
- 【源码】基于SQLite实现CMS论坛(BBS)----附件SQLite可视化界面客户端
使用说明:管理员账号:admin 密码:523523523 一. 账号管理(登陆注册审核) 1.账号注册 url:/BBS/Account/pregister.aspx 2 ...