前端代码编写规范(前端代码编写规范要求)

前端必须搜藏Vue版的团队代码规范

Nordon 规范与每个团队和个人都是息息相关的，因为其影响的不只是只是代码的维护和理解成本，严重的时候是会影响成员开发的心情 一个团队的编码规范、git规范等，并没有绝对的最优解，心里要清楚明白 没有银弹 ，规范是为了让团队统一，提高代码阅读性、降低代码维护成本等，本文是记录一些在项目 code review 中常见的规范，仅供参考

vue 中 data 的数据默认便会进行双向数据绑定，若是将大量的和渲染无关的数据直接放置在 data 中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合 Object.freeze 进行处理 table 中 columns 数据可以单独提取一个外部 js 文件作为配置文件，也可以在当前 .vue 文件中定义一个常量定义 columns 数据，因为无论如何都是固定且不会修改的数据，应该使用 Object.freeze 进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此操作

一个页面中通常会存在很多个不同功能的弹框，若是每一个弹框都设置一个对应的变量来控制其显示，则会导致变量数量比较冗余和命名困难，可以使用一个变量来控制同一页面中的所有 Modal 弹框的展示 比如某个页面中存在三个 Modal 弹框

例如远程搜索时需要通过接口动态地获取数据，若是每次用户输入接口请求，是浪费带宽和性能的 当一个按钮多次点击时会导致多次触发事件，可以结合场景是否立即执行 immediate

功能的开发过程中，图片的处理往往是比较容易被忽略的环节，也会在一定程度上影响开发的效率和页面的性能

使用 props 将组件和路由解耦： 取代与 $route 的耦合

通过 props 解耦 这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

参考：路由组件传参

在父子组件中，掌握父子组件对应的生命周期钩子加载顺序可以让开发者在更合适的时候做适合的事情 父组件

子组件

加载时父子组件的加载顺序

销毁时父子组件的销毁顺序

实际开发过程中会遇到当子组件某个生命周期完成之后通知父组件，然后在父组件做对应的处理 emit up

hook 通过 @hook 监听子组件的生命周期

下拉框遍历时，需要注意 options 标签保持同一行，若是存在换行，会导致选中时的值存在多余的空白

需要将 Options 和下拉框的值保持在同一行

data 数据具有数据层级结构，切勿过度扁平化或者嵌套层级过深，若是过度扁平化会导致数据命名空间冲突，参数传递和处理，若是层级嵌套过深也会导致 vue 数据劫持的时候递归层级过深，若是嵌套层级丧心病狂那种的，小心递归爆栈的问题。而且层级过深会导致数据操作和处理不便，获取数据做容错处理也比较繁琐。一般层级保持2-3层最好。 若是只有一层数据，过于扁平

导致处理不方便

适当的层级结构不仅可以增加代码的维护和阅读性，还可以增加操作和处理的便捷性

可以针对 person 进行操作

策略模式的使用，避免过多的 if else 判断，也可以替代简单逻辑的 switch

解构赋值以及默认值，当解构的数量小于多少时适合直接解构并赋值默认值，数据是否进行相关的聚合处理

任何时候尽量是的一个函数就做一件事情，而不是将各种逻辑全部耦合在一起，提高单个函数的复用性和可读性 每个页面都会在加载完成时进行数据的请求并展示到页面

编写 template 模板时，属性过多时，是否换行

html 中展示一些如 ， , 等字符时，使用字符实体代替

在开发中修改第三方组件样式是很常见的，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。

适当的空格可以提升代码的阅读体验，显得更为优雅和美观 选择器后、属性值

和 html 类型，当某行的属性很多，适当的换行可以提高阅读和美观

浏览器在解析 css 时，是按照从右到左递归匹配的，过深的层级嵌套不仅影响性能，而且还会导致样式阅读性和代码维护性降低，一般层架控制在 5 层之内

属性选择器中的值必须用双引号包围，不允许使用单引号，也不允许不使用引号， html 的属性值也是推荐使用双引号， js 中使用单引号

