Blog

Blog

PHODAL

JavaScript 元编程之ES6 Proxy

在计划着写一个NLP程序的时候,发现Firefox上有一个方法叫__noSuchMethod__,看上去就是元编程的味道,接着继续往下搜索的时候发现,利用ES6的Proxy可以实现元编程。

而这个方法已经在Firefox内置了,Firefox上也可以使用Proxy,但是在现在的这个版本的Chrome中,因为安全原因将Proxy去掉了,这似乎意味着,我暂时用不了元编程这一特性。blabla,先做个简单的笔记吧,留着以后用。

注: 这个在《You Don't Know JS: ES6 & Beyond》中的第七章也提到过。现在的中文版,只出到第6章,还没有这一章。先让我们简单地来过一下吧。。

JavaScript Proxy

Proxy对象被用于定义自定义基本操作的行为(如属性查找、分配、枚举、函数调用等),在Firefox的定义中有一共有14个属性。

让我们来看一个基本的示例,当属性的名字不在列表的时候,返回37.

var handler = {
    get: function(target, name){
        return name in target?
            target[name] :
            37;
    }
};

直接用官方给的示例

var p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37

所以相对于nosuchmethod,这个就是我需要的nosuchvariable,而这种代理模式,和IOC有点像,让我们稍后试试IOC是否能解决我当前的问题吧。。。

JavaScript元编程之Proxy实现

接着看到了一个Pipe的示例: Meta-programming JavaScript Using Proxies

var pipe = (function () {

    var pipe;

    return function (value) {
        pipe = [];
        return Object.create(Proxy.create({
            get: function (pipeObject, fnName) {
                if (fnName == "get")
                    return pipe.reduce(function (val, fn) { return fn(val); }, value);

                pipe.push(window[fnName]);
                return pipeObject;
            }
        }));
    }
}());

var double        = function (n) { return n*2 },  
    pow           = function (n) { return n*n },
    reverseInt    = function (n) { return n.toString().split('').reverse().join('')|0 };


var pipedExample = pipe(3) . double . pow . reverseInt . get  
console.log(pipedExample); //63

看上去,这个比上面那个更加完美了。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签