高质量代码编写原则
- 增加代码可读性———注释清晰、命名语义化
- 提高代码重用性———公共组件和私有组件的维护
设计公用组件时需要考虑让接口保持弹性，并且高度模块化，多处重复使用不允许轻易被修改，有专人维护必要时需要提供 REAME.md 使用说明或规范的 API 文档和演示 DEMO，这是考验能力和经验的工作。 - 尽可能的减少冗余和精简代码
JavaScript 中，将所有的组件全放放在一个文件里，通过尽可能精简的代码和优秀的算法，“加载和使用方便”的同时往“精简”靠拢；而 UI组件库 将组建按功能分成一个个不同的文件，在页面中只根据需求加载相关的文件。这种按需加载的 loader 方式对用户友好，“精简”的同时往“加载和使用方便”靠拢 - 磨刀不误砍柴工———前期的构思很重要
构思主要内容：规范的制定、公共组件的设计和复杂功能的技术方案等。 - 团队沟通交流
技术分享和codeReview
基本规范
对于前端 JavaScript 这种比较宽松自由的编程语言来说，严格遵循编码规范和格式化风格指南极为重要 . 在 HTML, JavaScript 和 CSS 上的通用规则。
文件/资源命名
- 以可读性而言，用
小写字母命名或小写字母与下划线组合命名文件名与文件所在的文件夹；禁止组件使用 form1,form2,detail 等这种不可读太概略的命名方式，尽量使用语义化，与业务或功能相关的词来命名（比如 document, file_upload）。 - 图片静态资源命名, 使用
小写字母命名或小写字母与下划线组合命名（比如 imgbg.jpg， home_top_img.png）。 - 确保文件命名总是以
字母开头而不是数字。 - 特殊含义的文件，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css, .config.json），抑或一串前缀（比如 all.main.min.css）。使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
文本缩进
一次缩进 2 个空格
标签语义化
标签语义化，即让标签有自己的含义。根据元素（有时称作“标签”）其被创造出来时的初始意义来使用它。 好处：有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大，同时有利于搜索引擎优化（SEO）。 打个比方，用 header 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点。 比如，title, header, main, footer, section, aside, article,ul, li
<title>页面标题</title>
<main>页面主要内容</main>
<section>定义文档中的节（section、区段）</section>
<aside>定义侧边栏、相关链接列表等</aside>
<p>一行文字</p>
<span>一行文字</span>
<hn>：h1~h6，分级标题
<header>定义头部包含logo,导航等</header>
<footer>页脚</footer>
</hn>
复制代码缩写属性
比如 font 字体缩写，按顺序 font-style/font-variant/font-weight/font-size/line-height/font-family；background、box-shadow 等缩写
font: italic bold 12px/20px '微软雅黑'；
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
复制代码margin, padding, 等 省略“0”值后面的单位。 例如：
// good
margin: 0;
// not good
margin: 0px;
复制代码声明顺序
为了保证更好的可读性和可扫描性，样式声明应该遵循以下顺序：
-
结构性属性:
a. display
b. position, left, top, right 等
c. overflow, float, clear 等
d. margin, padding -
表现性属性：
a. background, border 等.
/* position 定位 > 盒模型 > 其他属性 */
.ele {
/* position 定位 */
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
/* 盒模型 */
display: block;
overflow: hidden;
float: left;
width: 100px;
height: 100px;
margin: 20px auto;
padding: 0 10px;
/* 排版 */
font: normal 13px “Helvetica Neue”, sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* 可见属性 */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* 不影响布局的属性 */
opacity: 1;
}
复制代码前端项目编码规范
- 开发工具配置规范统一。
首先，请下载使用vscode编辑器，其次，其相关插件及编码配置请手动安装推荐的相关插件实现统一配置，比如 VsCode Snippets 代码片段自动补全文档，优化代码提高编程速度。 - 项目模版内配置基本的规范统一。
首先遵循eslint基本语法规范 ，执行npm run lint，--fix能自动检测并修复 。 - 代码提交规范。
- 每次代码提交之前，请确保无任何语法错误、功能性错误等再提交；
- 每次代码提交之时，请写清楚注释, 修改的主要功能一一列出，如
git commit -am"1.修改用户管理-新增功能 2. 优化冗余代码"；
- Js 代码块引号类型为单引号
'' - 生产环境下禁止代码含断点 debugger 提交
- 总是使用 ===精确的比较操作符，而少使用“==”，避免强类型转换带来的困扰
- js 代码尽量使用
小驼峰命名， js 事件方法名，多以动词命名，且选取有意义的词，并写清必要的注释。 允许的变量命名和事件方法名如下：
const max = 20;
let myFavoriteColor = [];
const _myFavoriteColor = '#112C85';
/**
* 监听input值变化
* @param val String input输入值
* @param oldVal String input原来旧值
* */
function onInputChangeVal(val, oldVal) {}
复制代码-
不能含有未使用的变量, 未使用请及时删除
扫描二维码关注公众号，回复： 13789835 查看本文章
-
不能含有未使用的组件, 未使用请及时删除
-
不能含有无用的代码块, 未使用请及时删除
-
同一个项目内的文件结构尽量一致，如
- 样式预编译严格使用 less，避免同时使用多种，造成开发维护困扰。
- 文件命名、静态资源名, 请使用
纯小写字母或小写字母和下划线组合。
文件夹或文件(组件)命名：home, layout, file_upload, zixun, zx_service etc. 静态资源名：imgbg.jpg, home_top_img.png, base.css etc. 复制代码-
id/class 类名，css 命名组织结构这里采用 BEM 规则。 请使用
纯小写字母或小写字母和下划线组合。BEM 规则: block_element--modifier 语法
Block 块级元素，容器类，如.form .header .top .main；
Element 主要是以 1 个下划线接在 block 之后，来表示从属关系；没有对同一页上其他 blocks/elements 的依赖， 如.form_input;
Modifier 修饰符，主要是以两个中短线连接，block 或 element 上的标记，使用他来改变外观或行为。如：disabled,highlighted,checked,fixed。
布局容器类： #header, #main, #footer, .l_left, .l_right, .l_main, .l_list, .l_list_item 模块类： .module, .mod_list, .mod_title, .mod_bottom, .dialog, .dialog_title, 状态类： .is_collapsed .is_clicked .is_error .is_success .is_hidden 复制代码/* BEM规则: */ .block { } .block_element { } .block_element--modifier { } .form { } .form_input { } .form_input--checked { } /* Modifier修饰符: */ /* block--modifier_value 语法 */ .button--state_success { } .form--theme_xmas { } .form--simple { } .input--disabled { } 复制代码-
尽量使用公用的变量或已封装的混入样式来开发，方便后期维护，公用的文件尽量不要改动。
增加 proxy 本地代理规范，参见 vue.config.js
proxy: { '/api': { target: 'http://192.168.1.1:8080', // 域名+端口号，不能加路径 changeOrigin: true, // 发送请求头中的host会设置成target pathRewrite: {} } } 复制代码
联调后台接口状态码规范
常用状态码
CODE_MESSAGE: {
200: '成功',
304: '缓存',
401: '尚未登录授权，请登录',
403: '禁止访问，请联系管理员',
404: '请求地址出错: 请联系管理员',
500: '查找失败, 服务器发生错误，或数据异常',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维护。',
504: '网关超时。',
};
复制代码UI 规范要求
尽量 100%高保真还原 UI 设计图及保证交互流畅
常用 vue 组件规范
Vue 组件命名
组件的命名需遵从以下原则：
- 有意义的 : 不过于具体，也不过于抽象
- 简短 : 2 到 3 个单词
- 具有可读性 : 以便于沟通交流
- 小写字母命名
如：commonheader.vue， common_header.vue
组件结构化
按照一定的结构组织，使得组件便于理解。 vue 组件里，根据其生命周期依次组织代码。执行顺序：name>mixins>props>data>computed>components>watch>methods>created>mounted>unmounted
<template>
<div class="wrapper"></div>
</template>
<script>
import HelloWorld from './components/helloworld.vue';
export default {
name: 'LayoutDefault',
mixins: [],
props: {},
data() {
return {
leftDrawerOpen: false,
};
},
computed: {},
components: {
HelloWorld,
},
watch: {},
methods: {
// 获取初始化数据
getInitData() {},
// 新增功能
handleAdd() {},
// 监听删除
onDelete() {},
/**
* 监听input值变化
* @param val String input输入值
* @param oldVal String input原来旧值
* */
onInputChangeVal(val, oldVal) {}
},
created() {},
mounted() {},
unmounted() {},
};
</script>
<style lang="scss" scoped></style>
复制代码-
使用单文件 .vue 文件格式来组件代码, 即 HTML,js,css 同一个文件内。
-
按首字母排序 properties, data, computed, watch 和 methods 使得这些对象内的属性便于查找。
-
一个清晰、组织有序的组件，使得组件易于阅读和理解。(name; extends; props, data and computed; components; watch and methods; lifecycle methods 等.);
-
合理的 CSS 结构，这里采用 BEM 规则，便于模块化、可复用， 可以提供给我们优良的代码结构和易于识别的术语。请使用
纯小写字母或小写字母和下划线组合。 BEM规则: block_element--modifier语法 -
js变量和事件方法命名请使用
小驼峰命名。
js事件方法名，多以动词命名, 且选取有意义的词, 并写清必要的注释, 如上所示。
最后
以上为个人总结的一些涉及前端团队统一规范的一些心得，有问题或者有待改进的点望各位大佬不吝指点