Web组件代替React-另一尝试

• DOM是一种状态。由于我们没有框架，因此我们立即忘记了功能主义，而回到了命令式OOP。Web组件是长期存在的DOM节点，它们封装了它们的状态并具有公共API。它们不是重新创建的，而是已更改。因此，我们不仅应将DOM视为一种表示形式，还应将其视为业务对象的存储库，因此，我们需要考虑到组件交互的便利性来构建组件的层次结构。
• 组件之间的相互作用。组件可以通过直接调用，回调交换或通过上/下用户DOM事件进行交互。后一种方法是最可取的，因为它减少了相互啮合（耦合），并对键的图进行排序（请参见下面的示例）。
  DOM事件仅在层次结构中起作用-它们可以从祖先链的底部向上弹出，或向下传播给所有后代。在其他情况下，标准的浏览器API用于寻址组件：document.querySelector（'page-home'），某些组件可以在窗口中注册自己并在全局范围内使用：APP.route（'page-login'）。
• 内部风格。不使用Shadow DOM，因此组件继承全局样式，但也可以拥有自己的样式。由于<style scoped>不太可能在不久的将来实现，因此您必须使用组件名称前缀来声明内部样式，但这是沉默寡言的，并且效果很好（请参见下面的示例）。
• 与HTML / DOM的交互。由于DOM是一种状态，因此数据源是HTML元素本身的值（值，已检查，contenteditable的innerHTML =“ true”等）。不需要附加的JS变量，为了方便访问表单值-我们只需创建getters / setters并将其添加到祖先对象（为此需要一个小型库）。现在寻址形式值与寻址类变量没有什么不同，例如，this.pass是输入到当前组件的<input>子代中的密码值。因此，既不需要虚拟DOM，也不需要双向绑定，也不需要在重新打开表单时重画表单，并且在导航期间会保存输入表单的数据，除非您专门清除它们。
• 导航。页面组件位于<main>容器中，一旦创建，它们不会被删除，而只是被隐藏。这使您可以使用location.hash来实现导航，并且标准的浏览器按钮来回可正常使用。导航到现有组件时，将调用onRoute（）方法，您可以在其中更新数据。

应用结构

• 可以通过window.APP访问的根组件<app-app>，其中包含页面路由器和全局功能；
• 具有上下文按钮的面板（我没有将它们放入单独的组件中，而是将它们作为<app-app>布局的一部分以简化事件处理）；
• 下拉菜单（单独的组件）；
• 页面组件将添加到的<main>容器：打开时的<page-home>，<page-login>，<page-work>。

• 授权状态和当前用户名存储在<app-app>组件中，但通过弹出事件来自<page-login>组件。
• 计时器在<app-app>组件中打勾，该组件通过仅在<page-work>的后代中捕获的广播事件向下发送当前值。

实作

import wcmixin from './WcMixin.js'

const me = 'page-login'
customElements.define(me, class extends HTMLElement {
   _but = null

   connectedCallback() {
      this.innerHTML = `
         <style scoped>
            ${me} {
               height: 90%; width: 100%;
               display: flex; flex-direction: column;
               justify-content: center; align-items: center;
            }
            ${me} input { width: 60%; }
         </style>
         <input w-id='userInp/user' placeholder='user'/> 
         <input w-id='passInp/pass' type='password' placeholder='password'/>
      `
      wcmixin(this)

      this.userInp.oninput = (ev) => {
         this.bubbleEvent('login-change', {logged: false, user: this.user})
      }

      this.passInp.onkeypress = (ev) => {
         if (ev.key === 'Enter') this.login()
      }
   }

   onRoute() {
      this.userInp.focus()
      this._but = document.createElement('button')
      this._but.innerHTML = 'Log in<br>⇒'
      this._but.onclick = () => this.login()
      this.bubbleEvent('set-buts', { custom: [this._but] })
   }

   async login() {
      APP.msg = 'Authorization...'
      this._but.disabled = true
      setTimeout(() => {
         this._but.disabled = false
         if (this.user) {
            this.bubbleEvent('login-change', {logged: true, user: this.user})
            APP.route('page-work')
         } else {
            APP.msg = 'Empty user !'
            this.userInp.focus()
         }
      }, 1500)
   }
})

import wcmixin from './WcMixin.js'

const me = 'page-work'
customElements.define(me, class extends HTMLElement {

   connectedCallback() {
      this.innerHTML = `
         <p w-id='/msg'>Enter text:</p>
         <p w-id='textDiv/text' contenteditable='true'>1)<br>2)<br>3)</p>
      `
      wcmixin(this)

      this.addEventListener('notify-timer', (ev) => {
         this.msg = `Enter text (elapsed ${ev.val}s):`
      })
   }

   async onRoute() {
      this.textDiv.focus()
      document.execCommand('selectAll',false,null)
      const but = document.createElement('button')
      but.innerHTML = 'Done<br>⇒'
      but.onclick = () => alert(this.text)
      this.bubbleEvent('set-buts', { custom: [but] })
   }
})

setInterval(() => {
   this._elapsed += 1
   this.drownEvent('notify-timer', this._elapsed)
}, 1000)

异议和建议