4th Apr., 2018
由于麦克斯的数据库为postgis, 再加上他建议认为node效率太低, 万一后面要跑复杂计算还是python强(是的, 我一开始还以为WebGL可以搞计算渲染一起来呢, 后来小姐姐说了只有在能完全并行的情况才好用来计算), 于是就用python吧.
本来, 我们用webpack-dev-middleware和express.js; 他们用的是Falcon, 既不是Django也不是Flask, 所以没有资料可查, 不过好在python做后端套路类似. 大概是他自己搞个服务器serve各种东西, 要用到一个叫WSGI的东西, 在Win下一行代码就可以开启服务器; 这不禁让我想起去年投稿时的代码是前端npm start一下后端也npm start一下的陈年旧事.
static的东西, 本来我们使用的是index.ejs(应该是一个template的操作), webpack会生成bundle; 现在只要把Falcon代码里那一块add_static_route指向webpack生成的目录就行了. 这里注意到, 在win下和mac下配置static地址操作(字符串操作)还不太一样; Max说以后可以配置Nginx来解决这个问题, 只需两行代码即可, 所以暂时我就不考虑了.
看Andrew Ng的DL课, 在讲公式推导(矩阵向量化), 讲的好像太细了, 又不太舍得跳着看, 写写公式熟悉一下numpy还是有点用的.
5th Apr. , 2018
继续把麦克斯的代码迁移过来. static的东西解决了, 现在就是要搞那一块乱七八糟的router, API之类的东西了. 其api.js代码用的vanilla JS写了一个function, import不成, 总是报错module not found所以通过一番痛苦挣扎后, 开尔文菊苣说你这个都没export你玩啥啊. 果然export以后就在可以了, 然后在按照迈克尔之前代码的样子, 改成比较现代的语法版本. (这深刻体现了基础知识不扎实的后果)
此外, 开尔文看我build总是很慢, 建议我webpack里配置一下watch. 其实我也不知道为什么bundle后代码这么长, 这个问题也准备要着手解决一下了.
哦其实上述问题很简单, 就在webpack.config.js里 module.exports = {...} 加一句watch: true, 就会每次增量更新.
6th Apr., 2018
继续学习吴恩达的视频, 有些东西确实可以很快跳过, 反正后面编程作业还要自己推导;
对于麦克斯的代码, 由于一开始我直接把查询条件放在了resource.py里面, 所以在系统里按钮事件绑定到这个查询的地方的时候, 一开始参数直接为空, 其实应该用{}作为参数才对.
周末 7-8th Apr., 2018
主要回顾了过去几个月情况, 为什么没能投稿. 说实在我不觉得我应付多大责任.
因为上课, 学习了下Dynammic Programming的基本知识, 还是很有意思的, 但总感觉自己入门晚了. 题目很像中学竞赛的组合数学问题, 奈何我那时没好好学, 本科也没机会学.
粗略浏览了要改的和要审的文章. 做了一些小注记.
21st Apr., 2018
一个有趣的plugin: webpack-bundle-analyzer, 可以看你bundle以及其他各种中间过程打包的文件大小, 用了优美的TreeMap可视化方法. 我的bundle.js一开始太大了, 各种东西都塞在了里面(不管是自己的jsx、还是人家的库), 每次修改完刷新页面都要半天.
最终采用了code splitting技术, 可以看下面两篇文章Webpack 大法之 Code Splitting和CommonsChunkPlugin学习小结. 我们用到了这个CommonsChunkPlugin的东西, 是webpack自带的. 据说webpack4已经不用这个了, 用了某种新技术, 暂时没看...
CommonChunksPlugin的正确打开方式又提到了一个manifest的东西, 是因为vendor每次打包后hash会变, 失去了缓存意义(我的描述可能不准, 暂且这么理解).
放两张Treemap前后对比:
23rd Apr., 2018
React代码里有一段, 是一个滑动条和一个按钮组成一部分; 根据数据、用this.dataStore.map(createSliderButton)生成多个部分. 我很愚蠢的没有将这个部分先包成一个组件, 而是写了个createSliderButton, 里面直接return一个jsx. 最后写的时候各种交叉感染, 不同按钮最后this指向都一样. 二爷一点拨说这个应该直接写成组件再去map, 因为它是复用的, 我才恍然大悟. 竟然忘记了React的最基本要义.
React事件绑定一个方法, 带有参数, 那么我们不能直接在onClick = {func(par)}, 这样就是直接调用了; 可以采用箭头函数onClick = {() => {func(par)}}.
css在用antd的slider时, 其marker的文字长度在显示的时候有限制, 会给你截成很多段; 办法是直接操作其css, 增加一个样式
.ant-slider-mark-text{
white-space: nowrap;
}
26th Apr., 2018
对于复杂数据的调试, 如果发现用别人的东西的时候结果不一样, 就需要好好对各种props各种中间输出值进行一一比较
27th Apr., 2018
React用用F12里面的React工具, 看看不同的Components的props到底变没变, 或许能发现很多问题.
mobx里@computed get在调用时当做一个值而不是函数.
不要在传props的时候使用mobx.toJS, 太慢 (原理不明, 实践所得). 直接在dataStore里搞一个@computed get valToJs()就行了.
