常用的JavaScript模式

常用的JavaScript模式有哪些?模式是解决或者避免一些问题的方案。下面YJBYS小编为大家列出几种常用的JavaScript模式，欢迎大家阅读学习!

在JavaScript中，会用到一些常用的编码模式。下面就列出了一些常用的JavaScript编码模式，有的模式是为了解决特定的问题，有的则是帮助我们避免一些JavaScript中容易出现的错误。

　　单一var模式

所谓“单一var模式”(Single var pattern)就是指在函数顶部，只使用一个var进行变量声明的模式。例如：

function func() {

var a = 1,

b = 2,

sum = a + b,

myObject = {}, i,

j;

// other code}

使用这个模式的好处：

在函数顶部展示了所有函数中使用的局部变量

防止变量提升引起的问题

　　变量提升

JavaScript允许在函数的任意地方声明变量，但是效果都等同于在函数顶部进行声明，这个是所谓的变量提升(Hoisting)。

看一个例子：

var num = 10;

function func() {

alert(num); // undefined

var num = 1;

alert(num); // 1}func();

从这个例子可以看到，第一次alert的值并不是10，而是undefined。所以，应该尽量使用“单一var模式”来避免类似的问题。

关于变量提升的细节，请参考我前面一篇JavaScript的执行上下文。

　　for-in循环

在JavaScript中，for-in循环主要用来枚举对象的属性。

但是，由于JavaScript中原型链的存在，一般都会结合hasOwnProperty()来使用for-in循环，从而过滤原型链上的非该对象的属性。

var wilber = {

name: "Wilber",

age: 28,

gender: "male"};tPersonalInfo = function() { (, "is", , "years old");

};for(var prop in wilber) { if(wnProperty(prop)) { (prop, ":", wilber[prop]);

}

}

　　开放的大括号位置

根据开发人员的习惯，开放大括号的位置会有不同的选择，可以和语句放在同一行，也可以放在新的一行：

var total = 10;if(tatal > 5) { ("bigger than 5");

}if(tatal > 5)

{ ("bigger than 5");

}

两种形式的`代码都能实现同样的逻辑，但是，JavaScript允许开发人员省略分号，JavaScript的分号插入机制(semicolon insertion mechanism)会负责加上省略的分号，这时开放大括号的位置不同就可能产生不同的结果。

看一个例子：

function func() { return

{

name: "Wilber"

};

}

alert(func());// undefined

之所以得到的结果是undefined就是因为JavaScript的分号插入机制，在return语句之后自动添加了分号。

调整一下开放的大括号的位置就可以避免这个问题：

function func() { return {

name: "Wilber"

};

}

alert(func());// [object]

所以，关于开放的大括号位置，建议将开放的大括号放置在前面语句的同一行。

　　强制new模式

JavaScript中，通过new关键字，可以用构造函数来创建对象，例如：

function Person(name, city) { = name; = city;

nfo = function() { (, "lives at", );

}

}var will = new Person("Will", "Shanghai");

nfo();// Will lives at Shanghai

但是，如果开发人员忘记了new关键字，那么构造函数中的this将代表全局对象(浏览器中就是window对象)，所有的属性将会变成全局对象的属性。

function Person(name, city) { = name; = city;

nfo = function() { (, "lives at", );

}

}var will = Person("Will", "Shanghai");();// Uncaught TypeError: Cannot read property 'name' of ();// ();// nfo();// Will lives at Shanghai

所以，为了避免这类问题的方式，首先是从代码规范上下手。建议对于所有的JavaScript构造函数的命名方式都遵循，构造函数使用首字母大写的命名方式。

这样当我们看到首字母大写的函数，就要考虑是不是漏掉了new关键字。

　　自调用构造函数

当然除了规范之外，还可以通过代码的方式来避免上面的问题。

具体的做法就是，在构造函数中检查this是否为构造函数的一个实例，如果不是，构造函数可以通过new关键字进行自调用。

下面就是使用自调用构造函数对上面的例子进行改进：

function Person(name, city) { if(!(this instanceof Person)) { return new Person(name, city);

}

= name; = city;

nfo = function() { (, "lives at", );

}

}var will = Person("Will", "Shanghai");();// ();// nfo();// Will lives at nfo();// Uncaught TypeError: nfo is not a function

结合构造函数的命名约定和自调用的构造函数，这下就不用担心漏掉new关键字的情况了。

　　数组性质检查

当在JavaScript中判断一个对象是不是数组的时候，不能直接使用typeof，因为我们会得到object。

在ECMA5中提出了ray()这个函数，我们可以直接使用来判断一个对象是不是数组类型。

对于不支持ECMA5的环境，我们可以通过下面的方式自己实现ray()这个函数。

if(typeof ray === "undefined") { ray = function(arg){ return (arg) === "[object Array]";

};

}var arr = [];(ray(arr));// true

　　立即执行函数

立即执行函数是JavaScript中非常常用的一种模式，形式如下：

(function() {

// other code

}());

通过这个模式可以提供一个局部的作用域，所以函数代码都会在局部作用域中执行，不会污染其他作用域。

现在的很多JavaScript库都直接使用了这种模式，例如JQuery、underscore等等。

　　立即执行函数的参数

关于立即执行函数另外一点需要注意的地方就是立即执行函数的参数。

我们可以像正常的函数调用一样进行参数传递：

(function(name, city) {

(name, "lives at", city);}("Wilber", "Shanghai"));// Wilber lives at Shanghai

在立即执行函数中，是可以访问外部作用域的(当然包括全局对象)，例如：

var name = "Wilber";var city = "Shanghai";

(function() { (name, "lives at", city);

}());// Wilber lives at Shanghai

但是，如果立即执行函数需要访问全局对象，常用的模式就是将全局对象以参数的方式传递给立即执行函数。

var name = "Wilber";var city = "Shanghai";

(function(global) { (, "lives at", );

}(this));// Wilber lives at Shanghai

这样做的好处就是，在立即执行函数中访问全局变量的属性的时候就不用进行作用域链查找了，关于更多JavaScript作用域链的内容，可以参考理解JavaScript的作用域链。

　　初始化时分支

初始化时分支(Init-time Branching)是一种常用的优化模式，就是说当某个条件在整个程序声明周期内都不会发生改变的时候，不用每次都对条件进行判断，仅仅一次判断就足够了。

这里最常见的例子就是对浏览器的检测，在下面的例子中，每次使用istener1属性的时候都要进行浏览器判断，效率比较低下：

var utils = {

addListener: function(el, type, fn) {

if (typeof ventListener === 'function') {

ventListener(type, fn, false);

} else if (typeof chEvent === 'function') { // IE chEvent('on' + type, fn);

} else { // older browsers el['on' + type] = fn;