一、规范目的

1.1 概述

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

二、基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良; 在页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度

三、文件规范

3.1 文件命名规范

  • 文件名称统一用小写的英文字母、数字和下划线组合, 其中不得包含汉字、空格和特殊字符

3.1.1 html文件的命名原则

  • 主页统一使用index.html命名, 各子页面命名的原则首先应该以栏目名的英语翻译取单一单词为名称, 例如：
  1.     关于我们 --> abouts
  2.     购物车 --> cart
  3.     产品 --> product
  • 如果栏目名称多而复杂并不好以英文单词命名, 则统一使用该栏目名称拼音或者拼音的首字母表示, 但是建议尽量使用语义化的英文表示

3.1.2 图片的命名原则

  • 图片的名称分为头尾两部分, 用下划线隔开, 头部分表示图片的大类性质, 例如：
    广告图 --> banner
    标志图 --> logo
    装饰图 --> pic

    范例：
    banner_sohu.png 、logo_police.png

3.1.3 css/JavaScript的命名原则

  • 语义化命名, 见名知意, 例如：弹出层样式/脚本 popup.css/popup.js

3.2 css书写规范

class与id的使用

  • id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅仅使用在大的模块上, class可用在重复使用率高及子级中

class与id的命名

  • 样式名称使用小写英文、数字或者_来命名组合(不能以数字开头, 避免使用中文拼音)
    /* 建议使用下述方式命名 */
    /* 取父级元素id/class命名部分命名 */
    #main .main_first {}

css属性书写顺序

  • 建议遵循布局定位属性 --> 自身属性 --> 文本属性 --> 其它属性, 此条不是严格执行, 可根据自身习惯书写, 但是尽量要保证同类属性写在一起
  • 布局定位属性：margin、padding、float、position、display、overflow
  • 自身属性：width、height、background、border
  • 文本属性：font、color、text-align、text-decoration、text-indent
  • 其它属性：list-style、vertical-align、cursor、z-index、zoom

其它注意事项：

  • 书写样式时考虑并提高样式的重复使用率
  • 充分利用html自身属性及样式继承原理减少代码量
  • 样式表中的中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码
  • 背景图片尽量使用sprite技术, 减少http请求, 考虑到多人协作开发, sprite按照模块制作
  • 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:
    _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);
  • 减少使用影响性能的属性, 例如：position, float
  • 必须为大区块样式添加注释, 小区块适量注释
  • 代码缩进与格式, 建议单行书写

3.3 js书写规范

  • 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);
  • 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
  • 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;jQuery变量要求首字符为”_”, 其他与原生JavaScript 规则相同, 如: _iTaoLun;另, 要求变量集中声明, 避免全局变量.
  • 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
  • 函数命名: 首字母小写驼峰式命名. 如iTaoLun();
  • 命名语义化, 尽可能利用英文单词或其缩写;
  • 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval_r() & innerText;
  • 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
  • 代码结构明了, 加适量注释. 提高函数重用率;
  • 注重与html分离, 减小reflow, 注重性能.

3.4 图片规范

  • 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
  • 图片格式仅限于gif || png || jpg;
  • 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
  • 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
  • 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);
  • 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下

3.5 注释规范

  • html注释: 注释格式 , “—“只能在注释的始末位置,不可置入注释文字区域;
  • css注释: 注释格式 /**/;
  • JavaScript注释, 单行注释使用”//这儿是单行注释” ,多行注释使用 ;
  • 以模块为单位添加注解, 必要的时候添加详细的description
  data: {
    /**
     * @param {Boolean} isLogin 是否登录
     * @param {Boolean} hasCommandStatus 是否有团购状态
    */
    isLogin: false,
    hasCommandStatus: false,
    /**
     * @param {Number} shareType 分享的类型
     * @description ... ...
    */
    shareType: 0
  }
  • 方法以handle开头, 中间标注内容, 并以Tap等事件状态结尾; 方法需要写注释解释清楚是干什么用的(言简意赅)
  /**
   * @author szr190
   * @description 点击轮播图
   * @summary 点击需要进入的模块
   * @param {Number} shop_id 商品id
  */
  handleSwiperTap() {
    ... ...
  }
  • 私有方法(也就是自己实现的或者专门调用接口的方法), 统一以_开头
  _getAddressList() {
    get(Api.B2C.getaddresslist, {
      openid: store.getItem('openId')
    }).then(res => {
      ... ...
    })
  }

3.6 css浏览器兼容

标识区别 - 区别IE6,IE7,IE8,FF

  • IE都能识别 ; 标准浏览器(如FF)不能识别；
  • IE6能识别*，但不能识别!important; IE6在样式前面加_
  • IE7能识别*，也能识别!important;
  • IE8能识别\ 9 例如：background:red \9;
  • firefox不能识别*，但能识别!important;

IE6和firefox的区别：

  • background:orange;*background:blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.

IE6和IE7的区别：

  • background:green !important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色

IE7和FF的区别：

  • background:orange; *background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色

FF，IE7，IE6的区别：

  • background:orange;
  • *background:green !important;
  • *background:blue;
  • 意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.