js代码,前端都会写。但细节决定成败,代码是否优雅、规范,可以看得出一个JScoder的水平来。

曾经多次被项目组长吐槽,并被授予一本秘笈,上面有关于JS编程规范的一些总结。

无奈秘笈不能长借,无奈只能用最愚蠢的办法,拍照mark下,然后今天抽空整理整理。

废话到此为止,下面言归正传。

1.语句结尾总是加上分号

JS的语句,要么独占一行,要么以分号结尾。

虽然绝大多数情况下独占一行的js代码缺省分号也不会产生错误(这全赖于分析器的自动分号插入机制),但依旧不推荐缺省分号。

因为自动分号插入机制的分号插入规则很复杂且难以记住,习惯性以分号结束语句,能减少意外bug的发生率。

2.关于命名

命名,是任何一个coder最为苦恼的问题之一...

命名不仅是一门科学,更是一门技术。但通常来讲,命名长度应该尽可能短,并抓住要点。

变量和函数的命名应当总是遵循驼峰大小写命名法。

变量命名

尽量在变量名中体现出值的数据类型。比如:count,length,size是数字;name,title,message是字符串;单个字符i,j,k通常在循环中使用。

避免使用没有意义的命名,要尽可能做到让其他开发者一看到变量的命名,就能理解变量的作用。

函数命名

对于函数和方法的命名,第一个单词应该是动词,下面是一些使用动词常见的约定:

can — 返回一个布尔值

has — 返回一个布尔值

is — 返回一个布尔值

get — 返回一个非布尔值

set — 用来保存一个值

尽管这些约定没有被归入当下流行的编程风格中,但在很多流行的库中,我们也能看到它们的影子。

常量命名

JS其实并没有真正的常量概念。但为了区分普通的变量(变量的值是可变的)和常量(常量的值初始化之后就不能变了),一种通用的命名约定应运而生。

这个约定源于C语言,使用大写字母和下划线来命名,下划线用以分隔单词。如:MAX_COUNT,URL。

构造函数命名

构造函数通常用名词来命名,因为它们是用来创建某个类型的实例的。

为了从变量和普通函数中区分出来,用大驼峰命名法。如:

function Person(name){ this.name = name; };
var me = new Person("Jack");

3.关于直接量

JS中包含一些类型的原始值:字符串、数字、布尔值、null、undefined。同样也包含对象直接量和数组直接量。

这其中,只有布尔值是自解释的。其他类型或多或少都要思考一下它们如何更精确的表示出来。

字符串

在JS中,字符串是独一无二的。字符串可以用单引号或双引号括起来。

在功能上,两种做法并无不同。除了内部出现字符串界定符时需要转义之外,两种做法在功效上完全一致。

因此,下面代码中,使用双引号括起来的字符需要对双引号进行转义,而使用单引号括起来的字符串则不必如此。

// 使用双引号括起来,里面的双引号需要转义
var msg = "Jack says, \"Hi.\"";
// 使用单引号括起来,里面的双引号需要转义
var msg = 'Jack says, "Hi."';

你只需要关心你的代码是否从头到尾保持同一风格。

关于字符串还有一个问题需要注意,就是创建多行字符串。通常用字符串连接符(+)将字符串分成多份。如:

var longStr = "This is a very long String, so we " +
  "write it like this.";

数字

JS中数字类型只有一种,不管整数还是浮点数,统一存储为数字数据类型。

// 整数
var count = 10; // 浮点数
var price = 10.0;
var price = 10.30; // 不推荐的浮点数写法 (没小数部分)
var price = 10.; // 不推荐的浮点数写法 (没整数部分)
var price = .1; // 八进制写法不推荐使用
var num = 010; //这里不是表示10,而是表示八进制中的8,0开头表示这个数为8进制数 // 十六进制写法
var num = 0xA2; //这里的0x开头表示此数是十六进制数,数值为A2(JS的十六进制数怎么表示小数,我搜过下,但没找到答案,知道的请告知下) // 科学计数法
var num = 2.01e2; //这里表示2.01乘以10的2次方

null

null是一个特殊值,但我们常常误解它,将它和 undefined 搞混。

在下面的场景中,应当使用null

用来初始化一个变量,这个变量可以赋值为一个对象

用来和一个已经初始化的变量比较,这个变量可以是一个对象,也可以不是

当函数的参数期望是对象时,用作参数传入

当函数的返回值期望是对象时,用作返回值传出

还有下面一些场景不应当使用null:

不要使用null来检测是否传入了某个参数

不要使用null来检测一个未初始化的变量

下面是一些示例代码:

// 好的用法
var person = null; // 好的用法
function getPerson(){
  if(condition){
    return new Person("Jack");
  }else{
    return null;
  }
} // 好的用法
var person = getPerson();
if(person !== null){
  doSomething();
} // 不好的用法:用来和未初始化的变量比较
var person;
if(person !== null){
  doSomething();
} // 不好的用法:检测是否传入了参数
function doSomething(arg1, arg2, arg3, arg4){
  if(arg4 != null){
    doSomethingElse();
  }
}

理解null最好的方式是把它当成对象的占位符。

undefined

undefined也是一个特殊值,我们常常将它和null搞混。其中一个最让人疑惑之处在于 null == undefined 结果是 true。

然而,这两个值的用途却各不相同。

那些没有被初始化的变量,都有一个初始值,即undefined,表示这个变量等待被赋值。如:

