使用wind.js增進java script可維護性
TRANSCRIPT
![Page 1: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/1.jpg)
使用Wind.js增進 JavaScript可維護性流浪小風
![Page 2: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/2.jpg)
程式碼與 Dom 元素相依性高 無所不在的 Callback
最常造成的困擾 ?
![Page 3: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/3.jpg)
甚麼都跟 View綁在一起
![Page 4: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/4.jpg)
幸好有 Knockout.jsView:
Model:
![Page 5: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/5.jpg)
到處都是 Callback
![Page 6: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/6.jpg)
嘗試重構…
![Page 7: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/7.jpg)
別忘了還有異常處理…
![Page 8: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/8.jpg)
幸好有Wind.js
![Page 9: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/9.jpg)
100% 的 JavaScript 相容於各種 JavaScript Framework 類似於 C# 的 Task 模型 改善 JavaScript 撰寫非同步程式的體驗 全中文的文件
Why Wind.js
![Page 10: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/10.jpg)
非同步程式碼
AST
parser
jitbuilderbase async
promise
Base on or
Compiled Code
JIT Compiler
![Page 11: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/11.jpg)
JIT Compile
![Page 12: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/12.jpg)
只存在於開發時期 預先編譯 JS 程式碼
◦ node Windc.js --input inputfile --output outputfile 線上依賴的 wind 底層檔案大小不到 10k
Eval is devil?
![Page 13: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/13.jpg)
難以測試 ?
![Page 14: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/14.jpg)
Demo
西堤店家分布圖 每秒鐘查詢一筆店家地址 ( 一次一筆 ) 顯示在地圖上
![Page 15: 使用Wind.js增進java script可維護性](https://reader035.vdocuments.mx/reader035/viewer/2022062300/5582fff8d8b42a21168b53ec/html5/thumbnails/15.jpg)
Q & A