![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发规范
文章平均质量分 58
学习了阿里大厂前端规范课程,在这里进行总结与分享
lj1530562965
这个作者很懒,什么都没留下…
展开
-
eslint规范
eslint规范背景配置eslint检测不通过,错误显示在浏览器,且编译失败vscode配置eslint代码提示和自动格式化功能安装eslint插件开启错误提示配置自动格式化背景在开发过程中eslint没有进行强制规范,导致项目代码很多警告,代码不规范,为此从根源上解决进行强制规范配置eslint检测不通过,错误显示在浏览器,且编译失败vue.config.js配置如下内容:module.exports = { devServer: { overlay: {原创 2021-05-19 11:24:03 · 741 阅读 · 0 评论 -
(一) 规范目的
导学规范目的规范目的为了编写高质量的代码,使团队编写的代码具有一致性,增加可读性,使团队合作更加高效!引自《阿里规约》的开头片段:----现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率,降低沟通成本。代码的字里行间流原创 2020-10-21 17:45:52 · 655 阅读 · 0 评论 -
(二)命名规范
命名规范项目命名目录命名JS、CSS、SCSS、HTML、PNG 文件命名命名严谨性项目命名全部采用小写方式, 以中划线分隔。正例:mall-management-system反例:mall_management-system / mallManagementSystem目录命名全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数正例: scripts / styles / components / images / utils / layouts / demo-s原创 2020-10-26 11:10:22 · 201 阅读 · 0 评论 -
(三)HTML 规范
HTML 规范 (Vue Template 同样适用)HTML 类型缩进分块注释语义化标签引号样式和脚本代码位置表单元素图片HTML中id命名HTML 类型推荐使用 HTML5 的文档类型申明: .(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。规定字符编码IE 兼容模式规定字符编码doctype 大写正例:<!DOCTYPE html>原创 2020-10-26 11:18:01 · 213 阅读 · 0 评论 -
(四)CSS 规范
CSS 规范命名选择器尽量使用缩写属性每个选择器及属性独占一行省略0后面的单位避免使用ID选择器及全局标签选择器防止污染全局样式CSS属性书写顺序CSS命名规范命名类名使用小写字母,以中划线分隔id 采用驼峰式命名scss 中的变量、函数、混合、placeholder 采用驼峰式命名ID 和 class 的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称不推荐:.fw-800 { font-weight: 800;}.red { color:原创 2020-10-26 11:20:29 · 367 阅读 · 0 评论 -
(五)LESS 规范
LESS 规范代码组织避免嵌套层级过多代码组织1)将公共less文件放置在style/less/common文件夹例:// color.less,common.less2)按以下顺序组织1、@import;2、变量声明;3、样式声明;@import "mixins/size.less";@default-text-color: #333;.page { width: 960px; margin: 0 auto;}避免嵌套层级过多将嵌套深度限制在3级。对于超过4级的嵌套原创 2020-10-26 11:22:02 · 481 阅读 · 0 评论 -
(六)Javascript 规范
Javascript 规范命名代码格式字符串对象声明使用 ES6,7括号undefined 判断条件判断和循环最多三层this 的转换命名慎用 console.log分号注释命名1) 采用小写驼峰命名 lowerCamelCase,代码中的命名均不能以下划线,也不能以下划线或美元符号结束反例: name / name / name$2) 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格,必须遵从驼峰形式。正例: localValue / getHttpMessage原创 2020-10-26 11:23:32 · 892 阅读 · 0 评论 -
(七)Vue 项目规范
Vue 项目规范Vue 编码基础组件规范模板中使用简单的表达式指令都使用缩写形式标签顺序保持一致必须为 v-for 设置键值 keyv-show 与 v-if 选择script 标签内部结构顺序Vue Router 规范Vue 项目目录规范基础使用 Vue-cli 脚手架目录说明注释说明其他Vue 编码基础vue 项目规范以Vue 官方规范中的 A 规范为基础,在其上面进行项目开发,故所有代码均遵守该规范。请仔仔细细阅读 Vue 官方规范,切记,此为第一步。组件规范1) 组件名为多个单词。组原创 2020-10-26 11:25:47 · 766 阅读 · 0 评论