编写更加稳定、可读性强的JavaScript代码

小灰灰 2022-08-07 19:29 201阅读 0赞

每个人都有自己的编程风格，也无可避免的要去感受别人的编程风格——修改别人的代码。”修改别人的代码”对于我们来说的一件很痛苦的事情。因为有些代码并不是那么容易阅读、可维护的，让另一个人来修改别人的代码，或许最终只会修改一个变量，调整一个函数的调用时机，却需要花上1个小时甚至更多的时间来阅读、缕清别人的代码。本文一步步带你重构一段获取位置的”组件”——提升你的javascript代码的可读性和稳定性。

> 本文内容如下：  
> 
> 
>  *  分离你的javascript代码
>  *  函数不应该过分依赖外部环境
>  *  语义化和复用
>  *  组件应该关注逻辑，行为只是封装
>  *  形成自己的风格的代码  
>

分离你的javascript代码  
  
  
下面一段代码[演示][Link 1]了难以阅读/修改的代码：

1.  (function (window, namespace) \{  
    
2.      var $ = window.jQuery;  
    
3.      window\[namespace\] = function (targetId, textId) \{  
    
4.          //一个尝试复用的获取位置的"组件"  
    
5.          var $target = $('\#' + targetId),//按钮  
    
6.              $text = $('\#' + textId);//显示文本  
    
7.          $target.on('click', function () \{  
    
8.              $text.html('获取中');  
    
9.              var data = '北京市';//balabala很多逻辑，伪代码，获取得到位置中  
    
10.             if (data) \{  
    
11.                 $text.html(data);  
    
12.             \} else  
    
13.                 $text.html('获取失败');  
    
14.         \});  
    
15.     \}  
    
16. \})(window, 'linkFly');

复制代码

这一段代码，我们暂且认可它已经构成一个”组件”。  
上面的代码就是典型的一个方法搞定所有事情，一旦填充上内部的逻辑就会变得生活不能自理，而一旦增加需求，例如获取位置返回的数据格式需要加工，那么就要去里面寻找处理数据的代码然后修改。  
  
  
我们分离一下逻辑，得到代码如下：

1.  (function (window, namespace) \{  
    
2.      var $ = window.jQuery,  
    
3.          $target,  
    
4.          $text,  
    
5.          states= \['获取中', '获取失败'\];  
    
6.      function done(address) \{//获取位置成功  
    
7.          $text.html(address);  
    
8.      \}  
    
9.      function fail() \{  
    
10.         $text.html(states\[1\]);  
    
11.     \}  
    
12.     function checkData(data) \{  
    
13.         //检查位置信息是否正确  
    
14.         return !!data;  
    
15.     \}  
    
16.     function loadPosition() \{  
    
17.         var data = '北京市';//获取位置中  
    
18.         if (checkData(data)) \{  
    
19.             done(data);  
    
20.         \} else  
    
21.             fail();  
    
22.     \}  
    
23.     var init = function () \{  
    
24.         $target.on('click', function () \{  
    
25.             $text.html(states\[0\]);  
    
26.             loadPosition();  
    
27.         \});  
    
28.     \};  
    
29.     window\[namespace\] = function (targetId, textId) \{  
    
30.         $target = $('\#' + targetId);  
    
31.         $text = $('\#' + textId);  
    
32.         initData();  
    
33.         setData();  
    
34.     \}  
    
35. \})(window, 'linkFly');

复制代码

函数不应该过分依赖外部环境  
  
  
上面的代码中，我们已经把整个组件，切割成了各种函数（注意这里我说的是函数，不是方法），这里常出现一个新的问题：函数过分依赖不可控的变量。  
  
  
变量$target和$text身为环境中的全局变量，从组件初始化便赋值，而我们切割后的代码大多数的操作方法都依赖$text，尤其是$text和done()、fail()之间暧昧的关系，一旦$text相关的结构、逻辑改变，那么我们的代码将会进行不小的改动。  
  
  
和页面/DOM相关的都是不可信赖的（例如$target和$text），一旦页面结构发生改变，它的行为很大程度上也会随之改变。而函数也不应该依赖外部的环境。  
  
  
在不可控的变量上，我们应该解开函数和依赖变量上的关系，让函数变得更加专注自己区域的逻辑，更加的纯粹。简单的说：函数所依赖的外部变量，都应该通过参数传递到函数内部。  
  
  
新的代码如下：

