随着互联网的快速发展,应用的复杂程度越来越高,用户体验也越来越重要。在Java Script发展初期其主要作用是实现简单的页面交互逻辑,功能简单且代码量极少。而如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端,随着web2.0时代的到来,Ajax技术得到广泛应用,各种前端框架层出不穷,前端代码日益膨胀。这给开发者带来很大的学习负担以及项目的代码维护成本,如何解决开发流程和业务逻辑严重耦合、业务代码的框架版本迁移成为了一个十分严峻的问题。论文以模型驱动开发和前端组件化为核心思想,运用React、Redux、Webpack等技术,根据业务逻辑和开发经验设计了能够覆盖大部分应用场景的UIModel、Data Model、Show Model这三种模型,设计与实现了一个基于模型驱动的前端框架。通过这个框架,业务开发人员只需要关注模型本身的配置,其他的所有工作由MBB前端框架来完成。所有的新技术融合全在框架层进行,专业的前端开发人员也只需要关注框架本身的开发。通过这种基于模型驱动的前端框架,可以极大地加快开发效率,减少开发成本,并且可以做到项目在框架之间的平滑迁移。最后使用该框架和传统的前端开发方法开发了一个通用的后台管理系统并进行仿真环境测试。MBB前端框架大幅度简化了开发人员的工作流程和开发难度,并将工作量大幅度削减,同时通过框架开发出的应用性能、可拓展性、可维护性、代码健壮性都有卓越的提升。