开发者社区> 前端修罗场> 正文

【Web Components】Web Components 的最新开发方法

简介: 【Web Components】Web Components 的最新开发方法
+关注继续查看

Web Components

MDN 上对 Web Components 这个名词的解释是:

Web Components是一套不同的技术,允许您创建可重用定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。

当然,你也可以从W3C上学习组件规范

Web Components[以下简称"WC"],使用自定义元素(custom elements)来代替div,故能使用div的得房就能使用它。因此,使用WC,只需要在HTML中引入js文件即可。它不并不像目前主流的组件框架,需要外部支撑。例如,如果你要使用React组件,那你大概率的情况下要使用ReactJS。

开始前的准备

文章中的组件、自定义标签、自定义组件其实描述的是同一个东西。

Ploymer

WC 在整个前端的语境下更偏向于提供符合 DOM 标准的规范,而 Polymer 则是在这种规范之上的一种框架封装,虽然Ploymer不是必须的,但是使用 Polymer 可以带来更便利的组件化开发体验。

ShadyDOM与ShadyCSS

  • ShadyDOM:是 Shadow DOM 的 polyfill 的官方名称。 ▪ 它通过劫持 HTMLElement 的原型方法来实现一些 Shadow DOM 节点拥有的功能,实际上它的原理是把节点添加到了真实(light) DOM 节点之上
  • ShadyCSS:也是 polyfill 的名称,它提供了一些 Shadow DOM 节点内样式的封装,使得可以在真实 DOM 中模拟 scoped style 的效果。它的原理是通过解析和重写 style 节点内部的样式规则来实现的

开始创建一个自定义组件

WC一般具有以下几个部分:

  • Shadow Dom
  • Custom Elements
  • HTML Imports
  • HTML Templates

你可以在CanIUse上查到上述4部分的目前的支持情况。

OK , 现在我们新建一个项目目录my-app,如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cRbuf3m5-1649854195112)(media/15575787033865/15575806427046.jpg)]](https://img-blog.csdnimg.cn/2019051122015916.png)

然后,在命令行中开启http服务(请先确保你已安装该nodeJS服务npm install -g http-server):

$ http-server

第一个Web Components

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My-App</title>
    <link rel="import" href="elements/my-app.html" id="my-app">
</head>
<body>
    <my-app></my-app>
</body>
</html>
//my-app.html
<template>
    <style>
        p {
            color: #ccc;
        }
    </style>
    <p>这是一个自定义元素!</p>
</template>

<script>
    class MyAppElement extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({mode:'open'});
            const myApp = document.getElementById('my-app').import;
            const templateNode = myApp.getElementsByTagName('template')[0].content.cloneNode(true);
            shadowRoot.appendChild(templateNode);
        }
        connectedCallback() {
            console.log('my-app element is connected');
        }
    }
    customElements.define('my-app', MyAppElement);
</script>

注意,这里我们使用HTML imports在index.html中导入了my-app.html,这仅能在Chrome中实现。作为ES6模块的一部分,在将来可能会被废弃。因为,Ploymer正在开发相关的实现。

现在我们可以看到在页面上显示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-szvcHmdV-1649854195119)(media/15575787033865/15575813447083.jpg)]](https://img-blog.csdnimg.cn/2019051122021332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ltYWdpbmVDb2Rl,size_16,color_FFFFFF,t_70)

当然,除此之外我们也可以使用ES6 import实现:

ES6 import

现在的目录结构是这样:在elements目录下新建一个my-app.js和my-date.js。

image

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My-App</title>
    <script type="module" src="/elements/my-app.js"></script>
</head>
<body>
    <my-app></my-app>
</body>
</html>
//my-app.js
import './my-date.js'

class MyAppElement extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode:'open'});
        shadowRoot.innerHTML = this.template();
    }
    connectedCallback() {
        console.log('my-app element is connected');
    }
    template() {
        return `
            <style>
                p {
                color: #f00;
                }
            </style>

            <p>This is a custom element!</p>
            <my-date></my-date>
        `;
    }
}
customElements.define('my-app', MyAppElement);
//my-date.js
class MyDateElement extends HTMLElement {
    constructor() {
        super();
        this.now = new Date();

        const shadowRoot = this.attachShadow({mode:'open'});
        shadowRoot.innerHTML = this.template();
    }
    connectedCallback() {
        console.log('my-date element is connected');
    }
    template() {
        return `
            <p>现在是<time datetime="${this.now.toISOString()}">${this.now.toLocaleString()}</p>
        `;
    }
}
customElements.define('my-date', MyDateElement);

现在我们可以看到页面:

image

但是,使用es6 import也会存在缺点:

  • HTML标签和JS没有分开。我们看到,HTML标签是写在template()方法中。而前面一种方案是将HTML标签写在<template>标签中。
  • 无法在不同时刻加载某些文件。我们看到,import在第一时间把需要的JS文件都加载进来了。

为了解决这个问题,我们需要采取以下方法:

  1. 动态加载JS
