Open serendipityApe opened 3 years ago
前两天看到鸿蒙之前的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。
刚好今天做的js题是简单实现链式调用
在上面代码中,使用了很多的链式调用。
说起链式调用,可能很多人想到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; } }
你决定上面三种方式从性能方面来说,哪个更好一点?
声明式UI
前两天看到鸿蒙之前的jsUI变成了ArkUI,而新的UI居然是声明式UI。
下面是从鸿蒙文档里复制的一段代码,大家可以简单看一下
可以看到上面的开发方式将会脱离传统的html和css。
刚好今天做的js题是简单实现链式调用
链式调用
在上面代码中,使用了很多的链式调用。
说起链式调用,可能很多人想到jQuery:
今天就让我们来用js实现简单的链式调用吧。 关于链式调用 大家首先想到的一点是:在调用方法之后要return之前的元素,来达到链式调用的目的。
也就是下面这样:
总感觉上面这样写有点不够美观,我们来个好看点的
还能怎么写呢?
你决定上面三种方式从性能方面来说,哪个更好一点?