js编程规范

1.单行字符不超过79个字符，如果超过则在符号后换行。并且换行的字符需要两个缩进表示区分。

 //必须要把符号放在分割前，而不能写在第二行。而且需要缩进两个缩进空格长度
 callAfunction(document,element,window,'some string value',true,123,
        navogator);

 //或者这样
 if(isLeapYear && isFebruary && day == 29 && itsYourBithday &&
    noPlans){
    waitAnotherFourYears();
 } 

2.变量、函数命名

//小写字母开头，此后每个单词开头大小。  
eg. var isValueNotNumber; 

//变量头开始是名次，函数名开始为动词  
eg. var myNmame = 'jony';function getName(){ /*do something...*/};

//常量用大写以及下划线区分
eg. var MAX_COUNT =10

//构造函数以大驼峰方式申明
function Person(){/* do something*/}

3.空行的学问

 //在方法之间  

 //多行或者单行注释之前

 //在方法内的逻辑片段之间加入空行 命名方法采用小驼峰方法。

4.null以及undefined的用法

不要使用undefined和null跟对象作比较，并且申明变量但是不马上赋值的情况下，应该如下设置

var person = null  //typeof person => object(null是对象);

而不是

var person  //typeof  person => undefined.

//并且全局不要使用undefined，这样的话如果出现undefined只能是一种错误，即变量未定义。代码如下
eg.

var foo,typeof foo ==undefined  //true   
typeof go  ==undefined  //true

5.组件之间的耦合

将css从js中分离，如果需要更改样式则通过js修改className

不要随便用innerHTML来在js中写html.可以采用以下的方式:
a.客户端模板,模板文件放在服务器上，通过ajax获取。例如jq的load()方法

     function sprintf(text)
            var i = 1; args =arguments;
            return text.replace(/s%/g,function(){
                return (i < args.length) ? args[i++] : "";}
            )
        }
        sprintf(templateText,'/item/4',"Fourth item");

c.lebars模板框

6.全局变量污染，但全局变量。。
eg.

     var mainJs = {};

     //构造函数首字母大写
     mainJs.Book = function(title){
         this.title = title;
         this.page =1;
     }

     mainJs.Book.prototype.turnPage = function(direction){
         this.page += direction;
     }

     mainJs.book1 = new mainJs.book('Introduction to sStyle Guidelines');

7.抛出错误

function getDivs(element){
    if(element && element.getElementsByTagName){
        return element.getElementsByTagName('div');
    }else{
        throw new Error('getDivs():Argument must be a DOM element.');
    }
}

该函数预期传入的是一个html element，如果传入的是其他类型 。则抛出错误，养成及时抛出问题的习惯方便他人调试。

Uncaught Error: getDivs():Argument must be a DOM element.(…)

8.不要为了抛出错误而费尽心机的写try……catch，而是在程序最容易出错的地方加上即可。

function addClass(element,calssName){

    if(!element || typeof element.className != 'string'){
        throw new Error('addClass():First argument must be a  DOM element.');
    }

    if(typeof calssName != 'string'){
        throw new Error('addClass():Second argument must be a string.')
    }
    element.className += ''+className;
}

这个函数只是提供给元素添加样式的功能，容易导致严重问题的地方在于element是否为dom元素的监测。
所以只需这样就好

function addClass(element,calssName){

    if(!element || typeof element.className != 'string'){
        throw new Error('addClass():First argument must be a  DOM element.');
    }

    element.className += ''+className;
}

同时如果函数不能确定在何时何地被调用，那么错误检查是有必要的。
9.错误类型

iI. ReferenceError   eg.JSON.stringify(obj1); //期望的对象去不存在
II. TypeError  eg. var a = null;a.toString(); //变量不是期望的类型是抛出
III. SyntaxError //给eval()函数传递的代码有语法错误时抛出。
IV.  URIError  给encodeURI()、encodeURIComponent()、decodeURI()或者decodeURIComponent()函数传递格式非法的URI字符串时抛出

10.能用局部变量就用局部变量，因为频繁使用全局对象会导致函数追踪原型链深处性能损耗。
eg. 下面的代码里用到了两次docuemnt

var btn1 = docuemnt.getElementById('btn1');
btn1.onclick = function(){
    var txt1 = document.getElementByTagName('textare')[0];
    txt1.innerHTML += 'woshi';
}

如果把document保存成局部变量则避免每次执行都需要从当前执行环境追踪到全局变量上面

var doc  = document;
vart btn1 = doc.getElementById('btn1');
btn1.onclick = function(){
    var txt1 = doc.getElementByTagName('textare')[0];
    txt1.innerHTML +='woshi';
}

如果这段代码用的次数多，那么性能的提升就会很明显。
11.同时如果有对dom操作，可以将dom和js比作两个小岛，每次两个小岛通讯是要交钱的。故此在使用dom的时候尽量把所有逻辑都放在js里面，尽量让dom只需要在获取和操作两次调用即可。

    var doc = document;
    var btn1 = doc.getElementsByTagName('button')[0];
    var tab1 = doc.getElementById('table1');

    btn1.onclick= function(){
      for(var i=0;i<100;i++){
        tab1.innerHTML += '<tr><td>dian</td><td>wo<td/</tr>';
      }
    }

上面的方法直接循环一百次，虽然tab1是局部变量，但是每点击一次还是找了一百次，这样的js和dom通信是需要花很多钱的，下面这样写可以省很多钱。

var doc = document;
var btn1 = doc.getElementsByTagName('button')[0];
var tab1 = doc.getElementById('table1');

btn1.onclick= function(){
  var tempStr = '';
  for(var i=0;i<100;i++){
    tempStr += '<tr><td>dian</td><td>wo<td/</tr>';
  }
  tab1.innerHTML += tempStr;

}

12.放大