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

2019年8月26日 216次阅读 来源: kraaas

o(╯□╰)o 这并不是什么史诗巨作，没有异常深切去发掘这类题目，只是从寻常的JS代码习气，参考书本总结而来，愿望对你有协助的！

本日的web运用大至不计其数行的javascript代码，实行种种庞杂的历程，这类演变让我们开发者必须得对可保护性有肯定的熟悉！编写可保护性代码很主要，许多情况下我们是以别人的事情效果为基础，确保代码的可保护性，以便其他开发职员更好地事情！

1 可保护性代码的特性

  1. 可邃晓性：其别人能够接办代码并邃晓它的企图，无需原开发职员花太多时刻诠释！
  2. 直观性：代码中的东西一看就可以邃晓，只管其操作历程庞杂。
  3. 可适应性：代码以一种数据上的变化不请求完整重写要领。
  4. 可扩大性：在代码架构上可对中心功用的扩大。
  5. 可调式性：失足时，代码能够给你充足的信息来直接肯定题目所在。

2 代码商定

由于javascript言语的特性，我们可编写种种编程作风的代码，从传统的面向对象式到声明式到函数式。构成一套优越的javascript代码誊写商定可大大进步可保护性，这点对初学者来讲相对是没有很注意的处所。

2.1 可读性

  1. 缩进：在项目中统一代码缩进，更易于浏览，一种不错也很罕见的缩进大小为四个空格，固然能够是其他数目。
  2. 解释：实在我们在编写一些背景代码会经常把一个功用，一个营业逻辑，一个函数的代码解释起来，但我们却在编写javascript却经常疏忽这些习气。平常而言，在js中有以下这些处所须要解释：
  • 函数和要领 ：形貌其目的和参数代表，返回值等。
  • 大段的代码 ：大段代码通常是一个使命的代码，应解释形貌使命。
  • 庞杂的算法 ：不是一切人都邑你的算法，你须要把你的算法思绪简朴形貌下。
  • Hack ：因各浏览器的差别，javascript的hack用于处置惩罚什么题目应当形貌清晰。

2.2 变量和函数的定名

  1. 变量名应当名词：如car，person
  2. 函数名应以动词最先：如getName(),返回布尔范例值的函数平常以is开首，如：isEnable();
  3. 只需合乎逻辑，不必忧郁变量或许函数名的长度，长度题目能够经由过程在你宣布代码紧缩的时刻得以处置惩罚。

2.3 变量范例通明

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

如上代码，由于javascript中变量是松懈范例的，我们并不晓得个中的car和person是什么范例的数据，不够通明，我们能够经由过程一下两种体式格局减缓这类题目：

  1. 初始化变量：经由过程初始化指定变量范例，但经由过程这类体式格局定名的对象没法用于函数声明中的参数。

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

  2. 匈牙利标记法：在变量名之前加上一个或多个字符示意数据范例。o – 对象，s – 字符串，i – 整数，f – 浮点数，b – 布尔型

    var oCar; //car是对象
var sPerson; //person是字符串
var iCount; //count是整数
var bFound; //found是布尔型

3 松懈耦合

记得之前刚入门C#的时刻，师兄经常跟我说‘高内聚低耦合’这词，我也就含糊地点点头，许多人能够也像我之前一样，这词耳熟能详，但未真正实践。

只需运用的某个部份太过依靠另一部份，代码就是耦合过紧，难于保护！ 典范的题目：对象直接运用另一个对象，而且修正个中一个的同时须要修正另一个。 在我们web运用中，我们能够经由过程一下体式格局解耦我们的代码：

3.1 解耦HTML/JavaScript

在web运用中，我们愿望html专注于展现数据，css专注于款式，javascript专注于行动交互。然则有一些代码会将html、javascript过于严密地耦合在一起。

  1. 直接写在HTML中javascript，运用包括内联代码的<script>元素或许是运用HTML属性来分派事宜处置惩罚顺序。

    <!--运用<script>标签的严密耦合 -->


<script type="text/javascript">
   document.write('hello,javascript');
</script>



<!--运用时刻处置惩罚顺序属性值的严密耦合 -->
<input type="button" value="click me" onclick="doSomething()"/>

    虽然如许写完整正确，但涌现javascript毛病是，我们须要推断毛病涌如今HTML照样在Javascript中，而且这还存在一个时刻差题目，当我按下上面代码的按钮时，若此时javascript代码并未加载完，此时变回激发毛病。在实践中，抱负的状态应当是HTML和Javascript应完整星散，运用引入外部文件来加载javascript。

  2. 相反地，在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); //挪用运用逻辑处置惩罚函数
    }

如许写有什么优点呢？

  1. 当有差别的体式格局触发雷同的雷同历程事宜的时刻，这时候只需挪用运用逻辑处置惩罚函数即可。
  2. 运用逻辑处置惩罚函数能够在不添加到事宜的情况下零丁测试。

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作比较的代码的时刻，我们应当用下面的手艺替代：

  1. 假如值为援用范例，则用instanceof 操作符搜检其组织函数。
  2. 假如值是基础范例，则用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零丁一个文件。那末什么样的数据须要抽出来做常量呢？

  1. 反复值：任安在多处用到的值。
  2. 用户界面字符串：任何用于显现给用户提醒信息的字符串。
  3. URLs：在WEB项目中，资本途径能够经常变动。在一个大众的处所存起来，修正起来更轻易！
  4. 任何能够在今后会转变的值。

5 总结

一切编程言语都须要可保护性优越的代码，这个很主要，由于大部份开发职员都消费大批时刻保护别人的代码。为了减轻互相的累赘，从本日起我要做个大好人，写好代码！ o(╯□╰)o

ok，写了一遍，我印象又加深了！以上内容整顿自《JavaScript高等顺序设计》，以为不错点个赞呗。下一篇将整顿怎样誊写进步机能的JS代码。感谢浏览……

《[JS进阶] 编写可维护性代码 (1)》

    原文作者：kraaas
    原文地址: https://segmentfault.com/a/1190000002617895
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