前端js一些规范

记住，你今天不是给自己写代码，而是为明天的后来人写代码。

前端代码需要遵守以下几点方面进行开发。

      1 可维护性 任何接手工作的前端，保证能在短时间内能够对项目有一定的认识，能够尽快的投入开发工作。
      2 可测试性 页面的js代码需要自己写写测试代用例进行测试，确保质量。
      3 高性能：保证代码的性能，不能出现占用cpu过高的情况
      4 低体积：不要重复代码，如果原有相似的功能，进行代码重构，避免代码直接复制而导致以后维护比较难的情况。

需要遵守一些下面的规则：

      代码的可读性：采用一致的写法。命名规范化。代码结构良好，注释清楚。每次写完代码需要对代码进行下格式化。
      不重复：不复制，不重复代码，有相似功能对代码进行重构，并通知原作者。重构时每次需要注释写明：重构原因，重构作者，日期，以及代码的测试文件
      代码高内聚，低耦合：在js文件中尽量少使用元素的id，class寻找元素，方便以后对html进行重构。

对于jsLint的使用要求：
处理级别：(待补充)

代码是否使用strict mode，什么时候使用（待补充）

代码可读性说明：

代码缩进：使用tab进行缩进
语句结尾：使用分号进行语句结尾
行长度：一行不要超过80个字
空行的使用：一般来说代码要像一个文章，有段落性，有条理性，而不是一大段文字的组合。建议使用空格的地方包括有：
     1 在方法之间
     2 在方法中的局部变量和第一条语句之间。
     3 在多行或单行注释之间
     4 在方法内的逻辑片段之间插入空行，提高可读性。

命名

因为js是弱类型语言，所以需要在声明变量名称时候进行变量类型前缀说明。譬如使用string 就以s开头 var sName = "fly",arr以a开头 var aNumbers = [1,2,3];

　　1、骆驼命名法。从第二个字符串开始，每个字符都大写 aVeryLongVaribleName
　　2、js里面的伪常量，全部用大写，加下划线组成。比如：MAX_VALUE=10 //定义一个10的常量
　　3、构造函数，用new产生的构造函数，首字母大写。比如new Person（）
　　4、函数的命名
　　　　can has is get set

数字

显示创建对象和数组
　　1、避免使用new Function（）来创建对象，而使用{}直接量来定义对象
　　2、避免使用new Array（）来创建数组，而使用[]来定义数组
　　3、由此，可以推出，避免使用new String（）来创建字符，用“”来直接创建（这点大家比较清楚）

注释的使用
　　这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。

单行注释

多行注释

　　何时添加注释：当代码不是很明了的时候添加注释。而当代码很明了的时候添加注释就没必要了。

　　当使用文档注释时候，应确保对如下内容添加注释描述。

所有的方法
　　所有的构造函数
　　所有包含文档化方法的对象


语句的可读性

　　花括号的使用：花括号的对齐方式，将大括号放置在快语句中第一句代码的末尾。
　　switch语句的 default语句 如果没有需要处理的，就直接进行省略
　　for循环语句中，不要把获取数组长度的方法放到 条件里边，譬如 for(var i = 0 ;i < arr.length;i++) 而写成 for(var i = 0, l = arr.length; i < l; i++ )


函数声明
　　推荐函数的使用总是放到函数声明以后。这样查找起来比较方便。
　　对于立即调用的函数，为了让立即执行的函数能够被一眼看出来，需要将函数用一对圆括号包起来。

严格模式 strict mode
　　"use strict";需要最好不要放到全局中，如果希望在多个文件中应用严格模式而不必写很多行“use strict”，则使用立即调用的方式。



编程实践

·UI层的松耦合
　　将javascript从css中抽离 在css中使用表达式（IE9现已不支持,低版本IE系列还是支持的）
　　将css从javascript中抽离 如果需要修改样式，则通过修改class 进行改变
　　将javascript从html中抽离
　　　　1 不在元素中添加事件处理
　　　　2 不在页面中直接书写javascript执行代码（一种例外就是当后台直接传值到页面上时，而js无法解析时候则不得不写在页面上了）
　　将html从javascript中抽离
　　使用模板,譬如mustache

避免使用全局变量
　　1 全局变量带来的问题
　　命名冲突
　　代码的脆弱性
例如：
　　var color = "#fff";
　　function sayColor(){
　　　　alert(color);
　　}

　　当color不存在，未声明时候则直接会报错，而如果写成

　　fuction sayColor(color){
　　　　alert(color);
　　}

　　测试困难
　　　　确保函数不会对全局变量有依赖，将增强代码的可测试性。

　　意外的全局变量，当在函数中有变量的声明时候未使用var声明时候则变为了全局变量

　　单全局变量方式

　　命名空间
　　　　var YUI = {};
　　　　YUI.a = {}
　　　　YUI.b = {}

　　模块
　　　　define("modeules",function(){

　　　　})

零全局变量

　　var f = (function(){
　　　　//执行代码
　　})()

避免"空比较"

将配置数据从代码中分离出来
抽离配置数据 保存配置数据到一个单独的文件中


抛出自定义错误


权衡代码的简洁性和可读性

抛出自定义错误
在javaScript中抛出错误

如果没有通过try-catch语句进行捕获，抛出任何值都将引发一个错误。针对所有浏览器，唯一不出差错的系那是自定义的错误消息的方式就是用一个Error对象。

 

抛出错误的好处：
　　抛出自己的错误可以使用确切的文本供浏览器上显示。除了行和列的号码，还可以包含任何你需要的有助于调试的信息。
　　推荐总是在错误消息中包含函数名称以及函数失败的原因。

譬如：

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

何时抛出错误：
经验法则：
　　一旦修复了一个很难调试的错误，尝试增加一两个自定义错误。当再次发生错误时，这将有助于更容易的理解和解决问题。
　　如果正在编写代码，思考一下："我希望某些事情不会发生，如果发生，我的代码会一团糟"。这时，如果"某些事情"发生，就抛出一个错误。
　　如果正在编写的代码别人也会使用，思考下他们使用的方式，在特定的情况下抛出错误。

牢记，我们的目的不是防止错误，而是在错又发生时能够更加容易的调试。


try-catch:
　　javascript提供了try-catch语句，它能在浏览器处理抛出的错误之前来解析它。可能引发错误的代码放在try块中，处理错误的代码放在catch块中。

使用throw还是try-catch(待补充)

　　在JavaScript中throw error是一门艺术。在代码中找到适当的throw error的地点会花费一些时间。不过一旦你找到了这些地点，你的调试时间就会大大降低，而你对代码的满意度会获得提升。

      参考书籍 ： 编写可维护的javascript