专栏首页山河木马JavaScript编码规范(1)

JavaScript编码规范(1)

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

 //打个招呼
 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个比较常见的编码风格的例子进行了比较,在推荐的写法和不推荐的写法中两者并没有对错之分,只是推荐的写法相比较而言更容易阅读和维护,更适用于团队开发,也是良好编码形象的体现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javaScript中的随机数方法

    学习地址:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201612054242.html

    山河木马
  • JavaScript编码规范(2) 原

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

    山河木马
  • js数组的迭代器方法

    JavaScript还提供了reduceRight() 方法,和reduce()方法不同,它是从右到左执行。

    山河木马
  • JS ES各版本特性

    JS包含三个部分:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。ECMAScript是JS语言的基础。 ECMAScript的...

    剑行者
  • JS 对象属性相关--检查属性、枚举属性等

    delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性  看到delete a.p之后b.x仍然为1

    书童小二
  • JavaScript变量和数据类型

    1.JavaScript变量 javascript的变量是松散类型的(弱类型),也就是说一个变量可以用来保存任何类型的数据,每个变量仅仅是用来保存值的占位符。变...

    水击三千
  • ES6常用知识点小结

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。

    Krry
  • 2.qml-ECMAScript_02(原始值类型、通用转换方法)

    Undefined 类型只有一个值undefined。当声明的变量未初始化时,该变量的默认值是 undefined

    张诺谦
  • 37个JavaScript基本面试问题和解答(建议收藏)

    1、使用typeof bar ===“object”来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免?

    用户1272076
  • js程序设计02——变量、作用域问题

    首先,ECMAScript中的数据类型分为基本类型、引用类型,基本类型的访问操作是按值的。引用类型的值是保存在内存中的对象,操作对象时,实际上操作的是对象的引用...

    用户1141560

扫码关注云+社区

领取腾讯云代金券