隨便記錄下最近的一些學(xué)習(xí)工作內(nèi)容。
基于Angular2.x 的worktile 仿制
也許大家都知道，Worktile 是一個典型的基于 AngularJS的協(xié)作平臺。當(dāng)時Worktile 團(tuán)隊采用的是Angular1.x 版本，在開發(fā)過程中踩了很多坑，主要功能包括任務(wù)管理、日程安排、文件共享以及在線文檔協(xié)作，其中的一些技術(shù)包括：
- angular-cli的使用，angular項目框架的快速搭建
- 模板和組件的編寫，單頁面程序的模塊化開發(fā)
- 基于angular service 的前端數(shù)據(jù)緩存
- 基于Flex的自適應(yīng)頁面布局
那么在前期開發(fā)中，主要先模仿下基本的頁面布局和任務(wù)面板模塊?；赟ocket的實時消息推送功能在要求不高的情況下可采用Socket.io 來完成（已經(jīng)在飛機(jī)大戰(zhàn)中用的很多了）。作為前端工程師，當(dāng)然主要從FrontEnd的角度去著手。下圖是經(jīng)過一段時間折騰的結(jié)果（DEMO地址），其中在 基于**Rxjs/Observable **的數(shù)據(jù)流 發(fā)布訂閱中折騰的時間最長。
在部署階段，一般要考慮幾個問題，如何盡量壓縮代碼和資源的體積，如何減少http 請求次數(shù)。通過ng cli 工具自帶的build命令，可以將開發(fā)版的App 編譯打包為prod 版本，prod版本中 App 所用的組件（JavaScript 代碼，Html模板以及組件的CSS代碼）都將壓縮打包為幾個bundle.js.
ng build -prod
如果不加-prod 選項，則默認(rèn)是-dev（開發(fā)版本），相比之下，prod版的部署文件中還有g(shù)zip 格式的壓縮代碼，通過apache 等服務(wù)器的靜態(tài)文件服務(wù)可以達(dá)到比較高的性能。
large select 組件實現(xiàn)
最近完成了一個小組件開發(fā)，基于這么個需求：
在Chrome和Firefox中原生的select 下拉菜單實現(xiàn)機(jī)制不同，Chrome在select添加options的時候就進(jìn)行渲染（此時UI會處于卡頓狀態(tài)），F(xiàn)irefox在select下拉的時候才會臨時渲染。如果在下拉菜單中有幾千上萬條記錄的時候Chrome會在加載頁面時卡頓，F(xiàn)irefox會在下拉時卡頓。
So，為了獲得良好的用戶體驗和Pollyfill瀏覽器之間的行為差異，需要重寫一個select組件，包含以下功能：
- 對options分頁，滑動到底部自動翻頁
- 提供option內(nèi)容檢索
- 可綁定至任意DOM元素
- 控制滾動翻頁的響應(yīng)頻率（debounce）
下面提供兩個版本的在線DEMO，其實代碼幾乎是一套，不過原生JS版本中需要自己完成視圖的更新，這點用框架的數(shù)據(jù)綁定會方便很多。
基于TypeScript編譯修改的原生JS版本
Angular2.x版本DEMO
如果有需要的朋友，請自行修改源碼。使用方法直接參考頁面中的源碼或者訪問項目地址
