js链式调用

声明式UI

前两天看到鸿蒙之前的jsUI变成了ArkUI，而新的UI居然是声明式UI。

下面是从鸿蒙文档里复制的一段代码，大家可以简单看一下

@Entry
@Component
struct MyComponent {
    build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
            Text('Hello World')
                .fontSize(26)
                .fontWeight(500)
        }
        .width('100%')
        .height('100%')
    }
}
//https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-components-0000001192705717

可以看到上面的开发方式将会脱离传统的html和css。

链式调用

在上面代码中，使用了很多的链式调用。

说起链式调用，可能很多人想到jQuery:

$('#text')
  .css('fontWeight', '500')
  .css('fontSize', '26')

今天就让我们来用js实现简单的链式调用吧。
关于链式调用 大家首先想到的一点是：在调用方法之后要return之前的元素，来达到链式调用的目的。

也就是下面这样:

function $(el) {
  el.css=function (propertyName,value){
    el.style[propertyName]=value;
    return el;
    //这里的this指向el,所有也可以为return this;
  }
  return el;
  //思考一下：这里能return this吗？
}

总感觉上面这样写有点不够美观，我们来个好看点的

//这种方式没有返回el对象，而是运用了闭包去调用el
function $(el) {
  return {
    css: function(propertyName, value) {
      el.style[propertyName] = value;
      return this;
      //思考一下这里能写成 return el 吗？
    }
  }
}

还能怎么写呢？

function $(el) {
  return new Wrapper(el);
}

class Wrapper{
  constructor(el){
    this.el=el;
  }
  css(propertyName,value){
    this.el.style[propertyName]=value;
    return this;
  }
}

你决定上面三种方式从性能方面来说，哪个更好一点？