美文网首页
Web Components

Web Components

作者: 高阳刘 | 来源:发表于2020-10-22 17:02 被阅读0次
一、组件化开发
1、组件化开发的优势
  • 管理和使用非常容易,加载或卸载组件,只要添加或删除一行代码就可以了
<link rel="inport" href="my-dialog.html">
<my-dialog heading="A Dialog">Lorem ipsum</my-dialog>
  • 组件非常灵活,定制非常容易,逐渐往往留出接口,供使用者设置常见属性,比如上面代码的heading属性,就是用来设置对话框的标题。
  • 组件是模块化编程的体现,非常有利于代码的重用,标准格式的模块,可以跨平台,跨框架使用,构建、部署和与其他UI元素互动都有统一的做法。
  • 组件提供了HTML、CSS、JavaScript封装的方法,实现了与同一页面上的其他代码的隔离
  • 组件化开发也便于团队协同开发。
  • 当前网站的主流开发方式就是组件化开发,可以像搭积木一样,把组件合在一起,就组成了一个网站。
  • 在团队开发中,组件化带来的优势是便于协同开发,有雨代码中的耦合度降低了,每个模块都可以拆分为一个组件,例如异步请求组件,路由组件,各个视图组件,团队中每个人发挥所长维护各自组组件,对整个应用来说是精细的打磨。
2、组件化开发的方式
  • 原生DOM操作封装
  • jQuery插件
  • YUI
  • ExtjS
  • 原生Web Components
  • React
  • Angular
  • Vue
二、Web Components

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

作为开发者,我们都知道尽可能多的重复代码是一个好主意,这对于自定义标记结构来说通常不那么容易,想想复杂的HTML(以及相关的样式和脚本),有时候您不得不写代码来呈现自定义UI控件,并且如果您不小心的话,多次使用他们会使您的页面变得一团糟。

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

  • Custom elements(自定义元素):一组JavaScript API,允许您定义custom elements及其行为,庵后可以在您的用户界面中按照需求使用他们。
  • Shadom DOM(影子DOM):一组JavaScript API,用于封装的“影子”DOM树附加元素,(与主文档DOM分开呈现)并控制其关联的功能,通过这种方式,您可以保持元素的功能私有,这样他们可以被脚本化和样式化,而不用担心与稳当的其他部分发生冲突。
  • HTML templates(HTML模板):[`和``元素是您可以编写不在呈现页面中显示的标记模板,然后他们可以作为自定义元素结构的基础被多次重复使用。
  • HTML Imports(HTML导入):一旦定义了自定义组件,最简单的重用他的方法就是使其定于细节保存在一个单独的文件中,然后使用导入机制将其导入到实际使用它的页面中,HTML导入就是这样一种机制,尽管存在争议,Mozilla根本不同意这种方法,并打算将来实现更合适的。
三、使用Web Components
1、内容:
  • 组件注册和使用
  • 组件通信
  • 组件的生命周期
  • 组件插槽
2、基本步骤

2.1 使用

相关文章

  • 未来学习规划

    了解Web Components开发;zh-Web_Components、en-Web_Components 了解...

  • 了解 Web Components

    Web Components 首先来了解下 Web Components 的基本概念, Web Component...

  • web components

    web components:一种原生的写组件的方式。下面将主要介绍四个概念:custom element、sha...

  • Web Components

    作用: Web组件化,可复用UI模块。 标准: Web Components不是单一的规范,而是一系列的技术组成,...

  • web components

    首先来看浏览器源生的web components demohttps://www.webcomponents.or...

  • Web Components

    一、组件化开发 1、组件化开发的优势 管理和使用非常容易,加载或卸载组件,只要添加或删除一行代码就可以了 组件非常...

  • Web Components

    定义 浏览器原生支持的一套组件封装技术。这里有两个关键字: 组件技术 浏览器原生 组件化一直是前端完善的方向,从早...

  • Web Components

    Web Components允许创建可重用的定制元素,并且在web应用中使用它们。 HTML Templates ...

  • Web Components

    组件化是前端工程化重要的一环,UI 和 交互(或逻辑)的复用极大的提高开发效率以及减少代码冗余。 目前开源的组件库...

  • Web Components使用(一)

    在使用Web Components之前,我们先看看上一篇文章Web Components简介[https://ww...

网友评论

      本文标题:Web Components

      本文链接:https://www.haomeiwen.com/subject/ljkpmktx.html