Batsing的网页编程规范（HTML/CSS/JS/PHP）

特别注意！！！我这里的前端编程规范不苟同于Bootstrap的前端规范。

因为我和它的目的不同，Bootstrap规范是极简主义，甚至有些没有考虑到兼容性的问题。

我的规范是自己从编程实践、IE兼容、IDE自动补全、及其它网站源码中总结出来的。

 

1、HTML基本元素、标签规范

闭合(<p></p>)、自闭合(<br />)、小写（<INPUT />）

参考：http://www.runoob.com/html/html-elements.html

我这里的规范自闭合标签要写/

　　1.XHTML历史遗留；

　　2.我记得在某本书说过不写/，某些标签在某些低版本的IE中会出现兼容问题，这个我不太记得清楚了，而且规范的写法是 “空格+斜线”；

　　3.IDE会自动补全，没必要又去手工改一下；（在此推荐一下下HBuilder IDE 和 emmet插件）

 

2、HTML属性

小写(ID="...")，双引号（id='...' 特殊情况可用单引号），

特殊情况示范：

<div onclick='payOrder("x2015090901353456");' ></div>

属性顺序（这里的顺序与Bootstrap规范有很大出入，我附上解释）

input标签方面：

type(input标签) > name(input标签) > id > value(input标签) > ... > class > style > onclick,onfoucus,on...

最首要的是确定输入类型，是文本、单选、多选、按钮、文件、提交……；

次之是确定name和id，因为直接提交表单时传值的key就是name，而用ajax提交时可以用name（节俭）也可以用id（JS执行快）来读取值；

再次则是value，一般是有设置默认值才添加这个属性，有默认值要醒目显示出来，调试时发现没有默认值或者默认值异常则可以快速找出来；

data-*,role等等其它属性直接放在中间，因为一般一次写好了就基本上不需要动的了，class属性也是同理；

style属性放在几乎最后，是因为可能一些比较独立的DOM有自己的样式，而且也可能经常变动，放在最后（如果没有绑定事件则是最后）比较显眼；

onclick等on...方法，因为IOS一些网页动态加载的DOM使用jquery的live也可能会有无法绑定事件的问题，所以经常要绑定某些事件的会直接使用on……属性，这个放在最后也是因为显眼的原因，因为它有绑定事件，所以要一眼就能看得出来，而一眼看得出来的除了最开头及第二就剩最后了。

img标签：

src（img标签）>width/height（img标签）>alt（img标签）> id>... > class > style > onclick,onfoucus,on...

最首要的当然是图片的源地址，这个不用解释了吧；

次之是图片的宽度或高度，注意是“或”，这两个属性建议一般只设置一个，因为设置一个另一个则会自动比例适应，而设定两个则会使不合尺寸的图片拉伸；

alt是图片提示，个人感觉如果是手机端则需要写，PC端一般不用写不，因为很多时候手机会调成无图模式以节省流量，电脑则无需；

后面的属性顺序原理同上；

！以上顺序如与IDE自动补全不太一致，则以IDE自动补全的为优先考虑。（一般是Emmet插件）

！如有不同意见，请以浏览器审查元素看到的排序为准

 

3、表单

使用 label 标签包装 单选、多选、下拉等元素，扩大用户点击范围到文字；

不建议使用for-id的方法绑定label，因为id是稀有资源不宜为太多表单分配过多id，表单使用name就足够了；

form 在需要从服务器读取原来的数据的要加 autocomplete="off"，以免火狐浏览器的自动记录替换代码设定的默认值。

 

4、CSS颜色#

在PC版网页中不要使用缩写形式（如：#aaa），要写完整（#aaaaaa），否则IE8及以下不能识别而变成黑色；

 

5、JS中所有变量都要用var显式声明

JS中，默认情况下，没有显示声明的变量为全局变量。对于只需要在函数内使用的变量来说，不用var声明会使变量变成全局变量，变量在函数使用完后得不到释放，造成内存的浪费；最主要是这些变量很可能在其它函数中重名，可能会造成各种奇奇怪怪的问题。对于全局变量来说，在外部用var显示声明，可以明确地指出有地方用了全局变量，以便与函数中的参数变量区分，便于日后维护和优化。

 

