WEB API新增整理（一）

【前言】：本篇文章主要用来整理新增的web API，前端技术发展日新月异，在开发需求的过程中，往往会遇到许多新的api的使用，但本人有时并没有真正了解过那些api的规范情况，以及支持度等等。因此打算趁着目前有部分的空余时间进行一些web api的整理，方便未来使用

一、Web Components

支持度：目前chrome和opera支持度良好。firefox目前实现了大部分功能，但仍在实验阶段，暂时无法使用。Safari支持的功能要少于chrome。Edge正在实现

作用：用来创建可以重用的自定义元素，同时能够使用到web应用中。同时可以将html标签结构、css样式和行为隐藏起来，并从页面上的其他代码中分离开来，这样不同的功能不会混在一起，代码看起来也会更加干净整洁。

核心技术：

（1）、自定义元素（customer elements）：javascript API用来定义自定义元素以及其具体的行为

（2）、影子DOM（shader dom）：用于将封装的shader dom树附加到元素（与主文档的dom分开呈现）并控制其关联的功能。同时可以保持元素的功能私有，以及不用担心与其他文档冲突

（3）、HTML 模板（html template）：<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用

（4）、HTML导入（html imports）：最好的管理web components方式是将写好的html模板放到单独的文件中，然后通过html导入方式引入该文件（目前还存在争议）

使用及API：

CustomerElementRegistry使用

该对象允许你注册一个customer element，返回已经注册的customer element，参数列表如下：

（1）、DOMString ：第一个参数为一个标签名称，但注意自定义的customer element的名称中间必须有-，方便与原生区别

（2）、class类：第二个参数接受一个class对象，主要是用来定义，该customer element的行为

（3）、options：第三个参数是可选参数，接受一个包含extends的对象，如{extends：'p'}，用来继承行为

生命周期回调函数

connectedCallback：当 custom element首次被插入文档DOM时，被调用。

disconnectedCallback：当 custom element从文档DOM中删除时，被调用。

adoptedCallback：当 custom element被移动到新的文档时，被调用。

attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。

 DEMO：

 

//创建一个类
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    const wcParent = this.parentNode;

    function countWords(node){
      const text = node.innerText || node.textContent;
      return text.split(/\s+/g).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});

    // Create text node and add word count to it
    const text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(function() {
      const count = `Words: ${countWords(wcParent)}`;
      text.textContent = count;
    }, 200);
  }

  connectedCallback(){
    //custom element首次被插入文档DOM时，被调用  
  }

  disconnectedCallback(){
    //custom element从文档DOM中删除时，被调用
  }

  adoptedCallback() {
    //custom element被移动到新的文档时，被调用
  }
  
  attributeChangedCallback(){
    // custom element增加、删除、修改自身属性时，被调用。
  }
}

//注册一个custom elements 
customElements.define('word-count', WordCount, { extends: 'p' });

//html中使用
<div>
<word-count></word-count>
</div>

shadow dom使用

Shadow DOM接口是关键所在，它可以将一个隐藏的、独立的DOM添加到一个元素上。Shadow DOM允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。创建通过Element.attachShadow方式创建

技术：

1、shadow host：customer Element插入dom后，会自动生成shadow host节点，用来保存customer Element。shadow dom将会添加到这个节点中

2、shadow tree：shadow dom内部的dom树

3、shadow boundary：shadow dom结束的地方，同时是常规dom开始的地方

4、show root：shadow tree的根节点

参数：

1、接受一个带有mode的options对象参数，如{mode：‘open’}。其中open设置后，可以通过js获取当前元素（通过 ele.shadowRoot）。设置closed后，无法访问。

 DEMO:

