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 开发效率的高级 VSCode 扩展之二!

作为一名业余爱好者、专业人员,甚至是每月只有一次编程的开发人员,你必须知道,对于任何愿意在工作中投入最大生产时间的人来说,拥有智能和敏捷的工具是至关重要的,废话...

27530
来自专栏Fundebug

ECMASCript 2019可能会有哪些特性?

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

20040
来自专栏运维笔记

js 获取url 传值 参数

``` {.brush:html;toolbar: .true; .auto-links: .false;} <script language="JavaSc...

21240
来自专栏终身学习者

JavaScript是如何工作的:渲染引擎和优化其性能的技巧

当你构建 Web 应用程序时,你不只是编写单独运行的 JavaScript 代码,你编写的 JavaScript 正在与环境进行交互。了解这种环境,它的工作原理...

10330
来自专栏终身学习者

如何正确合理使用 JavaScript async/await !

ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces 的方式,而...

14630
来自专栏终身学习者

JavaScript 是如何工作的:深入网络层 + 如何优化性能和安全

正如在上一篇关于 渲染引擎 的博客文章中提到的,我们认为优秀的 JavaScript 开发人员和杰出的 JavaScript 开发人员之间的区别在于,后者不仅理...

11430
来自专栏终身学习者

JavaScript是如何工作的:存储引擎+如何选择合适的存储API

在设计 Web 应用程序时,为本地浏览器选择合适的存储机制至关重要, 一个好的存储引擎可以确保可靠地保存信息,减少带宽,提高响应能力。正确的存储缓存策略是实现离...

11010
来自专栏终身学习者

JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件!

Web Components 是一套不同的技术,允许你创建可重用的定制元素,它们的功能封装在你的代码之外,你可以在 Web 应用中使用它们。

13030
来自专栏终身学习者

ES6迭代器的简单指南和示例

我们将在本文中分析迭代器。迭代器是在JavaScript中循环任何集合的一种新方法。它们是在ES6中引入的,由于它们的广泛用途和在不同地方的使用而变得非常流行。

12440
来自专栏bamboo前端学习记录

js 事件笔记

在Web中, 事件在浏览器窗口中被触发,执行事先绑定的事件处理器(也就是事件触发时会运行的代码块),对事件做出响应。 用户在浏览器的任何一个操作都会去触发一个事...

76420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励