今天看啥  ›  专栏  ›  哔哩哔哩技术

VUE项目基于源码实现可视化编程技术的探索

哔哩哔哩技术  · 公众号  · 科技媒体  · 2024-10-15 12:00
    

主要观点总结

文章主要讨论了在面对大型且高度组件化的项目时,传统开发模式存在的问题以及一种基于源码的可视化编程技术方案的探讨。文章还介绍了传统低代码方案的问题、公有协议的作用,以及针对Vue文件的AST解析和代码转换生成的技术实现。

关键观点总结

关键观点1: 传统开发模式在面对大型项目时的效率问题

传统开发模式通过手动修改代码的方式在大型项目中显得效率低下,特别是对新开发者来说从UI界面逆向定位到代码修改过程复杂耗时。

关键观点2: 可视化编程技术方案的探讨

通过UI直接映射到代码组件,简化代码编辑过程,实现源码AST与UI的绑定,直接通过UI界面修改属性或内容并自动同步到代码文件中,提供一种直观且高效的可视化编程体验。

关键观点3: 传统低代码方案的问题

传统低代码方案使用私有协议和JSON配置,功能和组件有限制,难以完全满足复杂定制需求,且定位问题困难。

关键观点4: 公有协议的作用

公有协议如AST(抽象语法树)在解析JavaScript等语言并转化为结构化数据方面发挥了重要作用,为开发者提供了统一标准化的操作源代码方式。

关键观点5: Vue文件的AST解析和代码转换生成的技术实现

文章详细描述了Vue文件的AST解析过程,包括使用node-html-parser解析template区块,使用babel解析script区块。同时介绍了如何通过修改AST来生成新的Vue代码。


文章预览

背景 在面对大型且高度组件化的项目时,传统的开发模式——即边预览边手动修改代码,往往会因项目结构的复杂性而显得效率低下,尤其是对于新加入项目或对项目结构不够熟悉的开发者而言,从UI界面逆向定位到具体代码实现并作出修改的过程尤为耗时且挑战重重。为了解决这一问题,提升开发效率与团队协作的流畅度,我们构想了一种更为智能和直观的开发辅助方案,旨在通过UI直接映射到代码组件,并简化代码编辑过程,将源码AST与UI做绑定, 直接通过UI界面修改属性或内容,并自动同步到代码文件中,实现一种直观且高效的可视化编程体验,并通过这种方式来维护以及新建项目。 传统低代码方案带来的问题 在深入探讨基于源码的可视化编程技术方案之前,我们先来分析一下传统低代码方案所带来的问题吧。 传统低代码方案通过自定义 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览