前端经常使用规范

时间  2019-11-10
标签 前端 经常 使用 规范 繁體版
原文   原文链接

1、规范目的

概述

为提升团队协做效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档若有不对或者不合适的地方请及时提出, 经讨论决定后能够更改此文档.javascript

全部必须、禁止等词 表示强调，不表示必须，若是能遵照最好css

Tab键统一约定用4个空格代替（避免有的工具Tab键位2个空格）
每一个样式属性或js语句后要加分号，方便压缩工具“断句”html

注释
代码是写给人看的，只是机器偶尔执行一下。
注释永远不闲多的，必定要写注释前端

html 注释

这里是内容
html5

css 注释
/* header /
这里是css内容
/ end header */java

2、文件规范

文件命名规则

文件名称统一用小写的英文字母、数字和中划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你本身和工做组的每个成员可以方便的理解每个文件的意义。（每一个规范前面都有各自的命名规则）jquery

fe      前端开发目录
    src 开发环境
    dist    生产环境
    H5  移动端页面
    pc  Pc端页面
    html    存放html文件
    images  存放图片
    css 存放css文件
    js  存放js文件

经常使用命名规则

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体布局宽度：wrapper
左右中：left right center
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情连接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合做伙伴：partner
(二)注释的写法:
/* footer /
内容区
/ end footer */
(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体布局宽度：wrapper
左右中：left right centerweb

(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summaryjson

(3)功能
标志：logo
广告：banner
登录：login
登陆条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合做伙伴：partner
友情连接：link
版权：copyright数组

HTML 规范

html5 doctype，字符编码统一使用使用utf-8
统一的文档类型，保证每一个页面的表现形式统一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

</body>
</html>

兼容IE meta 写法(在web页面中使用)
使IE浏览器解析页面使用IE最高版本解析

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

资源规范
css 放到head中
javascript 放置到body内，主题内容后
style 默认type为text/css ,能够省去
script 默认 type 为 text/javascript ，能够省去

实用为王
尽可能使用语义标签，减小使用div、span 无语义标签

图片背景图
修饰图片尽可能使用背景图片来展现
切图请保存为最优格式，透明图片保存为 PNG24 格式

属性顺序
HTML属性应该按照一下顺序排列，确保易读性

  • class
  • id,name
  • data-*
  • src,for,type,href
  • title,alt
  • aria-*,role

class用于标识高度可复用组件，所以应该排在首位。id用于标识具体组件，应当谨慎使用（例如，页面内的书签），所以排在第二位。

javascript 生成的标签
经过js生成的标签内容，不易查找和修改，性能也会下降，减小使用。若是使用请分析它的利和弊

CSS 规范

id 和 class 命名约定

1， id 和 class命名只能使用字符、数字、中划线 - ，一概使用小写字符
2， id 和 class 根据内容来命名
3， 使用js操做的id或者class，一概使用J_ 开头，后面的命名使用大驼峰的写法，例如J_Header

每一个属性后必须加分号 ;

方便压缩工具“断句”

空格的使用

.header {
    color: red;
}

选择器 { 以前要有空格
属性名 : 后要有空格
属性名 : 前禁止加空格
一个缘由是美观，其次IE 6存在一个bug，IE6bug

多选择器规则之间换行

当样式针对多个选择器时，每一个选择器占一行

/* 推荐的写法 */
a.btn,
input.btn,
input[type="button"] {
    ......
}

（禁止）将样式写为单行，如

.header { color: red;}

单行显示很差备注，这应该是压缩工具的活

（禁止）向0后添加单位，只为了格式统一如

.hader { 
    margin: 0px;
}

（禁止）使用 css 原生 import

css 原生import 有不少弊端，好比会增长请求数，我没有验证过
推荐文章：Don't use @import

（推荐）属性的书写顺序，举个例子：

.header {
    /*定位*/
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /*盒模型*/
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 1px solid red;
    margin: 10px;
    /*文字系列*/
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    /*背景*/
    background: red;
    /*其余*/
}
  • 定位相关, 常见的有：display position left top float 等
  • 盒模型相关, 常见的有：width height margin padding border 等
  • 文字系列，font, line-height, letter-spacing, color- text-align等
  • 背景，background 等
  • 其余 animation，transition，z-index 等

按照这样的顺序书写可见提高浏览器渲染dom的性能

简单举个例子，网页中的图片，若是没有设置width和height，在图片载入以前，他所占的空间为0，可是当他加载完毕以后，那块为0的空间忽然被撑开了，这样会致使，他下面的元素从新排列和渲染，形成重绘（repaint）和回流（reflow）。咱们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内仍是外，具体在页面的哪一个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其余的属性都是在这个固定的区域内渲染的，差很少就是这个意思吧~

推荐文章

Poll Results: How do you order your CSS properties?

小图片须要生成css sprite 图片

IE Hack 使用

/* 针对ie的hack */
 selector {
     property: value;     /* 全部浏览器 */ 
     property: value\9;   /* 全部IE浏览器 */ 
     property: value\0;   /* IE8 */
     +property: value;    /* IE7 */
     _property: value;    /* IE6 */
     *property: value;    /* IE6-7 */
 }

禁止使用行内样式

<p style="font-size:12px;">我是一段文字</p>

尽可能作个样式和结构分离，否则维护成本比较高

css reset（重置）样式

推荐网址：http://www.cssreset.com/

连接的样式，按照这个顺序来写

a:link -> a:visited ->a:hover a:active

css 选择器禁止标签名，也称为禁止使用子元素选择器，例如：

.header span {
    color: red;
}

使用标签名，让结构和样式耦合度高，不利于后期修改

javascript 代码规范

一个代码段不超过15行，特殊的例子除外

每句代码后（必须）加分号“;”

变量、常量、类的命名

（1）变量使用小驼峰命名法，以首字母小写开始，例如：headFirst
（2）常量采用全大写命名，例如：FEEL_NAME
（3）类采用大驼峰的命名法，例如：HeadFirst

左大括号“{”能够居行尾，右大括号“}”能够居行首

if (a == b) {
    // 这里是内容
}

if,for,switch,do 老是用大括号来包裹，即时结构体内只有一个语句

if (a == b) {
    return a;
}

函数或者类都要添加类描述

/**      
     * * 简述      
     *       
     * 功能详细描述    
     *       
     * @param <String> arg1 参数1      
     * @param <Number> arg2 参数2，默认为0     
     * @return <Boolean> 看xxx是否成功
     */
    function fooFunction (arg1, arg2) {

    }

字符串拼接

字符串拼接，应使用数组保存字符串片断，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每一个字符串都会使用一个小的内存片断，过多的内存片断会影响性能。如

很差的拼接方式，+=      
var str = '';   
for (var i = 0, len = list.length; i < len; i++) {      
    str+= '<div>' + list[i] + '</div>';     
}   
dom.innerHTML = str;    

正确拼接方式，Array的push+join      
var str = [];   
for (var i = 0, len = list.length; i < len; i++) {      
    str.push('<div>'+ list[i] + '</div>');      
}   
dom.innerHTML = str.join('');

在局部函数内定义变量，必须置于顶部

由于变量声明提早的原则，不管你定义到哪里，在解析的时候都会声明提早

（推荐）在须要以{}闭合的代码段前增长换行

// 没有换行，小的代码段没法区分
 if (wl && wl.length) {
     for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);
         if (s.hasOwnProperty(p)) {
             if (merge && type == 'object') {
                 Y.mix(r[p], s[p]);
             } else if (ov || !(p in r)) {
                 r[p] = s[p];
             }
         }
     }
 }
 // 有了换行，逻辑清楚多了
 if (wl && wl.length) {

     for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);

         if (s.hasOwnProperty(p)) {
             // 处理merge逻辑
             if (merge && type == 'object') {
                 Y.mix(r[p], s[p]);
             } else if (ov || !(p in r)) {
                 r[p] = s[p];
             }
         }
     }
 }

