大数据

前端开发规范(实验室版)

前端编码规范—— HTML 篇

前端编码规范—— CSS 篇

前端编码规范—— JavaScript 篇

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

HTML的命名规则

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

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

推荐

product.html
index.html
aboutus.html

多媒体回溯

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

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

不推荐


推荐

logo

信息、外观和行为的分离

这里的信息(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
  
  


 

推荐



  
  
  Test
  
  



命名规范

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

  1. 语义化
  2. 简明化
  3. 用英文(视具体情况而定,不会英文百度翻译)

附上常用命名英文翻译:

其他

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

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----------*/
  • 单行注释请使用//注释

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