html superfine + class = Ultrapp ref：https：//qiita.com/tom-u/items/094d712c33f4a5cb9b79

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html superfine + class = Ultrapp ref：https：//qiita.com/tom-u/items/094d712c33f4a5cb9b79相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ultrapp</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module">

import * as superfine from 'https://unpkg.com/superfine?module'
const { h } = superfine

class Ultrapp {
  constructor(container, state, view) {
    const patch = (lastNode => state => {
      lastNode = superfine.patch ? 
        superfine.patch(lastNode, view(state), container) :
        superfine.render(lastNode, view(state), container);
    })();
    const proxy = state => new Proxy(state, {
      set(target, property, value, receiver) {
        target[property] = typeof value == 'object' ? proxy(value) : value;
        patch(p);
        return true;
      }
    });
    const p = proxy(state);
    patch(p);
    return (p => {
      let _test = p;
      if (Object.getPrototypeOf(_test=Object.getPrototypeOf(_test)) === null) {
        var propertyNames = Object.getOwnPropertyNames(p);
      } else {
        var propertyNames = Object.getOwnPropertyNames(Object.getPrototypeOf(p));
      }
      return propertyNames
        .filter(e => e !== 'constructor')
        .reduce((o,c) => ({...o,[c]: function() {
          const r = p[c](...arguments);
          return r === p ? this : r;
        }}), this);
    })(p);
  }
}

class State {
  constructor(count=0) { this.count = count }
  add(by=1) { this.count += by }
  sub(by=1) { this.count -= by }
}

(() => {
  new Ultrapp(s1, new State(), state =>
    h("div", {}, [
      h("h1", {}, state.count),
      h("button", { onclick: () => state.sub() }, "-"),
      h("button", { onclick: () => state.add() }, "+"),
    ])
  )
})();

(() => {
  const display = state => h("h1", {}, state.count)
  const addButton = state => h("button", { onclick: () => state.add() }, "+")
  const subButton = state => h("button", { onclick: () => state.sub() }, "-")
  new Ultrapp(s2, new State(), state =>
    h("div", {}, [display(state), subButton(state), addButton(state)])
  )
})();

(() => {
  new Ultrapp(s3, {
    count: 0,
    add(by=1) { this.count += by },
    sub(by=1) { this.count -= by },
  }, (state) =>
    h("div", {}, [
      h("h1", {}, state.count),
      h("button", { onclick: () => state.sub() }, "-"),
      h("button", { onclick: () => state.add() }, "+"),
    ]) 
  )
})();

</script>
</head>  
<body>
<section id="s1"></section>
<br><hr>
<section id="s2"></section>
<br><hr>
<section id="s3"></section>
</body>
</html>

以上是关于html superfine + class = Ultrapp ref：https：//qiita.com/tom-u/items/094d712c33f4a5cb9b79的主要内容，如果未能解决你的问题，请参考以下文章

java关键字——superfinal

javascript Superfineを使用したMVCの例ref：https：//qiita.com/tom-u/items/5fef560a906e105fdaa5

html点击标签后插入 class

html中，id,name,class之间的有啥区别？

class在HTML里面有啥作用

[HTML问题] 标签中的class如何理解？