山维空间 – 肉山的生活记录和技术分享

特色

OpenResty Inc 招聘前端工程师

我们 OpenResty Inc 的中国大陆子公司诚邀前端工程师加入。希望能和对前端技术有激情，有想法，有追求的年轻人一起构建优美而强大的各种 Web 应用。不要求非得是大牛，但需要有强烈的求知欲和强大的学习能力。可以致力于 Vue、d3.js/SVG、three.js/WebGL、WebExtensions、CodeMirror 等各种技术栈的创造性的前端工作。拥有一定的美感和品味。不拘一格，喜欢挑战。曾做过酷炫的前端应用可以展示给我们。我们不纠结学历、学校和公司工作经历。远程工作模式，工作地点随意。我们会签订正式的劳动合同，会提供五险一金。会提供丰厚的美国公司的期权。对于还在学校的同学，也提供兼职职位和毕业后的转正途径（如果能胜任工作的话）。欢迎有兴趣的朋友投简历到 talents@openresty.com 邮箱，记得附上自己最酷的作品哦。

发给我也可以 meathill@openresty.com。

如何加入一家全职远程的公司

自从我厂开启招聘之后，陆续收到一些简历。除去一些明显不靠谱的，也有不少同学的简历看起来很好，但明显只是为“远程”而来，满脑子都惦记着远程之后坐在海边一边打望比基尼美女，一边啜饮鲜榨果汁，一边写代码的生活。却没有想过自己能给公司带来什么。

没错，我也曾这么幻想着，加入了我厂。加入之后的工作生活虽然称不上幻灭，但绝对和预期不同。所以今天，我决定写点什么，让大家了解全职远程的真实状态，同时理解远程的需求，以便更好的抉择今后的职业道路。

以下的内容不仅包含远程，还有“小型创业公司”。我还没见过中型或更大的“全员远程”公司，所以姑且认为这种组织形式和大多数老板的管理水平，暂时无法负担更大规模的协作吧。

继续阅读

CodeMirror 笔记

这篇文章用来记录使用 CodeMirror 时的一些心得。

这篇文章用来记录使用 CodeMirror 时的一些心得。

继续阅读

洗澡

这篇文章属于泡温泉时的胡思乱想，没有技术内容。

继续阅读

使用 Proxy 添加魔术属性/方法

使用 Proxy 实现魔术属性/方法。

最近在开发我厂的 QA 工具时，遇到一个问题。我需要模拟 Puppeteer 的所有方法，以便兼容原先的 JS 文件。Puppeteer 提供一个 .asElement() 方法，可以把函数执行结果转换成一个伪 DOM Element（如果函数返回的就是 DOM Element 的话），然后我们就可以在 Node.js 里调用原本属于 DOM 的方法，比如 .focus()。Pupputeer 会替我们完成映射和函数调用，并且返回结果。

对于大部分对象来说，我只要模拟对应的属性、方法，然后用自己的函数实现功能即可。但是 DOM Element 有上百个属性和方法，手工实现一遍实在太低效了。必须寻找其它途径。

好在我之前看过 Proxy 的介绍，赶紧翻出文档和书又复习两遍，就大概知道怎么做了。

Proxy 类如其名，可以“代理”对某个对象的访问。你可以把他理解成明星的经纪人。明星成名之前都是自己处理一切事务，有了经纪人之后，大部分事务就由经纪人负责，但仍然有一些事情需要明星自己处理。

Proxy 的用法很简单，实例化时，把要代理的对象传进去，定义一下代理方法就好。

const obj = { name: 'meathill' };
new Proxy(obj, {
  get(target, property) {
    // 如果对象中有要求的属性或方法，则返回
    if (property in target) {
      return target[property];
    }
    // 没有的话，进行其它处理
    return 'hello';
  }
});

obj.name // 'meathill'
obj.age // 'hello'
obj.sex // 'hello'

接下来，比如我们访问 obj.foo，那么代理就会生效，它会先检查 obj，如果这个对象上本来就有 foo 属性，就会返回；如果没有，则会调用我们定义的方法来处理。

如此一来，我们可以定义一个 VElement 类，这个类可以实现一些特殊方法，比如 .type(str) 输入，.click() 点击等；然后用 Proxy 代理其它方法和属性，让对象进入插件 Context 执行。

Proxy 还有其它方法也很有用，尤其是 get 对应的 set ，以后再介绍。大家可以自己抽空研究下。