如何通过JS构建一个独立文件组件？

本文共计4471个文字，预计阅读时间需要18分钟。

目录+概述+单文件组件+基本概念+简单的loader+解析组件内容+注册组件+获取脚本内容+DataURI和ObjectURI+动态导入+实现+行为层+兼容性问题及其他+概述+前端开发人员只需了解vue.js框架即可

目录

• 概述
• 单文件组件
• 基本概念
• 简单的loader
• 解析组件内容
• 注册组件
• 获取脚本内容
• DataURI和ObjectURI
• 动态导入
• 实现
• 行为层
• 兼容性问题及其他

概述

前端开发人员只要了解过vue.js框架可能都知道单文件组件。vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容。这是一个非常有用的解决方案，在浏览器网页中已经开始提倡这种机制。但是不幸的是，这个概念自从2017年8月被提出以来，到现在没有任何进展，像是已经要消亡了一样。然而，深入研究这个主题并试着使用现有的技术来实现单文件组件是很有趣的，值得尝试。

单文件组件

知道“渐进增强”这个概念的前端开发人员想必也听说过“分层”这个概念。在组件中，同样有这样的概念。事实上，每个组件至少有3层，甚至多余3层：内容/模板，表现和行为。