一个月工作总结
2017-07-22 18:34
309 查看
更多介绍:https://github.com/renliwo/hrm-fe-best-practice/blob/master/README.md
要做到上面两点其实非常困难。 我从以下几个方面,旨在减少目标和现实的差距。
异步怎么处理?(redux-promise?)
函数怎么抽离,怎么写利于维护重用以及测试?(从组件中抽离逻辑)
公共的方法有哪些?(大家要烂熟于心,这样才不会造轮子)
formatter 配置
外部依赖配置
能不debug 就不要debug
如果解决不了。继续
请求-》 本机 =》 map 到本地文件 =》 debug
关键路径加 monitor 可以帮助分析。
举个例子:
我们要开发一个功能,这个功能是在前台提交评论自动检索本地数据库
,如果匹配敏感词则给用户提示,含有敏感词,不允许提交。
给你半分钟想怎么做。
1,2,3,4.。。。。。
假装过了半分钟。
如果你可以相出下面这种写法,你基本过关了。这种写法的好处最后再说。
有了想法可以写代码了。(写代码就是打字,重要的打字之前的思考)
代码串起来就可以了。
一 编码风格
我们的目标是项目中人的代码看起来像是同一个人写的(代码风格一致)。 组员接手的时候,想法要和当时开发这个人的想法一致(代码的存放位置,组件划分策略等)要做到上面两点其实非常困难。 我从以下几个方面,旨在减少目标和现实的差距。
1. 约定大于配置
组件怎么划分?(组件式开发)异步怎么处理?(redux-promise?)
函数怎么抽离,怎么写利于维护重用以及测试?(从组件中抽离逻辑)
公共的方法有哪些?(大家要烂熟于心,这样才不会造轮子)
2. 配置也很重要
代码检查 配置formatter 配置
外部依赖配置
二 调试的套路
doctor+ dragon定位问题,可以解决80%问题。能不debug 就不要debug
如果解决不了。继续
请求-》 本机 =》 map 到本地文件 =》 debug
关键路径加 monitor 可以帮助分析。
三 减少样板代码
我举个例子, react-redux, 在正常情况下是有很多样板代码的。 但是通过redux-actions就会减少很多样板代码。 另外在组件的construtor中bind this 其实就是样板代码。 console 在某种意义上也是样板代码,应该尽量避免。四 thinking before coding
如果写出容易测试的代码,其实是非常考验写代码人的能力的。聪明的程序员总能写出方便测试和维护的代码。对于如何写出容易测试的代码,不在本文讨论范畴,不过可以给几点建议,首先是面向接口的测试先行思想,其次是合理划分代码粒度,一个方法只做一件事。举个例子:
我们要开发一个功能,这个功能是在前台提交评论自动检索本地数据库
,如果匹配敏感词则给用户提示,含有敏感词,不允许提交。
给你半分钟想怎么做。
1,2,3,4.。。。。。
假装过了半分钟。
如果你可以相出下面这种写法,你基本过关了。这种写法的好处最后再说。
// (string, array) -> array function checkSensitiveWords(word, blackList) { } function getBlackList() { } function submit(reply) { } function alert(str) { } // array -> string function concatBlackWords(words) { }
有了想法可以写代码了。(写代码就是打字,重要的打字之前的思考)
// (string, array) -> array function checkSensitiveWords(word, blackList) { return blackList.filter(backWord => word.includes(backWord)) } function getBlackList() { return JSON.parse(localStorage.getItem('blackList')); } function submit(reply) { return fetch('xxxxx') .then(Modal.success.bind(null, { title: 'xxxx', content: '', })) .catch(Modal.error.bind(null, { title: 'xxxx', content: '', })) } function alert(str) { alert(str); } // array -> string function concatBlackWords(words) { return words.join(',').concat('是敏感词,不允许提交'); }
代码串起来就可以了。
// (string, array) -> array function checkSensitiveWords(word, blackList) { return blackList.filter(backWord => word.includes(backWord)) } function getBlackList() { return JSON.parse(localStorage.getItem('blackList')); } function submit(reply) { return fetch('xxxxx') .then(Modal.success.bind(null, { title: 'xxxx', content: '', })) .catch(Modal.error.bind(null, { title: 'xxxx', content: '', })) } function alert(str) { // TODO: replace with more powerfull instance later alert(str); } // array -> string function concatBlackWords(words) { return words.join(',').concat('是敏感词,不允许提交'); } // 奔跑吧代码 function reply(msg) { const sensitiveWords = R.pipe(getBlackList, checkSensitiveWords)(msg); if (sensitiveWords.length > 0) { return R.pipe(concatBlackWords, alert)(sensitiveWords) } return submit(msg) }