基于Angular2.x 的worktile 仿制
也许大家都知道,Worktile 是一个典型的基于 AngularJS的协作平台。当时Worktile 团队采用的是Angular1.x 版本,在开发过程中踩了很多坑,主要功能包括任务管理、日程安排、文件共享以及在线文档协作,其中的一些技术包括:
- angular-cli的使用,angular项目框架的快速搭建
- 模板和组件的编写,单页面程序的模块化开发
- 基于angular service 的前端数据缓存
- 基于Flex的自适应页面布局
那么在前期开发中,主要先模仿下基本的页面布局和任务面板模块。基于Socket的实时消息推送功能在要求不高的情况下可采用Socket.io 来完成(已经在飞机大战中用的很多了)。作为前端工程师,当然主要从FrontEnd的角度去着手。下图是经过一段时间折腾的结果(DEMO地址),其中在 基于Rxjs/Observable 的数据流 发布订阅中折腾的时间最长。
在部署阶段,一般要考虑几个问题,如何尽量压缩代码和资源的体积,如何减少http 请求次数。通过ng cli 工具自带的build命令,可以将开发版的App 编译打包为prod 版本,prod版本中 App 所用的组件(JavaScript 代码,Html模板以及组件的CSS代码)都将压缩打包为几个bundle.js.
ng build -prod
如果不加-prod 选项,则默认是-dev(开发版本),相比之下,prod版的部署文件中还有gzip 格式的压缩代码,通过apache 等服务器的静态文件服务可以达到比较高的性能。
large select 组件实现
最近完成了一个小组件开发,基于这么个需求:
在Chrome和Firefox中原生的select 下拉菜单实现机制不同,Chrome在select添加options的时候就进行渲染(此时UI会处于卡顿状态),Firefox在select下拉的时候才会临时渲染。如果在下拉菜单中有几千上万条记录的时候Chrome会在加载页面时卡顿,Firefox会在下拉时卡顿。
So,为了获得良好的用户体验和Pollyfill浏览器之间的行为差异,需要重写一个select组件,包含以下功能:
- 对options分页,滑动到底部自动翻页
- 提供option内容检索
- 可绑定至任意DOM元素
- 控制滚动翻页的响应频率(debounce)
下面提供两个版本的在线DEMO,其实代码几乎是一套,不过原生JS版本中需要自己完成视图的更新,这点用框架的数据绑定会方便很多。
基于TypeScript编译修改的原生JS版本
Angular2.x版本DEMO
如果有需要的朋友,请自行修改源码。使用方法直接参考页面中的源码或者访问项目地址