03月26, 2016

ES7 Decorator 与函数变换

ES7 Decorator 与函数变换

在ES7的众多新特性中,我个人最喜欢的特性除了广为人知的 async/await 外,就数Yehuda Katz提出的decorator

decorator 是什么?

decorator 的概念来源于 Python 的decorator,也类似于 Java 的 Annotation。它实际上是一个 wrapper ,作用于一个函数或者对象,对目标函数或对象进行一系列变换,然后返回一个新的函数或对象。

函数变换与过程抽象

我们知道,JavaScript的函数可以作为参数和返回值,因此我们可以通过函数变换来实现过程抽象,举一个例子:

function add(x, y){
    return x + y;
}

function mul(x, y){
    return x * y;
}

function concat(arr1, arr2){
    return arr1.concat(arr2);
}

如上面的代码所示,我们现在有3个简单的函数,它们分别实现加法、乘法、数组的连接操作。那么现在,如果我们需要的不仅仅是两个操作数的加法、乘法和数组操作,而是支持多个数进行操作,我们该怎么办呢?

第一种办法,我们自然是对三个函数分别进行改写:

function add_many(...args){
    return args.reduce((a,b) => a+b));
}

function mul_many(...args){
    return args.reduce((a,b) => a*b));
}

function concat(arr1, arr2){
    return args.reduce((a,b) => a.concat(b));
}

好在三个函数本身并不复杂,因此我们修改起来不费多少力气。但是,显然,我们有更“聪明”的做法:

function reducer(target){
    return (...args) => args.reduce(target);
}

let add_many = reducer(add);
let mul_many = reducer(mul);
let concat_many = reducer(concat);

如上面代码所示,我们实现一个 reducer 函数,它可以对任意两个参数计算的函数进行变换,返回一个支持多参数的函数,这样我们对需要变换的函数进行变换就可以了。

我们再看一个例子:

function multicast(target){
  return function(list, ...rest) {
    if(Array.isArray(list)){
      return list.map(item => target.apply(this, [item].concat(rest)));
    }else{
      let item = list;
      return target.apply(this, [item].concat(rest));
    }
  }
}

class Collection {
  constructor(){
    this.items = [];
  }
  append(item){
    this.items.push(item);
    return this.items.slice(-1)[0];
  }
}

var c = new Collection();
c.append = multicast(c.append);
c.append([1,2,3]);
console.log(c.items[1]); //2

在这个例子里,我们实现一个叫做 multicast 的函数变换,它可以将一个函数的第一个参数允许对数组进行批量操作,经过变换的函数,如果第一个参数传入数组,那么它将这个参数中的元素依次迭代执行目标函数,最后将结果作为一个数组返回。

这个变换是比较有用处的,因为它可以用来批量操作DOM元素

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
function multicast(target){
  return function(list, ...rest) {
    if(Array.isArray(list)){
      return list.map(item => target.apply(this, [item].concat(rest)));
    }else{
      let item = list;
      return target.apply(this, [item].concat(rest));
    }
  }
}

function setColor(el, color){
    return el.style.color = color;
}

var setColorMany = multicast(setColor);

var els = document.querySelectorAll("ul>li:nth-child(2n+1)");
console.log(els);
setColorMany(Array.from(els), "red");

使用 decorator 来实现函数变换

ES7 decorator 是一种语法糖,它可以用更优雅的方式实现同样的函数变换

我们把上面的例子稍微改一下:

function multicast(target, key, descriptor){
  let func = target[key];
  descriptor.value = function(list, ...rest) {
    if(Array.isArray(list)){
      return list.map(item => func.apply(this, [item].concat(rest)));
    }else{
      let item = list;
      return func.apply(this, [item].concat(rest));
    }
  }
  return descriptor;
}

class Collection {
  constructor(){
    this.items = [];
  }

  @multicast
  append(item){
    this.items.push(item);
    return this.items.slice(-1)[0];    
  }
}

var c = new Collection();
c.append([1,2,3]);
console.log(c.items[1]);

上面的代码在 babel stage-1 使用 decorators 插件的情况下可以正确编译和执行。我们看到有了 decorator, 我们不用再手工调用函数变换的 wrapper,可以直接用 @wrapper 的方式来修饰一个对象方法了。

一个 decorator 是一个函数,它有三个参数,第一个是被 decorator 修饰的对象,第二个是属性名,第三个参数是 Object.defineProperty 的 descriptor,有了这些参数,我们就可以在定义时,对它进行各种“修饰”。再看一个例子:

function deprecate(target, key, descriptor){
    console.log("[Function " + key + "] has been deprecated.");
    return descriptor;
}

class MyClass {
    @deprecate
    old_method(){
        console.log("I\"m deprecated"); 
    }
}

var a = new MyClass();
a.old_method();

decorator 可以带参数,方法是在 decorator 函数定义的时候嵌套一层:

function delay(ms){
  return function(target, key, descriptor){
    let func = target[key];
    descriptor.value = function(...args){
      return setTimeout(function(){
        func.apply(target, args);
      }, ms);
    }
  }
}

class MyClass {
  @deprecate
  old_method(){
    console.log("I\"m deprecated"); 
  }
  @delay(3000)
  new_method(){
    console.log("I\"m called after 3000ms");
  }
}

var a = new MyClass();
a.new_method();

可以用多个 decorator 修饰一个方法:

function spread(target, key, descriptor){
  let func = target[key];

  target[key] = function(...args){
    return func.call(this, args);
  }

  return target[key];
}

