blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
迫于 GitHub 越来越难访问了，我开通了微信公众号，目前正在慢慢的将博客的内容搬运过去，未来文章会优先发布在公众号里，然后同步在 GitHub 中，欢迎关注： 如果看不到图片，可以在微信里搜索 `DoneIsBetterThanPerfect` 关注。 # 正文开始 在浏览器中，要选中一段文本有三种方式： - 用鼠标拖动选择想要选中的文本 - 快速单击一个单词两次，浏览器会自动选中单词 - 快速单击一个单词三次，浏览器会自动选中这个单词所在的整个段落 在我开发[划词翻译](https://github.com/Selection-Translator/crx-selection-translate)的时候，我需要在用户选中了文本之后弹出一个窗口，显示这段文本的翻译结果。实现的方式很简单，只需要监听 `mouseup` 事件就可以了： ```js document.addEventListener('mouseup', () => { if (window.getSelection().toString().trim()) { console.log('弹出翻译窗口') }...
最近将划词翻译发布到了火狐里，记录一下遇到的三个问题。截止目前，火狐浏览器的最新版本是 **v69.0.3**。 ### manifest.json 中的 incognito 不支持 `split` 目前，火狐浏览器是不支持在隐身模式下使用 `split` 方式的，见 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/incognito ### CSS 中文件的引用方式不同 在 Chrome 扩展中，插入到内容脚本中的 CSS 如果要引用扩展里的文件（图片、字体等），需要使用 `chrome-extension://[PACKAGE ID]/[PATH TO FILE]` 这种绝对地址的形式（见 [Chrome 文档](https://developer.chrome.com/extensions/manifest/web_accessible_resources)），Chrome 会把相对路径基于当前内容脚本所在的网址来解析；但在火狐浏览器中，内容脚本的 CSS 是相对于这个...
最近在面试候选人的时候，我一定会问一个问题：a.com 里的 JavaScript 发起了一次获取数据的请求到 b.com 的接口，那么这次请求浏览器携带的是 a.com 的 Cookie 还是 b.com 的 Cookie？大部分人都回答了 a.com，但这是错误的——浏览器携带的永远是请求接收方的 Cookie，不然的话 b.com 岂不是获取了 a.com 所有的 Cookie 数据？ 无独有偶，今天刚好关注到一个消息，苹果 WebKit 博客发表了一篇题为[《Full Third-Party Cookie Blocking and More》](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)的文章，正式宣布将在 iOS、iPad...
在上一篇[《使用 root 用户登陆到腾讯云的主机》](https://github.com/lmk123/blog/issues/64)的结尾，我提到在特定网络环境下通过 ssh 访问服务器的连接会被屏蔽，这两天时不时的就会琢磨怎么解决这个问题，今天突然想到，ssh 能不能走代理访问到服务器？ 谷歌了一番，发现真的可以…… 当然，这样做的前提是得自备一个梯子。我在 macOS 用的是 [ShadowsocksX-NG](https://github.com/shadowsocks/ShadowsocksX-NG)，在偏好设置里可以看到它在本地的 1086 端口开启了 Socks5 代理，那么通过代理访问服务器可以这么做： ```bash # 这里假设你已经在 ~/.ssh/config 为 myserver 配置了连接信息 $ ssh myserver -o "ProxyCommand=nc -X 5 -x...
关于 NPAPI 的简介请移步[维基百科](https://en.wikipedia.org/wiki/NPAPI)（英文）。文章中开发的 Chrome App 源码在[这里](https://github.com/lmk123/chrome-app-scales)。 前段时间，[Google Chrome 禁用了 NPAPI 插件](https://support.google.com/chrome/answer/6213033?hl=zh-Hans)，导致我们公司里原本用 Java 写的读取电子秤读数的浏览器插件失效了，而目前谷歌官方推荐的替代方案是 [Native Client](https://developer.chrome.com/native-client)，当然对于我这个前端来说，C/C++ 的东西一时半会儿搞不定。 然后我注意到，[Chrome Apps](https://developer.chrome.com/apps/about_apps) 能访问到系统的底层硬件服务，比如[串行端口](https://developer.chrome.com/apps/app_serial)、[USB](https://developer.chrome.com/apps/app_usb)、[蓝牙](https://developer.chrome.com/apps/app_bluetooth)和[网络连接](https://developer.chrome.com/apps/app_network)，而公司的电子秤是使用串行端口连接到电脑的。 于是我开始考虑使用 Chrome Apps 替代 NPAPI 的可行性了。 假设我能正常使用 Chrome Apps 读取到电子秤的读数，那还需要一种方式，能让普通网页获取到 Chrome...
WebStorm 很早就支持了 `*.scss` 或 `*.less` 文件的语法高亮，但偶尔我们会需要在 HTML 文件的 `` 标签内写 SCSS 或 Less 的语法（例如使用 Vue.js 的朋友应该会需要在 `*.vue` 文件的 `` 标签内写 SCSS），其实 WebStorm 也是支持的，但是官方文档上好像并没有提及。 ## WebStorm 2019.1 及之后的版本 **在 `` 上加...
## 不要将常量或跟模版渲染无关的数据放在 `data` 里 之前在开发一个地图应用的时候，需要从接口获取将近 1MB 的点位数据，然后利用 canvas 渲染在地图上，在实际测试中，地图渲染变得非常慢，但发现慢的原因是因为点位数据被放在了 `data` 里。 这是因为 Vue 为了能监测到数据的变化，所以深度遍历了 `data` 里的每个属性，将它们变成了 getter/setter，这个 1MB 大小的点位数据其实并不会被 Vue 的模版消费，只是需要挂载在组件实例上供其它方法访问。 另外，我们的应用里其实总会有一些不会变的常量，例如一些只需要设置一次的配置，这些配置可能会显示在模版中，但之后都不会再变化了。 以上两种场景都可以通过直接给组件实例添加属性的方式，避免被 Vue 处理成 getter/setter： ```html 在模版里还是能读到：{{ CONFIG }}...
用 Vue.js 和 React 的同学都知道，在写 v-for 的时候一定要加 key，因为用唯一标识作为 key 后能带来两个好处： 1. 列表更新的性能会更好，见[为什么使用 v-for 时必须添加唯一的 key？- 掘金](https://juejin.im/post/5aae19aa6fb9a028d4445d1a) 2. 避免了循环体中有依赖子组件状态或临时 DOM 状态 （例如表单输入框） 时导致的渲染问题，见 [Vue 2.0 中 v-for 里面的 “就地复用” 策略是什么？ -...
第一次通读 Vue.js 的文档的时候是 v1.0.12。现在 Vue.js 已经 v1.0.24，虽然仍然没有到 v1.1，但添加了很多新的功能，所以今天花了点时间重新通读了一遍文档，顺便将其中容易遗漏的细节记录一下。 ## 教程 ### [Class 与 Style 绑定－绑定 HTML Class－数组语法](http://vuejs.org.cn/guide/class-and-style.html#数组语法) > 在 1.0.19+ 中，可以在数组语法中使用对象语法： > > ``` html > > ``` ### [方法与事件处理器...
三年前我刚入职的时候接手了一个移动端的项目，当时代码已经很难维护了，构建工具用的是 [Browserify](http://browserify.org/)，不是当时正火热的 Webpack，而且大部分依赖的版本也很老旧了，所以接手这个项目之后，我做的第一件事就是重写了这个项目。 那时，Framework7 还是 v1 版本，还没有对 Vue 做支持，所以我写了一个 Vue 组件版本的 Framework7（见 [lmk123/vue-framework7](https://github.com/lmk123/vue-framework7)）；另外，当时在使用 Vuejs 官方的 [Webpack 模版](https://github.com/vuejs-templates/webpack)时遇到不少问题，提了 issue 给官方但迟迟没有修复，所以我又自己整理了一套 Webpack + Vue 的项目模版（见 [lmk123/webpack-boilerplate](https://github.com/lmk123/webpack-boilerplate)）。 这两个项目一直用到了现在，但在这三年的时间里，Webpack 已经更新到 v4 了，Vue CLI v3...