前端开发规范

前端开发规范

1.HTML规范

1.1.使用正确的HTML5文档类型

1.2 兼容的meta属性

1.3 统一使用4空格的tab缩进

1.4.避免不规范的元素嵌套

错误示例:

    
导航栏标题
    
子项1
    
子项2

正确示例：

导航栏标题

    
子项1
    
子项2

ul标签只允许存在li作为其直接子标签。错误示例中的代码虽然可以正常渲染，但是由于不同浏览器容错机制不一致，错误的示例代码可能会导致额外的hack。

1.5.自定义属性采用data-*格式

错误示例：

正确示例：

data-*是HTML5的标准规范，如不采用data-*格式，IDE会显示警告信息，避免警告信息影响正常的debug，建议采用data-*格式自定义属性。

1.6.布尔类型的属性，建议不添加属性值

错误示例：

正确示例：

获取选择选中状态，使用dom节点对象的checked属性，或者jQuery的is方法，不要使用attr('checked')进行判断。

错误做法：

var $checkbox = $('input[checkbox]');
$checkbox.attr("checked"); // 不准确，甚至会取得非预期值 

正确做法：

$checkbox.is(':checked');
$checkbox.check = true;
$checkbox.check;        

2.CSS规范

2.1.确定全局唯一的元素，可以使用id，否则使用class

否则会导致后期维护成本过大。

2.2.选择器应尽量避免嵌套，最多不过3级别

不好的做法：

body #container .head .title {
    // code here
}

推荐做法：

.h-title {
    // code here
}

嵌套过多，会导致css权重过大,子class跟父class紧耦合，后期维护成本大。

3.JavaScript规范

3.1.字符串统一使用单引号包含

不好的示例：

var msg = "Hello JavaScript!";

正确示例：

var msg = 'Hello JavaScript!';

使用单引号的最主要原因是，避免额外的单引号\双引号转义。

var dom = “
双引号\"\"不建议
”;

vs

var dom = '
双引号""不建议
';

两种写法对比，优劣一目了然。

3.2.避免使用JavaScript拼接HTML

使用JavaScript拼接HTML，会有以下问题：

• 极容易产生XSS漏洞；
• 关注点不分离，升级维护极其困难；
• 开发效率低下，代码不健壮，非常容易产生bug；
• Debug变的异常艰难；

不好的示例：

var names = ['tiger','apple', ''];
var dom = '
';
names.forEach(function(name,index){
    dom += '
' + name + '
';
})
dom += '
';

$('body').html(dom);

上面的代码会导致一下问题：

• names[2]插入页面后，

  推荐的AngularJS写法：

  3.4.4 jQuey调用AngularJS的方法

  思路：取得AngularJS作用域下的节点找到scope，通过scope调用方法：

  var container = $('#container'); // #containe要在data-ng-app的子节点下
  angular.element(container).scope().fun(); // 调用AngularJS下面的fun方法；
  

  强烈推荐使用Angular开发，jQuery的功能基本95%以上都可以用Angular代替，代码量更少，更容易维护。

  JavaScript的String添加了个encodeHTML方法，可以对HTML的特殊字符进行转义，实现如下：

  String.prototype.encodeHTML = function () {
      var div = document.createElement('div');  
      div.appendChild(document.createTextNode(this));  
      return div.innerHTML;
  }
  

  如果输出到页面的内容由HTML拼接完成，且内容存在用户输入的部分，则拼接过程中，对应字段需要经过HTML转义，用法如下：

  function format(name){
    return '
  ' + name.encodeHTML() + '
  ';
  }
  

  脚本实现在eompBase.js中，导入该脚本的页面，都可以按照上面的写法进行转义。