专栏名称: SegmentFault思否
SegmentFault (www.sf.gg)开发者社区,是中国年轻开发者喜爱的极客社区,我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
OSC开源社区  ·  RAG市场的2024:随需而变,从狂热到理性 ·  2 天前  
程序猿  ·  41岁DeepMind天才科学家去世:长期受 ... ·  2 天前  
OSC开源社区  ·  宇树王兴兴早年创业分享引围观 ·  5 天前  
51好读  ›  专栏  ›  SegmentFault思否

Web 前端开发代码规范(基础)

SegmentFault思否  · 公众号  · 程序员  · 2017-09-24 08:00

正文

一、 引言

对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

二、 HTML/CSS规范

2.1 浏览器兼容

根据公司业务要求而定,一般:

  • 主流程测试:Chrome 30+、IE9+;

  • 完整测试: Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。

2.2 html代码规范

2.2.1声明与编码

1、html头部声明统一:

2、页面编码统一:

  1. charset="UTF-8">

2.2.2格式缩进

html编码统一格式化显示,使用一个Tab键进行分层缩进 (2个空格宽度),使整个页面结构层次清晰,方便阅读和修改。

2.2.3 模块注释

html较大独立模块之间注释格式统一使用:

  1.   …

或者:

  1.   …

2.2.4标签与属性

1、由于html标签和属性不区别大小写,所有建议都采用小写,尤其是自定义标签和属性名,否定js中取不到,如:

  1. data-bgColor="red">

  2. $('div').data('bgColor');  // 取不到,已自动被浏览器转成了data-bgcolor

