教你如何写出可维护的JS代码

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

什么是可维护代码

可维护代码需要遵循以下几个特点。

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

代码约定

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

1.可读性

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

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

2.变量和函数的命名

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

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

3.变量类型透明

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

3.3.1、初始化

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


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

3.3.2、使用匈牙利标记法指定变量类型

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


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

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

3.3.3、使用类型注释

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


// 用于指定类型的类型注释
var found  = false;
var count  = 10;
var name  = "Tom";
var person  = 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 的代码来确定。