为何要编写可保护的javascript?

• 软件生命周期80%的本钱斲丧在了保护上。

• 险些一切的软件保护者都不是它的最初作者。

• 编码范例提高了软件的可读性，它让工程师能够疾速且充分地明白新的代码。

第一部份：编程作风

顺序是写给人读的，只是偶然让计算机实行以下。 ——高德纳

一、基础的格式化

1、缩进层级

怎样处置惩罚缩进是险些一切言语起首议论的，缩进以至关系到软件工程师的价值观！
第一种缩进：运用制表符举行缩进。比方：jQuery中心作风，Dojo编程作风。
第二种缩进：运用空格符举行缩进。比方：Goolge的javascript划定运用两个空格缩进。
引荐：4个空格字符为一个缩进层级，能够在编辑器中设置Tab键插进去4个空格。

2、语句末端

你加没加分号代码能够都邑一般运转，没看到这里之前，你能够不知道这是分析器的自动分号插进去机制（ASI）在偷偷的帮你干活。常言道：常在河边走，哪有不湿鞋？看看下面的代码。

function getData() {
        return 
        {
            text: '看看不加分号的效果！'
        }
    }
ASI会剖析成下面的模样：
function getData() {
        return ;
        {
            text: '看看不加分号的效果！'
        };
    }

所以假如挪用上面的getData的要领，返回的就是undefined。然则如许不能全怪分号，谁让你把花括号写到下面一行的？（横竖我看到有第一个花括号跟之前的语句不在一行的，我就要暴走。）

//这段代码事情一般，只管没有分号
function getData() {
        return {
            text: '看看不加分号的效果！'
        }
    }

3、行的长度： 倾向于80个字符。

假如一行多于80个字符，应当在一个运算符（逗号，加号等）后换行。下一行应当增添两级缩进。

4、定名

计算机科学只存在两个困难：缓存失效和定名。

ECMAScript遵循了小驼峰的定名法，所谓小驼峰，官方称之为“驼峰大小写定名法（Camel Case）”，是由小写字母最先的，后续每一个单词首字母都大写。

//比方
var thisIsMyName;

变量定名前缀应当是名词。函数名前缀应当是动词。

//变量
var myName = 'chen';
//函数名
function getName() {
    return myName;
}

5、常量

在ECMAScript6之前，javascript中没有真正的常量观点。依据C言语的模样，商定运用大写字母和下划线来定名，下划线用以支解单词。

var MAX_COUNT = 10;
//如今我们应当也能够如许定义常量
const MAX_COUNT = 10;

6、组织函数

组织函数的定名遵循大驼峰定名法（Pascal Case）,为何？因为跟当地言语保持一致的定名商定，new RegExp()，正则本身就是一个内置的组织函数，瞥见大驼峰了木有？
科普一下：Pascal Case 和 Camel Case都示意“驼峰大小写”，区分在于：
Pascal Case是以大写字母最先，所以也叫大驼峰，比方：AnotherName;
Camel Case是以小写字母最先，以后的单词首字母大写，所以也叫小驼峰，比方：anotherName,之前在定名的那块提到太小驼峰。

7、直接量

直接量能够这么明白，它是顺序中能够直接运用的数据，没有举行迥殊的封装。

2    //数字直接量
"其心"    //字符串直接量
[1,2,3]    //数组直接量
true    //布尔型直接量
{name: "其心"}    //对象直接量
(function(){})()    //函数直接量
/*支解线*/
new String("其心")    //这就不是直接量

在直接量里着重说一下null，我就常常误会它，用的很随便，如今我明白了解了，应当在以下场景中运用它。

• 用来初始化一个变量，这个变量能够赋值给一个对象。

• 用来和一个已初始化的变量比较，这个变量能够是也能够不是一个对象。

• 当函数的参数希冀是对象时，用作参数相差。

• 当函数的返回值希冀是对象时，用作返回值传出。
  明白null最好的体式格局是让他们当作对象的占位符。

直接量的用法简约高效，是值得首倡的，这一点服膺。

二、诠释

1、单行诠释

单行诠释有三种运用要领：

• 独有一行的诠释，用来诠释下一行代码。这行诠释之前总要有一个空行，且缩进层级和下一行代码保持一致。

// 好的写法
function print(){

    // 控制台输出数字1
    console.log(1);
}

• 在代码行的尾部的诠释。代码完毕到诠释之间至少有一个缩进。诠释（包括之前代码部份）不应当凌驾单行最大字符数限定，假如凌驾了，就讲这条诠释安排于当前代码的上方。

• 被诠释掉的打断代码。

//好的写法
// function print(){
//     console.log(1);
// }

2、多行诠释

比较喜爱Java作风的多行诠释

/*
*这是一段诠释
*这段诠释包括两行文本
*/

多行诠释之前也应当有一个空行，且缩进层级和其形貌的代码保持一致。

3、文档诠释

多提一点就是文档的诠释，多行诠释以单斜线加双星号（/**）最先，接下来是形貌信息，个中运用@标记来示意一个或多个属性。

             /**
             * 提交JSON数据
             * @param actionUrl     交互的URL
             * @param json          JSON数据
             * @param postSuccessFn 提交胜利的回调函数
             * @param postFailFn    提交失利的要领
             * @param isAsync       是不是异步提交，true：是
             * @param timeout       要求时限
             */

三、语句和表达式

起首说一点，见到下面两种写法，都是正当的JavaScript的代码，然则不首倡运用。

