组件编程一

用的久了也就忘了。。。

自定义标签

<indeex-component></indeex-component>

class IndeexComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello Indeex</h1>`;
  }
}
customElements.define('indeex-component', IndeexComponent);

可以很好的自然语言化。

嵌套隔离标签

嵌套隔离标签的官方名称叫：shadow tree，类似iframe：

<div>
  <div id="indeex">
    <#shadow-root>
      <style>
      div {
        background: sandybrown;
        color: darkmagenta;
        cursor: pointer;
        margin: 3ch;
      }
      </style>
      <div id="btn">wahaha</div>
    </#shadow-root>
  </div>
  <div id="btn">whh</div>
</div>

const sr = document.getElementById('indeex').attachShadow({ mode: 'open' });
sr.innerHTML = `<style>
div {
  color: blue;
}
</style>
<div id="btn">slot<slot></slot></div>`;

和Vue的类似

自定义模板

模板类似标签的组合的模子，下面是一个简单的模板：

<template>
  <h1>Hello Indeex</h1>
</template>

const template = document.querySelector('template');
const node = document.importNode(template.content, true);
document.body.appendChild(node);

document.importNode方法用于创建模板的内容副本，第二个参数表示需要深拷贝。

也可以在模板里使用样式和代码，类似一个嵌套了一个单独的页面：

<template id="template">
  <script>
    const btn = document.getElementById('handleClick');
    btn.addEventListener('click', e => console.log(e));
  </script>
  <style>
    #handleClick {
      all: unset;
      background: navajowhite;
      border: 0;
      border-radius: 1ch;
      color: white;
      font-family: '楷体';
      font-size: 5ch;
      padding: 1ch 2ch;
      margin: 1ch;
      text-align: center;
    }
  </style>
  <button id="handleClick">wahaha</button>
</template>

const template = document.getElementById('template');
document.body.appendChild(
  document.importNode(template.content, true)
);

下面是列表的例子：

<style type="text/css">
    li{
        list-style: none;
        background-color: #1E9BF9;
        margin-top: 3ch;
        padding: 2ch;
        border-radius: 1ch;
        color: #FAEBD7;
        font-size: 4ch;
    }
    .title{
        color: #008800;
        font-size: 6ch;
    }
    .author{
        color: #FFFDE8;
        font-size: 5ch;
    }
</style>
<template id="book">
    <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>
<ul id="books"></ul>

const fragment = document.getElementById('book');
const books = [{
        title: '一本书',
        author: 'indeex hsi'
    },
    {
        title: '两本书',
        author: 'indeex'
    },
    {
        title: '三本书',
        author: 'qiary'
    }
];

books.forEach(book => {
    const instance = document.importNode(fragment.content, true);
    instance.querySelector('.title').innerHTML = book.title;
    instance.querySelector('.author').innerHTML = book.author;
    document.getElementById('books').appendChild(instance);
});

下面是一个全屏模态窗口例子：

<style type="text/css">
    #modalBtn {
      background: tomato;
      border-radius: 2ch;
      color: #fff;
      padding: 5ch 3ch;
      position: static;
    }
</style>
<template id="modalTemplate">
  <script>
    document.getElementById('modalBtn').addEventListener('click', () => {
      const wrapper = document.querySelector('.wrapper');
      const closeButton = document.querySelector('button.close');
      const wasFocused = document.activeElement;
      wrapper.classList.add('open');
      closeButton.focus();
      closeButton.addEventListener('click', () => {
        wrapper.classList.remove('open');
        wasFocused.focus();
      });
    });
  </script>
  <style>
    .wrapper {
      opacity: 0;
      transition: visibility 0s, opacity 0.25s ease-in;
    }
    .wrapper:not(.open) {
      visibility: hidden;
    }
    .wrapper.open {
      align-items: center;
      display: flex;
      justify-content: center;
      height: 100vh;
      position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      opacity: 1;
      visibility: visible;
    }
    .overlay {
      background: rgba(0, 0, 0, 0.8);
      height: 100%;
      position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      width: 100%;
    }
    .dialog {
      background: #ffffff;
      max-width: 800px;
      padding: 1rem;
      position: fixed;
      border-radius: 20px;
    }
    button {
      all: unset;
      cursor: pointer;
      font-size: 1.25rem;
      position: absolute;
        top: 1rem;
        right: 1rem;
    }

    button{
        box-sizing: border-box;
    }

    button:focus{
        border: none;
    }
    button:hover{
        border: 1px solid #1E9BF9;
    }
  </style>
  <div class="wrapper">
  <div class="overlay"></div>
    <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="content">
      <button class="close" aria-label="Close">叉️</button>
      <h1 id="title">Hello Indeex</h1>
      <div id="content" class="content">
        <p>哇哈哈的模态窗</p>
      </div>
    </div>
  </div>
</template>

<button id="modalBtn">假装是个编辑按钮</button>

const modalTemplate = document.getElementById('modalTemplate');
document.body.appendChild(
  document.importNode(modalTemplate.content, true)
);

模板内可以有样式、脚本，所以一个模板可以像类一样拥有自己的属性和方法。

先这样吧。。

code enjoy!😜😜😜

作者：indeex

链接：https://indeex.club

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。