Component strong decoupling

  • UI components

    • Disconnect from business and computing logic
    • Encapsulate only specific UI styles and actions
    • Individual independence

  • Functional components

    • The logic and calculation required for specific application
    • Combined together
    • Group synthesis

  • As shown in the figure, a single TAB can be used as a UI component, combining UI components with logical operations and calculations into a functional component

Plan be born

Technology selection

  • Web Component – Browser native support (no framework dependency, no destructive injection in front-end engineering)

application

  • Paste instance first: layout component used to place label and input

  • UI component code

    // html <div class="cpt-item"> <div class="label"> <slot name="label"></slot> </div> <div class="operate-area"> <slot></slot> </div> </div> <style> .cpt-item { display: grid; grid-template-columns: var(--label-width, 200px) auto; grid-column-gap: 1em; } .label{ display: flex; flex-direction: row-reverse; } </style> // js import html from './item.tmpl.html'; export default function InjectItem() { customElements.define('cpt-item', class extends HTMLElement { connectedCallback() { this.shadow = this.attachShadow({ mode: 'closed' }); this.shadow.innerHTML = html; }})}Copy the code

  • Components used

    <div className="contain-unit"> <cpt-item class="unit"> <label slot="label" > </label> <input type="text" name="user" value={name} onChange={e => setName(e.target.value)} /> </cpt-item> </div> <div ClassName ="contain-unit"> <cpt-item class="unit"> <label slot="label"> </label> <input type="password" name='psd' value={psd} onChange={e => setPsd(e.target.value)} /> </cpt-item> </div>Copy the code

engineering

  • Webpack5 project

  • Loader to write cpt. HTML file

    module.exports = function loader(source) {
    return `export default ${JSON.stringify(source)}`
}
Copy the code

  • configuration

    {
  "test": /.tmpl.html$/,
  "loader": path.resolve('./config/tmpl.loader.js')
}
Copy the code

To be solved

  • How best to get CSS off the grid
  • How to initialize properties more gracefully
  • Generate component code or import component solution dialectics