代码质量提升的思考与实践.pptx

前端代码质量的思考与实践htmljavascriptcssjqueryvue

Anyfoolcanwritecodethatacomputercanunderstand.Goodprogrammerswritecodethathumanscanunderstand. ——（重构/敏捷开发）MartinFowler分享与共勉Shareandencourage0Goodcodeisitsownbestdocumentation.Asyou’reabouttoaddacomment,askyourself,“HowcanIimprovethecodesothatthiscommentisn’tneeded?” ——（代码大全）SteveMcConnellProgramsmustbewrittenforpeopletoread,andonlyincidentallyformachinestoexecute. ——（计算机程序的构造和解释）HaroldAbelson任何一个傻瓜都能写出计算机可以理解的代码。唯有写出人类容易理解的代码，才是优秀的代码。优秀的代码是它自己最好的文档。当你考虑要添加一个注释时，问问自己，“如何能改进这段代码，以让它不需要注释？”程序首先必须能让人读懂，计算机执行只是附带。

目录引言1JS和JQ的实践4HTML中的实践2VUE中的实践5CSS中的实践3JS语言的特点6新技术的探索7书籍以及社区8心得以及体会9

引言1

编写可读的代码，对于以代码谋生的程序员而言，是一件极为重要的事。从某种角度来说，代码最重要的功能是能够被阅读，其次才是能够被正确执行。一段无法正确执行的代码，也许会使项目延期几天，但它造成的危害只是暂时和轻微的，毕竟这种代码无法通过测试并影响最终的产品；但是，一段能够正确执行，但缺乏条理、难以阅读的代码，它造成的危害却是深远和广泛的：这种代码会提高产品后续迭代和维护的成本，影响产品的稳定，破坏团队的团结，除非我们花费数倍于编写这段代码的时间和精力，来消除它对项目造成的负面影响。JavaScript是动态和弱类型的语言，使用起来比较轻松随意，在IE6那个刀耕火种的时代，轻松随意的习惯确实不是什么大问题，反而能节省时间，提高出活儿的速度。但是，随着当下前端工程化技术的快速发展，前端项目规模的不断膨胀，以往那种轻松随意的编码习惯，已经成为项目推进的一大阻力。引言Introduction1

HTML中的实践2

使用语义化标签尽可能少地使用无意义的标签，如div和spanHTML中的实践PracticesinHTML2清晰、简洁的层级嵌套结构语义不明显，可以用p也可以用div，优先用p标签在无法用标签表明语义的场景下增加适当的注释

HTML中的实践PracticesinHTML2标签的语义（不含HTML5）

CSS中的实践3

建议：引入sass或其他css预处理器CSS中的实践PracticesinCSS3建议：命名可以参考借鉴BEM命名法和中划线命名法建议：根节点用id选择器，其它用类选择器，子代替代后代建议：css属性书写采用约定的顺序建议：类命名中划线分隔不超过4级，超过了从0开始建议：尽量避免使用float，position，采用flex布局和grid布局建议：如果只能直接编写css，也可以参考上述体现的思路建议：如果无法直接引入sass，可用IDE或终端进行手动转译

javascript和jQuery的实践4

变量命名是编写可读代码的基础。只有变量被赋予了一个合适的名字，才能表达出它在环境中的意义。命名必须传递足够的信息，形如getData这样的函数命名就没能提供足够的信息，读者也完全无法猜测这个函数会做出些什么事情。而fetchUserInfoAsync也许就好很多，读者至少会猜测出，这个函数大约会远程地获取用户信息；而且因为它有一个Async后缀，读者甚至能猜出这个函数会返回一个Promise对象。变量javascript和jQuery的实践Practicesinjavascriptandjquery4命名的基础用名词命名对象，用动词命名函数，用复数表示集合，也可以加上List或Map后缀来显示地表示出来，使代码接近于自然语言。变量命名建议用小驼峰，类建议用大驼峰。命名规范时刻按照某种规则来命名变量和函数，不用担心变量污染和能够见名知意了。如：fetch或async代表异步，get代表获取，set代表设置，is、has、can代表一个布尔值，handle代表普通函数等。.命