在学习JavaScript的过程中，面向对象是必须要学会的课题。然而，网络上大部分文章只是简单地讲述如何通过代码实现面向对象，忽略了理论和原理方面的知识。本系列文章将从头开始逐步讲解面向对象编程思想及其在JavaScript中的实现与应用。

从一个简单的需求开始

假设我们需要在程序中计算各种形状的周长，代码可能是这样的：

var rectangle = {
	name: '长方形1',
	type: 'rectangle',
	length: 5,  // 长
	width: 10   // 宽
};
var square = {
	name: '正方形1',
	type: 'square',
	length: 5  // 边长
};
var circle = {
	name: '圆形1',
	type: 'circle',
	radius: 5  // 半径
};

function computePerimeter(shape) {
	var result;
	switch (shape.type) {
        case 'rectangle':
        	// 矩形周长：(长+宽)*2
        	result = (shape.length + shape.width) * 2;
        	break;
        case 'square':
        	// 正方形周长：边长*4
        	result = shape.length * 4;
        	break;
        case 'circle':
        	// 圆形周长：2*PI*半径
        	result = 2 * Math.PI * shape.radius;
        	break;
    }

    return shape.name + '的周长是' + result;
}

假设有这样一个动画功能需求：把一个div的宽度从100px变化到200px。写出来的代码可能是这样的：

<div id="test1" style="width: 100px; height: 100px; background: blue; color: white;"></div>

function animate1(element, endValue, duration) {
	var startTime = new Date(),
		startValue = parseInt(element.style.width),
		step = 1;
	
	var timerId = setInterval(function() {
		var nextValue = parseInt(element.style.width) + step;
		element.style.width = nextValue + 'px';
		if (nextValue >= endValue) {
			clearInterval(timerId);
			// 显示动画耗时
			element.innerHTML = new Date - startTime;
		}
	}, duration / (endValue - startValue) * step);
}

animate1(document.getElementById('test1'), 200, 1000);

原理是每隔一定时间增加1px，一直到200px为止。然而，动画结束后显示的耗时却不止1s（一般是1.5s左右）。究其原因，是因为setInterval并不能严格保证执行间隔。

在这篇文章中，我简单介绍了前端模板引擎。John Resig写的tmpl函数麻雀虽小五脏俱全，足以满足日常开发需要。本文主要探讨一下tmpl的性能优化。

先复习一下tmpl的源代码：

var tmpl = (function() {
	var cache = { };

	return function(str, data) {
		var fn = cache[str];
		if (!fn) {
			fn = new Function("obj",
				"var p=[];" +
				"with(obj){p.push('" +
				str
					.replace(/[\r\t\n]/g, " ")
					.split("<%").join("\t")
					.replace(/((^|%>)[^\t]*)'/g, "$1\r")
					.replace(/\t=(.*?)%>/g, "',$1,'")
					.split("\t").join("');")
					.split("%>").join("p.push('")
					.split("\r").join("\\'")
				+ "');}return p.join('');"
			);
			cache[str] = fn;
		}

		return fn(data);
	};
})();

属性描述符是ES5中新增的概念，其作用是给对象的属性增加更多的控制。

Object.defineProperty

要研究属性描述符，首先要谈谈 Object.defineProperty 方法。这个方法的作用是给对象定义新属性或修改已存在的属性。其原型如下：

Object.defineProperty(obj, prop, descriptor)

使用示例：

var obj = { };
Object.defineProperty(obj, 'attr', { value: 1 });

所谓的数字千分位形式，即从个位数起，每三位之间加一个逗号。例如“10,000”。针对这个需求，我起初写了这样一个函数：

// 方法一
function toThousands(num) {
	var result = [ ], counter = 0;
	num = (num || 0).toString().split('');
	for (var i = num.length - 1; i >= 0; i--) {
		counter++;
		result.unshift(num[i]);
		if (!(counter % 3) && i != 0) { result.unshift(','); }
	}
	return result.join('');
}

表单提交到动态创建的iframe

问题描述

以下代码，一般用于在当前页无刷新提交表单，其原理是把表单的target设为页面上某个iframe的id，使该iframe成为提交的目标，避免新开窗口或跳转。但这段代码在IE 6、7下无效。

<form action="http://www.baidu.com/" method="post" target="testframe">
	<input type="submit" value="Submit" />
</form>
<script>
var iframe = document.createElement('iframe');
iframe.id = 'testframe';
iframe.name = 'testframe';
document.body.insertBefore(iframe, document.body.firstChild);
</script>

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API，目前已经是W3C的推荐标准。本文主要阐述如何通过WebRTC的接口获取摄像头影像并截图。

获取摄像头影像

要播放摄像头的影像，首先需要一个video标签：

<video id="video"></video>

获取摄像头影像主要是通过navigator.getUserMedia这个接口，在caniuse.com上查询一下这个接口的支持情况，可以看到目前只有Chrome和Firefox支持得比较好，而且都要加上自家的前缀，移动端几乎全线不可用。

我们经常会通过这样的代码去判断某个元素的某些事件有没有被触发：

$('body').on("click", function(e) {
	console.log(e);
});

事实上，Chrome开发者工具以及Firebug都提供了内置事件监控方法——monitorEvents。下面我们介绍一下具体用法。

审查一个元素，此时，你可以在控制台中通过变量$0获取这个元素：

小A是某个创业团队的前端工程师，负责编写项目的Javascript程序。

全局变量冲突

根据自己的经验，小A先把一些常用的功能抽出来，写成函数放到一个公用文件base.js中：

var _ = {
	$: function(id) { return document.getElementById(id); },
	getCookie: function(key) { ... },
	setCookie: function(key, value) { ... }
};

小A把这些函数都放在_对象内，以防过多的全局变量造成冲突。他告诉团队的其他成员，如果谁想使用这些函数，只要引入base.js就可以了。

小C是小A的同事，他向小A反映：自己的页面引入了一个叫做underscore.js的类库，而且，这个类库也会占用_这个全局变量，这样一来就会跟base.js中的_冲突了。小A心想，underscore.js是第三方类库，估计不好改，但是base.js已经在很多页面铺开，不可能改。最后小A只好无奈地把underscore.js占用的全局变量改了。

此时，小A发现，把函数都放在一个名字空间内，可以减少全局变量冲突的概率，却没有解决全局变量冲突这个问题。

获取某个月份的天数

相信大家读小学的时候就知道一年十二个月各有多少天了，这里面有个特殊的存在——2月。闰年的2月有29天，非闰年的2月只有28天。估计不少人跟我一样，已经不记得闰年的规则了，这时候，下面的这个方法就派上用场了。

var date = new Date(2013, 2, 0);
date.getDate();  // 28
date = new Date(2012, 2, 0);
date.getDate();  // 29

创建Date对象时可以传入三个参数，分别是年、月（0~11，0表示一月）、日，如果日的参数为0，那创建出来的对象表示的就是上个月的最后一天，如此就可以知道上个月有多少天了。

同样的，我们也可以通过这个方法判断某年是否闰年：

function isLeapYear(year) {
	return new Date(year, 2, 0).getDate() === 29;
}
isLeapYear(2012);  // true