搜狐快站插件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 该组件对应的编辑定义）