《JS高程》-教你如何写出可维护的代码

一、前言

  在平时工做开发中，大部分开发人员都花费大量的时间在维护其余人员的代码。很难从头开始开发新代码，不少状况下都是以他人成果为基础的，或者新增修改需求，本身写的代码也会被其余开发人员调用，因此写好一份高质量可维护的代码就显得十分重要。

二、什么是可维护代码

可维护代码须要遵循如下几个特色。

1.可理解性-其余人能够接手代码并理解它的意图和通常途径。
2.直观性-代码中的东西一看就明白，无论其操做过程有多复杂。
3.可适应性-代码以一种数据变化不要求彻底重写的方法撰写。
4.可扩展性-在代码架构上已考虑在将来容许对核心功能进行扩展。
5.可调试性-当有地方出错时，代码能够给你足够的信息快速直接找出问题的所在。

三、代码约定

  一种让代码变得可维护的简单途径是造成一套JavaScript代码的书写约定。因为JavaScript的可适应性，代码约定对它很重要。如下小节讨论代码约定的概论。

1.可读性

  要让代码可维护，首先它必须可读。可读性的大部份内容和代码缩进相关的，代码整齐的缩进能一眼看出代码块是属于那个功能的，很常见的缩进大小为4个空格，如今大部分编辑器也支持一件格式化代码。可读性另外一方面是注释，通常来讲，有以下一些地方须要进行注释。

• 函数和方法-每一个方法或注释都应该包含一个注释，用于描述其目的和用于完成任务所可能使用的算法。
• 大段代码-用于完成单个任务的多行代码应该在前面放一个描述任务的注释。
• 复杂的算法-使用独特的方式来解决某个问题加以注释来解释如何作的。
• Hack-浏览器兼容性处理。

2.变量和函数的命名

  话说在平时开发中最让人头疼的事莫过于命名了，不管是class的命名仍是一些变量与方法的命名，因此有时候不得不靠一些翻译软件来帮助命名。适当给变量和函数起名字对于增长代码的可理解性和可维护性是很是重要的。命名规则通常以下：

• 变量名应为名词如car或person。
• 函数名应以动词开始，如getName()。
• 返回布尔类型的函数通常用is开头，如isEnable()。
• 常量应该用所有大写表示，如MAX_LENGTH。

3.变量类型透明

  因为在JavaScript中变量是松散类型的，很容易忘记变量所包含的数据类型。合适的命名方式在必定程度上能够缓解这个问题，可是放到全部的状况下看还不够，还有三种变量数据来表示数据类型的方式。

3.3.一、初始化

  当定义一个变量后，它应该被初始化一个值，来暗示它未来应该如何应用。

// 经过初始化指定变量类型
var found=false; //布尔型
var count=-1; //数字型
var name=""; //字符串
var person=null; //对象

3.3.二、使用匈牙利标记法指定变量类型

  匈牙利标记法在变量名以前加上一个或多个字符来表示数据类型。JS中最传统的匈牙利标记法是用单个字符来表示基本类型：0-对象，s-字符串，i-整数，f-浮点数，b-布尔类型。

// 用于指定数据类型的匈牙利命名法
var bFound //布尔型
var iCount; //数字型
var sName; //字符串
var oPerson; //对象

匈牙利命名法好处是函数参数也同样可使用，但它缺点是让代码在某种程度上那一阅读。

3.3.三、使用类型注释

  最后一种指定变量类型的方式是使用类型注释。类型注释放在变量名右边，可是在初始化前面。

// 用于指定类型的类型注释
var found /*Boolean*/ = false;
var count /*int*/ = 10;
var name /*String*/ = "Tom";
var person /*Object*/ = null;

缺点：多行注释会与代码块冲突

这三种常见的指定变量数据类型的方法，各有优点与劣势，根据本身项目加以评估再进行使用，也能够学习使用下TypeScript。

四、松散耦合

  只要应用的某个部分过度依赖另外一部分，代码就是偶尔过紧，难以维护。由于Web应用技术，有多种状况回使它变得耦合过紧，所以应该避免这些状况，并尽量维护弱耦合代码。

1.解耦HTML/JavaScript

  直接在HTML中的javaScript,使用包含内联代码的<script>元素或者是使用HTML属性来分配事件处理顺序，都是过于紧密耦合。
看看如下的代码

<button onclick="doSomeThing()">Click Me</button>

  在这个例子中，可能在doSomeThing()函数可用以前，就已经按下按钮，致使js错误，由于任何对按钮行为的更改要同时触及HTML和js,影响可维护性。

同理js中包含大量的HTML

// 将HTML紧密耦合到js中
function insertMessage(){
  document.getElementById('container').innerHTML='<div>Hello World</div>'
}

这段代码的方法会动态生成一段代码块插入到页面中，当代码不少时候难以定位到错误。

将 HTML 和 JavaScript 解耦能够在调试过程当中节省时间，更加容易肯定错误的来源，也减轻维护的难度：更改行为只须要在 JavaScript 文件中进行，而更改标记则只要在渲染文件中

2.解耦CSS/JavaScript

  另外一个 Web 层则是 CSS，它主要负责页面的显示。JavaScript 和 CSS 也是很是紧密相关的：他们都是 HTML 之上的层次，所以经常一块儿使用。可是，和 HTML 与 JavaScript 的状况同样，CSS 和 JavaScript也可能会过于紧密地耦合在一块儿。最多见的紧密耦合的例子是使用 JavaScript 来更改某些样式，以下所示：

