前端开发规范（实验室版）

这几天和团队开发了一个项目，由于编程的时候不怎么规范，代码质量不怎么高，所以后期维护起来会相当浪费时间，特写一篇关于主要针对实验室的前端开发规范的文章，希望大家都能遵循这个规则，如果你有更好的建议，我愿意虚心请教。

HTML的命名规则

文件名称命名统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊符号，遵循两个原则：
1.方便理解；2.方便查找。
不推荐

产品.html
index_%.html
about-us.html
1.html

推荐

product.html
index.html
aboutus.html

多媒体回溯

对于页面上的媒体而言，像图片、视频、canvas 动画等，要保证有可替代的接入接口。比如图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。

这样的好处是什么。首先如果无法显示图像，浏览器将显示替代文本，其次，对于盲人用户如果没有 @alt 的话就好比看天书啦。
（纯装饰性的图片可以内容为空这么做：alt=""）

不推荐

推荐

信息、外观和行为的分离

这里的信息（HTML 结构）、外观（CSS）和行为（JavaScript）我们要尽可能的将它们分离开来，使它们成为可维护的干净整洁的代码。

不使用行内样式（）
不在元素上使用 style 属性（
）
不使用行内脚本（）
不使用表象元素（, ）

不使用表象 class/id 命名（ired, left, center）





  

   
   I'm a subtitle and I'm bold!
   Dare you center me!
   
   I'm important!

推荐




   
   


  
  
  I'm a subtitle and I'm bold!
  
  Dare you center me!
  I'm important!

HTML 引号、缩进和注释

写代码一定要写注释
写代码一定要写注释
写代码一定要写注释

重要事说三遍！

使用双引号("") 而不是单引号('')
tab缩进为两个空格
html注释的格式统一为：
（对于一般性的解释说明可以去掉start、end，如）

不推荐



  
  
  Test

推荐

命名规范

实验室的很多前端小伙伴初学编程都不怎么注意这些，只管实现效果就好了，其实我也是这么做的，但是经过这次项目的折磨后，深刻体会到命名规范的问题，因为当你再回首查看自己的代码时，发现自己竟然看不懂到底自己写的是啥，如果别人也是命名不规范，把他的代码给你修改一下，你会发现，这就是传说的青云志中的天书，看都看不懂，哈哈。
命名遵循几个要点：

语义化
简明化
用英文（视具体情况而定，不会英文百度翻译）

附上常用命名英文翻译：

其他

中文首选：宋体

英文和数字首选：verdana,arial
字体大小：9pt和11pt或12px和14.7px（黑体加粗或宋体加粗选用11pt和14.7px）
网站链接全部采用相对路径（不懂的自行百度相对路径和绝对路径的区别）
用"javascript:void(null)"代替< a href="#">中的#，可避免点击的时候将当前页面重置到首端
使用table布局的时候要把thead,tbody,tfoot都要写上，对于你来说可能显得多余，但是对于以后的维护那是很重要的
能用背景色替代图片就用背景色，尽量切小图片进行平铺
logo大小一般是88x31 其他还有120x60和120x90大小的

CSS一般规范

一般来说id是不应该应用于样式的，尽量使用class,避免使用标签选择器，如果一定要使用请在前面加一只限制范围的class选择器，一般来说针对同一样式的选择器不超过三个为好。

不推荐

.p-1 {//命名不规范
font-weight: 600;
}
#content #title {//使用了id
font-size: 14px;
}
div.content > header.content-header > h2.title {//使用了标签名
 font-size: 2em;
}
.container .nav ul li a{//选择器太多
 color:#000;
}

推荐

.content {
font-weight: 600;
}
.content .title {
font-size: 14px;
}
.content >.content-header >.title {
 font-size: 2em;
}
.nav li a{
 color:#000;
}

ps

⭐️当实验室是以团队开发一个项目时，如果是一个从0开始的项目，那么每个人都会有几个页面要写，每个页面请尽量都新建一个css的文件写一份独立的样式，然后引入到html中，因为实验室很多人都是刚开始接触前端，所以不推荐一开始就学大公司的那种写全局样式的形式。
⭐️如果是接手的一个中期的项目，当大家分配几个页面时，css样式一定要新建一个文件写，不要在别人的样式里写，更不要写在html中，这样后期合并会相当麻烦，最重要的一点就是写css样式的时候记得在最前面添加一个全局的独有的class选择器，(一般来说这种项目都是很规范的，会有公共样式，重用样式等)这里推荐以功能+自己姓名的小写字母开头作为全局独有的class选择器，这样做的好处是后期css合并为一个css文件时方便合并，不会担心大家写的样式相互干扰。

不推荐


  
    首页
    产品介绍
    关于我们

／*----------针对接手的是中期项目而言 start----------*／
.nav li a{//这里的.nav假定为公共class，那后期合并会相互干扰
padding-top:10px;
}
／*----------针对接手的是中期项目而言 end----------*／

推荐


  
    首页
    产品介绍
    关于我们

／*----------针对接手的是中期项目而言 start----------*／
.nav-hqg .nav li a{//假如开发者叫花千骨
padding-top:10px;
}
／*----------针对接手的是中期项目而言 end----------*／

