4th Apr., 2018
由于麥克斯的數(shù)據(jù)庫為postgis, 再加上他建議認為node效率太低, 萬一后面要跑復雜計算還是python強(是的, 我一開始還以為WebGL可以搞計算渲染一起來呢, 后來小姐姐說了只有在能完全并行的情況才好用來計算), 于是就用python吧.
本來, 我們用webpack-dev-middleware和express.js; 他們用的是Falcon, 既不是Django也不是Flask, 所以沒有資料可查, 不過好在python做后端套路類似. 大概是他自己搞個服務(wù)器serve各種東西, 要用到一個叫WSGI的東西, 在Win下一行代碼就可以開啟服務(wù)器; 這不禁讓我想起去年投稿時的代碼是前端npm start一下后端也npm start一下的陳年舊事.
static的東西, 本來我們使用的是index.ejs(應(yīng)該是一個template的操作), webpack會生成bundle; 現(xiàn)在只要把Falcon代碼里那一塊add_static_route指向webpack生成的目錄就行了. 這里注意到, 在win下和mac下配置static地址操作(字符串操作)還不太一樣; Max說以后可以配置Nginx來解決這個問題, 只需兩行代碼即可, 所以暫時我就不考慮了.
看Andrew Ng的DL課, 在講公式推導(矩陣向量化), 講的好像太細了, 又不太舍得跳著看, 寫寫公式熟悉一下numpy還是有點用的.
5th Apr. , 2018
繼續(xù)把麥克斯的代碼遷移過來. static的東西解決了, 現(xiàn)在就是要搞那一塊亂七八糟的router, API之類的東西了. 其api.js代碼用的vanilla JS寫了一個function, import不成, 總是報錯module not found所以通過一番痛苦掙扎后, 開爾文菊苣說你這個都沒export你玩啥啊. 果然export以后就在可以了, 然后在按照邁克爾之前代碼的樣子, 改成比較現(xiàn)代的語法版本. (這深刻體現(xiàn)了基礎(chǔ)知識不扎實的后果)
此外, 開爾文看我build總是很慢, 建議我webpack里配置一下watch. 其實我也不知道為什么bundle后代碼這么長, 這個問題也準備要著手解決一下了.
哦其實上述問題很簡單, 就在webpack.config.js里 module.exports = {...} 加一句watch: true, 就會每次增量更新.
6th Apr., 2018
繼續(xù)學習吳恩達的視頻, 有些東西確實可以很快跳過, 反正后面編程作業(yè)還要自己推導;
對于麥克斯的代碼, 由于一開始我直接把查詢條件放在了resource.py里面, 所以在系統(tǒng)里按鈕事件綁定到這個查詢的地方的時候, 一開始參數(shù)直接為空, 其實應(yīng)該用{}作為參數(shù)才對.
周末 7-8th Apr., 2018
主要回顧了過去幾個月情況, 為什么沒能投稿. 說實在我不覺得我應(yīng)付多大責任.
因為上課, 學習了下Dynammic Programming的基本知識, 還是很有意思的, 但總感覺自己入門晚了. 題目很像中學競賽的組合數(shù)學問題, 奈何我那時沒好好學, 本科也沒機會學.
粗略瀏覽了要改的和要審的文章. 做了一些小注記.
21st Apr., 2018
一個有趣的plugin: webpack-bundle-analyzer, 可以看你bundle以及其他各種中間過程打包的文件大小, 用了優(yōu)美的TreeMap可視化方法. 我的bundle.js一開始太大了, 各種東西都塞在了里面(不管是自己的jsx、還是人家的庫), 每次修改完刷新頁面都要半天.
最終采用了code splitting技術(shù), 可以看下面兩篇文章Webpack 大法之 Code Splitting和CommonsChunkPlugin學習小結(jié). 我們用到了這個CommonsChunkPlugin的東西, 是webpack自帶的. 據(jù)說webpack4已經(jīng)不用這個了, 用了某種新技術(shù), 暫時沒看...
CommonChunksPlugin的正確打開方式又提到了一個manifest的東西, 是因為vendor每次打包后hash會變, 失去了緩存意義(我的描述可能不準, 暫且這么理解).
放兩張Treemap前后對比:
23rd Apr., 2018
React代碼里有一段, 是一個滑動條和一個按鈕組成一部分; 根據(jù)數(shù)據(jù)、用this.dataStore.map(createSliderButton)生成多個部分. 我很愚蠢的沒有將這個部分先包成一個組件, 而是寫了個createSliderButton, 里面直接return一個jsx. 最后寫的時候各種交叉感染, 不同按鈕最后this指向都一樣. 二爺一點撥說這個應(yīng)該直接寫成組件再去map, 因為它是復用的, 我才恍然大悟. 竟然忘記了React的最基本要義.
React事件綁定一個方法, 帶有參數(shù), 那么我們不能直接在onClick = {func(par)}, 這樣就是直接調(diào)用了; 可以采用箭頭函數(shù)onClick = {() => {func(par)}}.
css在用antd的slider時, 其marker的文字長度在顯示的時候有限制, 會給你截成很多段; 辦法是直接操作其css, 增加一個樣式
.ant-slider-mark-text{
white-space: nowrap;
}
26th Apr., 2018
對于復雜數(shù)據(jù)的調(diào)試, 如果發(fā)現(xiàn)用別人的東西的時候結(jié)果不一樣, 就需要好好對各種props各種中間輸出值進行一一比較
27th Apr., 2018
React用用F12里面的React工具, 看看不同的Components的props到底變沒變, 或許能發(fā)現(xiàn)很多問題.
mobx里@computed get在調(diào)用時當做一個值而不是函數(shù).
不要在傳props的時候使用mobx.toJS, 太慢 (原理不明, 實踐所得). 直接在dataStore里搞一個@computed get valToJs()就行了.
