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

搜狐快站插件IDE工作原理解析相关推荐

太牛了，搜狐快站上线微信插件电商插件升级
其实搜狐快站刚上线的时候我并不看好,因为我觉得功能上虽然比百度SITEAPP强,但在SEO.流量分发方面差太远了,对中小站来说流量也许更重要.可随着时间的推移我才发现,在移动互联网时代流量的玩儿法显然 ...
【科创人独家】搜狐快站金庸：有情有义，90后技术创业者的问剑之路
因户口入职搜狐科创人:<科创人>采访前会尽量多地查阅采访对象资料,但您的资料确实难搜--向读者们做下自我介绍吧. 金庸:(笑)这个名字不加其他关键词是很难搜,我1991年出生在江西南昌, ...
搜狐快站创建的个人站点域名如何绑定自己的独立域名
最近在群里和圈子里碰到很多人在问快站建立的个人站点域名如何绑定自己的独立域名, 紫夜就在这里详细为大家讲解下关于快站域名绑定问题.其实很简单,只需要三步就可以完成, 首先大家花点时间可以了解下什么是独 ...
去除搜狐快站底部版权
感觉搜狐快站这个不错,特别适合初学者,但是不太愿意花钱去去掉底部版权,所以就找了一下,没想到还找到了-- 具体方法就是: 在META设置下定义全局-- <style type="tex ...
搜狐快站制作html,搜狐快站H5页面设计制作大赛，获奖作品第一弹！
原标题:搜狐快站H5页面设计制作大赛,获奖作品第一弹! 快海报设计大赛开赛两周以来,已经收到了众多朋友的踊跃投稿.我们从4月15日之前的投稿作品中精选出六部,作为首批获奖者! 我们的比赛并没有结束,下 ...
搜狐快站制作html,搜狐快站H5页面设计制作大赛，获奖作品第二弹！
原标题:搜狐快站H5页面设计制作大赛,获奖作品第二弹! 历时两个月的搜狐快站快海报大赛圆满落下了帷幕.众多参赛网友利用搜狐快站·快海报,精心动手制作了H5页面.八名参赛网友,从4月15日之后的投稿作品 ...
搜狐快站 mysql_免费建站哪个最好？免费建站平台推荐
免费建站哪个最好?建站就是建立一个自己的网站,但是一把都需要借助一些平台来进行建站的操作,今天就给大家分享几个免费建站平台. 1.Wix (国外) Wix 是国外比较有名的一款免费网站建站系统,模板设 ...
搜狐快站，一款可视化建站工具。
经过一年时间的反复优化,搜狐正式推出了移动建站工具:搜狐快站,快站是一款可视化建站工具.这是继百度siteapp.腾讯风铃后,巨头进入移动建站领域又一家公司,2014年移动大战开始了. 快站六大优势: ...
简述12306网站春运抢票插件的工作原理
好久没有自己写日志了啊,先说明一下,这篇文章也并非完全原创,事先是有专门查找过相关技术文档的,毕竟菜鸟水平有限(这也是菜鸟一直自称"菜鸟"的原因).因为就快要过年了,而公司一个ER ...

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

搜狐快站插件IDE工作原理解析相关推荐

最新文章

热门文章