1.  (function (window, namespace) \{  
    
2.      var $ = window.jQuery;  
    
3.      //检查位置信息是否正确  
    
4.      function checkData(data) \{  
    
5.          return !!data;  
    
6.      \}  
    
7.      //获取位置中  
    
8.      function loadPosition(done, fail) \{  
    
9.          var data = '北京市';//获取位置中  
    
10.         if (checkData(data)) \{  
    
11.             done(data);  
    
12.         \} else  
    
13.             fail();  
    
14.     \}  
    
15.     window\[namespace\] = function (targetId, textId) \{  
    
16.        var  $target = $('\#' + targetId),  
    
17.             $text = $('\#' + textId);  
    
18.         var states = \['获取中', '获取失败'\];  
    
19.         $target.on('click', function () \{  
    
20.             $text.html(states\[0\]);  
    
21.             loadPosition(function (address) \{//获取位置成功  
    
22.                 $text.html(address);  
    
23.             \}, function () \{//获取位置失败  
    
24.                 $text.html(states\[1\]);  
    
25.             \});  
    
26.         \});  
    
27.     \}  
    
28. \})(window, 'linkFly');

复制代码

语义化和复用  
  
  
变量states是一个数组，它描述的行为难以阅读，每次看到states\[0\]都有一种分分钟想捏死原作者的冲动，因为我们总是要记住变量states的值，在代码上，我们应该尽可能让它可以很好的被阅读。  
  
  
另外，上面的代码中$text.html就是典型的代码重复，我们再一次的修改代码，请注意这一次修改的代码中，我们所抽离的changeStateText()的代码位置，它并没有被提升到上一层环境中（也就是整个大闭包的环境）。

1.  (function (window, namespace) \{  
    
2.      var $ = window.jQuery;  
    
3.      function checkData(data) \{  
    
4.          return !!data;  
    
5.      \}  
    
6.      function loadPosition(done, fail) \{  
    
7.          var data = '北京市';//获取位置中  
    
8.          if (checkData(data)) \{  
    
9.              done(data);  
    
10.         \} else  
    
11.             fail();  
    
12.     \}  
    
13.     window\[namespace\] = function (targetId, textId) \{  
    
14.         var $target = $('\#' + targetId),  
    
15.             $text = $('\#' + textId),  
    
16.             changeEnum = \{ LOADING: '获取中', FAIL: '获取失败' \},  
    
17.             changeStateText = function (text) \{  
    
18.                 $text.html(text);  
    
19.             \};  
    
20.         $target.on('click', function () \{  
    
21.             changeStateText(changeEnum.LOADING);  
    
22.             loadPosition(function (address) \{  
    
23.                 changeStateText(address);  
    
24.             \}, function () \{  
    
25.                 changeStateText(changeEnum.FAIL);  
    
26.             \});  
    
27.         \});  
    
28.     \}  
    
29. \})(window, 'linkFly');

复制代码

提及语义化，我们必须要知道当前整个代码的逻辑和语义：  
  
  
在这整个组件中，所有的函数模块可以分为：工具和工具提供者。  
  
  
上一层环境（整个大闭包）在我们的业务中扮演着工具的身份，它的任务是缔造一套和获取位置逻辑相关的工具，而在window\[namespace\])函数中，则是工具提供者的身份，它是唯一的入口，负责提供组件完整的业务给工具的使用者。  
这里的$text.html()在逻辑上并不属于工具，而是属于工具提供者使用工具后所得到的反馈，所以changeStateText()函数置于工具提供者window\[namespace\]()中。  
  
  
组件应该关注逻辑，行为只是封装  
  
  
到此为止，我们分离了函数，并让这个组件拥有了良好的语义。但这时候来了新的需求：当没有获取到位置的时候，需要进行一些其他的操作。这时候会发现，我们需要window\[namespace\]()上加上新的参数。  
当我们加上新的参数之后，又被告知新的需求：当获取位置失败了之后，需要修改一些信息，然后再次尝试获取位置信息。  
不过幸好，我们的代码已经把大部分的逻辑抽离到了工具提供者中了，对整个工具的逻辑影响并不大。  
同时我们再看看代码就会发现我们的组件除了工具提供者之外，没有方法（依赖在对象上的函数）。也就是说，我们的组件并没有对象。  
  
  
我见过很多人的代码总是喜欢打造工具提供者，而忽略了工具的本质。迎合上面的增加的需求，那么我们的工具提供者将会变得越来越重，这时候我们应该思考到：是不是应该把工具提供出去？  
  
  
让我们回到最初的需求——仅仅只是一个获取位置的组件，没错，它的核心业务就是获取位置——它不应该被组件化。它的本质应该是个工具对象，而不应该和页面相关，我们从一开始就不应该关注页面上的变化，让我们重构代码如下：

