Javascript编码规范

• 使用UTF-8编码来保存文件。

• 总是使用var声明变量， 变量命名规范使用驼峰式（variableNamesLikeThis）,当命名构造函数或类时使用驼峰式的大写，有意义的变量名，多个变量声明用逗号隔开，将变量声明放在当前环境作用域开始的地方(function的最上面)，比如：

(function(){
   var btnExample,
        ... ...  ,    //其他变量
        something,
        variableNamesLikeThis,
        btnTest;
   function User(name){
 this.name = name;
   }
   if (something) {
      // ...
   } else {
      // ...
   }
})()

• Javascript没有块级作用域，不要在块内声明一个函数

//错误的写法

if (x) {
  function foo() {}
}
//正确的写法
function foo() {}
if (x) {
}

• 每个表达式语句后面加分号。

• 优先使用单引号(‘)于双引号(“)，因为字符串可能包含HTML代码, 比如：

var test = ‘<span class=”example”></span>’;

• 操作符两端添加空格

var a = 1,
     b = 2;
if (a > b){
    //do some thing
}

• 不要使用with- 对象和数组的初始化直接使用{}，[]

var a = {},
     b= [];

• 注释

/**
 * foo函数描述
 * @type {number} 类型
 */
function foo(type){
  //do some thing
}

• eval 尽量不用。只用于解析序列化串(最好用JSON的 JSON.parse()来替代 eval()), eval() 会让程序执行的比较混乱, 当 eval() 里面包含用户输入的话就更加危险.可以用其他更佳的, 更清晰, 更安全的方式写你的代码,

• for-in只用于 object/map/hash 的遍历

• 尽量避免修改内置对象的原型，或在内置对象原型添加方法（Date, Object,Array ,String等等）
  //避免修改内置对象的原型

Date.prototype.addDay = function(days){
  ......
}

• 空行：方法之间加，单行或多行注释前加，逻辑块之间加空行增加可读性- 避免额外的逗号。
  如：var arr = [1,2,3,];

• 所有的循环体和判断体都需要用 {}括起来

if(a){
  ...
}

• 不要把参数命名为 arguments, 这将会覆盖函数作用域内传过来的 arguments 对象

// bad
function foo(name, options, arguments) {
  // ...do some thing...
}

// good
function foo(name, options, args) {
  // ...do some thing...
}

• Javascript继承使用寄生组合式继承：通过借用构造函数来继承属性,通过原型链形式来继承方法。

function inheritPrototype(subType,superType){
        var F = function(){};
        F.prototype = superType.prototype;
        subType.prototype = new F(); //创建父类原型的一个副本，将创建的对象(副本)赋值给子类的原型
        //高级浏览器可以直接用Object.create(superType.prototype)
        subType.constructor = subType;
}

/*
*超类
*/
    function SuperType(name){
        this.name=name;
        this.friends=["gay1","gay2"];
    }
    SuperType.prototype.sayName=function(){
        alert(this.name);
};

/*
*子类
*/
    function SubType(name,age){
        SuperType.call(this,name);  //继承SuperType的属性
        this.age=age;       //扩展出age属性
    }
    inheritPrototype(SubType,SuperType);
    SubType.prototype.sayAge=function(){
        alert(this.age);
    };//扩展出sayAge方法

-"use strict" (ECMAscript 5声明)在函数内使用，放在函数的第一行，使得Javascript在更严格的条件下运行， 增加运行速度。

function foo(){
  "use strict";
   a = 123;  //严格模式下直接报错a 未声明
}

• 缓存局部变量，根据作用域链的特性局部变量访问是最快的。在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量

function foo(){
    ...
    var changeColor = function(){
       var doc=document;
        doc.getElementById("test").onclick=function(){
            doc.getElementById("test").style.backgroundColor="red";
        };
    }
}

• 事件绑定，对于列表的事件绑定使用事件委托

//bad
$(‘ul li’).on(‘click’, function(){  ... });

//good
$(‘ul’).on(‘click’, ‘li’ function(){  ... });

• 使用require或seajs模块化管理javascrit

• 使用html模板库处理html字符串拼接

• 使用jslint进行脚步检测 比如：http://www.jslint.com/

开发性能规范

• 减少http请求，

• 使用外部javascript和CSS充分利用缓存

• 考虑把大图切成多张小图，常见在banner图过大的场景

• 高端浏览器数据离线化，考虑将数据缓存在 localStorage

• 图片使用CSS Sprites 或 DATAURI

• 外链 CSS 中避免 @import 引入，避免使用css表达式

• 避免打包大型类库

• 初始首屏之外的图片资源可考虑延迟加载

• 单页面应用(SPA)考虑延迟加载非首屏业务模块

• 尽量使用CSS3代替图片icon、使用CSS3动画代替JS动画，低端浏览器可以考虑降级处理

• 缓存 DOM 选择与计算

• 减少触发页面重绘的操作

• 尽可能使用事件代理，避免批量绑定事件

• HTML结构层级保持足够简单

性能测试网站

• 访问Google PageSpeed http://developers.google.com/speed/pagespeed/insights/

• webpagestest https://www.webpagetest.org/