基于 Angularjs&Node.js 云编辑器架构设计及开发实践

q36988

• 基于 Angularjs&Node.js 云编辑器架构设计及开发实践
  
  
  
  • 一、产品背景
    
  • 二、总体架构
    
    
    
    • 1. 前端架构
      
      
      
      • a.前端层次
        
      • b.核心基础模块设计
        
      • c.业务模块设计
        
      
      
    • 2. Node.js端设计
      
    
    
  • 三、单元测试
    
  • 四、持续集成及自动部署
    
  • 五、打包
    
  • 六、总结
    
  
  

一、产品背景
　　产品是一个内部项目，主要是基于语义网本体的云端编辑器，用于构建语义知识库。抛开语义网本体概念不谈
　　
，简单说就是一个简易的visual studio 云端编辑器。而图形显示则是在百度脑图的基础上改进的，增加了自己的形状和颜色，以及其他功能。

　　具体语义网、本体是什么 (http://baike.baidu.com/link?url=6ctsNtk-dthPu-3kiKK_JdMikArIfvbD4VMAQuc685--88X4lggwo58R-q6zKAGlVUcN_RlxQRr5rlPE3B12WK)

二、总体架构
　　整个系统是由三层构成,分别为UI、API、Infrastructure:
　　UI层
　　UI层主要是用于用户交互界面，目前主要是基于Web的显示方式，未来可扩展移动app。web端采用单页面程序，
　　
所有数据通过ajax请求，最后通过nginx反向代理将前端站点和API站点部署在同一域名下。
　　技术：Html5、Css3、Es5
　　
框架: agularjs
　　API
　　在API层中主要提供UI端所需要的API以及对外的云API。
　　技术：node.js
　　
框架: express等
　　Infrastructure
　　基础层主要提供知识库相关操作，以及数据相关操作,基础层主要是基于Apache jena（Jena是一个语义网本体框架）的封装。以及对阿里云一些服务的封装比如数据库，缓存等。
　　技术: java
　　
框架:spring spring.data jena 等

1. 前端架构

a.前端层次
　　前端核心功能是编辑器，由于业务复杂而多变，因此在逻辑上对前端进行了分层处理。系统由三层结构构成，
　　
由下至上分别为infrastructure、configuration、webapp构成，每层又含有若干模块。

　　在代码文件中app文件对应webapp层，configuration文件对应configuration层，lib文件对应infrastructure层。
　　infrastructure层包含了系统所使用的基础框架，包括下面若干框架：

• Editor: 自行开发WebIDE布局框架，主要用于WebIDE的布局设计等。
  
• Kity: 百度前端团队的脑图框架，主要用于类图显示等。
  
• Util: Util主要涵盖了第三方的库例如jQuery、bootstrap、eventbus等除Editor和Kity外其他库均属于Util范畴。
  

　　configuration层包含了系统所需要配置的文件，主要由以下几个部分构成：

• MenuConfiguration: 用于应用程序顶部菜单和右键菜单的配置。
  
• FileConfiguration: 用于对编辑器所支持的文件配置。
  
• ServiceConfiguration: 用于服务器端请求配置。
  
• Theme: 定义了系统基本皮肤和皮肤扩展。
  

　　webapp层包含了界面显示的页面模块均为单页面程序：

• UserDashboard: 用户工作台入口，管理项目，新增项目等。
  
• EditSpace: 编辑器工作区。
  

b.核心基础模块设计
　　Edtior：是编辑器的功能基础，用于控制编辑器窗口布局、分割、样式等，主要包括三个核心类：

• Editor: 每个编辑器只有一个Editor对象，是编辑器的基础对象，其他对象都可以组合至Editor对象中。
  
• Tabcontainer：Tabcontainer对象是editor下的一个区域对象，用于控制布局、定位、显示、变化等特性，在Editor中可以有多个Tabcontainer。
  
• Panel：Panel对象是Tabcontainer下的一个内容对象，用于控制内容，一个Tabcontainer下可以有多个Panel实现对选项卡效果。
  

var Editor = require('/lib/editor-ui/src/editor/editor');　　var editorUi = new Editor('#container');
　　editorUi.init('Split5');
　　

　　// region top
　　console.log(editorUi.getTabContainer('split5-top').getSize());
　　module.exports = window.editorUi = editorUi;
　　

　　var Panel = require('/lib/editor-ui/src/panel/panel');
　　var containerTop = editorUi.getTabContainer('split5-top');
　　containerTop.isTabCard = false;
　　containerTop.addPanel(new Panel({name: '点击我隐藏', template: editSpaceTemplateConfiguration.toolBarTemplate}));
　　

　　// endregion
　　

　　// region left
　　var containerLeft = editorUi.getTabContainer('split5-bottom-left');
　　containerLeft.direction = 'left';
　　containerLeft.addPanel(new Panel({name: 'left点击我隐藏', templateHtml: 'left我是内容'}));
　　containerLeft.addPanel(new Panel({name: 'left点击我隐藏1', templateHtml: 'left我是内容1'}));
　　containerLeft.addPanel(new Panel({name: 'left点击我隐藏2', templateHtml: 'left我是内容2'}));
　　MenuConfiguration:用于应用程序顶部菜单和右键菜单的配置,由于菜单功能复杂多变因此采用配置结构。其中顶部工具栏菜单最为复杂，因为根据选中内容不同，需要动态隐藏或显示。我们采用了管道式处理方式，执行逻辑双击或 单击界面上的任何元素激发依次管道过滤，在管道过滤中每个按钮维护自己的过滤逻辑返回bool值告诉是否通过过滤。

{　　"name": "新建本体",
　　"cssClass": "kop-tool-bar-ontology",
　　"disabledCssClass": "kop-tool-bar-ontology-disabled-icon",
　　"commandName": "toolbar/ontology/new",
　　"enableHandler": "newOntologyEnableHandler",
　　"children": []
　　}
　　渲染按钮 的步骤如下：

• 获取菜单中当前类型需要显示的按钮。
  
• 根据按钮的类型图标等显示按钮。
  

　　动态改变按钮 （在选中文件或元素不同时按钮会呈现可用和不可用状态） 的步骤如下：

• 双击或单击事件激活过滤管道
  
• 执行按钮数组中所有enableHandler方法。
  
• 返回为false时发起一个buttonstatusChanges事件。
  
• 菜单controller接受此事件改变按钮数据，最终改变界面元素（双向绑定）。
  

　　除此之外还包括FileConfiguration和ServiceConfiguration,用于文件显示图标和右键菜单的配置

var fileConfiguration =[{　　"type":"owl",  //文件类型
　　"iconSkin":"/asset/img/ico.jpg"
　　
},...]
var serviceConfiguration = {　　"host": "http://dev.onteditor.ad.6starhome.com/api/"
　　
}

c.业务模块设计
　　EditSpace是编辑器业务模块，由以下几个子模块构成,每个模块在项目初始化时通过调用editor框架将模版注入至页面中：

• 头部(Headbar)
  
• 工具栏(Toolbar)
  
• 项目区(ProjectWindows)
  
• 导入区(ExportWindows)
  
• 设计区(DesignWindows)
  
• 属性区(PropertyWindows)
  
• 编辑区(EditWindows)
  
• 状态栏(StatusBar)
  

　　在系统初始化时候加入各种模块
var Panel = KOP.EditorUI.Panel;　　var TabContainer = KOP.EditorUI.TabContainer;
　　// endregion
　　

　　// region 左边框初始大小，禁用选中效果
　　var leftSpace = editorUi.getTabContainer('split8-main-space-wrap');
　　leftSpace.getObject().width(300);
　　editorUi.getTabContainer('split8-main-space-edit').getObject().height(250);
　　

　　// region 头部模版注入
　　var headBarContainer = editorUi.getTabContainer('split8-top');
　　headBarContainer.addPanel(new Panel({template: editSpaceTemplateConfiguration.headBarTemplate}));

　　在每个模块中包含了单元测试(test) 事件处理中心(event-handler) 界面(html) 控制器(controller) 如下图所示：

　　事件处理中心接受全局的事件，比如之前配置好的按钮的事件，其他模块与之通信的事件,均是在事件模块中处理。
function onNewClass($scope) {　　$scope.$on('toolbar/class/new', function (e, param) {
　　});
　　}

2. Node.js端设计
　　Nodejs端主要是对各种业务的组装，通过express框架暴露RestfulAPI,这里不再赘述。

三、单元测试
　　可参看之前文章 http://www.cnblogs.com/vipyoumay/p/5331787.html

四、持续集成及自动部署

• 代码管理: gitlab(本地部署)
  
• CI服务器: jenkins(本地部署)
  
• 构建部署：docker(本地部署)
  

　　整个配置太多了就不讲解了，有需要可以留言

五、打包
　　采用grunt对前端打包,如何打包请自行百度。

六、总结
　　整个项目工作量很大，我们团队6人，在规定时间内（包括需求设计一共3个月）完成，持续集成自动化部署给我们节约了很多时间，
　　
另外另外架构的设计也为我们在需求微调赢的了时间。
　　设计包括的内容很多，这里不能一一说完，如果有兴趣可评论或私信交流。