工作总结, 邪恶的DOM操作

今天早早就下班了, 因为今天犯的错让我羞愧难当, 无颜面对同事

今天干了三件愚蠢的事, 一个测试页面打不开, 我却用自己的线上账号去开, 另一个同事还说要报障, 我想当然的以为是别人的错, 淡定的上着网, 等别人修复, 后来才知道上错账号, 羞得满脸通红

第二件事是一个页面提交不了了, 问题交给另一个同事查, 结果一查就查出来是我的问题, 我觉得冤呐, 我都没碰过这页面, 怎么会错呢? 原来是这个页面复用了我改的页面的js, 但那个页面并没有它全部的html, 我自然而然的操作一个dom, 导致波及了相关的页面. 使用jQuery经常让我们忘了判断dom是否存在, 因为jQuery的fn基本都是return this.each(), DOM不存在的时候就是不执行, 但我们必须实时注意这些情况

任何从jQuery对象中直接取值都是危险的, 因为别人复用你的代码, 很可能没有这个节点. 改成.data会安全很多, 尽量全套用jQuery

var key = $('slelect')[0].dataset.key

任何parent和sibling操作都是危险的

var div = $('select').parent()[0]
div = div.nextSibling

有时候我会这么取一个相对位置的dom节点, 但这是极其危险的, 人家可能只想改个样式, 在中间加了个div, 改善了下css, 没想到让程序不能跑了, 这种时候, 用一个class或者id来表示相对div反而更好, 这也是mvvm存在的原因, 没人能保证一段html结构不变, 但是mvvm并不依赖dom结构, 它和模板绑在一起, 对于MVVM来说, 只要一遍跑通了, 那这个程序基本就是对的, html结构想怎么优化就怎么优化

第三件事也是一个小小的修改, 又波及到了其他页面, 我至今都不知道为何, 因为我根本连其他页是怎么用这个js的都不知道.

总结一下, 有很大的原因是我太自大了, 为什么这么说呢? 我在做一个需求的时候, 并不会把这个相关的逻辑都看一遍, 因为我只需要在devtool上操作一把, 分分钟就能改完, 常常一周的工作, 我花个一天就慢悠悠的做完了, 自己还引以为豪, 以至于到了现在, 我仍然不了解整个系统的逻辑, 从而导致谁复用哪里的代码也不知道, 经常会犯改一个页面却波及其他页面的错误.

我之前老是觉得同事并不比我水平高, 有很多潮流知识和框架都难以和他们交流, 他们连听都没听过, 我甚至经常暗自吐槽别人写的代码, 并顺手帮他们修改. 然而他们却比我稳的多, 至少没我这么多错, 其实严谨很容易做到, 多做判断, 多catch, 多注意作用域

if (arr.length) {
  ...
}

try {
 JSON.parse() 
} catch() {
}

var container = $('.container1')
var div = container.find(...)

这些看起来并不优美的代码, 反而是成百上千的代码稳定运行的基石

说白了, 没人会因为你懂好多语言, 或者写过啥框架觉得你牛逼. 相反, 别人会问为什么你一改, 我这里就提交不了啊?

沉下心, 0bug