原因

由于我太懒了, 不想每次在浏览器里都要鼠标拖很长一串,然后在command+c复制,所以我想快速复制.平时双击或三连击选文案的情况还是蛮多的,所以就决定实现一个油猴的脚本,这样就可以方便的玩耍了

实现

(function () {
    'use strict';
    window.__copy_text_to_clipboard__ = true;
    // window.__copy_text_to_clipboard__ === true;
    // iframe.contentWindow.__copy_text_to_clipboard__ === undefined
    function copyToClipboard(str) {
        const textAreaElement = document.createElement('textarea');
        const iframe = this.__copy_text_to_clipboard__ ? document.createElement('iframe') : textAreaElement;
        iframe.style.display = 'none';
        textAreaElement.value = str;
        document.body.appendChild(iframe);
        if (this.__copy_text_to_clipboard__) {
            iframe.contentDocument.body.append(textAreaElement)
        }
        textAreaElement.select();
        document.execCommand('copy');
        document.body.removeChild(iframe);
    }

    function mouseHandle(event) {
        const detail = event.detail;
        const text = this.getSelection().toString();
        // if the text is empty or click event neither double click nor triple click
        if (!text.trim().length || (detail !== 2 && detail !== 3)) {
            return;
        }
        copyToClipboard.call(this, text)
    }

    // notice the dynamic iframes are not queried
    const iframes = document.querySelectorAll('iframe');

    [...iframes].forEach(iframe => {

        iframe.onload = function () {
            const contentWindow = iframe.contentWindow;
            const contentDocument = iframe.contentDocument;
            // handle iframe copy
            contentDocument.addEventListener('click', mouseHandle.bind(contentWindow));
        }

    })

    document.addEventListener('click', mouseHandle.bind(window));

})();

实现起来很简单, 选中时通过window.getSelection获取到选中的文字,然后执行document.execCommand('copy')拷贝到剪切板

copyToClipboard 中有一个判断, 那为什么要有这个判断呢?

原因就是我这个人有强迫症, 如果不用iframe, 只是用textarea会造成选中文字的失焦(选中文字不高亮),所以用了iframe.

理想情况就不需要这个判断,无论什么情况都用iframe来实现拷贝, 但是问题出现了, iframe在选中时候不会复制到剪切板 因此在iframe下选中还得用textarea...

因为iframe不在当前文档中,因此iframe选中的高亮不会因为textare.select()而造成失焦

在线demo(要装油猴插件)

gist地址

只需要双击想要复制的文字或者三连击选中一长串数字就可以复制到剪切板了.

最新一直在折腾小程序

我是前后台一起做，前台不必说是微信的小程序，后端的用的是NODEJS。

所以就说一下NODEJS如何配置HTTPS服务

我的NODE用的是Express框架

直接上代码：

最重要的几行代码已经标出来了。大家一看就应该理解了。

在购买证书之前申请域名、域名指向、解析这个我就不说了，很简单，不会的自行百度即可。

下面来说说阿里云申请HTTPS证书，也就是上面代码部分的key 和 pem

1、进入阿里云，登录后到左侧菜单栏里找到证书服务

进入后点击购买证书

够买操作就不细说了，这个付费的免费的都有，自己选就好，购买就一直下一步就好了。反正我选的是免费的，嘿嘿

购买完之后再我的证书里面就可以看到了，但是需要补全信息，你可以看到有一个补全按钮，点击进去之后填写一些基础的个人信息，填完之后等待审核

审核中需要去设置域名的CNAME

附一个万网设置界面

设置完之后需要等待几个小时去审核

审核通过后就OK了，就可以下载证书了

点击下载！

系统会提供针对不同服务器的设置方式及证书

应为用的是NODEJS ,但是发现没有怎么办，没关系，直接下载nginx的就OK了

下载解压后有两个文件

这连个就是KEY 和 PEM ，把他们放到你的项目里，回到上一步的代码中修改一个路径就OK了

用浏览器访问一下

显示安全！大功告成！

最新一直在折腾小程序

我是前后台一起做，前台不必说是微信的小程序，后端的用的是NODEJS。

所以就说一下NODEJS如何配置HTTPS服务

我的NODE用的是Express框架

直接上代码：

最重要的几行代码已经标出来了。大家一看就应该理解了。

在购买证书之前申请域名、域名指向、解析这个我就不说了，很简单，不会的自行百度即可。

下面来说说阿里云申请HTTPS证书，也就是上面代码部分的key 和 pem

1、进入阿里云，登录后到左侧菜单栏里找到证书服务

进入后点击购买证书

够买操作就不细说了，这个付费的免费的都有，自己选就好，购买就一直下一步就好了。反正我选的是免费的，嘿嘿

购买完之后再我的证书里面就可以看到了，但是需要补全信息，你可以看到有一个补全按钮，点击进去之后填写一些基础的个人信息，填完之后等待审核

审核中需要去设置域名的CNAME

附一个万网设置界面

设置完之后需要等待几个小时去审核

审核通过后就OK了，就可以下载证书了

点击下载！

系统会提供针对不同服务器的设置方式及证书

应为用的是NODEJS ,但是发现没有怎么办，没关系，直接下载nginx的就OK了

下载解压后有两个文件

这连个就是KEY 和 PEM ，把他们放到你的项目里，回到上一步的代码中修改一个路径就OK了

用浏览器访问一下

显示安全！大功告成！

没错，我就是来给大家安利 VS Code 的。

