去除 JavaScript 代码的怪味

难闻的代码

为毛是这个味?

很多原因:

  • 声明过多
  • 嵌套太深
  • 复杂度太高

检查工具

Lint 规则

结果

重构

重构后统计

  • max-statements(最多声明): 16 → 6
  • max-depth(最大嵌套): 5 → 2
  • complexity(复杂度): 7 → 3
  • max-len(最多行数): 65 → 73
  • max-params(最多参数): 1 → 2
  • max-nested-callbacks(最多嵌套回调): 0 → 1

资源

jshint – http://jshint.com/
eslint – http://eslint.org/
jscomplexity – http://jscomplexity.org/
escomplex – https://github.com/philbooth/escomplex
jasmine – http://jasmine.github.io/

复制粘贴代码的味道

已有功能…

已有代码,BOX.js

那么,现在想要这个功能

于是,Duang! CIRCLE.JS 就出现了…

为毛是这个味?因为我们复制粘贴了!

工具

JSINSPECT

检查复制粘贴和结构相似的代码

一行命令:

JSCPD

程序源码的复制 / 粘贴检查器

(JavaScript, TypeScript, C#, Ruby, CSS, SCSS, HTML, 等等都适用…)

怎么能不被发现?重构

把随机颜色部分丢出去…

再重构

再把怪异的 [].forEach.call 部分丢出去…

再再重构

资源

switch 味道

难闻的代码

为毛是这个味?违背“打开 / 关闭原则

增加个新形状

加点设计模式

再增加新形状时

还有其它的味道吗?神奇的字符串

神奇的字符串重构为对象类型

神奇字符重构为 CONST & SYMBOLS

工具!?!

木有 :(

ESLINT-PLUGIN-SMELLS
用于 JavaScript Smells(味道) 的 ESLint 规则

规则

  • no-switch – 不允许使用 switch 声明
  • no-complex-switch-case – 不允许使用复杂的 switch 声明

资源

this 深渊的味道

难闻的代码

为什么是这个味?that 还是 self 还是 selfie

替换方案
1) bind

替换方案
2) forEach 的第二个参数

替换方案
3) ECMAScript 2015 (ES6)

4a) 函数式编程

4b) 函数式编程

工具

ESLint

字符串连接的味道

难闻的代码

为毛是这个味?因为字符串连接

替换方案
@thomasfuchs 推文上的 JavaScript 模板引擎

替换方案
2) ECMAScript 2015 (ES6) 模板字符串

替换方案
3) ECMAScript 2015 (ES6) 模板字符串 (多行)

替换方案
4) 其它小型库或大型库 / 框架

  • Lowdash 或 Underscore
  • Angular
  • React
  • Ember
  • 等等…

工具

ESLINT-PLUGIN-SMELLS
no-complex-string-concat

资源

Tweet Sized JavaScript Templating Engine by @thomasfuchs
Learn ECMAScript 2015 (ES6) – http://babeljs.io/docs/learn-es6/

jQuery 调查

难闻的代码

为毛是这个味?丧心病狂的链式调用

愉快地重构吧

最终 Demo

工具

ESLINT-PLUGIN-SMELLS

难以琢磨的计时器

难闻的代码

为毛这个味?无法同步的计时器

Demo: setInterval

用 setTimeout 保证顺序

Demo: setTimeout

重复定义

难闻的代码

替换方案
1) 嵌套调用函数

2) forEach

3) reduce

4) flow

工具

ESLINT-PLUGIN-SMELLS

资源

过度耦合

难闻的代码

为毛是这个味?紧密耦合的依赖关系

如何改善!?!

  1. 依赖注入
  2. 消息订阅
  3. 依赖注入

  1. 消息订阅

资源

连续不断的交互

难闻的代码

Demo: 根本停不下来

解决方案:节流阀

Demo

解决方案:DEBOUNCE

Demo

资源

匿名函数

难闻的代码

给函数命名的原因:

  1. 堆栈追踪
  2. 去关联
  3. 代码复用
  4. 堆栈追踪

修改后

  1. 去关联

单次事件绑定

Demo

  1. 代码复用

资源

结尾

更多的 ESLint 规则

资源

NPM 搜索 eslint-plugin

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 3 收藏 评论

关于作者:涂鸦码龙

不高级前端攻城狮,原名金龙,不姓郭。【忙时码代码,无事乱涂鸦】http://jinlongz.lofter.com/,涂手:Alon 个人主页 · 我的文章 · 3 ·    

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部