文档章节

一个月工作总结

-鹏
 -鹏
发布于 2017/07/22 18:34
字数 901
阅读 147
收藏 0

更多介绍:https://github.com/renliwo/hrm-fe-best-practice/blob/master/README.md

一 编码风格

我们的目标是项目中人的代码看起来像是同一个人写的(代码风格一致)。 组员接手的时候,想法要和当时开发这个人的想法一致(代码的存放位置,组件划分策略等)

要做到上面两点其实非常困难。 我从以下几个方面,旨在减少目标和现实的差距。

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)
}

 

TO BE CONTINUE

© 著作权归作者所有

-鹏

-鹏

粉丝 21
博文 155
码字总数 92388
作品 0
杭州
前端工程师
私信 提问

暂无文章

通过微服务来正确实施SOA

对于组织来说,能够构建、发展和扩展大型应用程序是至关重要的, 但所涉及的挑战使其成为一项艰巨的任务。正因为如此, 微服务凭借能够将单个组件拆分成围绕特定业务功能的独立服务,已成为构建...

Linux就该这么学
21分钟前
2
0
从 Spark 到 Kubernetes — MaxCompute 的云原生开源生态实践之路

2019年5月14日,喜提浙江省科学技术进步一等奖的 MaxCompute 是阿里巴巴自研的 EB 级大数据计算平台。该平台依托阿里云飞天基础架构,是阿里巴巴在10年前做飞天系统的三大件之分布式计算部分...

阿里云官方博客
24分钟前
1
0
使用python来操作redis用法详解

1、redis连接 redis提供两个类Redis和StrictRedis用于实现Redis的命令,StrictRedis用于实现大部分官方的命令,并使用官方的语法和命令,Redis是StrictRedis的子类,用于向后兼容旧版本的red...

dragon_tech
24分钟前
2
0
给研发工程师的代码质量利器 | SOFAChannel#5 直播整理

> SOFA:Channel,有趣实用的分布式架构频道。 > > 本文根据 SOFAChannel#5 直播分享整理,主题:给研发工程师的代码质量利器 —— 自动化测试框架 SOFAActs。 > > 回顾视频以及 PPT 查看地址...

SOFAStack
26分钟前
1
0
段错误总结

https://blog.csdn.net/e_road_by_u/article/details/61415732 一、段错误是什么 一句话来说,段错误是指访问的内存超出了系统给这个程序所设定的内存空间,例如访问了不存在的内存地址、访问...

悲催的古灵武士
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部