代码规范梳理(前端)
为协调协同开发,尽量保持代码整体的一致性以及可读性以及可维护性,根据经验对相关项目进行梳理
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(){}
UI 篇
- 设定web/app的基色,内部颜色保持尽量统一,功能颜色划分准确,颜色类尽量别超过5个;
- 出基元件的类型,样式,颜色等标注,包括但不局限:表单,搜索框,按钮,列表,字体颜色,通用字体大小等等
网友评论