CSS的注释和缩写属性

请大家尽量把注释写全，最好是分模块写注释，假定现在写的是header里面的css样式，请使用

／*----------header start----------*／
     这里是书写header css样式
／*----------header end----------*／

单行注释请使用//注释

//这是单行注释

CSS为我们提供了各种缩写属性（如 padding ）应该尽可能使用，使用缩写属性对于代码效率和可读性是有很有用的。
不推荐

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

排版规范

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
不推荐

.box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推荐

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
不推荐

.test {
  display: block; height: 100px
}

推荐

.test {
  display: block;
  height: 100px;
}

属性名的冒号后请使用一个空格。
不推荐

h3 {
  font-weight:bold;
}

推荐

h3 {
  font-weight: bold;
}

规则之间始终有一个空行（双换行符）分隔。
不推荐

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

其他

省略“0px”值后面的px单位。不要在0值后面使用单位，除非有值

尽可能使用16进制小写字母表示颜色值，能简写尽量简写，如#000000；可简写为#000；
避免使用CSS“hacks“

javascript 的命名空间规范

当开发项目的时候，请尽量将自己的全局变量写在自己函数体内，这样团队合并项目的时候就不会造成重复命名。
不推荐

var i=0;
var j=on-off;

推荐

function project{//将自己的变量定义在自己项目的一个大的函数体内
  var i=0;
  var j=on-off;
}

定义变量请加上var，不要忽略它，把赋值尽量写在变量申明中，声明变量时尽量都统一写在最前面，这样别人查看你的代码时才会更清晰明了。
不推荐

(function(log){
  'use strict';
 
  a = 10; //忽略了var
  var b = ;
  b=10; //赋值尽量在定义时赋值
 
  for(var i = 0; i < 10; i++) {
    var c = a * b * i;
  }
 
  function f() {
 
  }
 
  var d = 100; //变量定义尽量放在最前面
  var x = function() {
    return d * d;
  };
  log(x());
 
}(window.console.log));```
**推荐**

(function(log){
'use strict';

var a = 10,
b = 10,
d= 100,
c,
i,
x;

function f() {

}

for(i = 0; i < 10; i++) {
c = a * b * i;
}

x = function() {
return d * d;
};
log(x());

}(window.console.log));}


如果项目的某一个变量是需要多个人调用的，这里建议是定义一个全局的对象global，在这个对象下面在再次定义一个你自己的特有的命名空间，然后在这个空间写入你需要传入的公用的变量，假如我现在是在写home页面的网页，需要公用一个page的变量，那就可以这样写

var page=1;
global.home.page=page;

 由于每个人的命名空间都是不一样的，所以即使有多个page变量，也不会相互影响，如

/----------这是首页 start----------／
function home(){
var page=1;
global.home.page=page;
}
/----------这是首页 end----------／

/----------产品页面 start----------／
function product(){
var page=1;
global.product.page=page;
}
/----------产品页面 end----------／

**那这个global函数怎么写呢，这里已经为大家写好了，大家放在自己的js文件中就好了**

/----------全局命名空间函数定义 start----------/
var global={};
global.register=function(namespase,obj){
var nsArray=namespase.split('.');
var regns=function(_parent){
var n=nsArray.shift();
if(_parent[n]===undefined){
_parent[n]={};
}

       if(nsArray.length==0){
           if(obj){_parent[n]=obj;}
           return _parent[n];
       }
       return regns(_parent[n]);
   };
   return regns(parent);

};
/----------全局命名空间函数定义 end----------/

/----------获取空间里变量的值 start----------/
//获取命名空间
global.obtain=function(namespase){
var nsArray=namespase.split('.');
var getns=function(_parent){
var n=nsArray.shift();
if(_parent[n]===undefined){
console.log('命名空间'+namespase+'不存在！');
}
else if(nsArray.length>0){
return getns(_parent[n]);
}
else{
return _parent[n];
}
};
return getns(window);
};
/----------获取空间里变量的值 end----------/

###使用方法
**假如现在我在写一个login页面，需要把temp变量传给register页面，我们可以这样写**

function login(){
var temp="off";
global.register ("login.temp","temp")//将temp变量传给
g lobal.login.temp;
}
function register(){
var temp=global.obtain("login.temp");//相当于把global.login.temp传给temp变量
}

####其他
>- 如果可以，尽量使用总是使用 === 精确的比较操作符
- 不要忘记每行代码结束后的分号
- 使用if else时记得还有三元条件判断（如果三元条件判断相对简洁的话）
- 注释请使用具有模块化的注释如：

/----------功能 start----------/
这里是代码
/----------功能 end----------/

- 单行注释请使用//注释

本人也刚开始学前端，有错误的地方望您能指出，您有更好的建议我也会虚心学习
申明：文中内容有参考网上部分资料，如有侵权，望联系本人，谢谢

前端开发规范（实验室版）

HTML的命名规则

多媒体回溯

信息、外观和行为的分离

HTML 引号、缩进和注释

命名规范

其他

CSS一般规范

ps

CSS的注释和缩写属性

排版规范

其他

javascript 的命名空间规范

你可能感兴趣的:(前端开发规范（实验室版）)