web前端编码规范小结

最新推荐文章于 2024-11-11 09:45:18 发布

chenye1924

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量90

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/u/3084690/blog/795650

版权

一、基本规范 1.必须声明文件类型为html5,在头文件添加

<!DOCTYPE html>

2.一个html5的基本格式为


<!DOCTYPE html>
<head>
<title>
</title>
</head>
<body>
</body>

3.为了明确字符编码，使浏览器准确并快速渲染页面，需在头部声明文档编码

<meta charset="utf-8">

4.引入文件引入css文件：

<link rel="stylesheet" href="lib/bootstrap.min.css" />

引入js文件：

<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>

注意：例如在jquery的框架中编码，必须要在编码前引用，否则会出现错误。

5.命名建议使用驼峰命名法，例

<div class="forName"></div>

而函数命名可使用下划线命名和驼峰命名，这取决于函数命名的长度例

驼峰命名：

function goThere(){
    
}

下划线命名：

function http_send_post(){
    
}

在进行项目编写时，可以根据当前的位置去构思命名，如

<div class="index-nav"></div>
<!--首页导航栏-->

<div class="detail-list"></div>
<!--详情页列表-->

函数也一样

function changeColor(){

}
//变色函数

6.缩进用tab键来进行缩进，缩进范围为4个空格。

7.代码注释 css样式中的注释格式为

.nav{}
/*nav样式*/

js中的注释格式为

function example(){
    
}
//函数

8.跨行每一个函数及每一个CSS样式编写完成后，必须空行

div{
       top:100px;
       width:100px;
      background-color:red;
}

a{
       display:block;
}

function forName(){
    
};

function http_send_post(){
    
};

9.空格

元素中每一项属性已经定义命名前都必须用空格分开

<div class="aa" id="bb" name="cc">

var color=function(){

};

10.选择器

在编写css样式时，尽量使用复用性高的class选择器，最好在具有标签性质的元素，才使用id选择器

#nav{
    width:100%;
    height:100%;
}

.detailList{
    width:100px;
    height:100px;
}

二、代码风格

1.css样式定义时，命名后样式中每一项属性要清晰的缩进及空行，更利于查看代码

div{
      top:100px;
      width:100px;
      background-color:red;
}

编写js函数时也是如此,同级函数语句尽量保持一致，下级则缩进，保持对齐，函数开始和结束部分应空出一行，利于查看。

function f1(){

　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;

　　}
　　var result=f1();
　　result();

2.带前缀的属性要缩进编辑在编码中，会遇到许多特定的带前缀的相同属性，用缩进的方式去编辑更利于查看与美观，形成良好的代码风格。

.div{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     -o-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

3.结构控制控制接口，就是 if else while switch等。这一类的写法规范也是经常容易出现问题的，规范一下会更利于编码。（1）if ,else if, else写法:

<script>
    if(){

    }else if(){

    }else{

    }
</script>

（2）switch写法：

<script>
switch(n){
case 1:
 break;

case 2:
 break;

default:
// n 与 case 1 和 case 2 不同时执行的代码
}
</script>

（3）for循环写法：

<script>
    for(var i=0;i<100;i++){
    
    };
</script>

（4）for in写法：


<script>
for (i in object){ 
    
}
</script>

（5）while, do while写法:

<script>
while () { 

//需要执行的代码 

}
</script>

<script>
do(){

 //执行的代码

}while();
</script>

转载于:https://my.oschina.net/u/3084690/blog/795650