基于浏览器环境的css元数据解析方案研究

基于浏览器环境的 CSS 元数据解析方案研究

摘要

目前市面上有很多页面搭建方案，其中一种是基于运行时的lowcode/nocode搭建平台，主要是面向运营、产品及部分开发人员；另外一种则是基于DSL或代码，将可视化能力作为代码编写的辅助能力集成进现有项目中，主要是面向开发人员。AUX辅助工具（下文简称AUX）属于后者。

AUX是架构前端内部研发的一套可视化开发工具，旨在为前后端研发同学提供页面开发的可视化交互和代码生成能力。它侵入性弱，直接对代码进行修改，因此在兼顾易用性的同时产生的代码具有很强的可维护性和二次开发能力。同时，也由于完全基于代码本身，和其他低码平台不同，除了代码没有更加详细的元数据，所以AUX的很大一部分工作，在于努力实现基础的从运行时到编译时的反向处理能力，这样才能保证用户在浏览器中的各种操作能够被分解，并还原到真正的源代码中。

AUX工具提供了很多有趣的功能，其中一个是关于在浏览器中对css样式进行可视化编辑。可视化样式编辑的目的是让开发者能够在开发环境的浏览器端通过编辑器修改页面中的css样式，并实时更新页面中的样式渲染结果，最终在完成编辑后能够直接生成代码并写入用户的项目中。其中，怎么样在浏览器中获取到css代码的元数据，就是首先需要解决的问题，本文将主要围绕这个问题进行讨论。