团队协作工具Worktile技术架构揭秘(1)

ng-class=“{1:‘task-completed-style’}[task.completed]”>

<a class=“entry-task-check”

id=“task_check_{{ task.tid }}”

wt-click=“js_complete_task($event, entry, task)”>

{{task.name}}

2. 语义化标签，AngularJS在设计之初信奉的理念就是：当编写UI的同时又需要编写业务逻辑时，声明式的代码远比命令式代码要好，命令式的代码更适合写业务逻辑，AngularJS在设计上就通过语义化的标签把对DOM元素的操作和逻辑代码分离，如我们需要展现一个任务列表，只需要下面这段代码即可：

<wt-task view-type=“item” show-project=“false”

class=“slide-trigger”

hide_action=“true”

ng-click=“locator.openTask(task.pid, task.tid)”>

3. 模块化设计，AngularJS堪称模块化设计方面的典范，通过模块化设计我们可以非常好的实现Worktile的工程化，在Worktile中涉及的元素非常多，如有项目、任务、日程、文件、话题、文档等等，而这每一个元素都可以设计为一个模块，如下所示：

(function () {

‘use strict’;

angular.module(‘wtApp’, [

‘wt.project.ctrl’,

‘wt.team.ctrl’,

‘wt.task.ctrl’,

‘wt.event.ctrl’,

‘wt.post.ctrl’,

‘wt.file.ctrl’,

‘wt.page.ctrl’,

‘wt.mail.ctrl’

]);

}());

4. 引入依赖注入，依赖注入是面向对象中比较成熟的设计模式之一，为了解决面向对象中依赖问题，得到了广泛的应用，AngularJS中大胆使用了依赖注入，极大的减少了各个模块之间的依赖问题：

taskListCtrl.KaTeX parse error: Undefined control sequence: \[ at position 10: inject = \̲[̲'scope’, ‘$stateParams’,

‘$rootScop{e}^{\prime }{,}^{\prime }$popbox’,

‘$locatio{n}^{\prime }{,}^{\prime }$timeout’,

‘bus’, ‘globalDataContext’,

‘locator’];

结合以上特点，我们最终决定了前端框架使用AngularJS来实现，从Worktile上线两年多的表现来看，我们的选择无疑是正确的。当然AngularJS也有一些缺点，在实际使用中还是要根据具体的产品类型来选择使用，另外AngularJS 2.0也已经初见端倪，和AngularJS 1.0有很大的不同，感兴趣的同学可以先去尝鲜一下。

服务设计

我们再来看看Worktile的后台服务设计，Worktile的整体服务架构设计如下图所示：

其中前端部分在上面的SPA一节中我们已经说过了，下面一一分析下其他的服务：

1. API服务，包括Web API、Mobile API、Open API，这些都运行于NodeJS之上，选用NodeJS的原因主要是它的异步事件驱动，对于高并发的支持比较好，另外一个原因是使用简单，对于前后端可以使用同一门语言去开发。

2. 缓存和队列服务，Worktile中的缓存和队列服务都是基于Redis来实现，Redis是一款非常优秀的开源缓存服务，并且可以选择基于内存还是进行数据持久化，它提供的pub/sub模型对于Worktile来说非常重要，对于一些实时性要求不高的处理，我们都是在Redis中pub一条消息，告知其他服务有数据发生了变化，那些服务在接收到Redis中的消息后，根据消息的类型决定应该如何做出处理。

3. 数据库服务，Worktile产品本身的特点决定了它是一个对实时性和性能的要求，远超过对事务性要求的产品，所以在选择数据库时，我们选用了MongoDB数据库，性能高，集群方便，数据以BSON结构存储，和Node.js天生完美结合。

4. 文件预览服务，使用Worktile的同学肯定知道在Worktile中所有的文件都可以做到无需下载到本地，而直接在线查看，这一切都是预览服务的功劳，因为文件类型的各种各样，在实现文件预览时也要根据文件的类型做出不同的处理，针对txt、pdf、代码片段等文本型的文件，我们只需要读取文件中的内容，然后再前端用相应的视图展现出来即可，相对比较简单。但是对于Office类型的文件，如ppt、doc、xls等文件，就不能这么简单的处理，我们希望文件在Worktile中查看的效果和用户在本地使用Word、Excel、PowerPoint查看的效果差不多，经过我们的调研，最终选用了微软官方提供的Office Web App服务。

消息推送

消息推送服务是Worktile最核心的服务之一，前面提到过作为一款团队协作工具，要能够实现非常好的实时性，任何数据的变化都需要及时变更到团队所有成员当前所在的视图，如下面这幅图，是一个典型的任务看板，团队所有成员可能同时在操作当前项目中的任务，每个操作引起看板的变化都会实时更新，不需要用户做任何刷新操作：

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-tGovVEne-1719246663339)]