[JS进阶] 编写可维护性代码

时间 2019-11-09

标签进阶编写可维护性代码栏目 JavaScript 繁體版

原文原文链接

1 可维护性代码的特色

可理解性：其余人能够接手代码并理解它的意图，无需原开发人员花太多时间解释！
直观性：代码中的东西一看就能明白，尽管其操做过程复杂。
可适应性：代码以一种数据上的变化不要求彻底重写方法。
可扩展性：在代码架构上可对核心功能的扩展。
可调式性：出错时，代码能够给你足够的信息来直接肯定问题所在。

2 代码约定

因为javascript语言的特色，咱们可编写各类编程风格的代码，从传统的面向对象式到声明式到函数式。造成一套良好的javascript代码书写约定可大大提升可维护性，这点对初学者来讲绝对是没有很注重的地方。 javascript

2.1 可读性

缩进：在项目中统一代码缩进，更易于阅读，一种不错也很常见的缩进大小为四个空格，固然能够是其余数量。
注释：其实咱们在编写一些后台代码会常常把一个功能，一个业务逻辑，一个函数的代码注释起来，但咱们却在编写javascript却常常忽略这些习惯。通常而言，在js中有如下这些地方须要注释：

函数和方法：描述其目的和参数表明，返回值等。
大段的代码：大段代码一般是一个任务的代码，应注释描述任务。
复杂的算法：不是全部人都会你的算法，你须要把你的算法思路简单描述下。
Hack ：因各浏览器的差别，javascript的hack用于解决什么问题应该描述清楚。

2.2 变量和函数的命名

变量名应该名词：如car，person
函数名应以动词开始：如getName(),返回布尔类型值的函数通常以is开头，如：isEnable();
只要合乎逻辑，不用担忧变量或者函数名的长度，长度问题能够经过在你发布代码压缩的时候得以解决。

2.3 变量类型透明

var car,person; //声明两个变量

如上代码，因为javascript中变量是松散类型的，咱们并不知道其中的car和person是什么类型的数据，不够透明，咱们能够经过一下两种方式缓解这种问题： php

初始化变量：经过初始化指定变量类型，但经过这种方式命名的对象没法用于函数声明中的参数。 css

var car = null; //car是对象 var person = ''; //person是字符串 var count = -1; //count是整数 var found = false; //found是布尔型

匈牙利标记法：在变量名以前加上一个或多个字符表示数据类型。o - 对象，s - 字符串，i - 整数，f - 浮点数，b - 布尔型 html
```
var oCar; //car是对象 var sPerson; //person是字符串 var iCount; //count是整数 var bFound; //found是布尔型
```

3 松散耦合

记得之前刚入门C#的时候，师兄常常跟我说‘高内聚低耦合’这词，我也就含糊地点点头，不少人可能也像我以前同样，这词耳熟能详，但未真正实践。 java

只要应用的某个部分过度依赖另外一部分，代码就是耦合过紧，难于维护！典型的问题：对象直接应用另外一个对象，而且修改其中一个的同时须要修改另外一个。在咱们web应用中，咱们能够经过一下方式解耦咱们的代码： web

3.1 解耦HTML/JavaScript

在web应用中，咱们但愿html专一于展现数据，css专一于样式，javascript专一于行为交互。可是有一些代码会将html、javascript过于紧密地耦合在一块儿。算法

直接写在HTML中javascript，使用包含内联代码的<script>元素或者是使用HTML属性来分配事件处理程序。编程
```
 <script type="text/javascript"> document.write('hello,javascript'); </script>  <input type="button" value="click me" onclick="doSomething()"/>
```
虽然这样写彻底正确，但出现javascript错误是，咱们须要判断错误出如今HTML仍是在Javascript中，而且这还存在一个时间差问题，当我按下上面代码的按钮时，若此时javascript代码并未加载完，此时变回引起错误。在实践中，理想的情况应该是HTML和Javascript应彻底分离，使用引入外部文件来加载javascript。数组

相反地，在javascript中也不能包含过多的HTMl 浏览器

function insertMsg(msg){ var container = document.getElementById('container');
    container.innerHtml = '<div lcass=\"msg\"><p class=\"post\">' + msg + '</p></div>' }

当你在写这样的代码的时候，我想你应该去找个js模板引擎来了。

