建立web前端开发规范的重要性(浅谈前端开发的重要性以及前景分析)

linbojue
• 阅读 291
一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中的其他人,甚至过一段时间之后的你,再看自己某个时期写的代码,依然能看懂?这就涉及到规范你的代码了。

一、规范代码的好处

1、从根本上降低开发成本:

提高代码整体的可读性、可维护性、可复用性。

2、保证代码的一致性:

软件系统中最重要的因素之一就是编码的一致性。如果编码风格一致,也更加易于维护,因为团队内任何人都可以快速理解并修改。

3、提升团队整体效率:

开发人员通常需要花费大量的时间来解决代码质量问题,如果都按照规范编写,也有助于团队尽早发现问题,这将提高整个交付过程的效率。

二、不规范代码的弊端

1、增加团队成员间的协作负担:

由于缺乏规范,导致代码风格不一,极端情况下,某段代码只有某个人能修改。

2、团队间协作更加困难:

由于开发人员要适应不同的风格,会导致效率低下。

3、回顾困难:

在review期间,可能经常为类似的事情做过多的讨论。

4、影响降低团队整体效率:

影响团队的生产力和质量,严重的甚至会影响团队和谐。

三、为什么很多团队缺乏规范

1、当开发人员被要求在短时间内完成任务时,通常会回避质量标准。

2、长时间养成的开发习惯很难在短时间内去改变。

3、有的时候虽然达成了一致,但在开发中依旧我行我素。

四、规范包含哪些内容

我们平时理解的前端开发规范,更多层面的是编码层面的规范,实际上远不止这一个。比如技术栈规范、浏览器兼容规范、项目文件结构规范、UI设计规范、前后端协作规范等,以下主要从这六个方面简单介绍下前端开发规范。

1、技术栈规范

前端目前主要有三大框架Vue、React和AngularJS。每一个框架背后都是一个架构、一个生态。每个框架背后牵涉着开发思维、生态系统、配套工具、最佳实践、性能调优。要精通和熟练一个框架需要付出的成本是很高。

所以说团队的开发效率是基于稳定且熟练的技术栈的。稳定的技术栈规范有利于团队协作和沟通; 另外如果团队精通这个技术栈,当出现问题或者需要深入调优, 会相对轻松。

前端技术栈规范主要包含下面这些类型:

① 编程语言 – Typescript或Javascript

② UI框架及其配套生态(路由、状态管理、组件库、国际化、动画、服务端渲染、脚手架、CLI工具、组件测试等)

③ 样式。命名规范、预处理器等

④ 动画引擎

⑤ 项目构建工具流。webpack、vue-cli

⑥ 包管理器。npm、yarn

⑦ 开发工具、工具库(moment.js)、版本管理(gitlab)等

2、浏览器兼容规范

前端团队应该根据应用所面对的用户情况、应用类型、开发成本、浏览器市场统计数据等因素,来制定自己的浏览器兼容规范。不过确定哪种兼容策略,应该取决于用户比重,如果大部分用户使用的是现代浏览器,就应该使用优雅降级,为现代浏览器提供最好的体验,而旧浏览器则退而求之次,保证大概的功能,反之选择渐进增强,保证低版本浏览器的体验,对于支持新特性的新浏览器提供稍好的体验。

有了浏览器兼容规范,前端开发和兼容性测试就有理有据,避免争议; 同时它也是前端团队的一种对外声明,除非特殊要求,不符合浏览器兼容规范的浏览器,前端开发人员可以选择忽略。

我们也可以根据浏览器市场分布情况、用户占比、开发成本等因素对将浏览器划分为多个等级,不同等级表示不同的支持程度:

① 完全兼容: 保证百分百功能正常

② 部分兼容: 只能保证功能、样式与需求大致一致。对于一些不影响主体需求和功能的bug,会做降低优先级处理或者不处理

③ 不兼容: 不考虑兼容性

3、项目文件结构规范

主要包含项目的命名、项目的文件结构、版本号规范等。

下面简单列举一类项目文件结构:

① README.md: 项目说明。你可以在这里提供关于项目的关键信息或者相关信息的入口。一般包含下列信息:

·简要描述、项目主要特性;

· 运行环境/依赖、安装和构建、测试指南;

· 简单示例代码;

· 文档或文档入口, 其他版本或相关资源入口;

· 联系方式、讨论群;

· 许可、贡献/开发指南。

② CHANGELOG.md: 放置每个版本的变动内容, 通常要描述每个版本变更的内容。方便使用者确定应该使用哪个版本。

③ package.json: 前端项目必须. 描述当前的版本、可用的命令、包名、依赖、环境约束、项目配置等信息。

④ .gitignore: 忽略不必要的文件,避免将自动生成的文件提交到版本库。

⑤ docs/: 项目的细化文档, 可选。

⑥ examples/: 项目的示例代码,可选。

⑦ build: 项目工具类脚本放置在这里,非必须。如果使用统一构建工具,则没有这个目录。

⑧ dist/: 项目构建结果输出目录。

⑨ src/: 源代码目录。

– src 开发目录

– pages 视图

