这是一篇写于 2015 年 4 月的草稿，现在已经忘了当时想说什么了，又不舍得直接删除，看看发出来自己还能不能看懂当时的只言片语

大需求应该是我们自己做了一套独立系统想开个新业务

一开始面对的就是帐号体系和登陆方式, 在有自己的账号体系下如何自制授权。最后用了一些不算 OAuth 的简化版验证来实现了原型快速可用。因为双方都是自己的系统，所以可以加入一个私有的加密用的 salt，然后在已有账号体系里用账号加时间戳加一个私有字段，通过 salt 做个 MD5 或 SHA1，把用户名，时间戳和加密后内容明文发送，在接收方用明文收到的用户名和时间戳加上没有传输但是两边都加入的私有字段一起，通过私有的 salt 算 Hash，对比结果，以及确认时间戳是最近的

然后是白名单需求，因为是对一个已有系统的部分用户开放测试功能，不希望没选上的用户也进入到测试系统里来。这个似乎没有什么特别要考虑的，做一个白名单放到 DB 里持久化，就是看怎么改这个白名单，是要提供一个 Web 界面，还是裸改代码。印象中这个项目还没从裸改代码进化到 Web 管理，就无疾而终了（手动捂脸

最头疼的还是错误处理，就是文档没说的那些事，怎么做好各种防御式编程，才是工作中的精髓所在

简单粗暴的做，大概一两周后，使用 cloc 统计代码如下（用了 CDN 上的 Bootstrap，当时也不怎么会前端，大部分事情都放到后端做，所以前端代码很少）

$ perl ~/Downloads/cloc-1.62.pl . --exclude-dir=env,.git,.idea,logs
      51 text files.
      50 unique files.
       6 files ignored.

http://cloc.sourceforge.net v 1.62  T=0.33 s (137.7 files/s, 6957.6 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Python                          25            369             52           1078
HTML                            17             43              1            603
CSS                              1              9              0             50
Javascript                       1              9              1             47
Bourne Shell                     1              2              0             10
-------------------------------------------------------------------------------
SUM:                            45            432             54           1788
-------------------------------------------------------------------------------

前几天做客服的时候遇到个客户来说我们的页面出错了, 两边鸡同鸭讲了半天发现都没法理解对方, 让客户截图后发现果然跟我这边不一样, 远程过去一看, 对面用的是 Win10 + Edge, 在我们本该出现 tipsy 的地方鼠标移上去没任何反应, 客户看不到该有的提示, 也难怪要跑过来找客服

一开始以为是 Edge 和 IE11 又出现什么奇葩的 jQuery 事件绑定错误, 需要在 knockout 的动态渲染完成后再做事件绑定, 但是仔细查了下后发现还不是这么回事, 熊去搜了下表示似乎 “disabled 的 input 元素是不响应鼠标事件的”, 但是为啥 Chrome 又能支持? 把 Firefox 也拉进来测试, 发现似乎不响应是通用标准, Chrome 那个浓眉大眼的货又一次不按常理出牌在鼠标事件完成后另外触发了一次, 所以我们测试一直没问题

既然知道了这么个原因, 而我们又要对一个 disabled 的 input 元素做悬浮事件, 怎么办? 按 Bootstrap 的说法, 在外面包一层, 然后把悬浮事件绑定到包的那一层上就好, 但是这么搞了后还是失败, 各种姿势换了一遍后发现如果我多包一点东西进去, 然后鼠标从多包的那一边进入, 就可以正常触发事件, 这是什么鬼? 想了半天没想明白, 暴力在外面做了一个图标来绑定悬浮事件先解决问题再说

吃了个饭回来, 越想越不对, 难道是因为那个 input 元素有 1px 的 border, 然后导致 Edge 那货一看这个区域都属于 disabled input, 所以其他这个区域的其他元素也不做任何响应? 怒而把包的那一层加了个 border: 5px solid transparent; margin: -5px, 果然就好了… 就仅仅是需要让包的这层真的比那个 disabled input 更大而已

不过还有几个坑没想明白的

1. 不知道是不是跟 Edge 的刷新率有关, 如果鼠标进出太快, 也可能不会触发包的那一层的事件
2. 不知道是不是需要额外设置 float 或 z-index 关系, 让包的那一层的 z-index 更高, 这样才能正确响应鼠标事件, 可能也不用去 hack border

最近其他事太多, 这个坑先这么填着, 回头有空了再来细细研究, 写前端真的是折寿啊

写这篇 blog 时去搜了下相关内容, 还有建议把元素不做 disabled, 在 hover 事件里动态设置为 disabled 的乱搞流… 你这样样式都不对的好么