// Create a class for the element
class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});

    // Create spans
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');

    const icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);

    const info = document.createElement('span');
    info.setAttribute('class', 'info');

    // Take attribute content and put it inside the info span
    const text = this.getAttribute('data-text');
    info.textContent = text;

    // Insert icon
    let imgUrl;
    if(this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'img/default.png';
    }

    const img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // Create some CSS to apply to the shadow dom
    const style = document.createElement('style');
    console.log(style.isConnected);

    style.textContent = `
      .wrapper {
        position: relative;
      }
      .info {
        font-size: 0.8rem;
        width: 200px;
        display: inline-block;
        border: 1px solid black;
        padding: 10px;
        background: white;
        border-radius: 10px;
        opacity: 0;
        transition: 0.6s all;
        position: absolute;
        bottom: 20px;
        left: 10px;
        z-index: 3;
      }
      img {
        width: 1.2rem;
      }
      .icon:hover + .info, .icon:focus + .info {
        opacity: 1;
      }
    `;

    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
  }
}

// Define the new element
customElements.define('popup-info', PopUpInfo);

<slot>和<template>的使用

 

//此处需要插入到html文件中
<template id="element-details-template">
  <details>
    <summary>
          <span>
            <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
            <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
          </span>
     </summary>
     <div class="attributes">
          <h4><span>Attributes</span></h4>
          <slot name="attributes"><p>None</p></slot>
     </div>
  </details>
</template>
<element-details>
      <span slot="element-name">slot</span>
      <span slot="description">A placeholder inside a web
        component that users can fill with their own markup,
        with the effect of composing different DOM trees
        together.</span>
      <dl slot="attributes">
        <dt>name</dt>
        <dd>The name of the slot.</dd>
      </dl>
 </element-details>

//js使用
customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));//此处需要注意cloneNode方法，必须这样使用，不然操作无法成功
        
  }
});

二、WebAssembly（编码方式，类似Applet）

简介：WebAssembly（Assembly 音标 /ə'semblɪ/）是一种新的编码方式，运行在现代的网络浏览器中，类似于汇编语言（低级的汇编语言，采用紧凑的二进制格式），有着接近c或者c++的执行效率，同时能够和javascript共存。本质目标就是能够让web以原生的速度执行其他各种语言的代码。

概念：

模块：表示一个已经被浏览器编译为可执行机器码的WebAssembly二进制代码，一个模块是无状态的，并且能够以二进制的形式保存到indexDb中

内存：采用js原生ArrayBuffer api进行存储，大小可变，支持存取读写操作。

表格：带有类型的数组。表格中的项存储了不能作为原始字节存储在内存里的对象的引用（为了安全和可移植性的原因）

实例：一个模块及其在运行时使用的所有状态，包括内存、表格和导入值

链接及详情（此功能很少使用，不进行细致描述）：

https://developer.mozilla.org/zh-CN/docs/WebAssembly

三、MathML

简介： MathML是一个用于描述数学公式、符号的一种 XML 标记语言。目前只有firefox支持大部分功能，opera支持小部分功能。

标签：

<math>：MathML的顶级元素，所有的MathML标记必须放入到顶层元素中，另外不能再math标签中嵌套math标签。支持标签属性有：class，id，style，dir（文本方向），href（超链接），mathbackground（背景颜色），mathcolor（公式的文本颜色），display，overflow（指定当该数学公式超过了其运行的范围时应该如何表现。linebreak (默认值), scroll, elide, truncate, scale）

<maction>：提供了一种让表达式（或子表达式）具有某种特定行为的可能性。具体行为方式由actiontype属性的取值来确定。也可以使用selection属性来手动指定该行为作用在哪个子元素上。支持的标签属性有：actiontype（statusline：元素被点击或屏幕阅读器的指针指向该元素时触发，message会在浏览器的状态栏中显示。toggle：当子表达式被点击时触发，子表达式会依次显示。tooltip：当指针指向表达式时触发，会在表达式附近显示一个提示框。），class，id，style，href，mathbackground，mathcolor，selection（用来设置该行为作用在哪个子元素上，默认为1）

<menclose>：标签会根据notation属性渲染到封闭的括号中，notation支持多个属性。支持的标签属性有：class，id，style，href，mathbackground，mathcolor，notation（支持多个属性，不同的属性展示不同的图形，属性值为：longdiv 、actuarial、radical、box、roundedbox、circle、left、right、top、bottom、updiagonalstrike、downdiagonalstrike、verticalstrike、horizontalstrike、madruwb、updiagonalarrow、phasorangle）

