下载了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 该组件对应的编辑定义)