//动态加载JS
const scriptElement = document.createElement('script');
scriptElement.src = '/elements/my-date.js';
document.head.appendChild(scriptElement);
  1. import()

使用具有函数性的import()函数进行动态导入,返回Promise。

目前适用于Chrome 63+和Safari 11+

参见:

解释

下面,使用一个代码示例,解释代码中不同部分的含义。请根据代码注释进行理解。

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="app.js"></script>
</head>
<body>
    <my-element></my-element>
</body>
</html>
  • app.js
//生命周期函数的顺序:constructor -> attributeChangedCallback -> connectedCallback
//attributeChangedCallback要在connectedCallback之前执行的原因:
//1.web组件上的属性主要用来初始化配置。这意味着当组件被插入DOM时,这些配置需要可以被访问了
customElements.define('my-element',class extends HTMLElement{
    static get observedAttributes() {
        return ['disabled'];
    }
    //构造函数一般是用来初始化状态和设置Shadow DOM。
    //当时一个元素被创建时将会调用构造函数,如document.createElement
    constructor() {
        super();
        //使用Shadow DOM,自定义元素的HTML和CSS完全封装在组件内。这意味着元素将以单个的HTML标签出现在文档的DOM树种。其内部的结构将会放在#shadow-root。
        let style = document.createElement('style');

        const shadowRoot = this.attachShadow({mode: 'open'});// 定义一个Shadow root,mode:'open'意味着可以再开发者工具找到它并与之交互;mode:closed则相反
        //Shadow DOM还提供了局部作用域的CSS
        //所有的CSS都只应用于组件本身
        //元素将只继承最小数量从组件外部定义的CSS,甚至可以不从外部继承任何CSS
        //在实际插入DOM前,它是不可见也不可解析的。这意味着定义在内部的任何资源都无法获取,任何内部定义的CSS和JavaScript只有当它被插入DOM中时,才会被执行。
        //组件的所有样式都被定义在style标签内,如果你想使用一个常规的<link rel="stylesheet">标签,你也可以获取外部样式
        
        shadowRoot.innerHTML = `     
            <div id="container" class="disabled">
                <h1>web Components</h1>
            </div>
        `;
        shadowRoot.appendChild(style);
        //当Shadow root被创建之后,你可以使用document对象的所有DOM方法,
        this.container = this.shadowRoot.querySelector('#container');//查找元素
        
        //还可以使用:host选择器对组件本身进行样式设置
        //从外部定义在组件本身的样式优先于使用:host在Shadow DOM中定义的样式
        style.textContent = '.disabled {opacity: 0.4;}' +
            'h1 { text-decoration: underline; }' +
            ':host-context(h1) { font-style: italic; }' +
            ':host-context(h1):after { content: " - no links in headers!" }' +
            ':host-context(article, aside) { color: gray; }' +
            ':host(.footer) { color : red; }' +
            ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'+
            ':host {--background-color: #1387ff;}'+
            '#container {background-color: var(--background-color);}';

    }
    //当这个元素被插入DOM树的时候将会触发这个方法
    //在connectedCallback之后进行元素的设置
    //这是唯一可以确定所有的属性和子元素都已经可用的办法,如document.body.appendChild
    connectedCallback() {


    }
    //当元素从DOM中移除的时候将会调用它
    //在用户关闭浏览器或者浏览器tab的时候,不会调用这个方法
    disconnectCallback() {

    }
    //当元素通过调用document.adoptNode(element)被采用到文档时将会被调用
    adoptedCallback() {

    }
    //每当将属性添加到observedAttributes的数组中时,就会调用这个函数
    //这个方法调用时两个参数分别为旧值和新值
    //这个方法只有当被保存在observedAttributes数组的属性改变时,才会调用,其他属性改变则不会
    //web组件上的属性主要用来初始化配置,状态
    //当组件被插入DOM时,这些配置需要可以被访问了
    attributeChangedCallback(attr,oldVal,newVal) {
        if(attr === 'disabled') {
            if(this.disabled) {  
              this.container.classList.add('disabled');      
            }      
            else {
              this.container.classList.remove('disabled')      
            }
        }
    }
})


//调用customElements.get(‘my-element’)来获取这个元素构造函数的引用
const el = customElements.get('my-element');
//使用new element()来代替document.createElement()去实例一个元素
const myElement = new el();


//使用customElement.whenDefined升级元素时,可以调用回调,并会返回一个promise

customElements.whenDefined('my-element')
.then(() => {
  // my-element is now defined
})

image

  • 在浏览器中开启shadow dom
    image

参考



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29140 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16432 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20693 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14898 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22350 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23579 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36442 0
+关注
前端修罗场
前端修罗场,CSDN 博客专家 华为云享专家,微信公众号同名。为你提供优质原创内容。三门课程作者:《ElementUI 详解与实战》| 《ThreeJS 在网页中创建动画》|《PWA 渐进式Web应用开发》。蓝桥云课2021年度人气作者Top2。前端进阶之路 | 中大厂、外企、国企内推 | 面试培训
223
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载