关于

前言

在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情。这些代码不仅不易阅读,而且难以维护,它们一般会出自刚入门的编程新手,也会出自工作了好几年的老程序员手下。因此本文的目的在于帮助那些没有养成良好的编码风格,缺乏相应编码规范意识的JavaScript学习者们改善他们的编码形象。

编码形象

以上我提出了编码形象的概念,我个人认为:

编码形象 = 编码风格 + 编码规范

一个良好的编码形象就等于一个穿着得体的青年,对于程序员来说这是同行了解你优秀能力的最直接最简单的方式。

我们来看一下一段糟糕的编码形象:

//打个招呼
function func(){
var age=18,sex='man';
var greeting='hello';
if(age<=18&&sex=='man'){
console.log(greeting+'little boy')
} ...
}
func()

上方代码整体缩在了一起,缺乏规范意识,阅读体验很差,不忍直视。

再来看一段良好的代码形象:

// 打个招呼
function greetFn() {
var age = 18,
sex = 'man',
greeting = 'hello'; if (age <= 18 && sex === 'man') {
console.log(greeting + 'little boy');
} ...
}; greetFn();

上方的代码是不是感觉舒服多了?

由此可见养成一个良好的编码形象是至关重要的,而本文主要讲解的是基于JavaScript的编码形象,即基于JavaScript的编码风格和编码规范。

那么什么是编码风格,什么是编码规范,两者的区别又是什么?

编码风格

首先编码风格既然是风格,就没有对错之分。就好比每个人的穿着打扮不同,有的人穿的比较得体,有的人穿的比较随意而已。

而在JavaScript编码风格中,也有一套比较得体的风格,尤其在团队开发中,我们不能随意的书写属于自己的风格。

下面就列举几种随意的编码风格,并将其与良好的编码风格进行对比。

1.合理注释

// 不推荐的写法
var name = '劳卜';//代码和注释之间没有间隔 if (name) {
/*
*注释之前无空行
*星号后面无空格
*/
}
// 推荐的写法
var name = '劳卜'; // 代码和注释之间有间隔 if (name) { /*
* 注释之前有空行
* 星号后面有空格
*/
}

2.合理间隔

// 不推荐的写法
var name='劳卜'; // 等号和两侧之间没有间隔 // if块级语句间没有间隔
if(name){
console.log('hello');
}
// 推荐的写法
var name = '劳卜'; // 等号和两侧之间有间隔 // if块级语句间有间隔
if (name) {
console.log('hello');
}

3.合理缩进

// 不推荐的写法:没有合理缩进
function getName() {
console.log('劳卜');
}
// 推荐的写法:合理缩进
function getName() {
console.log('劳卜');
}

4.合理空行

// 不推荐的写法: 代码功能块之间没有空行
function getName() {
var name = '劳卜';
if (name) {
console.log('hello');
}
}
// 推荐的写法:代码功能块之间有空行
function getName() {
var name = '劳卜'; if (name) {
console.log('hello');
}
}

5.合理命名

// 不推荐的写法
var getName = '劳卜'; // 变量命名前缀为动词 // 函数命名前缀为名词
function name() {
console.log('hello');
}
// 推荐的写法
var name = '劳卜'; // 变量命名前缀为名词 // 函数命名前缀为动词
function getName() {
console.log('hello');
}

6.合理声明

// 不推荐的写法:函数在声明之前使用
getName(); function getName() {
console.log('hello');
}
// 推荐的写法:函数在声明之后使用
function getName() {
console.log('hello');
} getName();

7.合理结尾

// 不推荐的写法:没有使用分号结尾
var name = '劳卜' var getName = function() {
console.log('hello')
}
// 推荐的写法:使用分号结尾
var name = '劳卜'; var getName = function() {
console.log('hello');
};

以上主要列举了7个比较常见的编码风格的例子进行了比较,在推荐的写法和不推荐的写法中两者并没有对错之分,只是推荐的写法相比较而言更容易阅读和维护,更适用于团队开发,也是良好编码形象的体现。

编码规范

对于编码规范,既然是规范,那我们就应该按照一定的规则来编写。随意编写违反编码规范的代码,可能会导致程序的出错和潜在的bug,因此其相对于编码风格来说应该更加严谨,也有人会把编码风格包含在编码规范之中。

下面就列举几个常见的实例代码:

1.比较参数

// 不推荐的写法:==和!=比较时会进行类型转换,应尽量避免使用
var num = 123; if (num == '123') {
console.log(num);
} else if (num != '321') {
console.log('321');
}
// 推荐的写法:使用===和!==来进行比较
var num = 123; if (num === '123') {
console.log(num);
} else if (num !== '321') {
console.log('321');
}

2.包裹if语句

// 不推荐的写法:if语句不用大话号包裹会出现潜在bug
var num = 123; if (num === '123')
console.log(num);
// 推荐的写法:if语句用大话号包裹
var num = 123; if (num === '123') {
console.log(num);
}

3.慎用eval