function multicast(target, key, descriptor){
  let func = target[key];

  target[key] = function(list, ...rest) {
    if(Array.isArray(list)){
      return list.map(item => func.apply(this, [item].concat(rest)));
    }else{
      let item = list;
      return func.apply(this, [item].concat(rest));
    }
  }
  return target[key];
}

class Collection {
  constructor(){
    this.items = [];
  }

  @spread
  @multicast
  append(item){
    this.items.push(item);
    return this.items.slice(-1)[0];    
  }
}

var c = new Collection();
c.append(1,2,3);
console.log(c.items[1]);

decorator 与函数变换的比较

与一般的函数变换相比,decorator 有更优雅的语法,但是 decorator 目前不能针对一般的函数进行变换,只能针对类的方法,这一块不如普通函数变换灵活。

函数变换: promisify

let request = require("request");

function promisify(func){
  return function(...args){    
    return new Promise((resolve, reject) => {
      args.push(function(err, ...args){
        if(!err){
          resolve(args);
        }else{
          reject(err);
        }
      });
      func.apply(this, args);
    });
  }
}

var getData = promisify(request);

getData("http://www.baidu.com").then(function(data){
  console.log(data);
});

使用 decorator

"use strict"

let request = require("request");

function promisify(target, key, descriptor){
  var func = target[key];

  target[key] = function(...args){    
    return new Promise((resolve, reject) => {
      args.push(function(err, ...args){
        if(!err){
          resolve(args);
        }else{
          reject(arr);
        }
      });
      func.apply(this, args);
    });
  }

  return target[key];
}

class Site{
  constructor(url){
    this.url = url;
  }
  @promisify
  getData(callback){
    request(this.url, callback);
  }
}

var baidu = new Site("http://www.baidu.com");

baidu.getData().then(function(data){
  console.log(data);
});

decorator 可以操作 Object.defineProperty 的 descriptor,因此可以用来做一些函数变换范围之外的事情:

function readonly(target, key, descriptor){
  descriptor.writable = false;
  return descriptor;
} 

class Foo{
  @readonly
  bar(){
    console.log(1);
  }
}

var foo = new Foo();
foo.bar();
foo.bar = 2;    //Error
foo.bar();

decorator 的其他用途

decorator 不仅能修饰函数,还可以修饰类,我们对上面的代码进行修改:

"use strict"

let request = require("request");

function promisify(target, key, descriptor){
  var func = target[key];

  target[key] = function(...args){    
    return new Promise((resolve, reject) => {
      args.push(function(err, ...args){
        if(!err){
          resolve(args);
        }else{
          reject(arr);
        }
      });
      func.apply(this, args);
    });
  }

  return target[key];
}

function url(url){
  return function(Site){
    Site.prototype.url = url;
    return Site;
  }
}

class Site{
  @promisify
  getData(callback){
    request(this.url, callback);
  }
}

@url("http://www.baidu.com")
class Baidu extends Site{}

var baidu = new Baidu();
console.log(baidu.url);

baidu.getData().then(function(data){
  console.log(data);
});

从函数变换到 decorator

从前面的比较中我们可以看出函数变换decorator 可以相互转换,我们写一个一般的方法来做转换:

function wrapperToDecorate(wrapper){
  if(wrapper.length <= 1){
    return function(target, key, descriptor){
      target[key] = wrapper.call(this, target[key]);
      return target[key];
    }
  }else{
    return function(...args){
      return function(target, key, descriptor){
        target[key] = wrapper.apply(this, args.concat([target[key]]));
        return target[key];
      }
    }
  }
}

这样我们就可以将函数变换转成 decorator

"use strict"

let request = require("request");

function wrapperToDecorate(wrapper){
  if(wrapper.length <= 1){
    return function(target, key, descriptor){
      target[key] = wrapper.call(this, target[key]);
      return target[key];
    }
  }else{
    return function(...args){
      return function(target, key, descriptor){
        target[key] = wrapper.apply(this, args.concat([target[key]]));
        return target[key];
      }
    }
  }
}

function promisify(func){
  return function(...args){    
    return new Promise((resolve, reject) => {
      args.push(function(err, ...args){
        if(!err){
          resolve(args);
        }else{
          reject(arr);
        }
      });
      func.apply(this, args);
    });
  }
}

promisify = wrapperToDecorator(promisify);

function url(url){
  return function(Site){
    Site.prototype.url = url;
    return Site;
  }
}

class Site{
  @promisify
  getData(callback){
    request(this.url, callback);
  }
}

@url("http://www.baidu.com")
class Baidu extends Site{}

var baidu = new Baidu();
console.log(baidu.url);

baidu.getData().then(function(data){
  console.log(data);
});

总结

decorator函数变换 都拥有不修改函数代码,调整和改变函数性质的能力。 decorator 的语法更加优雅,且能作用于 class 和 descriptor,而函数变换不仅仅对类有作用,还可以作用域普通函数,它们两者之间也可以通过 wrapperToDecorator 方法进行自由的转换。

我写了一个基础库,core-wrappers,包含了常用的函数变换,以及将这些变换转换成decorator的方法,这些方法不仅仅是存在于理论上,大部分方法在实际项目中,也是非常有用的。当年QWrap的核心也是基于函数变换,因此能将简单的函数变换为像jQuery一样十分灵活的API。

总之,两者都是JavaScript作为动态语言,在过程抽象和函数式编程方面的能力的体现,用好它们,可以写出简单易懂且功能强大的代码来。

本文链接:https://www.h5jun.com/post/decorator-functional.html

-- EOF --

Comments