1.  (function (window, namespace) \{  
    
2.      var Gps = \{  
    
3.          load: function (fone, fail) \{  
    
4.              var data = '北京市';//获取位置伪代码  
    
5.              this.check(data) ?  
    
6.                  done(data, Gps.state.OK) :  
    
7.                  fail(Gps.state.FAIL);  
    
8.          \},  
    
9.          check: function (data) \{  
    
10.             return !!data;  
    
11.         \},  
    
12.         state: \{ OK: 1, FAIL: 0 \}  
    
13.     \};  
    
14.     window\[namespace\] = Gps;  
    
15. \})(window, 'Gps');

复制代码

在这里，我们直接捏死了工具提供者，我们直接将工具提供给外面的工具使用者，让工具使用者直接使用我们的工具，这里的代码无关状态、无关页面。  
  
  
至此，重构完成。  
  
  
形成自己风格的代码  
  
  
之所以讲这个是因为大家都有自己的编程风格。有些人的编程风格就是开篇那种代码的…  
我觉得形成自己的编程风格，是建立在良好代码的和结构/语义上的。否则只会让你的代码变得越来越难读，越来越难写。  
\*\*\*\*  
单var和多var  
我个人是喜欢单var风格的，不过我觉得代码还是尽可能在使用某一方法/函数使用前进行var，有时候甚至于为了单var而变得丧心病狂：由于我又过分的喜爱函数表达式声明，函数表达式声明并不会在var语句中执行，于是偶尔会出现这种边声明边执行的代码，为了不教坏小朋友就不贴代码了(我不会告诉你们其实是我找不到了)。  
  
  
对象属性的屏蔽  
下面的代码演示了两种对象的构建，后一种通过闭包把内部属性隐藏，同样，两种方法都实现了无new化，我个人…是不喜欢看见很多this的..但还是推荐前者。

1.  (function () \{  
    
2.      //第一种，曝露了\_name属性  
    
3.      var Demo = function () \{  
    
4.          if (!(this instanceof Demo))  
    
5.              return new Demo();  
    
6.          this.\_name = 'linkFly';  
    
7.      \};  
    
8.      Demo.prototype.getName = function () \{  
    
9.          return this.\_name;  
    
10.     \}  
    
11.     //第二种，多一层闭包意味内存消耗更大，但是屏蔽了\_name属性  
    
12.     var Demo = function () \{  
    
13.         var name = 'linkFly';  
    
14.         return \{  
    
15.             getName: function () \{  
    
16.                 return name;  
    
17.             \}  
    
18.         \}  
    
19.     \}  
    
20. \});

复制代码

巧用变量置顶\[hoisting\]

1.  (function () \{  
    
2.      var names = \[\];  
    
3.      return function (name) \{  
    
4.          addName(name);  
    
5.      \}  
    
6.      function addName(name) \{  
    
7.          if (!~names.indexOf(name))//如果存在则不添加  
    
8.              names.push(name);  
    
9.          console.log(names);// \["linkFly"\]  
    
10.     \}  
    
11. \}())('linkFly');

复制代码

if和&&  
  
  
这种代码，在几个群里都见过讨论：

1.  (function () \{  
    
2.      var key = 'linkFly',  
    
3.          value;  
    
4.      //&&到底  
    
5.      key && cache && cache\[key\] && (value = cache\[key\]);  
    
6.      //来个if  
    
7.      if (key && cache && cache\[key\])  
    
8.          value = cache\[key\];  
    
9.  \})()；

复制代码

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=10