// 不好的写法
if(condition)
    doSomething();
// 不好的写法
if(condition)    doSomething();

1、花括号的对齐体式格局

第一种作风是，将左花括号安排在块语句中第一句代码的末端。这类作风继续自Java。

if (condition) {
    doSomething();  
}else {
    doSomethingElse();   
}

第二种作风是，将花括号安排于块语句首行的下一行。这是跟着C#流行起来的。

if (condition) 
{
    doSomething();  
}else 
{
    doSomethingElse();   
}

为了防备致使毛病的分号自动插进去（还记得之前说过的“ASI”么），引荐运用第一莳花括号对齐体式格局。

2、switch

关于switch的缩进之类能够直接用编辑器默许的，只提一点就是，假如顺序没有默许的行为时，default是能够被省略的。

四、变量、函数和运算符

1、变量
发起将局部变量的定义作为函数内第一条语句，引荐运用单个var语句，每一个变量的初始化独有一行。关于没有初始化的变量来讲，它们应当出如今var语句的尾部。

function doSomething(items) {
    var value  = 10,
        result = value + 10,
        i,
        len;
    for(i = 0,len = items.length; i < len; i++){
        doOtherSomething(items[i]);
    }
}

2、函数声明

须要注重，函数声明应当在前提语句的外部运用。比方：

//不好的写法，大部份浏览器会自动运用第二个声明，并不会依据condition来做推断。
if (condition) {
        function doSomething() {
            alert("Hi!");
        }
    } else {
        function doSomething() {
            alert("Yo!");
        }
    }

3、相称

JavaScript具有强迫范例转换的机制。

• 数字和字符串比较，字符串会起首转换为数字，然后实行比较。

// 比较数字5和字符串5
console.log(5 == "5"); // true
// 比较数字25和十六进制的字符串25
console.log(25 == "0x19"); // true

• 一个布尔值和数字比较，布尔值会起首转化为数字，然后举行比较，false是0，true是1。

// 比较数字1和true
console.log(1 == true); // true
// 比较数字0和false
console.log(0== false); // true
//比较数字2和true
console.log(2 == true); // false

• 比较一个值是对象而另一个不是，会起首挪用对象的valueOf()要领获得原始范例在举行比较。假如没有定义valueOf()，则挪用toString()。
  因为强迫范例转换的原因，引荐用===或许！==，不应当运用==或许！=

五、防备“空比较”

1、检测原始值

JavaScript有5中简朴的原始范例：字符串、数字、布尔值、null和undefined。最好的挑选是用typeof运算符，返回一个值的范例的字符串。
用typeof检测一下4种原始值范例是异常平安的。

//检测字符串
if (typeof name === "string") {
    anotherName = name.substring(3);
}
//检测数字
if (typeof count === "number") {
    updateCount(count)；
}
//检测布尔值
if (typeof found === "boolean" && found){ 
    message("Found!");
}
//检测underfined
if (typeof MyApp=== "undefined") {
    MyApp = {};
}

2、检测援用值

援用值也称为对象，检测某个援用值的范例的官方最好的要领是运用instanceof运算符。然则它不仅检测组织这个对象的组织器，还检测原型链。因为每一个对象都继续自Object，因而每一个对象的 value instanceof Object都邑返回true。

var now = new Date();
console.log(now instanceof object); // true
console.log(now instanceof Date) // true 

3、检测数组

最最先是推断sort()要领在不在。

function  isArray(value) {
    return typeof value.sort === "function";
} 

然后有了一种比较文雅的解决方案。

function isArray() {
    return Object.prototype.toString.call(value) === "[object Array]";
} 

再厥后ECMAScript5将Array.isArray()正式引入JavaScript。

4、检测属性

推断属性是不是存在的最好的要领是运用in运算符。in运算符只会简朴地推断属性是不是存在，而不会去读属性的值。然则检测出来的属性能够是对象本身的，也能够是继续来的。

var object = {
    count: 0,
    related: null
};
if ("count" in object) {
    //这里的代码会实行
}

假如只搜检对象本身的某个属性是不是存在，就运用hasOwnProperty()要领。

六、设置数据星散

设置数据相似：

• URL

• 须要展示给用户的字符串

• 反复的值

• 设置（比方每页的设置项）

• 任何能够发作变动的值
  相似于种种东西化文件的config。

七、毛病范例

• Error: 一切的毛病范例。实际上引擎历来不会抛出该范例的毛病。

• EvalError: 经由过程eval()函数实行代码发作毛病时抛出。

• RangeError: 一个数字超越它的边境时抛出。

• ReferenceError: 希冀的对象不存在时抛出。

• SyntaxError: 给eval()函数通报的代码中有语法毛病时抛出。

• TypeError: 变量不是希冀的范例时抛出。

八、阻挠修正属性

• 防备扩大
  制止为对象“增加”属性和要领，但已存在的属性和要领是能够被修正或删除。

Object.preventExtension(); // 锁定对象
Object.isExtensible(); // 推断对象是不是被锁定

• 密封
  相似“防备扩大”，而且制止为对象“删除”已存在的属性和要领。

Object.seal(); // 密封对象
Object.isSealed(); // 检测一个对象是不是已被密封

• 凝结
  相似“密封”，而且制止为对象“删除”已存在的属性和要领。

Object.freeze(); // 凝结对象
Object.isFrozen(); // 推断一个对象是不是已被凝结