ionic4 Web Components

发布于 5 年前 作者 sinazl 2667 次浏览 最后一次编辑是 5 年前 来自 分享

Ionic是一个开源的移动应用程序开发框架，它可以轻松地使用web技术构建高质量的跨平台的移动应用。可以让我们快速开发移动App、移动端WEB页面、微信公众平台应用，混合app web页面。

Ionic4基于Web Components，具有更好的运行速度、,相比以前版本的Ionic框架性能提升很多。

ionic4视频教程： https://www.itying.com/category-79-b0.html

Web Components

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

Web Components旨在解决这些问题 — 它由四项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

  • Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。

  • Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

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

  • HTML Imports（HTML导入）：一旦定义了自定义组件，最简单的重用它的方法就是使其定义细节保存在一个单独的文件中，然后使用导入机制将其导入到想要实际使用它的页面中。HTML 导入就是这样一种机制，尽管存在争议 — Mozilla 根本不同意这种方法，并打算在将来实现更合适的。

Web Components入门代码

1、新建index.html

  <!DOCTYPE>
<html>
    <head>
        <title>webcomponent</title>
        <link rel="import" href="./componnets/header.html" />
    </head>
    <body>
        <hellow-world></hellow-world>
    </body>
</html>

2、新建componnets/header.html


<template>
    <style>
        .coloured {
            color: red;
        }
    </style>

    <p>the first webcompnent is  <strong class="coloured">Hello World</strong></p>
</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        // 基于HTML Element prototype 创建obj
        var element = Object.create(HTMLElement.prototype);
        // 获取特mplate的内容
        var template = document.currentScript.ownerDocument.querySelector('template').content;
        // element创建完成之后的回调
        element.createdCallback = function() {
            // 创建 shadow root
            var shadowRoot = this.createShadowRoot();
            // 向root中加入模板
            var clone = document.importNode(template, true);
            shadowRoot.appendChild(clone);
        };
        document.registerElement('hellow-world', {
            prototype: element
        });
    }());
</script>

3、域环境运行index.html

Web Components运行成功，如果浏览器不支持请用,最新的chrom打开

1.png

这时候应该理解 Ionic4基于Web Components，具有更好的运行速度、,相比以前版本的Ionic框架性能提升很多。是什么意思了。

回到顶部