侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

简单了解JavaScript中常见的反模式

前端  /  管理员 发布于 5年前   228

前言

反模式 是指对反复出现的设计问题的常见的无力而低效的设计模式,俗话说就是重蹈覆辙。 这篇文章描述了 JavaScript 中常见的一些反模式,以及避免它们的办法。

硬编码

硬编码(Hard-Coding)的字符串、数字、日期…… 所有能写死的东西都会被人写死。 这是一个妇孺皆知的反模式,同时也是最广泛使用的反模式。 硬编码中最为典型的大概是 平台相关代码(Platform-Related), 这是指特定的机器或环境下才可以正常运行的代码, 可能是只在你的机器上可以运行,也可能是只在 Windows 下可以运行。

例如在 npm script 中写死脚本路径 /Users/harttle/bin/fis3, 原因可能是安装一次非常困难,可能是为了避免重复安装,也可能仅仅是因为这样好使。 不管怎样,这会让所有同事来找你问“为什么我这里会报错”。 解决办法就是把它放到依赖管理,如果有特定的版本要求可以使用 package-lock,如果实在搞不定可以视为外部依赖可以放到本地配置文件并从版本控制(比如 Git) 移除。

例如在 cli 工具中写死特殊文件夹 /tmp, ~/.cache,或者路径分隔符 \\ 或 /。 这类字符串一般可以通过 Node.js 内置模块(或其他运行时 API)来得到, 比如使用 os.homedir, os.tmpdir, path.sep 等。

重复代码

重复代码(Duplication)在业务代码中尤为常见,初衷几乎都是维护业务的稳定性。 举个例子:在页面 A 中需要一个漂亮的搜索框,而页面 B 中恰好有一个。 这时程序员小哥面临一个艰难的选择(如果直接拷贝还会有些许感到不安的话):

  • 把 B 拷贝一份,改成 A 想要的样子。
  • 把 B 中的搜索框重构到 C,B 和 A 引用这份代码。

由于时间紧迫希望早点下班,或者由于改坏 B 需要承担责任 (PM:让你做 A 为啥 B 坏了?回答这个问题比较复杂,这里先跳过), 经过一番思考后决定采取方案 2。

至此整个故事进行地很自然也很顺利,这大概就是重复代码被广泛使用的原因。 这个故事中有几点需要质疑:

  • B 这么容易被改坏,说明 B 的作者 并未考虑复用。这时不应复用 B 的代码,除非决定接手维护它。
  • B 改坏的责任不止程序员小哥:B 的作者是否有 编写测试,测试人员是否 回归测试 B 页面?
  • 时间紧迫不必然导致反模式的出现,不可作为说服自己的原因。短期方案也存在优雅实现。

解决办法就是:抽取 B 的代码重新开发形成搜索框组件 C,在 A 页面使用它。 同时提供给日后的小伙伴使用,包括敦促 B 的作者也迁移到 C 统一维护。

假 AMD

模块化本意是指把软件的各功能分离到独立的模块中,每个模块包含完整的一个细分功能。 在 JavaScript 中则是特指把脚本切分为独立上下文的,可复用的代码单元。

由于 JavaScript 最初作为页面脚本,存在很多引用全局作用域的语法,以及不少基于全局变量的实践方式。 比如 jQuery 的 $, BOM 提供的 window,省略 var 来定义变量等。 AMD 是 JavaScript 社区较早的模块化规范。这是一个君子协定,问题就出在这里。 有无数种方式写出假的 AMD 模块:

  • 没有返回值。对,要的就是副作用。
  • define 后直接 require。对,要的就是立即执行。
  • 产生副作用。修改 window 或其他共享变量,比如其他模块的静态属性。
  • 并发问题。依赖关系不明容易引发并发问题。

全局副作用的影响完全等同于全局变量,几乎有全局变量的所有缺点: 执行逻辑不容易理解;隐式的耦合关系;编写测试困难。下面来一个具体的例子:

// file: login.jsdefine('login', function () {fetch('/account/login').then(x => {window.login = true})})require(['login'])

这个 AMD 模块与直接写在一个

  • 分类目录
  • 人生(杂谈)
  • 技术
  • linux
  • Java
  • php
  • 框架(架构)
  • 前端
  • ThinkPHP
  • 数据库
  • 微信(小程序)
  • Laravel
  • Redis
  • Docker
  • Go
  • swoole
  • Windows
  • Python
  • 苹果(mac/ios)
  • 相关文章
  • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
  • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
  • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
  • 使用mock-server实现模拟接口对接流程步骤(0个评论)
  • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
  • 近期文章
  • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
  • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
  • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
  • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
  • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
  • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
  • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
  • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
  • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
  • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
  • 近期评论
  • 122 在

    学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
  • 123 在

    Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
  • 原梓番博客 在

    在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
  • 博主 在

    佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
  • 1111 在

    佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
  • 2016-10
  • 2016-11
  • 2017-06
  • 2017-07
  • 2017-08
  • 2017-09
  • 2017-10
  • 2017-11
  • 2018-03
  • 2018-04
  • 2018-05
  • 2018-06
  • 2018-09
  • 2018-11
  • 2018-12
  • 2019-02
  • 2020-03
  • 2020-04
  • 2020-05
  • 2020-06
  • 2021-04
  • 2021-05
  • 2021-07
  • 2021-08
  • 2021-09
  • 2021-10
  • 2021-11
  • 2022-08
  • 2022-09
  • 2022-10
  • 2022-11
  • 2022-12
  • 2023-01
  • 2023-02
  • 2023-03
  • 2023-04
  • 2023-05
  • 2023-06
  • 2023-07
  • 2023-09
  • 2023-10
  • 2023-11
  • 2023-12
  • 2024-01
  • 2024-02
  • 2024-03
  • 2024-04
Top

Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

侯体宗的博客