代码规范说明

后端代码规范说明

google 后台开发指南

前端代码规范说明

HTML规范

• HTML标签id、class命名使用camel命名
• HTML标签中的属性必须用双引号包围
• img标签要写alt标签
• 单标签不要写闭合标签（img、link、input、hr、br）
• 自定义属性要以data- 开头
• td要在tr里面，li要在ul/ol里面
• ul/ol的直接子元素只能是li
• section里面要有标题标签
• 使用section标签增强SEO(搜索引擎优化)
• 行内元素里面不可使用块级元素(a标签里面不能放div)
• 要用table布局写邮件模板
• html要保持简洁，不要套太多层
• 特殊情况下才在html里面写script和style
• 样式要写在head标签里
• html要加上lang的属性
• 要在head标签靠前位置写上charset和meta标签
• 特殊符号使用html实体
• img空src的问题
• 关于行内元素空格和换行的影响
• 类的命名使用小写字母加中划线（hello-world)
• 不推荐使用自定义标签
• 重复杂id和重复属性
• 不推荐使用属性设置样式（canvas width height 需要写）
• 使用合适的标签
• 如果内容是表格就使用table，table有自适应的优点；如果是一个列表就使用ol/ul标签，扩展性比较好
• 如果是输入框就使用input，而不是写一个p标签，然后设置contenteditable=true，因为这个在IOS Safari上光标定位容易出现问题。如果需要做特殊效果除外
• 如果是粗体就使用b/strong，而不是自己设置font-weight
• 如果是表单就使用form标签，注意form里面不能套form
• 如果是跳链就使用a标签，而不是自己写onclick跳转。a标签里面不能套a标签
• 使用html5语义化标签，如导航使用nav，侧边栏使用aside，顶部和尾部使用header/footer，页面比较独立的部分可以使用article，如用户的评论。
• 如果是按钮就应该写一个button或者input type=”button”，而不是写一个a标签设置样式，因为使用button可以设置disabled，然后使用CSS的:disabled，还有:active等伪类使用，例如在:active的时候设置按钮被按下去的感觉
• 如果是标题就应该使用标题标签h1/h2/h3，而不是自己写一个<p class="title"></p>,相反如果内容不是标题就不要使用标题标签了
• 在手机上使用select标签，会有原生的下拉控件，手机上原生select的下拉效果体验往往比较好，不管是IOS还是android，而使用input type=”tel”在手机上会弹一个电话号码的键盘，input type=”number”、 input type=”email”都会弹相应的键盘
• 如果是分隔线就使用hr标签，而不是自己写一个border-bottom的样式，使用hr容易进行检查
• 如果是换行文本就应该使用p标签，而不是写br，因为p标签可以用margin设置行间距，但是如果是长文本的话使用div，因为p标签里面不能有p标签，特别是当数据是后端给的，可能会带有p标签，所以这时容器不能使用p标签。
• 不要在https的链接里写http的图片

---

js规范

• 声明变量必须加上var关键字。当你没有写 var, 变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突. 另外, 如果没有加上, 很难明确该变量的作 用域是什么。
• 不要在块内声明一个函数。

  if(x) {
      function foo() {}
  }
  

• 如果确实需要在块中定义函数, 建议使用函数表达式来初始化变量.

  if(x) {
      var foo = function () {}
  }
  

• ‘this’仅在对象构造器，方法，闭包中使用。
• 变量名多个词以下划线连接
• 函数名以驼峰式命名
• 任何时候都要明确作用域，提高可移植性和清晰度，不要依赖于作用域链中的 window 对象。
• 数组和对象的初始化，如果初始值不是很长，就保持写在单行上。
• 初始值占用多行时，缩进四个空格。

  // Object initializer.
  imgUrls: [
      '../../images/1.jpg',
      '../../images/2.jpg',
      '../../images/3.jpg',
      '../../images/4.jpg',
      '../../images/5.jpg'
      ],
  

• 单引号''优于双引号""
• 过长的单行予以换行，换行应选择在操作符和标点符号之后。

  if (oUser.nAge < 30
      && oUser.bIsChecked === true
      || oUser.sName === 'admin') {
      // code
  }
  

• 在循环中，尽量使用变量先获取到循环的次数，再放入循环中进行判断，否则非常影响程序性能。

  // 推荐
  var listData = this.data.listData;
  for (var i = 0; i < listData.length; i++) {
      for (var j = 0; j < listData[i].foods.length; j++) {
     listData[i].foods[j].number = 0;
      }
  }
  // 不推荐
  for (var i = 0; i < this.data.listData.length; i++) {
      for (var j = 0; j < listData[i].foods.length; j++) {
     listData[i].foods[j].number = 0;
      }
  }
  

• 函数注释

/**
 * 简述
 *
 * 功能详细描述
 *
 * @param <String> arg1 参数1
 * @param <Number> arg2 参数2，默认为0
 * @return <Boolean> 判断xxx是否成功
 */
 function fooFunction (arg1, arg2) {
    // code
 }

• 语句注释,单行注释：
  • 单独一行：// 与注释文字之间保留一个空格；
  • 在代码后面添加注释：//与代码之间保留一个空格，并且//与注释文字之间保留一个空格；
  • //与代码之间保留一个空格。