五分钟带你了解 Web Components
最新回答
挥写ヽ伱旳故事
2022-07-05 11:04:57
高内聚、低耦合，是软件工程中的概念，是判断软件设计好坏的标准，主要用于程序的面向对象的设计。它的考量标准是类的内聚性是否高，耦合度是否低。目的是使程序模块的可重用性、移植性大大增强。
「组件化」开发已然成为前端主流开发方式，因为「组件化」开发在代码复用、提升团队效率方面有着无可比拟的优势，现在流行的 Vue、React、Angular 等等框架都是组件框架。所以毫不夸张的说「组件化将会是前端的发展方向」。
Vue、React、Angular 这些前端框架也是组件？答案是肯定的，前端框架的本质也就是抽象的组件。从结果导向来看，无论什么框架归根结底最后都会编程成 Js、Css、Html，因为只有这样才能被浏览器“认识”。在框架的设计思想层面上，「组件化」也只是进行一些功能的抽象和代码的隔离。
使用这些框架也会给我们带来一系列问题，例如：
为了解决这些问题，各种解决方案层出不穷，其中Web Components 就是其中关键的一环。
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。Web Components 也是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装的HTML 标记，使用时不用加载任何额外的模块。自定义组件和小部件基于 Web Components 标准构建，可跨现代浏览器工作，并可与任何支持 HTML 的 JavaScript 库或框架一起使用。
简单理解 Web Components 就是：Web Components 是一套技术，允许创建可重用的自定义元素。
而 Web Component 的目的也很明确，从原生层面实现组件化，使开发者开发、复用、扩展自定义组，实现自定义标签。意味着前端开发人员开发组件时可以实现 Write once, run anywhere。
Web Components 本身不是一个单独的规范，也不是一门单一的技术，而是由一组 DOM API 和 HTML 规范所组成。它其中就包含了：ES Modules、HTML templates、Custom elements、Shadow DOM。
其实 Web Components 并不是近几年才出现的规范。最早在 2011 年的时候 Google 就推出了 Web Components 的概念，也算是前端发展的早期了。那时候前端还处于百废待兴的一个状态，前端甚至都没有「组件化」的概念，但是就是这个时候 Google 就已经凭明锐的嗅觉察觉到「组件化」是未来发展的趋势，所以提出了 Web Components 。不过在最开始时 Google 也只是提出了这样一个概念，并没有去实现它，所以并没有出现太大的浪花。
尽管 Web Components 可能还没有全面的进入研发者的视野，现在还备受争议，但是它已经被很多大厂已经直接或者间接将它用于实践，比如：Twitter、YouTube、Electronic Arts、Adobe Spectrum、IBM 等等大厂（当然不止于此）。
随着前端的发展，前端以 React、Vue、Angular 为主的框架也日益完善，大家肯定很奇怪，现在的前端框架不是挺好的吗？为什么我们还需要 Web Components 了? 最大的原因在于 Web Components 建立在 Web 标准之上。
虽然框架组件很棒，但它们只在自己的生态系统中很棒。您不能（轻松）在 React 中使用 Angular 组件，也不能（轻松）在 React 中使用 Vue 组件，反之亦然。而 Web Components 建立在 Web 标准之上，它们将可以在所有生态系统中工作，这也决定了它有巨大的优势。
虽然 Web Components 有着巨大的优势，但是也存在一些限制，例如：
Web Components 优势明显，能彻底改变 Web 的开发，但是目前来说还需时日，需要做大量工作才能使 WebComponents 变得真正优秀，才能让大家享受到「组件化」 Web 开发的便利。但请大家不要混淆，Web Components 并不是为了取代任何现有框架而生，Web Component 的目的是为了从原生层面实现组件化，可以使开发者开发、复用、扩展自定义组件，实现自定义标签，解决 Web 组件的重用和共享问题，并使 Web 生态保持持续的开放和统一。
热门标签
