vue 响应式布局组件_今天如何使用响应式Web组件

vue 响应式布局组件

A few years ago I started to hear a lot about Web Components. I got pretty excited and then totally forgot about them as the noise settled down. It turns out there has been some good movement and support is starting to increase. Responsive Web Components, in particular, are set to really simplify how we approach responsive design. As promising as this sounds, there are four questions many developers out there will want to know before they start using them today:

几年前，我开始听到很多有关Web组件的信息。 我非常兴奋，但随着噪音逐渐消失，他们完全忘记了它们。 事实证明，目前已有一些良好的运动，并且支持开始增加。 尤其是响应式Web组件旨在真正简化我们进行响应式设计的方式。 听起来如此有前途，但是许多开发人员在开始使用它们之前会想知道四个问题：

Will they…

他们会吗…

• Fit into the current state of the web?
  适合网络的当前状态？
• Work cross browser?
  使用跨浏览器？
• Adapt to fit the space they are dropped into?
  适应以适应他们掉进的空间？
• Promote modular code?
  推广模块化代码？

In this article, we will explore the answers to each of those questions!

在本文中，我们将探讨每个问题的答案！

什么是Web组件？ (What Are Web Components?)

Essentially, they are a W3 specification that enables you to build your own HTML elements. If you literally don’t know anything about them it may be worth having a quick read up about them as some of the terms I use in the article require a basic understanding.

本质上，它们是W3规范，使您能够构建自己HTML元素。 如果您对它们一无所知，那么值得快速阅读一下，因为我在本文中使用的某些术语需要基本的理解。

我为什么要使用它们？ (Why Would I Want To Use Them?)

A good example of when you might want to use Web Components would be when you are building UI that doesn’t exist natively in the browser — elements such as color pickers, carousels, accordions or typeaheads. Alternatively, you are likely to have some components that you use all the time across various sites that you are sick of rebuilding every time. These are things like social buttons, subscribe forms or notifications. With Web Components you can bundle up your markup, styles and scripts into encapsulated modules using HTML tags like <color-picker></color-picker> to reference them. This will seem familiar if you have used Angular directives or React components but the benefit here is that it is native to the browser and framework agnostic.

当您要构建浏览器本身不存在的UI时(例如颜色选择器，轮播，手风琴或预先键入)，可以使用Web组件作为一个很好的例子。 另外，您很可能会在各个站点上经常使用某些组件，而您每次都想重建它们。 这些是社交按钮，订阅表单或通知之类的东西。 借助Web组件，您可以使用HTML标签(例如<color-picker></color-picker>将标记，样式和脚本捆绑到封装的模块中，以引用它们。 如果您使用过Angular指令或React组件，这似乎很熟悉，但是这样做的好处是，它对于浏览器和框架无关。

Web Components enable you to build pieces of UI once and use them everywhere. This is ideal for projects like a living styleguide where you want to build a library with a single source of truth for each of your components. This approach means repeating less code and having portable components that you or your team can simply drop references to into your interface.

Web组件使您可以一次构建UI并将其在任何地方使用。 对于像生活风格指南这样的项目，它是一个理想的项目，在该项目中，您想为每个组件的单个事实来源建立一个库。 这种方法意味着减少重复的代码，并拥有可移植的组件，您或您的团队可以简单地将引用插入到您的界面中。

Another big advantage of using Web Components is the ability to package these components up and share them with other developers or website owners. Essentially, the consumer can put an import statement in their web page such as:

使用Web组件的另一个主要优点是能够打包这些组件并将其与其他开发人员或网站所有者共享。 从本质上讲，消费者可以在其网页上放置一个导入语句，例如：

<link rel="import"
      href="http://url.com/subscribe-form.html">

Then use the custom element tag you’ve defined in that component. With this imported into