随着Web应用开发越来越注重用户的交互式体验,以JavaScript为主的前端项目规模越来越大。然而,开发过程中出现了代码管理维护困难、可重用性不高、扩展性差、项目构建低效等问题。遵循模块化开发等设计原则并构建合理高效的前端框架越来越重要。本文采用Flux架构模式,以JavaScript、文档对象模型、AJAX等前端技术为基础,依据模块化和组件化的设计原则,实现了基于Flux架构的前端虚拟DOM框架FVD。具体研究内容如下:首先,分析当前主流MVC模式存在的问题,与Flux架构进行比较并分析使用Flux架构的优势。然后,对FVD框架的每个模块进行分析,其中Dispatcher调度器用于分发行为对象,Store为应用提供数据存储,View视图模块将页面结构进行组件化设计,Action行为模块定义了用户和视图间的交互关系,Fetcher数据交互模块为程序提供服务器端数据存取的接口。在此基础上设计并实现了框架中的各个模块。为了提升页面性能,本文设计了三种优化策略,其一是利用虚拟DOM技术,针对View视图渲染进行了优化,二是将缓存机制引入到Fetcher模块中的底层AJAX操作,减少了请求数据的时间。三是利用webpack对框架进行构建。最后,测试比较了FVD框架和采用了优化策略后的FVD框架的页面性能。并将此框架应用于地质矿山巷道设计建模系统中,描述系统的运行流程。结果表明优化的前端框架FVD加快了页面组件更新渲染的平均时间,降低了数据请求的平均响应时间,并且具有较少的页面平均加载时间。本文为前端开发提供了一种新的开发框架,其使用单向数据流在各个模块之间进行通信,以此为基础构建的前端Web应用实现了良好的代码解耦,具有良好的重用性、可扩展性和可维护性。