那一天我想用issue写代码

乍一看，为什么你这人有这么奇怪的想法。
我不能理解你
首先这个需求是由于。我最近新建了一些学习的repo
那么我有一些笔记并不想upload成一个file。那么我想我应该可以用issue来记录我的一些练习代码（其实gist也可以的）
那么当我使用issue的时候。我会发现其实有几点不便之处。（当然github附带了一些功能已经是很好了）
当我写我的代码，我想使用缩进时，tab键是会直接将focus的焦点移动到按钮上，而不是有我理所当然的制表符出现在我的输入框内。
老实说这是我所不能理解的。issue我们知道经常是需要贴一些demo的。
so 决定直接hack一下tab功能。

刚开始的想法肯定是直接在输入框内焦点时劫持tab。

1. tab劫持

   形如
   输入框.addEventListener('keydown',callback,false);
   伪代码
   

   然后再针对tab的keyCode做判断即可
   然而还有一些需要优化，例如我们需要对选择的文本进行tab增加缩进

2. 选择文本tab缩进
   这一点是比较辛苦的。因为网上实在是太多以前"老玩家们的hack"了，我甚至还能翻到11年的博文。。
   所幸还是找到了对应的玩法。
   getSelection 这个方法。可以获得我们在浏览器网页选择的内容。
   (这个方法，有很大一块东西，这里就不细谈了。据此还可以做一些诸如复制粘贴的功能)
   selectionStart selectionEnd setRangeText 这些都是HTMLInputElement的一些方法。
   也是比较有意思的。有兴趣也可以继续挖掘。这里也不细谈。
   有了这几个api之后。我们可以进行对输入框内部文本的选取以及替换。乍一看，这是不是就搞好了。
   然而还是有一些bug存在
   例如。撤销的操作栈混乱。因为使用了setRangeText 替换文本后。操作栈异常。也没有得到很好的解决。
3. 修复操作栈问题。
   简单的利用一个数组进行存储替换文本操作。然后再劫持ctrl+Z方法。进行更改文本。（这是一种简单有效。但并非最好）
4. chrome插件可配置。
   因为是做成的chrome插件。所以给它加一点配置。例如tab默认是制表符，可以选择自己想要的填充物。
   操作起来也不难。我是用的storage进行配置同步触发。配置项存储在chrome的storage内。

   这边提一下chrome插件的基本方式。
   content script / popup page / background page
   content script 是嵌入式地运行在网页上(据此可以做一些广告拦截之类的东西)
   popup 插件图标被点击时，弹出的窗口页面
   background 则是用于管理插件。主要逻辑
   之间通信的模型大多是 监听 传输触发 观察者模型

   ---

   这篇是后补的。与之前写的版本有略微不同，这篇可能比较简洁。。。可怕可怕。
   2018年3月2日14:30:18 补上
   发布日期仍然为此篇文章铸成时

Comments