6、JS勿用 eval() 函数

解析JSON字符串请使用jQuery的$.parseJSON函数，手机网页也可直接使用原生的 JSON.parse() 函数，或者直接在服务端直接返回json对象，设置mime type（如Thinkphp的ajaxReturn()函数）。因为eval()函数是把字符串作为脚本运行的意思，非常危险，非常容易产生CSRF攻击隐患！

 

7、请使用UTF8无BOM编码格式

因为很多后台编程语言如PHP只支持utf8编码的JSON，为避免频繁的转编码，请所有文档都使用utf8格式；

无BOM是什么概念请自己*度或谷*，就是为了避免session、cookie、GD库生成的图片等出现不正常；

 

8、用Tab而不是用空格

详细原因查看我的另一篇博文。

附Code Igniter的PHP编程规范“在代码中使用制表符（tab）来代替空格，这虽然看起来是一件小事，但是使用制表符代替空格， 可以让开发者阅读你代码的时候，可以根据他们的喜好在他们的程序中自定义缩进。 此外还有一个好处是，这样文件可以更紧凑一点，也就是本来是四个空格字符， 现在只要一个制表符就可以了。”。原文链接

 

9、{ 不要另起一行

有些人喜欢把 { 另起一行，不知道是为了逼格还是什么，但是这样做有什么坏处吗？还真有！

这样会快速增加代码的行数，而且是虚无的行数，这样的后果就是你要更频繁地滚动屏幕，影响代码阅读、人工寻找的效率

而按照K&B风格规范来说，类和方法/函数的左括号另起一行，if/else、switch/case等的左括号放在同一行。

目前所看到的是，微信团队用的是K&B风格，而阿里支付宝和新浪微博用的是不另起行，最后这里的总结主要是PHP，而并非前端。

 

10、该加的meta标记不要省

移动端有哪些meta，PC端有哪些meta，请见我的博文 前端手札－－meta标记篇

 

11、巧用title属性

在一些管理后台，一些比较隐蔽的操作以及操作图标上使用title属性会有很大的提示作用。比如ECshop的管理后台中就有大量这种例子

 

12、PHP中的函数与方法概念区分

函数：函数定义在类外，函数是公共的，都可以使用，一般为小写字母加下划线写法；

方法：方法定义在类内，类的方法可以设定访问权限，需要通过对象或者类来调用，一般为驼峰写法；

 

13、类和方法的注释说明文档规范

/**
 * 实例化多层控制器 格式：[资源://][模块/]控制器
 * @param string $name 资源地址
 * @param string $layer 控制层名称
 * @param integer $level 控制器层次
 * @return Controller|false
 */
function A($name,$layer='',$level='') {
    ... ...
}

因为这种写法是IDE自动生成帮助文档的标准格式，见下图（图截自HBuilder，示范代码A()函数为Thinkphp）。

 

14、使用Thinkphp框架的项目，参考这篇博文中的该框架专用的规范>>

15、PHP中if、switch等的大号括的写法

在纯PHP文件中，if/else，switch/case，for，while，foreach等使用大括号的形式；

在模板文件中，由于代码大部分是HTML标签，所以中间嵌入的PHP代码 if、switch、for、while、foreach 等不使用大括号，而是使用冒号和endif、endswitch、endfor、endwhile、endforeach 这种形式，这样可以避免大括号嵌套过于复杂造成阅读困难，和嵌套错误等。

<?php if(...): ?>
<div>...</div>
<?php else: ?>
<div>...</div>
<?php endif; ?>

16、用protected而不是private修饰

private修饰为私有的意思，但不能被子类继承。在业务扩展，需求更改频繁的现代社会，绝大多数的类，被继承是迟早的事情。一些因为安全等方面原因不宜被访问的方法，应该定义为protected而不是private，以免以后继承时发现一些方法并没有继承过来。在PHP中，方法的public修饰应该被省略，方法默认情况下已经是public，不需要啰嗦地声明。

17、使用return而不是exit

exit会结束整个的PHP脚本。在框架中，都是执行完业务逻辑再分析调试信息的。如果使用exit，业务执行完了但是调试信息不会生成，会让调试带来不便。