2、加载apiHelper.js文件。在上一步响应完成后，页面会通过script标签加载一个特别重要的apiHelper.js 文件。这个JS文件是做什么的呢？它会极大的简化我们编写API文档的语法！首先，这个文件在window下面定义了一个apiHelper对象，这个对象用来封装大量的静态方法，这些静态方法主要是用于定义API文档数据结构的，比如apiHelper.response.page(object)方法将会直接根据object对象生成分页响应数据结构。
3、加载单个API。当用户点击某个API时，页面会动态将该JS文件加载到浏览器并且执行。那么这个JS的API文件到底执行了什么代码呢？其实很简单，我们的每个JS API文件都在window下面定义了一个api对象（当然，是按照一定数据结构定义的对象），当这个JS文件执行完成后，当前页面的下的window.api对象已经被更新了，这时我们只需要调一个render()方法，将此window.api对象用HTML呈现出来即可。在呈现window.api对象的render方法中，我们充分利用JS这门语言的动态性及其反射机制，从而极大的简化了API文档的定义。
4、查看单个API的历史版本。在加载完单个API的JS文件后，我们可以通过SVN查找该JS文件的修改记录，然后呈现一个revision记录列表，点击每一个revision即可加载曾经某个版本的JS，这时window.api对象已经被替换成了历史版本，这时我们只需要再次调用之前的render方法，将这个window.api对象重新呈现出来即可，这样就可完成快速版本切换和智能对比。
以上就是我们这个API框架的核心工作原理了，是不是非常简单呢！如果你拥有丰富的软件架构经验，相信读到这里你已经完全明白我们的思路并可以搭建一套类似的API文档服务框架了。但是可能对于大多数读者来说，读到这里还是有些云里雾里。别担心，接下来笔者将会以我们项目中的一个API文档为例，结合界面和代码对核心原理进行阐述。
首先请看我们某个API的阅读界面（包含4个tab的一个网页）：
以上4张图片分别是我们某个API文档的请求、响应、请求示例和响应示例的定义文档。这个文档就是通过对window.api对象进行解析得到的。别看这个文档定义的内容这么多，但这个API的源文件却是非常简单的，请看下图：
数一数，大概只有二十多行代码就完成了一个这么复杂的API的定义！这全都得归功于JavaScript这门动态语言的强大！
如果你仔细阅读上方的API源文件，你可能会发现我们定义了很多特殊语法，比如下划线“_”属性代表当前对象的整体说明，而api对象下面的POST属性则同时定义了http method和请求URL。还有apiHelper.p()方法可以将一个请求/响应字段的定义放在一行代码里面，其4个参数分别是：数据类型、是否可空（字符串哦）、示例数据（不仅仅支持string哦）和字段说明。这个JS文件执行后的最终效果就是定义window.api对象，然后浏览器加载完该JS后，我们的render()方法就可以将其呈现出来了。
下面，我们到浏览器的控制台中来看看实际的window.api对象是长什么样子吧：