1、实现的目标:
代码一致性和最佳实践。通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。
2、HTML
属性顺序一致保证易读性
- id
- class
- name
- data-xxx
- src,for,type,href
- title,alt
引号统一双引号
HEAD模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<!-- 设置编码格式 -->
<meta charset="utf-8">
<!--IE兼容模式 优先使用最新版的IE和Chrome内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<!--SEO优化-->
<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 图标 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
3、CSS
3-1、良好的注释:将样式按组件(component)来分割。命名也要按功能来区分。
/* ========================
组件块样式
==========================*/
/* 子组件块样式
==========================*/
/*子组件块样式
==========================*/
3-2、合理的缩进
3-3、避免过分嵌套(3层)
4、JavaScript
4-1、注释原则
如无必要,勿增注释,如有必要,尽量详细。合理的注释,空行排版等,可以让代码更易阅读、更具美感。
单行注释 //
多行注释 多个//
4-2、命名
变量:驼峰命名法
私有属性、变量和方法以下划线开头:var _privateMethod = {};
常量,使用全部的大写字母,单词间下划线分隔:var HTML_ENTITY = {};
4-3、命名语法:
类名,使用名词:
function Engine(options){};
函数名,使用动宾短语:
function getStyle(element){};
boolean类型的变量使用is或has开头:
var isReady = false;
var hasMoreCommands = false;
4-4、接口命名规范
option | 表示选项 |
active | 表示当前,不要用current |
index | 表示索引 |
trigger | 触点元素 |
triggerType | 触发类型、方式 |
context | 表示传入的this对象 |
object | 传入的对象 |
element | 推荐全写 |
length | 推荐全写 |
prev/next | 前一个、后一个 |
4-5、jQuery
1、存放jQuery对象的变量以$开头;
2、将jQuery选择器返回的对象缓存到本地变量复用;
3、使用驼峰命名法;
4、尽可能的使用ID选择器,性能更好;
5、在父元素中选择子元素使用.find()方法性能更好;
$("#myLink")
.addClass("bold")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();
6、尽量使用链式写法而不是使用变量缓存或者多次调用选择器方法;
7、当链式超过3个或者更加复杂时,使用换行和缩进来保持代码的可读性;
8、正则表达式仅准用.test()和.exec();
9、性能优化:异步加载第三方内容、避免使用jQuery动画。
文章转自:手册地址