– module-a 模块A

– components 私有组件

– ComA.tsx

– ComB.tsx

– index.module.less

– index.tsx

– Content.tsx

– module-b 模块B

– components 公共组件

– index.ts 导出所有组件

– header

– index.tsx

– index.module.less

– User.tsx

– useGetBaseInfo.hooks.ts

– routers 路由文件

– store redux中的数据

– utils 这里是以utils为后缀

– index.ts

– a.utils.ts

– b.utils.ts

– hooks 这里是以hooks为后缀

– index.ts

– a.hooks.ts

– b.hooks.ts

– styles 静态资源文件

– service api请求,这里是以api为后缀

– a.api.ts 按照后端微服务进行划分

– b.api.ts

– constans 常量

⑩ tests/: 单元测试目录。

⑪ tests: 全局的测试目录,通常放应用的集成测试或E2E测试等。

⑫ .env*: 项目中我们通常会使用环境变量来影响应用在不同运行环境下的行为。可以通过dotEnv来从文件中读取环境变量. 通常有三个文件:

· env 通用的环境变量;

· env.development 开发环境的环境变量;

· env.production 生成环境的环境变量。

4、编码规范

每一个程序员心目中对‘好代码’都有自己的主见,统一的编码规范可以避免不必要的论战和争议,有利于团队项目的长远维护。一致性的代码规范可以增强团队开发协作效率、提高代码质量、减轻系统维护的负担。

以下主要从HTML、JS、CSS、代码格式化这四个方面谈谈编码规范:

① HTML规范

使用 HTML5 的文档声明类型 :

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

使用文档声明类型的作用是为了防止开启浏览器的怪异模式。

没有DOCTYPE文档类型声明会开启浏览器的怪异模式,浏览器会按照自己的解析方式渲染页面,在不同的浏览器下面会有不同的样式。

如果你的页面添加了,那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

详细规范可查看:https://codeguide.co/#html

② JS规范

函数变量命名、代码注释等。JS/TS主流的大致有这几种:

· Airbnb JavaScript Style Guide:

https://github.com/airbnb/javascript

· Google JavaScript Style Guide:https://google.github.io/styleguide/jsguide.html]

· Idiomatic JavaScript Style Guide:

https://github.com/rwaldron/idiomatic.js

· JavaScript Standard Style Guide

③ CSS规范

ID和class的命名、合理使用ID、css选择器中避免使用标签名、使用子选择器、尽量使用缩写属性等,详细可参考以下网站:

· Airbnb CSS / Sass Styleguide:

https://css-tricks.com/bem-101/

· Code Guide:

https://codeguide.co/#css

④ 代码格式化规范

由于每个开发者的IDE不同,即使IDE相同也会因为每个人的配置不一样导致格式化的结果不一样。如何确保团队内开发人员采用统一的格式化配置呢?

这里给推荐大家使用 prettier,它内置了一套格式化的规则。细可参考以下网站:https://prettier.io/

5、UI设计规范

UI 规范的最大好处就是能够提质提效:

① 在开发者的角度,与设计规范同步形成研发资产,避免重复造轮子;

② 在测试的角度,能够避免重复的无意义走查;

③ 在UI设计师的角度,减少设计成本,提高设计效率,可以快速承接新需求;

④ 在产品角度,提高产品迭代与优化效率,降低试错成本;

⑤ 在用户角度,解决用户体验一致性。

如果团队不打算制定自己的UI设计规范,则推荐使用现成的开源组件库:Ant Design、Element UI、iView、WeUI等

6、前后端协作规范

前端往往不能脱离后端而存在,和后端协作的时间也是比较长的。

一个常用的前后端协作流程:

① 需求分析。参与者一般有前后端、测试、以及产品。由产品主持,对需求进行讲解,接受开发和测试的反馈,确保大家对需求有一致的认知。

② 前后端开发讨论。讨论应用的一些开发设计,沟通技术点、难点、以及分工问题。

③ 设计接口文档。可以由前后端一起设计;或者由后端设计、前端确认是否符合要求。

④ 并行开发。前后端并行开发,在这个阶段,前端可以先实现静态页面; 或者根据接口文档对接口进行Mock, 来模拟对接后端接口。

⑤ 前后端进行接口联调。

五、前端开发规范实例

1、项目情况

多人开发同一个项目的不同模块;由于开发前没有制定规范,导致每个人的代码都是一种单独的风格;当其他人去修改代码时需要熟悉不同风格的代码,浪费了大量时间在阅读代码上;而且由于没有全局的样式规范,导致每个人都有一套自己的样式,在后期如果想要做统一的界面风格时需要每个人都去修改样式代码,增加了大量工作量。

2、制定规范

根据项目的实际情况,由于项目已经开发到一定程度,已经选好了开发框架,所以可以从编码和UI设计等方面进行规范。

由于项目是一个管理系统,所以对于前端UI来说可以统一页面结构;制定一个统一风格的模板,开发的时候可以直接使用模板代码去做适应性的修改;

