隨便記錄下最近的一些學(xué)習(xí)工作內(nèi)容堕战。
基于Angular2.x 的worktile 仿制
也許大家都知道闷畸，Worktile 是一個典型的基于 AngularJS的協(xié)作平臺。當(dāng)時Worktile 團隊采用的是Angular1.x 版本榛丢，在開發(fā)過程中踩了很多坑馏臭，主要功能包括任務(wù)管理、日程安排名扛、文件共享以及在線文檔協(xié)作谅年，其中的一些技術(shù)包括：
- angular-cli的使用，angular項目框架的快速搭建
- 模板和組件的編寫肮韧，單頁面程序的模塊化開發(fā)
- 基于angular service 的前端數(shù)據(jù)緩存
- 基于Flex的自適應(yīng)頁面布局
那么在前期開發(fā)中融蹂，主要先模仿下基本的頁面布局和任務(wù)面板模塊∨螅基于Socket的實時消息推送功能在要求不高的情況下可采用Socket.io 來完成（已經(jīng)在飛機大戰(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 選項为障，則默認是-dev（開發(fā)版本）晦闰，相比之下，prod版的部署文件中還有g(shù)zip 格式的壓縮代碼鳍怨，通過apache 等服務(wù)器的靜態(tài)文件服務(wù)可以達到比較高的性能呻右。
large select 組件實現(xiàn)
最近完成了一個小組件開發(fā)，基于這么個需求：
在Chrome和Firefox中原生的select 下拉菜單實現(xiàn)機制不同鞋喇，Chrome在select添加options的時候就進行渲染（此時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
如果有需要的朋友晦款，請自行修改源碼。使用方法直接參考頁面中的源碼或者訪問項目地址
