专栏名称: 前端JavaScript
分享 | 学习 | 交流 | 原创 分享是学习的开始;学习不必要从头开始,是从现在开始;交流能沟通你我,提高你的学识;期待你的加入!!! web前端技术交流,JavaScript,HTML5,CSS3……
目录
相关文章推荐
51好读  ›  专栏  ›  前端JavaScript

写好你的JavaScript(1)

前端JavaScript  · 公众号  · Javascript  · 2017-03-12 07:17

正文

 前言


在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情。这些代码不仅不易阅读,而且难以维护,它们一般会出自刚入门的编程新手,也会出自工作了好几年的老程序员手下。因此本文的目的在于帮助那些没有养成良好的编码风格,缺乏相应编码规范意识的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个比较常见的编码风格的例子进行了比较,在推荐的写法和不推荐的写法中两者并没有对错之分,只是推荐的写法相比较而言更容易阅读和维护,更适用于团队开发,也是良好编码形象的体现。


转自: http://www.jianshu.com/p/f5dee4d02a80

作者: 劳卜


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


==========阅读原文==========