搜狐快站插件IDE工作原理解析

下载了git上kz-ide的代码，做了简要的分析，通过此能了解到搜狐快站本身的基本原理，分享给大家。 

一、基本逻辑：

将页面各组件结构化（json），页面的组合也以json方式的描述， 快站通过nodejs（mustache）渲染各组件，生成对应的html，通过浏览器展示。 

（注：这个在git上还有一个单独的应用示例，更简单一些，可以快速了解到此原理 kz-render）

二、调用流程:

   server.js  (handlerequest)-->  debugging.js --> kzEditor_debugging.js(组件定义及加载）--> kzEditor.js

   

   可以通过页面拖拽，并保存组件集合形成页面， 预览页面就是加载页面的组合定义，根据组件模板渲染成对应的html 

   

三、主要的js文件及用途

1、server.js 

nodejs的入口文件， 创建server，80端口的监听， 同时对request做相应的处理 

对路径参数的不同，区分了本地的处理或者是通过代理去请求快站的响应。 

2、debugging.js 

加载依赖的各js文件及css文件，同时加载入关键的require_config.js (引入依赖的ui、kzeditor、及editor_debugging组件） 

3、kzEditor.js

3.1 定义component组件， 组件定义基本方法， 所以组件均扩展自此类

3.2 componentFactory    组件创建工厂

3.3 componentRegistrar  组件注册器 

3.4 kzEditorUI          editorUI定义 

3.5 kzEditor            editor定义，初始化、添加、插入组件等方法定义

4、kzEditor_debugging.js  调试页面对应的各个组件（事件）定义 

   入口，定义了各预置组件的属性， 初始化kzEditor ，将预置组件及扩展组件通过组件注册器注册， 初始化ide ，加载站点

   初始化设置面板，定义图片上传; 前端登录， 预览html 等操作

4.1  ide_loadserver 加载server组件

4.2  ide/ide_preview_html 测试发布，预览效果

 

5、ui.js

   各内置ui组件定义

6、editing_basic.js

   定义了各内置组件的编辑页面定义 

7、其他（扩展组件定义对应的package.json ==组件定义，以及editing.js 该组件对应的编辑定义）