（推荐）使用局部变量缓存反复查找的对象（包括但不限于全局变量、dom查询结果、做用域较深的对象）

// 缓存对象
 var getComment = function() {
     var dom = $("#common-container"),               // 缓存dom
         appendTo = $.appendTo,                      // 缓存全局变量
         data = this.json.data;                      // 缓存做用域链较深的对象

 }

## 当须要使用this时， 建议使用_this 来缓存
```
// 缓存this
function Row(name) {
var _this = this;

_this.name = name;
$(".row").click(function() {
_this.getName();
});
}
```
在缓存this时，有使用self的、that、_this ，这里咱们统一下，使用this

获取元素

  1. 获取单个元素
  2. 一般，咱们使用document.getElementById来获取dom元素，避免使用document.all。document.getElementById是标准方法，兼容全部浏览器
  3. IE8使用document.getElementsByClassName来获取dom元素会出现报错状况，尽可能避免使用getElementsByClassName获取dom元素。若是使用JQ来获取DOM元素也尽可能避免使用etElementsByClassName获取dom元素，提升性能

jquery规范

1.同一的对象的操做不超过三个动做能够写入一行（代码的可读性）
2.对于同一对象的多个操做，建议每行写一个操做。
3.若是闲代码块太多，能够以代码块来换行；
4.若是获取的对象是jQuery 对象，建议以$ 符号开头 例如：$nav = $(“#nav”); 以区分javascript对象和jQuery对象

若是你有好的建议，请提出来，一块儿来完善

参考网址 http://www.cnblogs.com/hustskyking/p/javascript-spec.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程