「译」动手实现一个单文件 Web Components

31 分钟 读完 (约 4710 字)

作者：Tomasz Jakut
原文链接：Implementing single file Web Components

可能每个了解 Vue 框架的人都听说过它的“单文件组件（single file components）”。这个超简单的概念让 Web 开发人员可以只用一个文件来定一个组件。这个解决方案非常好用以至于一个在浏览器中包含这种机制的提案已经出现。

不过很不幸的是，这个提案貌似已经死掉了，从 2017 年 8 月以后就再没有任何进展。即使如此，在现有可行技术下研究这个话题并且创建一个可以在浏览器中运行的单文件组件仍然值得写一篇文章！

单文件组件

了解渐进增强这个术语的 Web 开发人员应该也听说过“分层”这个词儿。在组件中也是这样的。实际上层数还不少呢，每个组件至少有 3 层：内容/模版，样式和行为。按照传统的做法，每个组件至少会被分成 3 个文件，例如一个 Button 组件可能会是这个样子：

1
2
3
4
5
6
7
Button/
|
| -- Button.html
|
| -- Button.css
|
| -- Button.js

这是按照技术来分层（内容/模版：HTML，样式：CSS，行为：JS）。这就是说--如果你没有用构建工具的话--浏览器将需要加载 3 个文件。于是有人便提出一个概念，保留分层的概念，但不是按照技术种类分成不同但文件。于是单文件组件诞生了。

一般来说，我对“按技术分层”这个做法持怀疑态度。而且，这个概念实际上经常在一些关于放弃分层的争论中被提到--根本就是完全对立的两件事。

单文件的 Button 组件看起来是这样的：

1
2
3
4
5
6
7
8
9
10
11
<template>
	
template>

<style>
	/* Button.css contents go here. */
style>

<script>
	// Button.js contents go here.
script>

可以清楚的看到，单文件组件就是一个有内部样式表、script 和