同一 规则下的属性在书写时，应按功能进行分组。并以 Formatting Model（布局方式、位置） Box Model（尺寸） Typographic（文本相关） Visual（视觉效果） 的顺序书写，以提高代码的可读性。 解释 ：

另外，为增加可读性，如果包含 content 属性，应放在属性的最前面。

前端代码的书写规范有哪些

处方书写应当符合下列规则： (一)患者一般情况、临床诊断填写清晰、完整，并与病历记载相一致。 (二)每张处方限于一名患者的用药。 (三)字迹清楚，不得涂改，如需修改，应当在修改处签名并注明修改日期。 (四)药品名称应当使用规范的中文名称书写，没有中文名称的可以使用规范的英文名称书写；医疗机构或者医师、药师不得自行编制药品缩写名称或者使用代号；书写药品名称、剂量、规格、用法、用量要准确规范，药品用法可用规范的中文、英文、拉丁文或者缩写体书写，但不得使用“遵医嘱”、“自用”等含糊不清字句。 (五)患者年龄应当填写实足年龄，新生儿、婴幼儿写日、月龄，必要时要注明体重。 (六)西药和中成药可以分别开具处方，也可以开具一张处方，中药饮片应当单独开具处方。 (七)开具西药、中成药处方，每一种药品应当另起一行，每张处方不得超过5种药品。 (八)中药饮片处方的书写，一般应当按照“君、臣、佐、使”的顺序排列；调剂、煎煮的特殊要求注明在药品右上方，并加括号，如布包、先煎、后下等；对饮片的产地、炮制有特殊要求的，应当在药品名称之前写明。 (九)药品用法用量应当按照药品说明书规定的常规用法用量使用，特殊情况需要超剂量使用时，应当注明原因并再次签名。 (十)除特殊情况外，应当注明临床诊断。 (十一)开具处方后的空白处划一斜线以示处方完毕。 (十二)处方医师的签名式样和专用签章应当与院内药学部门留样备查的式样相一致，不得任意改动，否则应当重新登记留样备案。

web前端怎么写好代码

如何优化前端页面 / 如何优化网页

WEB前端（HTML5）项目开发时的注意事项

为什么前端html代码编写要规范和标准化

其目的是：

语义化你的代码，不是说经过简单的调试，浏览器显示正常就可以了，还得让搜索引擎等机器爬虫（机器人），能明白了然你代码的意思。

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

更容易被搜索引擎收录。

更容易让屏幕阅读器读出网页内容。

前端代码规范——Standard

? JavaScript Standard

无须犹豫。再也不用维护 .eslintrc , . jshintrc , or .jscsrc 。开箱即用。

全局安装，运行：

或者非全局的方式，针对某个项目进行安装：

Visual Studio Code

?安装 vscode-standard （已经包含了自动格式化）。

?安装 vscode-standardjs-snippets 以获得 JS snippets。安装 vscode-react-standard 以获得 React snippets。

Sublime Text

?通过 Package Control ，安装 SublimeLinter 和 SublimeLinter-contrib-standard 。

?如果想要保存时自动格式化，还需安装 StandardFormat 。

网页前端里面的HtmL的3个主要规范是什么？

标签有开有关，成对出现。例如div/div，表示的是一个div标签，div表示div标签的开，而/div则表示一个标签的关。

在HTML5当中，也存在单标签，即有开无关的标签，但是大家使用到单标签的种类并不多，主要包括metalinkimginputhr等。

代码部分的中英文选择方面，需要使用英文，并且均为小写。

标签和标签时存在一定的关系的，有些标签是父子关系（此处就是我们说的嵌套），有些是兄弟关系。在HTML当中为了表示层级关系，每个级别的标签都要比上一个级别的标签缩进一个tab的距离（一个tab?——?按下一下tab键），注：每个tab键是4个空格宽度。

在书写代码时，还需要注意行号，由于编辑器的宽度原因，有些代码会被挤下去，但是根据行号显示，还是同一行。

简单来说：

1 成对出现，有开有关

2 代码英文小写

3 合理嵌套

这算是最基本的了，至于说嵌套原则还有很多