代码规范梳理(前端)

为协调协同开发,尽量保持代码整体的一致性以及可读性以及可维护性,根据经验对相关项目进行梳理
Html篇

html文件必须申明:<!DOCTYPE html>
文档编码如无特殊要求,使用<meta charset="UTF-8">
根据相应要求,引入其他meta 比如:

<!-- 声明文档的兼容模式：指示IE以目前可用的最高模式显示内容-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

使用link引入外部css文件到页面的head中。
注意：一般我们不适用@import来引入外部css文件。
使用script将js文件引入，并置于body底部，这时js文件会最后加载，html会最先加载，用户体验会更好。（注意：并不是所有的js文件都要放置于body的底部，如当我们需要使用js文件动态修改meta元素内容时，需要将js文件引入到head标签中。
参考: https://blog.csdn.net/qizhiqq/article/details/52584620
放在底部哪里？
许多人认为只要放在底部了，无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的，其实还是有差别的，因为从HTML2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错，是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。
所以实际效果和写在“body标签闭合之前”之前是没有区别的。
所以，只要是让浏览器做了多余的事都是不好的，虽然差别细微，但是咱们还是按照标准来，放在“body标签闭合之前”。
语义化编写代码,即在浏览器兼容的前提下劲量使用语义化的标签(如果需要兼容ie参考:https://blog.csdn.net/m838115837/article/details/49535933)
一个标签的className不要过多,使用className进行辅助语义化模块划分,class,id命名使用小驼峰,中间练接'-' 表示层级;页面id不能重复,尽量避免使用id;
元素嵌套,以正确的嵌套规则嵌套,尽量避免内联元素嵌套块状元素;
结构上如果可以并列书写，就不要嵌套。
如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
元素没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等
正确闭合标签且必须闭合。
相应注释,模块注释,说明等需要的注释写在相应的代码的上方
页面实现完成提交前记得代码格式化

css篇
通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。
我们按照CSS的性质和用途，将CSS文件分成“基础样式”、“模块(公共)样式”，并以此顺序引用（按需求决定是否添加版本号）。

<!--base:基础样式,用来浏览器默认样式reset,网站基类样式设置-->
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.css">

使用类选择器，放弃ID选择器
分类的命名方法：使用语义化命名,层级已'-'链接,禁止无脑层级嵌套;
可以简写的命名简写比如:btn(要让人看的懂哦☺)

<!--以个人信息模块为例,此模块中包含一个个人信息展示,以及相应新增按钮-->
.btn-submit{  //功能类命名
    
}
.btn-close {
    
}

.infoWrap {  //模块小驼峰命名
    xxxx:xxx;
}
.infoWrap-intro{  //以横杠的形式表示层级
    
}
.parent .child {  //不推荐,层级竟可能的少,不乱用.尽量写在第一层级上少量标签元素的也可以不去单独追加className,而使用嵌套
    
}

颜色代码书写:有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主 color:#ffffff --> color:#fff; color:#eebbcc -->color:#ebc;颜色代码小写
css 书写顺序:
- 位置属性(position, top, right, z-index, display, float等);
- 大小(width, height, padding, margin);
- 文字系列(font, line-height, letter-spacing, color- text-align等);
- 背景(background, border等);
- 其他(animation, transition等)

备注:以大模块做前缀,可以很好的避免样式污染,以及提高语义化

JavaScript 篇

避免全局命名空间污染;es6开发使用相应的const,let;
使用var 定义时,以闭包包裹

(function(window){
  'use strict';
  var x = 10,y = 100;
 
})(window);

尽量以对象形式分割模块
js命名:
- 命名:整体以小驼峰方式命名
- 私有（保护）成员：必须以下划线_开头
- 常量名：必须使用全部大写的下划线命名法，如IS_DEBUG_ENABLED
- 布尔变量:boolean类型的应当使用is、has等起头，表示其类型,如:isClose,hasOpen
- 方法名:'fn'前缀,如fnCheckIsUpdate,使用语义化简介的英文描述方法,函数名应当用动宾短语
- 类名命名:类名应当用名词,如:const productList =[]; const customerInfo ={};let isNewCustomer =false;单独的变量一般统合到一个对象里,避免申明过多的变量
- 代码注释:注释要尽量简单，清晰明了。着重注释的意思，对不太直观的部分进行注解：
代码书写:变量必须先申明后调用,代码整体风格,尽量的变量申明在文件的开头(个别变量可能编写函数时才用到1两次,可以写在调用函数上方处), 文件的尾部书写自运行函数;中间定义各种函数;
函数的申明:函数以函数申明的方式进行申明: function fnName(fnPrama){},尽量避免用函数表达式进行申明:var fnName = function(){}