每个人都有自己的编程风格，也无可避免的要去感受别人的编程风格——修改别人的代码。”修改别人的代码”对于我们来说的一件很痛苦的事情。因为有些代码并不是那么容易阅读、可维护的，让另一个人来修改别人的代码，或许最终只会修改一个变量，调整一个函数的调用时机，却需要花上1个小时甚至更多的时间来阅读、缕清别人的代码。本文一步步带你重构一段获取位置的”组件”——提升你的javascript代码的可读性和稳定性。
本文内容如下：
- 分离你的javascript代码
- 函数不应该过分依赖外部环境
- 语义化和复用
- 组件应该关注逻辑，行为只是封装
- 形成自己的风格的代码
分离你的javascript代码
下面一段代码演示了难以阅读/修改的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
(function (window, namespace) { var $ = window.jQuery; window[namespace] = function (targetId, textId) { //一个尝试复用的获取位置的"组件" var $target = $('#' + targetId),//按钮 $text = $('#' + textId);//显示文本 $target.on('click', function () { $text.html('获取中'); var data = '北京市';//balabala很多逻辑，伪代码，获取得到位置中 if (data) { $text.html(data); } else $text.html('获取失败'); }); } })(window, 'linkFly'); |
这一段代码，我们暂且认可它已经构成一个”组件”。
上面的代码就是典型的一个方法搞定所有事情，一旦填充上内部的逻辑就会变得生活不能自理，而一旦增加需求，例如获取位置返回的数据格式需要加工，那么就要去里面寻找处理数据的代码然后修改。
我们分离一下逻辑，得到代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
(function (window, namespace) { var $ = window.jQuery, $target, $text, states= ['获取中', '获取失败']; function done(address) {//获取位置成功 $text.html(address); } function fail() { $text.html(states[1]); } function checkData(data) { //检查位置信息是否正确 return !!data; } function loadPosition() { var data = '北京市';//获取位置中 if (checkData(data)) { done(data); } else fail(); } var init = function () { $target.on('click', function () { $text.html(states[0]); loadPosition(); }); }; window[namespace] = function (targetId, textId) { $target = $('#' + targetId); $text = $('#' + textId); initData(); setData(); } })(window, 'linkFly'); |
函数不应该过分依赖外部环境
上面的代码中，我们已经把整个组件，切割成了各种函数（注意这里我说的是函数，不是方法），这里常出现一个新的问题：函数过分依赖不可控的变量。
变量$target和$text身为环境中的全局变量，从组件初始化便赋值，而我们切割后的代码大多数的操作方法都依赖$text，尤其是$text和done()、fail()之间暧昧的关系，一旦$text相关的结构、逻辑改变，那么我们的代码将会进行不小的改动。
和页面/DOM相关的都是不可信赖的（例如$target和$text），一旦页面结构发生改变，它的行为很大程度上也会随之改变。而函数也不应该依赖外部的环境。
在不可控的变量上，我们应该解开函数和依赖变量上的关系，让函数变得更加专注自己区域的逻辑，更加的纯粹。简单的说：函数所依赖的外部变量，都应该通过参数传递到函数内部。
新的代码如下：
|
1 2 -main" style="">
|
