基于Angular和原生JS实用的大容量Select组件

随便记录下最近的一些学习工作内容。

基于Angular2.x 的worktile 仿制

也许大家都知道，Worktile 是一个典型的基于 AngularJS的协作平台。当时Worktile 团队采用的是Angular1.x 版本，在开发过程中踩了很多坑，主要功能包括任务管理、日程安排、文件共享以及在线文档协作，其中的一些技术包括：

• angular-cli的使用，angular项目框架的快速搭建
• 模板和组件的编写，单页面程序的模块化开发
• 基于angular service 的前端数据缓存
• 基于Flex的自适应页面布局

那么在前期开发中，主要先模仿下基本的页面布局和任务面板模块。基于Socket的实时消息推送功能在要求不高的情况下可采用Socket.io 来完成（已经在飞机大战中用的很多了）。作为前端工程师，当然主要从FrontEnd的角度去着手。下图是经过一段时间折腾的结果（DEMO地址），其中在 基于**Rxjs/Observable **的数据流 发布订阅中折腾的时间最长。

任务面板页面

表格面板与任务面板通过Angular的Service实现数据共享

在部署阶段，一般要考虑几个问题，如何尽量压缩代码和资源的体积，如何减少http 请求次数。通过ng cli 工具自带的build命令，可以将开发版的App 编译打包为prod 版本，prod版本中 App 所用的组件（JavaScript 代码，Html模板以及组件的CSS代码）都将压缩打包为几个bundle.js.

ng build -prod

如果不加-prod 选项，则默认是-dev（开发版本），相比之下，prod版的部署文件中还有gzip 格式的压缩代码，通过apache 等服务器的静态文件服务可以达到比较高的性能。

before_apache2.png

after_apache2.png

large select 组件实现

最近完成了一个小组件开发，基于这么个需求：

在Chrome和Firefox中原生的select 下拉菜单实现机制不同，Chrome在select添加options的时候就进行渲染（此时UI会处于卡顿状态），Firefox在select下拉的时候才会临时渲染。如果在下拉菜单中有几千上万条记录的时候Chrome会在加载页面时卡顿，Firefox会在下拉时卡顿。

So，为了获得良好的用户体验和Pollyfill浏览器之间的行为差异，需要重写一个select组件，包含以下功能：

• 对options分页，滑动到底部自动翻页
• 提供option内容检索
• 可绑定至任意DOM元素
• 控制滚动翻页的响应频率（debounce）

来个简单的DEMO

下面提供两个版本的在线DEMO，其实代码几乎是一套，不过原生JS版本中需要自己完成视图的更新，这点用框架的数据绑定会方便很多。
基于TypeScript编译修改的原生JS版本
Angular2.x版本DEMO

如果有需要的朋友，请自行修改源码。使用方法直接参考页面中的源码或者访问项目地址

参考文章：
【CTO讲堂】揭秘高效协作工具背后的技术架构