由于缺乏统一的样式标准,导致后期统一风格时会花费大量时间,所以进行统一的样式分离,抽离公共的CSS样式去引用,方便后期统一修改;

由于一些变量和函数命名过于简单比如a、b、c等,规范多使用一些语义化的单词去命名,方便理解和阅读;

由于项目开发中前后端是同一个人开发,导致有些可能是后端的工作放到了前端去处理。比如分页功能,虽然这个是前后端都可以做的,但是如果使用前端去分页,这样就要需要一次性返回全部数据,数据量大的时候接口可能会返回很慢,导致页面空白时间比较长,所以建议有些逻辑功能要根据实际情况去决定是前端还是后端处理。

3、最终成果

项目代码结构基本上有一个统一的风格;各模块页面也有了统一的风格;用户体验较好;也方便了开发和维护。

总结:

一个人走得更快,一群人可以走得更远。统一规范的最根本目的是为了保证团队成员的一致性,从而减少沟通成本,提高开发效率。学会热爱标准,但要确保它们不是一成不变的。如果制定的规范不适合您的团队,请确保可以适应和重写所需要的任何规则。它并不是要强制执行一种工作方式,而是为了帮助促进团队之间的互动。
点赞
收藏
评论区
推荐文章
Irene181 Irene181
3年前
你写的Python代码规范吗?
总第141篇/张俊红1.什么是PEP8PEP是PythonEnhancementProposals的缩写,直译过来就是「Python增强建议书」也可叫做「Python改进建议书」,说的直白点就是Python相关的一些文档,主要用来传递某些信息,这些信息包括某个通知亦或是某个新的规范。关于更深层次的概念,大家有兴趣的可以自行去了解。PEP后面的数字
C语言编程,初学者必学代码规范,你知道哪些?
C语言编程,初学者必学代码规范,你知道哪些?一个好的程序编写规范是编写高质量程序的保证。清晰、规范的源程序不仅仅是方便阅读,更重要的是能够便于检查错误,提高调试效率,从而最终保证软件的质量和可维护性。本文章适合编程初学者,对于具有一定工程项目开发经验的程序员,建议学习C语言程序代码编写规范—高级版。1代码书写规范1.1函数定义花括号:每个函数的定义和说明
前端标准化之旅
本文主要是介绍前端研发的一些标准化规范,良好的代码规范,不仅能够让代码简洁清晰,还可以减少bug的出现,更能够让看代码的人赏心悦目,本文主要从命名规范、语法规范、后端系统开发规范、版本更新规范、上线邮件申请规范、项目启动规范来、文件目录规范七方面介绍,
Stella981 Stella981
3年前
IDEA Java开发常用插件
AlibabaJavaCodingGuidelines阿里巴巴代码规约检测插件,这个大家都懂,代码规范对个人和团队开发来说都很重要。Lombok省去了getset方法的书写,提高开发效率,很实用。MybatisX根据mapper方法生成mapping方法,方便mapping方法查找,使用Mybatis的话,
Wesley13 Wesley13
3年前
GO 编码规范
编码规范本规范旨在为日常Go项目开发提供一个代码的规范指导,方便团队形成一个统一的代码风格,提高代码的可读性,规范性和统一性。本规范将从命名规范,注释规范,代码风格和Go语言提供的常用的工具这几个方面做一个说明。该规范参考了go语言官方代码的风格制定。一、命名规范命名是代码规范中很重要的一部分,统一的命名规则有
Stella981 Stella981
3年前
Intellij IDEA安装阿里代码规范插件
要养成一个好的编码习惯从自己编码开始,对自己代码的合理化命名,编码不仅对自己有好处,而且别人也容易读懂你的代码。所以下载阿里的代码规范插件来约束自己凌乱的代码。阿里规范插件GitHub地址:https://github.com/alibaba/p3cIDEA安装该插件步骤:1.打开IDEA,FileSetteingsPlug
Stella981 Stella981
3年前
Javascript模块化开发-轻巧自制
一、前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端。模块化是必不可少的,这样不仅能够提高代码的可维护性、可扩展性以及鲁棒性,更大的好处就是能够提升整个团队的开发效率,也能够让新进的程序员更快的接手工作。今天晚上根据前辈们的经验,写啦一个简单的模块定义的封装组件,当是练手吧。不过感觉还是蛮好用的。
liam liam
1年前
横空出世!IDEA 版 API 接口神器来了,一键生成文档!
每个开发都不想写文档。当你不想写接口文档时,可以通过安装插件在IDEA里实现自动同步,一边写代码一边同步接口文档给你的前端、测试同学。以下内容手把手教你怎么操作(这里仅面向使用IDEA编辑器、遵循JavaSpring框架注释规范的同学):首先,你需要安装一
爱学it学无止境 爱学it学无止境
4个月前
看动画,轻松学习23种C++设计模式完结无密
C设计模式深度解析:提升代码质量与可维护性的关键在C软件开发中,设计模式作为一种经过验证的软件开发方法,被广泛用于解决常见的设计问题,提高代码的可读性、可维护性和可扩展性。本文将深入探讨C中几种常用的设计模式,分析其原理、应用场景及实现方式,以