编写更加稳定可读性强的JavaScript代码讲述.docx

编写更加稳定可读性强的JavaScript代码每个人都有自己的编程风 格，也无可避免的要去感受别人的编程风格——修改别人的代码。”修改别人的代码”对于我们来说的一件很痛苦的事情。因为有些代码并不是那么容易阅读、可维 护的，让另一个人来修改别人的代码，或许最终只会修改一个变量，调整一个函数的调用时机，却需要花上1个小时甚至更多的时间来阅读、缕清别人的代码。本文 一步步带你重构一段获取位置的”组件”——提升你的javascript代码的可读性和稳定性。本文内容如下：分离你的javascript代码函数不应该过分依赖外部环境语义化和复用组件应该关注逻辑，行为只是封装形成自己的风格的代码　分离你的javascript代码下面一段代码演示了难以阅读/修改的代码：(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);?这一段代码，我们暂且认可它已经构成一个”组件”。上面的代码就是典型的一个方法搞定所有事情，一旦填充上内部的逻辑就会变得生活不能自理，而一旦增加需求，例如获取位置返回的数据格式需要加工，那么就要去里面寻找处理数据的代码然后修改。我们分离一下逻辑，得到代码如下：(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），一旦页面结构发生改变，它的行为很大程度上也会随之改变。而函数也不应该依赖