blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
今天在开发 https://github.com/lmk123/t-rex-runner 的过程中，深扒了一下恐龙游戏的源码，居然看到下面这段代码： ``` js Runner.prototype = { // ... startListening: function() { document.addEventListener( 'keydown', this ); // ... } }; ``` 看到这里我惊呆了。一直以来，我都知道 `addEventListener` 的第二个参数必须是一个函数，但是，上面这段代码直接将 `this` 作为参数，并且代码没有报错、游戏运行正常！ 这时，我注意到 `startListening` 方法上面还有一个...
先简述一下 [babel-polyfill](http://babeljs.io/docs/usage/polyfill/) 与 [transform-runtime](http://babeljs.io/docs/plugins/transform-runtime/) 是做什么的。 目前浏览器对 [ES2015](http://babeljs.io/docs/learn-es2015/) 语法的支持都不太好，所以当我们需要使用 `Promise`、`Set`、`Map` 等功能时就需要 babel-polyfill 来提供。 在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 `_extend`。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。 所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。...
## 定义静态方法与实例方法 mongoose 可以在 Schema 上定义 Model 的静态方法与 Document 的实例方法，但 TypeScript 是无法识别到的。 例如下面的代码： ```js const { Schema, model } = require('mongoose') const userSchema = new Schema({ name: String, pwd: String...
算法之美
现在是凌晨三点三十八分 :) 本来我一点钟的时候是准备睡的，然而正准备关灯的时候，我一不小心瞟到了角落的《数据结构与算法 JavaScript 描述》（下面简称《算法》）。 这本书刚买回来时，我简单翻了一下前两章，然后就后悔买这本书了：书上讲的都是很基础的内容，第一章完全就是给 JavaScript 新手看的，第二章讲了 Array 的一些方法，而这些内容我早在《JavaScript 权威指南》里面就看过了。 这也是这本书一直被我放在角落的原因。 为了避免自己去睡觉（明明很困但就是不想睡），我翻了翻这本书，发现第二章有四个习题，粗略看了看也不难，正好拿来清醒一下大脑。 前三题没什么难度，轻松完成。但是第四题却让我意识到，这本书可能没我想像中的那么简单： > 创建这样一个对象，它将字母存储在数组中，并且用一个方法可以将字母连在一起，显示成一个单词。 我先试着理解了一下题目。它似乎是要实现这样一个函数，我们假设它叫 `word`： ``` js word( 'o', 'n' ); // 输出单词 no word( 's' ,...
最近有个需求，想把 echarts 跑在服务端生成图表图片。echarts 支持一个没有公开的方法，可以把 [node-canvas](https://github.com/Automattic/node-canvas) 作为浏览器端 `Canvas` 对象的替代： ```js // 这里用的是 [email protected]，不是 [email protected] const Canvas = require('canvas') const echarts = require('echarts') echarts.setCanvasCreator(() => new Canvas(32, 32)) ``` 至此，echarts 的相关配置就完成了，但是接下来就会遇到 node-canvas...
现在有一个业务场景如下： 有三个站点，分别是 a.mydomain.com、b.mydomain.com 和 c.mydomain.com，其中 A 和 B 都会将 C 用 [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) 嵌入进来，现在有一个需求是当 C 被 A 嵌入的时候要执行一些逻辑。 从直觉上来看，C 只需要根据域名判断一下就好了： ```js if (top.location.href === 'a.mydomain.com') { // 站点 A } else...
## 2016.12.7 日更新 现在可以使用 CSS 中的 `all` 属性解决这个问题，见 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/all)，但这么做还得阻止宿主页面上注册的事件，例如 `document.addEventListener('click', ...)`。 综合考虑下来，我还是觉得用 iframe 比较好。 ----------------------------------- 对很多前端开发者来说，样式冲突是大部分人都会面对的问题。 ## 何为样式冲突？ 以我的[划词翻译](https://github.com/lmk123/crx-selection-translate)为例（我知道它最近出镜次数太多），我需要在每一个用户打开的网页里插入一段 HTML 用来显示翻译结果： ``` js const box = document.createElement( 'div' ); box.textContent...
今天在看 [mongoose 的文档](http://mongoosejs.com/)的时候，文档上推荐关闭 `autoIndex` 这个选项，原文如下： > When your application starts up, Mongoose automatically calls `createIndex` for each defined index in your schema...While nice for development, it is recommended this behavior...
我有一个项目用到了 [canvas-prebuilt](https://www.npmjs.com/package/canvas-prebuilt)，今天在同事的电脑上安装它时报错了： ``` $ npm install canvas-prebuilt ... > [email protected] install node_modules/canvas-prebuilt > node-pre-gyp install Fail to connect to 192.30.253.113:443 connection timed out ... ``` 在我自己的电脑上安装这个模块是没有问题的，所以一开始我以为是网络不稳定造成的，但同事说从早上到晚上试了好几次都是同样的错误，所以……  我先尝试在自己电脑上 ping 了一下这个...
最近开发一个 Node.js 应用时初次接触到了 Docker，用到了不少 Docker 的命令，这里记录一下方便自己查看。 这篇文章不会详细解释每个命令是做什么的，权当作一个入门 Docker 的提纲吧。 假设我们有一个如下几行代码的 Node.js 应用： ```js require('http') .createServer((req, res) => { res.end('hello docker') }) .listen(8080) ``` ### 一、编写 Dockerfile 首先，将应用部署在 Docker 中的第一步就是为它编写一个 [Dockerfile](https://docs.docker.com/engine/reference/builder/)：...