//CSS 对 JavaScript 的紧密耦合
element.style.color = "red"; 
element.style.backgroundColor = "blue";

遇到这种直接修改css样式的，咱们直接能够经过修改元素标签class类名来控制样式更方便。

3.解耦应用逻辑/事件处理程序

  每一个 Web 应用通常都有至关多的事件处理程序，监听着无数不一样的事件。然而，不多有能仔细得将应用逻辑从事件处理程序中分离的。请看如下例子：

function handleKeyPress(event) {
        event = EventUtil.getEvent(event);
        if (event.keyCode == 13) {
            var target = EventUtil.getTarget(event);
            var value = 5 * parseInt(target.value);
            if (value > 10) {
                document.getElementById("error-msg").style.display = "block";
            }
        }
    }

  这个事件处理程序除了包含了应用逻辑，还进行了事件的处理。这种方式的问题有其双重性。首先，除了经过事件以外就再没有方法执行应用逻辑，这让调试变得困难。若是没有发生预想的结果怎么办？是否是表示事件处理程序没有被调用仍是指应用逻辑失败？其次，若是一个后续的事件引起一样的应用逻辑，那就必须复制功能代码或者将代码抽取到一个单独的函数中。不管何种方式，都要做比实际所需更多的改动。

  较好的方法是将应用逻辑和事件处理程序相分离，这样二者分别处理各自的东西。一个事件处理程序应该从事件对象中提取相关信息，并将这些信息传送处处理应用逻辑的某个方法中。例如，前面的代码能够被重写为：

function validateValue(value) {
        value = 5 * parseInt(value);
        if (value > 10) {
            document.getElementById("error-msg").style.display = "block";
        }
    }

    function handleKeyPress(event) {
        event = EventUtil.getEvent(event);
        if (event.keyCode == 13) {
            var target = EventUtil.getTarget(event);
            validateValue(target.value);
        }
    }

应用和业务逻辑之间松散耦合的几条原则：

• 勿将 event 对象传给其余方法；只传来自 event 对象中所需的数据；
• 任何能够在应用层面的动做都应该能够在不执行任何事件处理程序的状况下进行；
• 任何事件处理程序都应该处理事件，而后将处理转交给应用逻辑。

牢记这几条能够在任何代码中都得到极大的可维护性的改进，而且为进一步的测试和开发制造了不少可能。

五、编程实践

  书写可维护的 JavaScript 并不只仅是关于如何格式化代码；它还关系到代码作什么的问题。在企业环境中建立的 Web 应用每每同时由大量人员一同创做。这种状况下的目标是确保每一个人所使用的浏览器环境都有一致和不变的规则。所以，最好坚持如下一些编程实践。

1.尊重对象全部权

  JavaScript 的动态性质使得几乎任何东西在任什么时候间均可以修改。也许在企业环境中最重要的编程实践就是尊重对象全部权，它的意思是你不能修改不属于你的对象。简单地说，若是你不负责建立或维护某个对象、它的对象或者它的方法，那么你就不能对它们进行修改。更具体地说：

• 不要为实例或原型添加属性；
• 不要为实例或原型添加方法；
• 不要重定义已存在的方法。

2.避免全局变量

  与尊重对象全部权密切相关的是尽量避免全局变量和函数。这也关系到建立一个脚本执行的一致的和可维护的环境。最多建立一个全局变量，让其余对象和函数存在其中。请看如下例子：

// 两个全局量——避免！！
var name = "Nicholas"; 
function sayName(){ 
 alert(name); 
}

这段代码包含了两个全局量：变量 name 和函数 sayName()。其实能够建立一个包含二者的对象，以下例所示：

// 一个全局量——推荐
var MyApplication = { 
 name: "Nicholas", 
 sayName: function(){ 
 alert(this.name); 
 } 
};

  这段重写的代码引入了一个单一的全局对象 MyApplication，name 和 sayName()都附加到其上。这样作消除了一些存在于前一段代码中的一些问题。首先，变量 name 覆盖了 window.name 属性，可能会与其余功能产生冲突；其次，它有助消除功能做用域之间的混淆。调用 MyApplication.sayName()在逻辑上暗示了代码的任何问题均可以经过检查定义 MyApplication 的代码来肯定。

3.使用常量

如下一些类型的值适合使用常量来定义：

• 重复值——任何在多处用到的值都应抽取为一个常量。这就限制了当一个值变了而另外一个没变的时候会形成的错误。这也包含了 CSS 类名。
• 用户界面字符串 —— 任何用于显示给用户的字符串，都应被抽取出来以方便国际化。
• URLs ——在 Web 应用中，资源位置很容易变动，因此推荐用一个公共地方存放全部的URL。
• 任意可能会更改的值 —— 每当你在用到字面量值的时候，你都要问一下本身这个值在将来是否是会变化。若是答案是“是”，那么这个值就应该被提取出来做为一个常量。

以上是阅读《JS高程》一些笔记，同时也反思一下本身在平时项目开发中存在的问题。看来提升一些基本编码小技巧，编写出可维护的代码仍是颇有必要的。

---

参考资料： 《JavaScript高级教程》