2、所有html属性必须添加双引号(非单引号)。

  1. // 禁止

  2. 'mainframe'>
  3. // 推荐

  4. "mainframe">

    3、所有标签必须采用合理嵌套。

    1. // 禁止

    2. </p>b>

    3. // 推荐

    4. </b>p>

    5. // 禁止inline级标签嵌套block级标签

    6. </div>span>

      4、所有等特殊符号(非标签一部分)用编码表示。编码成\>,&编码成\&

      5、img标签中必须添加alt属性。如: src="…"  alt="logo" />

      6、标签在运用时,应尽量使用语义化标签,如:

      1. 标题

      2.  for="user">用户名:

      3.  name="username" id="user">

      在语义不明显,既可用div也可用p时,应优先考虑p标签。

      2.3 CSS代码规范

      2.3.1 CSS引用规范

      1、所有CSS均为外部调用,不得在页面书写任何内部样式或行内样式;

      2、html页面引入样式文件:

      统一使用link标签,少用@import(原生import有加载性能问题),sass、less、vue.js等文件使用import命令除外(因为最终前端构建工具会将引入文件编译成一个css文件)。

      1. rel="stylesheet" href="xxx.css">  

      2.3.2 CSS注释规范

      1、css头部文档注释( 统一加上@charset声明 ),如下:

      1. @charset "utf-8";

      2. /**

      3.  * @created :   2017/09/15

      4.  * @author  :   Mr.Wang

      5.  * @version :   v1.0

      6.  * @desc    :   XX模块

      7.  */

      关于"version",如果对代码有修改更新version版本号,并添加相关注释。

      2、内部模块之间注释(建议 @模块英文名,好查找):

      1. /* @info 商品信息区

      2. ----------------------------------------------------------------*/

      3. .infoArea{}

      4. /* 单行注释 */

      5. .specArea{}

      6. /* @price 商品价格区

      7. ----------------------------------------------------------------*/

      8. .price{}

      2.3.3 CSS书写规范

      1、样式书写不做强约,可分行或单行

      推荐单行,理由:直观、模块之间分隔鲜明,有全局感。

      2、样式中属性排序规则:先外部 > 再自身 > 后内部,推荐工具( CSScomb )

      1.    A.)影响文档流的属性(display, position, float, clear, visibility, table-layout等)

      2.    B.)自身盒模型的属性(width, height, margin, padding, border等)

      3.    C.)排版相关属性(font, line-height, text-align, text-indent, vertical-align等)

      4.    D.)装饰性属性(color, background, opacity, cursor等)

      5.    E.)生成内容的属性(content, list-style, quotes等)

      3、所有CSS属性和值必须采用小写的形式。如:FONT-SIZE:12PX必须改为font-size:12px;

      4、关于css背景图片(关键字:合并,缩写,去引号), 引号不是必须的,而且在某些浏览器上加引号反而出错:

      1. // 不推荐

      2. .canbox{

      3.     background-color: #ff6600;

      4.     background-image: url("/img/xxx.png");

      5. }

      6. // 推荐(合并、去除引号)

      7. .canbox {

      8.     background: #f60 url(/img/xxx.png); 

      9. }

      5、属性为0值,去除单位。

      1. // 不推荐

      2. .wrap{

      3.     margin: 0px 0px 5px 8px;

      4. }

      5. // 推荐

      6. .wrap {

      7.     margin:  0 0 5px 8px;

      8. }

      6、所有CSS的命名应语义化,如:回复框,.replyBox{…},禁止用拼音缩写命名,如.hfk{…}。

      7、清除浮动时用.clearfix,禁止用无语义

      style="clear:both ">

      清除。

      8、用来显示动态文本输入的地方,样式里必须加上强制英文换行:

      1. word-break: break-all; word-wrap: break-word; overflow-x: hidden;

      如果要显示省略号加上:text-overflow: ellipsis;

      9、上下相邻的两模块尽量避免混用margin-bottom,margin-top,否则会产生重叠现象。

      三、 JavaScript规范

      3.1  JS文件引用

      1、引入格式: 

      脚本语言发展至今,也只有js混的最好了,所以type="text/javascript"类型指定可以省去。

      2、引入位置: body标签内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞的问题(js单线程)。

      1.     

        页面内容….

      2.     

      3、引入方式:html页面中禁止直接编写js代码,统一使用 function innerFun() {

    7.         var j = 0;

    8.         ……

    9.     }

    10. });

    运算符(=、==,&&、+/-等)两侧应各空一个格,块级{}左侧也应该空出一格

    3.2.2 局部间隔

    1. // 不推荐

    2. var arr=[1,2],str='hello'+'Lucy';

    3. var myfun=function(arg){

    4.    //todo…

    5. }

    6. // 推荐

    7. var arr = [1,2], 

    8.     str = 'hello' + 'Lucy';

    9. var myfun = function(arg) {

    10.    //todo…

    11. }

    3.3  JS注释规则

    3.3.1  文件头部注释

    1. /**

    2.  * @created :  2017/09/15

    3.  * @author  :  Mr.Wang

    4.  * @version :  v1.0

    5.  * @desc    :  当前js模块功能描述

    6.  * @e.g.    :  方法用例,如:$('.title').tip();

    7.  */

    3.3.2  方法注释及单行注释

    1、对于一个较复杂的方法和函数,可用采用多行注释,以便作详情的描述。

    1. /**

    2. * 此方法是用于解析tpl模块

    3. * 通过分析html中结构…

    4. */

    2、单行注释

    1. var funName = function(arg1, arg2) {

    2.     this.arg1 = arg1;

    3.     // 单行注释说明(上面添加一空行, //与说明之间空一格)

    4.     this.arg2 = arg2;

    5. };

    3.4  命名规则

    变量名应由 26 个大小写字母(A..Z,a..z),10 个数字(0..9),和“_”(下划线)组成。

    1、通常, 使用”驼峰式”写法,对象、函数和实例时尤其如此。

    1. // 不推荐

    2. var is_my_object = {};

    3. var is-my-object = {};

    4. // 推荐

    5. var isMyObject = {};

    2、构造函数或类时使用驼峰式大写

    1. // 不推荐

    2. var  bad = new user({

    3.     name: 'nope'

    4. });

    5. // 推荐

    6. var good = new User({

    7.     name: 'nope'

    8. });

    3、常量大写,并用下划线分隔,形式如:NAMESLIKETHIS

    3.5  编码模式

    为了规范代码严谨风格,推荐严格模式(Strict Mode),即总是在模块顶部声明 'use strict';

    1. (function(){

    2.     'use strict';

    3.     function innerFun(){

    4.         var j = 0;

    5.         ……

    6.     }

    7. });

    严格模式的一大目标是显性的抛出错误,让你能更方便更快的调试一些隐性的错误。

    1、防止意外的创建了全局变量。

    非严格模式下,为一个未申明的局部变量赋值时会自动创建一个同名的全局变量,这是Js程序中最容易出现的错误之一,在严格模式下这么做会显性的抛出异常。

    1. // 严格模式下会抛出异常

    2. (function() {

    3.     some = 'foo';

    4. }());

    2、防止函数中的this指针意外指向全局。

    非严格模式下,函数中未被定义或为空( null or undefined)的this会默认指向全局环境(global)。

    1. window.color =  'red';

    2. function getColor() {

    3.     console.log(this.color);

    4. }

    5. // 在严格模式中会报错, 非严格模式中则提示red

    6. getColor();

    3、防止重名。

    当编写大量代码时,对象属性和函数参数很容易一不小心被设置成一个重复的名字。严格模式在这种情况下会显性的抛出错误

    1. // 重复的变量名,在严格模式下会报错。

    2. function doSomething(value1, value2, value1) {

    3.    //code

    4. }

    5. // 重复的对象属性名,在严格模式下会报错。

    6. var object = {

    7.     foo: 'bar',

    8.     foo: 'baz'

    9. };

    4、对只读属性修改/删除时会抛出异常。

    ES5中可为对象特定属性设为只读或让整个对象不可修改。 但在非严格模式中尝试修改一个只读属性只会默不做声的失败。

    1. var person = {};

    2. Object.defineProperty(person, 'name' {

    3.     writable: false,

    4.     value: 'Nicholas'

    5. });

    6. // 在非严格模式时,沉默的失败,在严格模式则抛出异常

    7. person.name = 'John';

    5、不要在全局环境下启用严格模式。

    为了兼容第三方代码可能没有为严格模式做好准备而引发的问题,最好把开启严格模式的指令作用于自己独立的模块/函数里。

    3.6  推崇建议

    —— 变量

    声明变量必须加上 var 关键字. 否则变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突(es6中let修复了这个问题)。

    —— 逗号

    不要加多余的逗号,这可能会在IE下引起错误,同时如果多一个逗号某些ES3的实现会计算多数组的长度。

    1. // 不推荐

    2. var hero = {

    3.   firstName: 'Kevin',

    4.   lastName: 'Flynn',

    5. };

    6. // 推荐

    7. var hero = {

    8.   firstName: 'Kevin',

    9.   lastName: 'Flynn'

    10. };

    —— 分号

    如果仅依靠语句间的隐式分隔, 有时会很麻烦.而且有些情况下, 漏掉分号会很危险.

    1. ;(function(){

    2.    var i = 0;

    3.    function innerFun(){

    4.      var j = 0;

    5.      ……

    6.    }

    7. });

    —— {},[]

    1. // 不推荐

    2. var item1 = new Object(),  item2 = new Array();

    3. // 推荐

    4. var item1 = {},  item2 = [];

    (解释:new关键字的使用 除了在需要实例化一个对象,或罕见的需要延时加载数据的情况外,基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作,为了效率起见,应该始终使用对象符号。)

    —— 字符串,统一用单引号

    1. // 不推荐

    2. var name = "Bob Parr"







请到「今天看啥」查看全文