背景
公司使用泛微的Ecology 9系统作为OA系统，以满足公司内部的流程审批、业务数据存储与使用等内部管理需求。
代码块，是OA系统提供的自定义Web前端代码的功能，可以在流程布局、建模布局、建模查询页面中编写自定义的HTML代码（在HTML中又可以通过<style>和<script>编写CSS和JS代码），实现自定义功能。即，这是一种二次开发机制。
原始开发模式
刚起步时，我们的开发模式非常原始：
- 在OA后台中，打开代码块编辑界面（需多次点击）。
- 编辑代码块，编写CSS和JS代码（一般不写HTML，而是在JS中动态控制DOM）。
- 保存代码块。
- 打开/刷新代码块所在的页面。
- 运行代码，查看效果。
因为代码总是要多次修改才能写好，所以上述整个过程都要不断循环。开发过程图示如下：
缺点：
- 除了编写代码本身，还必须做很多步骤的额外操作，非常繁琐，开发效率很低。
- 没有版本管理，容易改乱。
- CSS和JS写在一起，关注点未分离，心智负担较重。
- 多个功能写在一起，功能复杂时，心智负担很重。
- 代码复用只能靠手动复制，同步修改困难。
- 同一个页面只有一个代码块，多个开发人员不能同时开发，因为保存时会互相覆盖。
- OA的在线代码编辑器只有有限的代码提示，不如IDE好用、高效。
可见，在这种原始开发模式下，我们很难有效地完成开发任务。
本质上，这些问题跟在Web古早时期直接手写一个个HTML文件是一样的，Web后来发展出了前端工程，通过前端开发框架解决种种开发时的问题。受此启发，我设计出了如下开发框架。
开发框架
目标
解决开发模式的问题，简化代码的开发、部署、管理过程，提高开发效率。
思路
- 建立Git仓库做版本管理，将开发框架和业务代码都放入其中。
- 规范化代码组织结构。
- 支持分开编写CSS和JS源文件，然后合并在一起构建为成品JS文件。
- 支持Sass、JSX等高级语法的编译。
- 支持持续构建，源文件修改后，自动重新构建。
- 支持将复杂的功能拆分为多个源文件。
- 支持源文件之间代码复用。
- 支持多个开发人员在同一个页面上各自开发不同的功能。
- 支持开发环境、生产环境的环境配置。
- 内置Web服务器，提供开发时的成品JS文件访问。
- 增强IDE的代码提示，支持提示OA系统API。
- 将OA系统API二次封装成公共库，屏蔽细节、增强功能、简化使用，提高开发效率。
业务代码的开发过程
- 启动开发框架，框架会在本地运行起Web服务器，并持续构建代码。
- 在开发环境的OA系统的代码块中不直接编写CSS和JS代码，而是通过
<script src="..."></script>引用本地的成品JS文件。 - 在开发框架内编写代码（可用IDE），每次保存都会自动重新构建成品JS代码。
- 打开/刷新代码块所在的页面。
- 运行代码，查看效果。
改进后的开发过程图示如下：
可见，循环缩短了，繁琐的OA后台操作变成了一次性工作，循环中只剩下了开发本身最必不可少的编写和运行操作。
业务代码的部署过程
将成品JS文件上传至生产环境的OA服务器，然后在OA系统中将<script>的src改为服务器上的地址即可。
实践成果
实践表明，此开发框架显著提高了开发效率。通过不断解决实际遇到的问题，开发框架已经能够支持复杂、大型的业务需求的开发。