资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/写好你的JavaScript

写好你的JavaScript

tuniutech / 2253人阅读

摘要：关于微信公众号前端呼啦圈我的博客劳卜的博客知乎专栏前端呼啦圈前言在实际工作中，我们应该经常会看到一些功能上没有问题，但编码风格和规范却十分糟糕的代码，这往往会让人不敢再往下阅读，甚至会影响阅读者一天的心情。本文内容参考自编写可维护的一书。

关于

微信公众号：前端呼啦圈（Love-FED）

我的博客：劳卜的博客

知乎专栏：前端呼啦圈

前言

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

如果觉得本文对你有帮助，可以关注我的微信公众号，来这里聊点关于前端的事情。

云服务器 GPU云服务器 如何写好python 万你的 扩展你的 你的看法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81926.html

相关文章

  • React

    摘要：而我只知道有自己的虚拟，它会对比虚拟和真实的差别，然后在适当的时机更新页面。函数的第一个参数只能是一个标签，不能是并列的两个标签。第一个添加了的属性，该属性值指向，意思是该组件名为的静态属性。 网页总是一个链接着另一个的，React一大优势在于每次链接到另一个页面上去的时候，不需要向传统页面一样，得销毁所有代码，重新渲染新页面的代码，而只在一个页面上展现新的内容——单页页面。 Reac...

    ningwang 评论0 收藏0

  • React

    摘要：而我只知道有自己的虚拟，它会对比虚拟和真实的差别，然后在适当的时机更新页面。函数的第一个参数只能是一个标签，不能是并列的两个标签。第一个添加了的属性，该属性值指向，意思是该组件名为的静态属性。 网页总是一个链接着另一个的，React一大优势在于每次链接到另一个页面上去的时候，不需要向传统页面一样，得销毁所有代码，重新渲染新页面的代码，而只在一个页面上展现新的内容——单页页面。 Reac...

    tain335 评论0 收藏0

  • 谈谈JavaScript异步代码优化

    摘要：异步问题回调地狱首先，我们来看下异步编程中最常见的一种问题，便是回调地狱。同时使用也是异步编程最基础和核心的一种解决思路。基于，目前也被广泛运用，其是异步编程的一种解决方案，比传统的回调函数解决方案更合理和强大。 关于 微信公众号：前端呼啦圈（Love-FED） 我的博客：劳卜的博客 知乎专栏：前端呼啦圈 前言 在实际编码中，我们经常会遇到Javascript代码异步执行的场景...

    chnmagnus 评论0 收藏0

  • 前端开发收集 - 收藏集 - 掘金

    摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景 在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

    ygyooo 评论0 收藏0

  • Prettier+VScode 治好你的代码洁癖

    摘要：忍无可忍只能拔枪相见了。而只关心格式化文件最大长度混合标签和空格引用样式等。可见，代码格式统一的问题，交给再合适不过了。和配合使用，风味更佳。我的配置文件如下到此，安装完毕，使用就可格式化代码。两者配合才能使项目代码优雅健壮 试想一个多人开发的项目，每次同步代码，看到各个风格迥异，换行空格混乱，4格，2格缩进交替上演的代码文件，分分钟逼死强迫症啊。忍无可忍只能拔枪相见了~~。统一的代码...

    qc1iu 评论0 收藏0

发表评论

登陆后可评论

0条评论

tuniutech

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<