对动态生成的HTML，对书写CSS布局，定位错误都比较难把控。

3.2 解耦CSS/Javascript

上面说了，CSS和JS都应该各司其职，不能有太大的亲密动做，秀恩爱，死得快囧~~~。
这个问题并不能说彻底解耦css和js,由于在现代web应用中经常须要javascript来更改样式，可是咱们仍是尽可能使他们分离。

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

这样的代码在之后修改样式的时候须要同时修改CSS和JS,可麻烦了。

//这样就ok了 element.className = 'color'; //color是样式类

还有一个就是不能在CSS中写CSS表达式，这应该是都知道的了。

3.3 解耦应用逻辑和事件处理程序

每一个web应用程序都有至关多的事件处理程序，监听着大量不一样的事件，然而，不多能有仔细将应用逻辑从事件处理程序中分离的，以下：

function checkValue(e){
   e = e || window.event; var target = e.target || e.srcElement; if(target.value.length < 5){ //省略一堆逻辑处理代码... }
}

将上面的代码重写为：

function checkValue(value){ if(value.length < 5){ //省略一堆逻辑处理代码... }
   } function handleBlur(e){
       e = e || window.event; var target = e.target || e.srcElement;
       checkValue(target.value); //调用应用逻辑处理函数 }

这样写有什么好处呢？

当有不一样的方式触发相同的相同过程事件的时候，这时只需调用应用逻辑处理函数便可。
应用逻辑处理函数能够在不添加到事件的状况下单独测试。

4 编程实践

在企业环境中建立的web应用每每同时由大量人员一同创做。在这种状况下的目标是确保每一个人所使用的浏览器环境都有一致和不变的规则，所以，咱们须要坚持一下的一些编程实践：

4.1 避免全局变量

在一个js文件中，最多容许有一个全局变量，让其余对象和函数包含在其中，由于过多的全局变量会消耗大量内存。

//两个全局变量 var name = 'jozo'; function sayName(){
  alert('jozo');
}

上面的代码有两个全局变量，变量name和函数sayName()，其实能够建立一个变量包含它们：

//一个全局变量 --推荐 var person = {
    name:'jozo',
    sayName : function(){
        alert(this.name);
    }
}

这样一个全局变量延伸开来就是‘空间的概念’了，不会与其余功能产生冲突，有助于消除功能做用域之间的混淆。

4.2 避免与null进行比较

function sortArray(values){ if(values != null){
        values.sort(比较函数);
    }
}

上面代码中的if语句应该检测values是不是数组，但若是与null做比较的话，字符串，数字等都会经过，致使函数抛出错误。这里是数组，那么咱们就应该检测其是否为数组：

function sortArray(values){ if(values instanceof Array){
        values.sort(比较函数);
    }
}

所于当咱们遇到与null做比较的代码的时候，咱们应该用下面的技术替换：

若是值为引用类型，则用instanceof 操做符检查其构造函数。
若是值是基本类型，则用typeof操做符检查其类型。

4.3 使用常量

function validate(value){ if(!value){
        alert('不存在');
        location.href = '/errors/invalid.php';
    }
}

如今，我想把‘不存在’改成‘该数据不存在！’，把跳转路径也改了，我得回到函数中找到对应的代码去修改，而每次修改逻辑代码，都有可能引入错误的风险。因此咱们能够把数据单独定义为常量，与应用逻辑分离：

var Constans = {
    ERRORMSG: '不存在',
    ERRORPAGE:'/errors/invalid.php' }; function validate(value){ if(!value){
        alert(Constans.ERRORMSG );
        location.href = Constans.ERRORPAGE ;
    }
}

这样咱们修改静态文本内容的时候就无需去动逻辑函数了，甚至能够把Constans单独一个文件。那么什么样的数据须要抽出来作常量呢？

重复值：任何在多处用到的值。
用户界面字符串：任何用于显示给用户提示信息的字符串。
URLs：在WEB项目中，资源路径可能常常变动。在一个公共的地方存起来，修改起来更容易！
任何可能在之后会改变的值。

5 总结

全部编程语言都须要可维护性良好的代码，这个很重要，由于大部分开发人员都花费大量时间维护他人的代码。为了减轻相互的负担，从今天起我要作个好人，写好代码！ o(╯□╰)o