常用的JavaScript模式
常用的JavaScript模式有哪些?模式是解决或者避免一些问题的方案。下面本站小编为大家列出几种常用的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;
-
生态性环艺设计发展的趋势
生态设计,也可以称作绿色设计或者生命周期设计或者环境设计。生态设计是指在设计过程中,遵从本地化、节约化、自然化等原则,尽最大可能考虑到环境因素,减少对环境的危害,实现设计的可持续性和再循环。下面是本站小编整理的生态性环艺设计发展的趋势相关内容,希望对你...
-
信息技术《第三课 认识WORD2017》教学设计
1、掌握启动和退出WORD的方法;2、了解WORD窗口的组成;3、学会显示和隐藏工具栏;教学重点:1、掌握启动和退出WORD的方法;2、学会显示和隐藏工具栏。教学难点:显示和隐藏工具栏教学过程:一、展示一份由WORD制作的电脑小报二、启动WORD1、单击“开始”按钮,将指针指向“程...
-
论电影制作投资的困境与重要性
眼下的国内市场,股票崩盘、资本寒冬,仿佛唯有电影票房不断井喷,而电影行业也确实正在迎来更热的一波投资浪潮。小编特意撰写此文是为了是展示电影投资的风险特性,以及探讨电影基金背后的投资逻辑。1、挽救迪士尼的基金今日的娱乐巨头迪士尼在八十年代时,其实是好莱...
-
2017计算机操作系统期末试题「附答案」
一、单项选择题1.()不是分时系统的基本特征:A、同时性B、独立性C、实时性D、交互性2.()不是基本的操作系统。A、批处理操作系统B、分时操作系统C、实时操作系统D、网络操作系统3.处理器执行的指令被分成两类,其中有一类称为特权指令,它只允许()使用。A、操作员B、...