var person;
console.log(person === undefined); //结果为true

说到undefined,不得不顺带提一提typeof。对于typeof,不管是已经声明,但未初始化的变量,还是未声明的变量,其运算结果都是“undefined”。

尽管两者在其他场景中的行为有天壤之别(在语句中使用已声明但未初始化的变量不会报错,而使用未声明的变量会报错)。

// foo 未被声明
var person;
console.log(typeof person); //结果为undefined
console.log(typeof foo); //结果为undefined

上文提到的两种不应当用null的场景,用undefined就恰到好处:

// 和未初始化的变量比较
var person;
if(person !== undefined){
  doSomething();
} // 检测是否传入了参数
function doSomething(arg1, arg2, arg3, arg4){
  if(typeof arg4 !== "undefined"){
    doSomethingElse();
  }
}

对象直接量

使用对象直接量创建一个对象,将对象的所有属性直接写在一对花括号中。这样的方式高效而且简单。

// 不好的写法,先显式创建一个Object实例,然后添加属性,看起来很繁琐
var book = new Object();
book.title = "Javascript";
book.anthor = "Jack"; // 好的写法
var book = {
  title: "Javascript",
  anthor: "Jack"
};

数组直接量

和对象直接量类似,直接用一对方括号将数组初始元素括起来的方式创建一个数组,简单,直接。

// 不好的写法,显式的用Array构造函数来创建数组
var colors = new Array("red", "green", "blue"); // 好的写法
var colors = ["red", "green", "blue"];

编写规范的javascript的更多相关文章

  1. 前端编码规范之JavaScript

    上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...

  2. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  3. 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  4. MarkDown编写规范指南

    Markdown 编写规范指南 简介: Markdown的目标是实现「易读易写」,成为一种适用于网络的「书写语言」. 一份使用Markdown格式撰写的文件可以直接以纯文本发布,它的最大灵感来源其实是 ...

  5. 编写高质量JavaScript代码的基本要点记录

    原文:深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 1.最小全局变量(Minimizing Globals)的重要性 JavaScript通过函数管理作用域.在 ...

  6. 1-html基本结构与编写规范

    <!DOCTYPE html> <html> <!-- #前端开发系统化学习教程, #包括html.css.pc端及移动端布局技巧.javascript. #jquery ...

  7. 前端、HTML+CSS+JS编写规范(终极版)

    HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式: HTML文档必须使用HTML5的标准文档格式: HTMLCSS编写规范 HTML和CSS的标签.属性.类名.ID都必须使用小写 ...

  8. Postman接口测试脚本编写规范

    Postman接口测试脚本编写规范 1.前言 2.名词解释 3.接口测试脚本规范 3.1接口测试脚本编写的规范 3.2 Postman使用规范 4.单个接口测试 5.整个流程的开发过程 1.前言 本规 ...

  9. 20151009 C# 第一篇 程序编写规范

    20151009 程序编写规范 1. 代码书写规则: 1).尽量使用接口,然后使用类实现接口. 2).关键语句写注释 3).避免写超过5个参数的方法,如果要传递多个参数,则使用结构 4).避免代码量过 ...

随机推荐

  1. 优化MYSQL配置文件MY.INI

    table_cache=1024 物理内存越大,设置就越大.默认为2402,调到512-1024最佳.由于每个客户端连接都会至少访问一个表,因此此参数的值与max_connections有关.当某一连 ...

  2. 面试题:给定一个函数rand()能产生1到m之间的等概率随机数,产生1到n之间等概率的随机数?

    虽然TX的面试已经过去好几天了,然而惨痛的过程还历历在目.人生中第一次正式job面试就这么挂掉了.在于面试官的交流过程中,被问及了几个算法设计题,在今后几篇博文中,我一一总结与诸君分享. 1. 给定一 ...

  3. [Erlang04]为什么有了rpc还有net_kernel:connect/1?

    问题描述: RPC(Remote Procedure Call)远程程序调用: 如果要给另一个节点发信息:可以简单写成: call(Msg,Node) -> {server,Node}!{sel ...

  4. 百万数据测试 Entity Framework 到底有多慢

    测试环境 硬件:阿里云乞丐配置 操作系统:Centos 7 CPU: 1核 内存:1 GB (I/O优化) 网络:1Mbps(峰值) 软件 .net core 2.0 ZKEACMS For .net ...

  5. ZKEACMS 2.2.1 正式发布,更多特性等您来发现

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  6. django admin的自定制

    from django.contrib import admin # Register your models here. from .models import * from django.util ...

  7. 【ocp 052又加新题了】052新加的考试题及答案整理-第13题

    13.Which two are true about AWR snapshots? A) They are stored In the SYSAUX tablespace. B) They are ...

  8. “全栈2019”Java第二十五章:流程控制语句中循环语句while

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. SP2666 QTREE4 - Query on a tree IV(LCT)

    题意翻译 你被给定一棵n个点的带边权的树(边权可以为负),点从1到n编号.每个点可能有两种颜色:黑或白.我们定义dist(a,b)为点a至点b路径上的权值之和. 一开始所有的点都是白色的. 要求作以下 ...

  10. Linux 下四条高大命令(计划360检测脚本)

    查看进程,按内存从大到小 ps -e -o "%C : %p : %z : %a"|sort -k5 -nr 查看进程,按CPU利用率从大到小排序 ps -e -o "% ...