对前端来说，这是一款性感无比的 IDE，哦不对应该是编辑器。我们团队有大部分人已经在用了，所以这周五在组内做了一个 VS Code 小分享，来发掘 VSC 一些提高开发效率的小技巧。我相信已经有不少前端在使用它了，所以大家更有必要一起分享下日常神操作了。

为什么选择 VS Code ？

在 VSC 刚出来的时候，我就开始使用了（如何评价 Visual Studio Code？),理由很简单：

• 开源，免费，颜值高；
• 微软出品，实力保证。

然而用了一阵发现还是 Sublime 好用，一是刚出来功能不完善，Sublime 一些技巧无法迁移过来，另外就是插件太少，实际开发略显吃力。然随着后面 VSC 一次次更新，不少新 features 着实让人眼前一亮：微软这是在用心做产品呐！以至于现在已经没有什么可以抱怨的了(有趣的是当天尤大也发微博说转投 VSC 了，可以预见这款产品未来会越做越好，方向选对了，就不怕路走错)。

而作为前端，VSC 简直就是为我们量身定制：

VSC 本身是基于当前大火的 TS 来写的，所以对于 TS 的支持自然很好；又是基于 electron 开发，底层 Node.js 对前端来说再熟悉不过了。所以，如果你发现哪里不好用，你可以自己写插件呐！如果一个满足不了，那就写两个。

而对于 VSC 的扩展开发也是相当友好，你只需要5步：

1. 申请一个 Visual Studio Team Services Account；
2. 添加一个 Personal access token;
3. 创建一个发布账号，用来发布你的扩展即可(以上操作完全免费)；
4. 使用 VSC 的 Yeoman 脚手架初始化你的扩展项目，之后就是调用官方提供的 API 开发你的扩展即可，就跟开发 Chrome 插件一样；
5. 使用官方发布工具vsce来发布你的扩展到扩展市场，之后别人就可以搜到你的扩展啦！

所以对于前端来说，都是我们熟悉的技术栈，你可以作为一个使用者，也可以转身变成一个开发贡献者！

而对于 Sublime 和 WebStorm 来说就没有这么方便了，当然你也可以用 Python 或者 Java 来贡献插件，不过对于前端还是稍稍有些门槛。如果仅仅是使用的话，WebStrom 确实也很好用，毕竟人家收了钱，而且你最好买一个高配的电脑，否则代码撸多了，会卡到你怀疑人生。

一些实用扩展和技巧

这才是重点。先贡献下自己的部分扩展列表：

各位要是有啥好用的扩展也分享一下呐，大家一起 get 新姿势！(有趣的是新版的 VSC在扩展栏增加了推荐栏，这样大家能更方便的发现一些精品）

强烈推荐的几个插件：

• Complete JSDoc Tags(好的注释不仅对项目有用，对 VSC 的代码智能感知也很有用)
• Dash(如果你购买了 Dash App 的话）
• EditorConfig for VS Code（统一的编辑配置对团队开发很有用）
• ESLint（让 VSC 内置 ESLint）
• Git History（装完输入 git log有惊喜)
• Git Lens（让本就集成了 git 的 VSC 更加强大）
• Path Intellisense(文件路径感知扩展）
• Project Manager(多项目管理神器)
• Settings Sync(将你所有的编辑器配置同步到 gist，省得在新设备上重新捣鼓)

详细的介绍我就懒得写了，大家自己去探索发现吧，一些有用的资源：

• 官方文档 永远是最有用的，或者你也可以选择中文翻译版；
• 这里列出了更多好玩的插件awesome-vscode;

一些小技巧：

• 每次更新 VSC 后，好好看下更新日志，有惊喜；
• 有事没事逛逛扩展市场，有惊喜；
• 有时间仔细看看官方文档，有惊喜；
• 好好研究下控制面板和快捷键，你会发现很多命令不用记；
• VSC 本身是默认 git 工作流的，基于 git 项目进行开发体验更佳，不要让自己的工作区处于非 git repo 文件夹。

总结

不管你以前是用 Sublime 还是 WebStorm，又或者是 Atom 和 Eclipse，现在迁移到 VS Code 都是灰常方便的：

最后，我为什么要安利 VS Code？

毕竟用的人越多，插件市场越丰富，解决问题更快捷，交流起来更愉快嘛！

Decrease font size : "Command -"
//缩小字体

Increase Font Size : "Command ="
//放大字体
 
Delete Line  : " Command D"
//删除整行 
Cut to line end : "Command K"
//从光标位置剪切到最后

Start new line : "Command Enter"
// 创建新的一行

Start new line before current : "Shift Command Enter"
//当前行前新建一行

Add selection for next occurrence : "Shift Command D"
//选取下一个相同词

Reformat code : "Alt Q"
//格式化代码

Move statement down : "Command ⬇️"
//当前行和下一行交换

Move statement up : "Command ⬆️"
//当前行和上一行交换

appearance:

Global variable : bold,italic, (foreground : #FF1F17);
Global function : (foreground : #0000FF);

Decrease font size : "Command -"
//缩小字体

Increase Font Size : "Command ="
//放大字体
 
Delete Line  : " Command D"
//删除整行 
Cut to line end : "Command K"
//从光标位置剪切到最后

Start new line : "Command Enter"
// 创建新的一行

Start new line before current : "Shift Command Enter"
//当前行前新建一行

Add selection for next occurrence : "Shift Command D"
//选取下一个相同词

Reformat code : "Alt Q"
//格式化代码

Move statement down : "Command ⬇️"
//当前行和下一行交换

Move statement up : "Command ⬆️"
//当前行和上一行交换

appearance:

Global variable : bold,italic, (foreground : #FF1F17);
Global function : (foreground : #0000FF);