<merror>：包含语法错误消息。支持的标签属性有：class，id，style，href，mathbackground，mathcolor

<mfenced>：提供了向表达式添加自定义开闭圆括号(如方括号)和分隔符(如逗号或分号)的可能性。支持的标签属性有：class, id, style，close（关闭的符号，默认为")"），href，mathbackground，mathcolor，open（开始的包裹符号，默认为“(”），separators（可以指定多个分隔符，页面会将传递的数据按照指定的分隔符进行分割）

<mfrac>：用来显示分数。支持的属性有：bevelled（指定分数的显示方式，如果为真，则分数线为斜切），class, id, style，denomalign（分母在分数下的对齐，取值left, center,right），href，linethickness（水平分数线的厚度，取值为medium、thin、thick以及设置数字值），mathbackground，mathcolor，numalign（分子对分数的对齐，取值有left，right，center）

<mglyph>：显示非标准符号（所有浏览器都未支持），标签属性有：alt（同图片的alt），class，id，style，height，href，mathbackground，src（图片的链接地址），valign（对其方式），width

<mi>：表示应该将内容呈现为标识符，例如函数名、变量或符号常量。标签属性有：class, id, style，dir，href，mathbackground，mathcolor，mathsize（内容的大小，取值有small，normal，big），mathvariant（排版样式）

<mlabeledtr>：表格或矩阵中的行标签，其子元素必须是<mtd>标签。标签属性有：class,id,style,columnalign(排版方式，left, center and right)，href，mathbackground，mathcolor，rowalign

<mmultiscripts>：标签用来显示惯例和张量指标，表示数学符号。标签属性有：class, id, style，href，mathbackground，mathcolor，subscriptshift（将下标移到表达式基线以下的最小空间），superscriptshift（将上标移到表达式基线之上的最小空间）

<mn>：表示一个数字文字，该数字文字通常是一组可能带有分隔符(点或逗号)的数字序列。支持的属性：class, id, style，dir，href，mathbackground，mathcolor，mathsize，mathvariant

<mo>：表示广义上的操作符。除了严格意义上的运算符外，这个元素还包括“运算符”(如圆括号)、分隔符(如逗号和分号)或“绝对值”条。支持的属性：accent（如果操作符用作下标或上标，此属性指定是否应将操作符视为重音符号，可选值：true或者false），class, id, style，dir，fence（没有视觉效果，它指定操作符是否为栅栏(如括号)），form（指定运算符在封闭表达式中的角色，该角色影响间距和其他默认属性，取值为prefix，infix，postfix），href，largeop（是否应将操作符绘制得比正常大），lspace，mathbackground，mathcolor，mathsize，mathvariant，maxsize，minsize，movablelimits（附加的下标和上标是否移动到下标和上标位置），rspace（运算符后的空间量），separator（没有视觉效果，但它指定操作符是否是分隔符(如逗号)），stretchy（指定操作符是否扩展到相邻元素的大小），symmetric（如果stretchy为真，则此属性指定操作符是否应该围绕假想数学轴(以分数线为中心)垂直对称）

<mover>：用于在表达式上附加重音符号或限制。支持的属性：accent（如果为真，则上标是重音，取值：true或false），align（取值left, center, and right），class，id，style，href，mathbackground，mathcolor

<mpadded>：用于添加额外的填充，并设置所包含内容的位置和大小的一般调整。支持的属性有：class，id，style，depth，height，href，lspace（设置或递增水平位置），mathbackground，mathcolor，voffset，width

<mphantom>：以不可见的方式呈现，但是仍然保留维度(例如高度、宽度和基线位置)。支持的标签属性有：class, id, style，mathbackground

<mroot>：用来表示一个有明确根指数的根式。用来表示立方根

<mrow>：用于对子表达式进行分组，子表达式通常包含一个或多个操作符及其各自的操作数(例如<mi>和<mn>)

<ms>：表示一个字符串文本，该字符串文本将由编程语言和计算机代数系统解释。支持的标签属性有：class, id, style，dir，lquote（左侧的开符号），rquote（右侧的关闭符合），href，mathbackground，mathcolor，mathsize，mathvariant

<mspace>：用来表示一段空白，空白的大小由它自身的属性决定。支持的标签属性：class, id, style，depth（空白在基线下方的高度），height（空白线在基线上方的高度），linebreak（表示空格处的换行符，取值为：auto ，newline，nobreak，goodbreak，badbreak），mathbackground，width

<msqrt>：用于表示一个平方根（不显示根指数）。支持的标签属性：class, id, style，href，mathbackground，mathcolor

<mstyle>：更改其子元素的样式。它接受所有MathML表示元素的所有属性。

<msub>,<msup>：用来为表达式加下标和上标。支持的标签属性有：class, id, style，href，mathbackground，mathcolor，subscriptshift（用来设置下标相对于表达式的基线的最小距离，它是一个长度值）

<msubsup>：用于将下标和上标一起附加到表达式。支持的标签属性有：class, id, style，href，mathbackground，mathcolor，subscriptshift，superscriptshift（用来设置上标相对于表达式的基线的最小距离，它是一个长度值）

<mtable>：允许您创建表或矩阵。在<mtable>中，可能只出现<mtr>和<mtd>元素。这些元素类似于HTML的<table>、<tr>和<td>元素。

<mtext>：用于呈现没有注释含义的任意文本，比如注释或注释。支持的标签属性有：class, id, style，dir，href，mathbackground，mathcolor，mathsize，mathvariant

<munder>：用于在表达式下附加重音符号或限制。支持的标签属性有：accentunder（如果为真，则元素是重音符号，它更接近基本表达式），align，class, id, style，href，mathbackground，mathcolor

<munderover>：用于在表达式下面和上面附加重音符号或限制。支持的标签属性有：accent，accentunder，align，class, id, style，href，mathbackground，mathcolor

示例：

<html>
  <head>
    <title>MathML示例</title>
  </head>
  <body>
    <p>以下内容，firefox支持度更高，建议firefox打开,表示数学公式a的平方加b的平方等于c的平方</p>
    <section>
      <p>Math标签使用示例</p>
      <math>
        <mrow>
          <mrow>
            <msup>
              <mi>a</mi>
              <mn>2</mn>
            </msup>
            <mo>+</mo>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
          </mrow>
          <mo>=</mo>
          <msup>
            <mi>c</mi>
            <mn>2</mn>
          </msup>
        </mrow>
      </math>
    </section>
    <section>
      <p>maction元素使用</p>
      <p>maction支持的属性中actiontype为关键属性。</p>
      <math>
        <!-- 设置actiontype的statusline属性，当元素被点击或屏幕阅读器的指针指向该元素时触发，message会在浏览器的状态栏中显示 -->
        <maction actiontype="statusline"> expression message </maction>
        <!-- 当子表达式被点击时触发，子表达式会依次显示。因此每次点击时selection的值都会增加。 -->
        <maction actiontype="toggle" selection="positive-integer"> expression1 expression2 expressionN </maction>
        <!-- 当指针指向表达式时触发，会在表达式附近显示一个提示框 -->
        <maction actiontype="tooltip"> expression message </maction>
      </math>
    </section>
    <section>
      <p>menclose标签会根据notation属性渲染到封闭的符号中</p>
      <math>
        <menclose notation="circle box">
          <mi> x </mi>
          <mo> + </mo>
          <mi> y </mi>
        </menclose>
      </math>
    </section>
    <section>
      <p>merror标签用来包含预发的错误消息</p>
      <math>
        <merror>
          <mrow>
            <mtext> Division by zero: </mtext>
            <mfrac>
              <mn> 1 </mn>
              <mn> 0 </mn>
            </mfrac>
          </mrow>
        </merror>
      </math>
    </section>
    <section>
      <p>mfenced用来用括号包裹子元素的内容</p>
      <math>
        <mfenced open="{" close="}" separators=";;,">
          <mi>a</mi>
          <mi>b</mi>
          <mi>c</mi>
          <mi>d</mi>
          <mi>e</mi>
        </mfenced>
      </math>
    </section>
    <section>
      <p>mglyph用来显示非标准符号</p>
      <math>
        <mi><mglyph src="./images/icon.jpg" width="100" height="100" alt="my glyph"/></mi>
      </math>
    </section>
    <section>
      <p>
        mo表示广义上的操作符。除了严格意义上的运算符外，这个元素还包括“运算符”(如圆括号)、分隔符(如逗号和分号)或“绝对值”条
      </p>
      <math>
        <mrow>
          <mn>5</mn>
          <mo>+</mo>
          <mn>5</mn>
        </mrow>

        <mrow>
          <mo> [ </mo>
          <!-- default form value: prefix -->
          <mrow>
            <mn> 0 </mn>
            <mo> ; </mo>
            <!-- default form value: infix -->
            <mn> 1 </mn>
          </mrow>
          <mo> ) </mo>
          <!-- default form value: postfix -->
        </mrow>
        <mover accent="true">
          <mrow>
            <mi> x </mi>
            <mo> + </mo>
            <mi> y </mi>
            <mo> + </mo>
            <mi> z </mi>
          </mrow>
          <mo>
            &#x23DE;
            <!--TOP CURLY BRACKET-->
          </mo>
        </mover>
        <mrow>
          <mi> x </mi>
          <mo> + </mo>
          <mphantom>
            <mi> y </mi>
            <mo> + </mo>
          </mphantom>
          <mi> z </mi>
        </mrow>
        <mroot>
          <mn>x</mn>
          <mn>3</mn>
        </mroot>
        <ms lquote="„" rquote="“"> abc </ms>
        <mstyle displaystyle="true" mathcolor="teal">
          <mrow>
            <munderover>
              <mo stretchy="true" form="prefix">&sum;</mo>
              <mrow>
                <mi>i</mi>
                <mo form="infix">=</mo>
                <mn>1</mn>
              </mrow>
              <mi>n</mi>
            </munderover>

            <mstyle displaystyle="true">
              <mfrac>
                <mn>1</mn>
                <mi>n</mi>
              </mfrac>
            </mstyle>
          </mrow>
        </mstyle>
        <msup>
          <mi>X</mi>
          <mn>2</mn>
        </msup>
        <msub>
          <mn>X</mn>
          <mn>3</mn>
        </msub>
        <msubsup>
          <mo> &#x222B;<!--Integral --> </mo>
          <mn> 0 </mn>
          <mn> 1 </mn>
        </msubsup>
      </math>
    </section>
    <section>
      <p>mtable,mtr,mtd允许您创建表或矩阵。在<mtable>中，可能只出现<mtr>和<mtd>元素。这些元素类似于HTML的<table>、<tr>和<td>元素。</p>
      <math>
        <mi>X</mi>
        <mo>=</mo>
        <mtable frame="solid" rowlines="solid" align="axis 3">
          <mtr>
            <mtd><mi>A</mi></mtd>
            <mtd><mi>B</mi></mtd>
          </mtr>
          <mtr>
            <mtd><mi>C</mi></mtd>
            <mtd><mi>D</mi></mtd>
          </mtr>
          <mtr>
            <mtd><mi>E</mi></mtd>
            <mtd><mi>F</mi></mtd>
          </mtr>
        </mtable>
      </math>
    </section>
    <section>
      <p>munder用于在表达式下附加重音符号或限制</p>
      <math>
        <munder accentunder="true">
          <mrow>
            <mi> x </mi>
            <mo> + </mo>
            <mi> y </mi>
            <mo> + </mo>
            <mi> z </mi>
          </mrow>
          <mo> &#x23DF; <!--BOTTOM CURLY BRACKET--> </mo>
        </munder>
      </math>
    </section>
    <section>
      <p>munderover用于在表达式下面和上面附加重音符号或限制</p>
      <math displaystyle="true"> 
        <munderover >
          <mo> &#x222B; <!--INTEGRAL--> </mo>
          <mn> 0 </mn>
          <mi> &#x221E; <!--INFINITY--> </mi>
        </munderover>
      </math>
    </section>
  </body>
</html>