// 不推荐的写法:应避免使用eval,不安全,非常耗性能(一次解析成js语句,一次执行)
var json = '{"name": "劳卜", "func": alert("hello")}'; eval('(' + json + ')'); // 弹出“hello”
// 推荐的写法
var json = '{"name": "劳卜", "func": alert("hello")}'; JSON.parse(json); // 校验报错

4.判断类型

// 不推荐的写法:用typeof来判断构造函数创建的对象
var str = new String('劳卜'); console.log(typeof str); // 'object'
// 推荐的写法:用instanceof来判断构造函数创建的对象
var str = new String('劳卜'); console.log(str instanceof String); // true

5.检测属性

// 不推荐的写法:使用undefined和null来检测一个属性是否存在
if (obj['name'] !== undefined) {
console.log('name属性存在'); // 若obj.name为undefined时则会导致判断出错
} if (obj['name'] !== null) {
console.log('name属性存在'); // 若obj.name为null时则会导致判断出错
}
// 推荐的写法:使用in运算符来检测对象属性是否存在,使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在
if ('name' in obj) {
console.log('name属性存在');
} if (obj.hasOwnProperty('name')) {
console.log('name属性存在');
}

以上主要列举了5个常见的编码规范的例子,合理地规范自己的代码能够很大程度上减少不必要的维护成本和潜在的bug风险,对于JavaScript学习者来说应该铭记于心。

结语

“程序是写给人读的,只是偶尔让计算机执行一下。”我们不能为了贪图一时的方便而亲手毁了自己的代码形象,这会给他人和整个项目带来不必要的麻烦。

本文内容参考自《编写可维护的JavaScript》一书。

写好你的JavaScript的更多相关文章

  1. 用6个字符写出任意的Javascript代码

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用6个字符写出任意的Javascript代码.

  2. 如何写出优雅的JavaScript代码 ? && 注释

    如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...

  3. 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  4. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  5. 如何写出规范的JavaScript代码

    作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的 ...

  6. 写的一个轻量级javascript框架的设计模式

    公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架.谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可 ...

  7. 如何写出优美的 JavaScript 代码?

    一.变量相关 (1)变量数量的定义 NO:滥用变量 let kpi = 4; // 定义好了之后再也没用过 function example() { var a = 1; var b = 2; var ...

  8. 自写小函数处理 javascript 0.3*0.2 浮点类型相乘问题

    const reg = /^([-+]?)([0-9]+)\.([0-9]*)$/; // 判断是不是浮点数 const isFloat = function(number){ return reg. ...

  9. 将javascript函数写在Html标签里

    有些时候不想把函数写在script标签里了,想直接在html标签里直接加上js代码,可以这样写: <body onload="javascript:{window.location.h ...

随机推荐

  1. shell 脚本连接mysql数据库查询database中表的数量和表名

    #!/bin/bash MYSQLHOST="127.0.0.1" MYSQLUSER="root" MYSQLPWD="root" MYS ...

  2. Angular - - ngCloak、ngController、ngInit、ngModel

    ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   ...

  3. Cassandra 单机入门例子——有索引

    入门例子: http://wiki.apache.org/cassandra/GettingStarted 添加环境变量并source生效,使得可以在任意位置执行cassandra/bin安装目录下的 ...

  4. swift webView的高度自适应内容

    废话不多 直接上代码 //在webView的协议方法里实现以下代码 func webViewDidFinishLoad(webView: UIWebView) {//加载完成 //        se ...

  5. C#版--简单工厂模式

    为什么要用设计模式? 1.设计模式是前人根据经验总结出来的,使用设计模式,就相当于是站在了前人的肩膀上. 2.设计模式使程序易读.熟悉设计模式的人应该能够很容易读懂运用设计模式编写的程序. 3.设计模 ...

  6. loadrunner:从数据库中取值进行参数化

    下面我们介绍用数据库中的用户名来参数化登陆用户名. 框选住登陆名,点鼠标右键,弹出对话框,选择"替换为新参数"弹出对话框,此时参数名输入:name,参数类型选择File,如图 点& ...

  7. Spring Boot启动过程(二)

    书接上篇 该说refreshContext(context)了,首先是判断context是否是AbstractApplicationContext派生类的实例,之后调用了强转为AbstractAppl ...

  8. 照片提取GPS 转成百度地图坐标

    感谢: 小慧only http://www.cnblogs.com/zhaohuionly/p/3142623.html  GPS转化坐标方法 大胡子青松 http://www.cnblogs.com ...

  9. 法国总统放大招,用“分身术”竞选总统 全息3d 网

    编辑:大熊 [摘要]法国总统采用全息技术实现"分身"演讲,可谓是一次演讲,全面覆盖! 全息3d网讯:众所周知,欧美国家的总统是通过公开竞选得到的,所以能更直接.更广泛的近距离接触民 ...

  10. Mcaca+Python 测试环境搭建及上手

    Macaca是一套面向用户端软件的测试解决方案,提供了自动化驱动,周边工具,集成方案,旨在解决终端上的测试.自动化.性能等方面的问题,很多人选择它的原因简单:轻量化(相比于appium),跨平台(wi ...