前端规范

作者 江辉 日期 2016-01-01
前端规范

1、标准的HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="法律平台,法律咨询" name="keywords">
<meta content="描述" name="description">
<title>这是个html</title>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="static/images/ico.png">
<style type="text/css">
body { margin: 0 auto; padding: 0; }
</style>
</head>
<body>
<!-- The page header should go into a header element -->
<div class="page-head">
<h1>My page title</h1>
</div>
<!-- All navigation should go into a nav element -->
<nav class="top-navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main class="news-page" role="main">
</main>
<!-- Your page footer should go into a global footer element -->
<div class="page-footer">
Copyright 2014
</div>
<script type="text/javascript" src="static/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
console.log("hi");
});
</script>
</body>
</html>

2、命名规范

2.1文件命名

html CSS 都采用 ‘-‘号拼接 eg. css-expand.js

Javascript 采用驼峰命名法

js 若是为jquery插件 必须为 jquery.xxx.js

文件夹命名规范
|—order
|———js
|—————add.js
|———add.jsp

2.2属性命名规范

html css 中元素 采用 ‘-‘号拼接命名法

<span id="j-hook" class="j-google">Google</span>

javascript 中的方法名 采用驼峰命名法

3.HTML规范

3.1属性

HTML属性按照特定顺序出现

  1. id
  2. class
  3. name
  4. date-xx
  5. src,for,type,href
  6. role
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">

3.2引号

属性的定义,统一使用双引号。

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

3.3布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>

4、CSS规范

4.1 书写规范

单独的.css文件

.selector-secondary {
display: block; /* 注释*/
}
.selector-three {
display: noe;
}

html中的css

<style type="text/css">
.main{margin:0 auto;background:red;}
</style>

4.2 Class 和 ID

  1. 使用连字符 - 作为 ID、Class 名称界定符,不要驼峰命名法和下划线;
  2. 避免选择器嵌套层级过多,尽量少于 3 级;
  3. 避免选择器和 Class、ID 叠加使用;
  4. 优先使用Class选择器
<html>
<style>
<head>
.nav .item{float:left;}
</head>
<body>
<nav class="nav">
<ul>
<li class='item'>标题1</li>
<li class='item'>标题2</li>
</ul>
</nav>
</body>
</html>

4.3 声明顺序

相关属性应为一组,推荐的样式编写顺序

1.Positioning
2.Box model
3.Typographic
4.Visual

.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}

4.3 链接的样式顺序:

a:link -> a:visited -> a:hover -> a:active(LoVeHAte)

5、JavaScript 规范

必须为面向对象写法

var order = {count: 120} || order;
/***
* 初始化产品名称
*/
order.init = function () {
var id = yUtils.getParam("standardId");
};
/***
* 发送验证码
* @returns {boolean}
*/
order.sendCode = function () {
};
/****
* 保存订单信息
*/
order.save = function () {
};
/****
* 倒计时
*/
order.second = function () {
};
$(function () {
order.init();
$(".sendCode").on("click", function () {
order.sendCode();
});
});

5.1 jquery 优化建议

jquery优化建议

$("#test").empty().append("<h1>加载更多</h1>")//尽量是用链式写法

###5.2 jquery 插件模板

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos
// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {
// here we go!
$.pluginName = function(element, options) {
// plugin's default options
// this is private property and is accessible only from inside the plugin
var defaults = {
foo: 'bar',
// if your plugin is event-driven, you may provide callback capabilities
// for its events. execute these functions before or after events of your
// plugin, so that users may customize those particular events without
// changing the plugin's code
onFoo: function() {}
};
// to avoid confusions, use "plugin" to reference the
// current instance of the object
var plugin = this;
// this will hold the merged default, and user-provided options
// plugin's properties will be available through this object like:
// plugin.settings.propertyName from inside the plugin or
// element.data('pluginName').settings.propertyName from outside the plugin,
// where "element" is the element the plugin is attached to;
plugin.settings = {};
var $element = $(element), // reference to the jQuery version of DOM element
element = element; // reference to the actual DOM element
// the "constructor" method that gets called when the object is created
plugin.init = function() {
// the plugin's final properties are the merged default and
// user-provided options (if any)
plugin.settings = $.extend({}, defaults, options);
// code goes here
};
// public methods
// these methods can be called like:
// plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
// element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside
// the plugin, where "element" is the element the plugin is attached to;
// a public method. for demonstration purposes only - remove it!
plugin.foo_public_method = function() {
// code goes here
};
// private methods
// these methods can be called only from inside the plugin like:
// methodName(arg1, arg2, ... argn)
// a private method. for demonstration purposes only - remove it!
var foo_private_method = function() {
// code goes here
};
// fire up the plugin!
// call the "constructor" method
plugin.init();
};
// add the plugin to the jQuery.fn object
$.fn.pluginName = function(options) {
// iterate through the DOM elements we are attaching the plugin to
return this.each(function() {
// if plugin has not already been attached to the element
if (undefined == $(this).data('pluginName')) {
// create a new instance of the plugin
// pass the DOM element and the user-provided options as arguments
var plugin = new $.pluginName(this, options);
// in the jQuery version of the element
// store a reference to the plugin object
// you can later access the plugin and its methods and properties like
// element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
// element.data('pluginName').settings.propertyName
$(this).data('pluginName', plugin);
}
});
}
})(jQuery);