Javascript是一门极富表现力的语言，在当今大行其道的Web浪潮中扮演着非常关键的作用。合理、高效地利用这门技术，可以让我们的Web世界多姿多彩。首先，我们认识一下这门技术的几个独特的特性。
1. Javascript最大的特性在于其灵活性。作为一名前端开发人员，既可以采用函数式的编程风格，也可以采用更复杂一点的面向对象的编程风格。不管你采用哪种风格，都可以完成一些非常有用的任务。因而，Javascript是一门面向过程的语言，同时也是一门面向对象的语言，进而可以模仿面向对象语言的编程模式和惯用法。我们用一个例子来说明：启动和停止动画。
如果你习惯于函数式的编程风格，代码会如下：
function startAnimation() {
//启用动画
}
function stopAnimation() {
//停止动画
}
这种方法很简单，但却无法创建保存状态以及仅对内部状态进行操作的动画对象。下面我们定义一个类:
var Animation = function() {
//动画类
};
Animation.prototype.start = function() {
//启用动画
};
Animation.prototype.stop = function() {
//停止动画
};
/*用法如下*/
var anim = new Animation();
anim.start();
anim.stop();
如果你想将类的定义封装到一条声明中，则代码如下：
var Animation = function() {
//动画类
};
Animation.prototype = {
start: function(){
//启用动画
},
stop: function(){
//停止动画
}
};
这样让面向对象的程序员看起来更加眼熟，我们可以试着尝试更复杂一点的写法：
Function.prototype.method = function(name, fn){
this.prototype[name] = fn;
}
var Animation = function() {
//动画类
};
Animation.method("start", function(){
//启用动画
});
Animation.method("stop", function(){
//停止动画
});
我们为Function类扩展了一个方法method用于添加新方法。name代表函数名称，fn代表函数的具体实现。在基于此写法的基础之上，我们可以让函数支持链式调用：
Function.prototype.method = function(name, fn){
this.prototype[name] = fn;
return this;
}
var Animation = function() {
//动画类
};
Animation.method("start", function(){
//启用动画
}).method("stop", function(){
//停止动画
});
至此已经见识了5种不同的编程风格，具有不同的代码量、编码效率和执行性能。你可以选择最适合当前项目的编程风格来进行工作。
2. Javascript是一门弱类型语言。声明变量时不必指定类型，但并不代表没有类型。Javascript包含三种基本类型：布尔型、数值型和字符串类型，此外还包含对象类型和函数类型，最后还包含空类型和未定义类型。基本类型按值传递，其他类型按引用传递。可以根据变量赋值改变类型，基本类型之间可以相互转换。toString()可以把数值或布尔值转化为字符串，parseInt()和parseFloat()可以将字符串转化为数值，双"非"操作可以将字符串或数值转化为布尔值。
3. Javascript函数是"一等"对象。函数可以存储在变量中，可作为参数传到其他函数，可作为返回值从其他函数中传出，也可在运行时构造。在于函数打交道时，带来了极大的灵活性和极强的表达能力，这些都是构建面向对象的基础。可以通过function() {...}创建匿名函数(没有函数名，也可赋给变量)。下面以例子来说明：
(function(){
var a = 10;
var b = 5;
alert(a * b);//返回50
})();//函数定义就立即执行
之所以能立即执行，是因为函数声明后的一对括号。但我们发现，括号内空无一物，也并非完全如此。
(function(a, b){
alert(a * b);//返回50
})(10, 5);//与前面等价
这个匿名函数与前一个等价，只是变量没有在函数内声明，而是直接从外部传入而已。其实，这个匿名函数也可以有个返回值，并赋给某个变量。
var c = (function(a, b){
return a * b;//返回50
})(10, 5);//与前面等价
alert(c);//50
匿名函数的最大用途是创建闭包。所谓闭包，就是一个受保护的变量空间，由内嵌函数生成。由于Javascript具有函数级的作用域，即定义在函数内部的变量在函数外部是不能被访问的，函数仅运行在定义它的作用域中，而不是在调用的作用域中。这样，就可以把变量包裹在匿名函数中加以保护。例如，你可以通过以下方式创建私有变量：
var c;
(function(){
var a = 10;
var b = 5;
c = function(){
return a * b;//返回50
}
})();
c();//c可以访问a,b，即使它在匿名函数的外部也能被执行
4. Javascript对象是"易变"的。一切都是对象(除了3种基本类型)，而且所有对象都是易变的。这意味着你能使用一些别的语言不存在的技术。例如为函数动态添加属性。
function displayError(error){
displayError.numTimesExecuted++;
alert(error);
}
displayError.numTimesExecuted = 0;//意味着可对预先定义的类和对象进行修改
可以利用prototype机制在类的实例创建后再动态添加，此时对已定义的对象仍然有效。例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
getName: function() {
return this.name;
},
getAge: function() {
return this.age;
}
};
//先定义两个变量
var miracle = new Person("Miracle", 28);
var mike = new Person("Mike", 32);
//动态添加一个方法
Person.prototype.getGreeting = function() {
return "Hello " + this.getName() + "!";
};
//displayGreeting()仅对Miracle有效
miracle.displayGreeting = function() {
alert(this.getGreeting());
}
与对象的易变性相关的就是反射(也可称为"内省")，即在运行时检查对象的属性和方法，并利用这些信息来实例化类和执行方法，甚至在开发时不需要知道它们的名称。借助于对象的这两大特性，可以完全模仿面向对象语言的高级特性，但要记住在Javascript中任何对象都是可以在运行时修改。
5. Javascript具有实现"继承"的天份。这里简单提及一下：Javascript继承包含"类式"继承和基于对象的原型式继承，这个话题我会在下一期的文章中详细论述。
最后总结一下，之所以采用面向对象和设计模式的思想来处理Javascript这种看似过程式的语言，到底有什么好处呢?我总结了以下几点供大家参考：
(1).可维护性。有助于降低模块之间的耦合性，对项目中代码可按模块和功能职责来划分。
(2).便于交流。对于一个大型团队来说，可能用设计模式很简单的术语可以高度概括你所负责实现的功能模块，而不必太多让团队其他成员关注过多的细节。
(3).提升性能。利用模式可以减少传送到客户端代码量的同时并提高程序运行的速度。
当然，有利就有弊。弊端在于：
(1).复杂度相对较高。获取可维护性的代价是以代码的高度重构和模块化的划分而成，对于一些新手来说，很难一下适应。
(2).部分模式反而降低性能。但是这种拖累依赖于你的项目需求，可能有时微不足道，有时难以接受。
因此，建议大家学会理解设计模式的应用场景，用对场景才是对设计模式的真正意义上的应用。盲目应用和用错场景就是误用，还不如不用。
接口是面向对象Javascript工具箱中最有用的特性之一。我们都知道GOF在设计模式中说到：面向接口编程，而非面向实现编程。就足以说明接口在面向对象的领域中有多重要。但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制，以确定一组对象和另一组对象包含相似的的特性。所幸的是JS拥有强大的灵活性(我在上文已谈过)，这使得模仿接口特性又变得非常简单。那么到底是接口呢？
接口，为一些具有相似行为的类之间(可能为同一种类型，也可能为不同类型)提供统一的方法定义，使这些类之间能够很好的实现通信。
那使用接口到底有哪些好处呢？简单地说，可提高系统相似模块的重用性，使得不同类的通信更加稳固。一旦实现接口，则必须实现接口中所有的方法。对于大型的Web项目来说，使得多个复杂模块的相似功能模块，只需要提供接口便可以提供一个实现，而彼此之间不受到影响。但我们必须明确，接口也不是万能的，由于JS是弱类型语言，你并不能强制其他的团队成员严格遵循你所提供的接口，不过你可以使用代码规范和辅助类来缓解这个问题。另外，对系统性能也会造成一定的影响，应根据你的系统需求复杂度而定。由于没有内建的interface和implements关键字，下面我们来看看JS是如何模仿实现接口的。
1. 最简单也是效果最差实现接口的方式是使用注释。即在注释中使用interface来说明接口的意图。
/*
interface Composite {
function add(child);
function remove(child);
function getChild(index);
}
interface FormItem {
funtion save();
}
*/
var CompositeForm = function(id, name, action) {
// implements Composite, FormItem
}
CompositeForm.prototype = {
// implements Composite interface
add: function(child) {
//...
},
remove: function(child) {
//...
},
getChild: function(index) {
//...
}
// implements FormItem interface
save: function() {
//...
}
}
这并没有很好的模拟接口的功能和确保Composite类确实实现了方法的集合，也没有抛出错误通知程序员问题所在，除了说明以外不起任何作用，所有的一致性都需要程序员自觉完成。但它容易实现，不需要额外的类或函数，不影响文档的大小和执行速度，注释也能很轻易的剥离，在一定程度上提高了重用性，因为提供了类的说明可以跟其他实现相同接口的类进行通信。
2. 用属性检查模拟接口。类显示声明了要实现的接口，通过属性检查是否实现了相应的接口。
/*
interface Composite {
function add(child);
function remove(child);
function getChild(index);
}
interface FormItem {
funtion save();
}
*/
var CompositeForm = function(id, name, action) {
this.implementsInterfaces = ["Composite", "FormItem"];
//...
}
function checkInterfaces(formInstance) {
if(!implements(formInstance, "Composite", "FormItem")) {
throw new Error("Object doesn't implement required interface.");
}
//...
}
//check to see if an instance object declares that it implements the required interface
function implements(instance) {
for(var i = 1; i < arguments.length; i++) {
var interfaceName = arguments[i];
var isFound = false;
for(var j = 0; j < instance.implementsInterfaces.length; j++) {
if(interfaceName == instance.implementsInterfaces[j]) {
isFound = true;
break;
}
}
if(!isFound) return false;// An interface was not found.
}
return true;// All interfaces were found.
}
在这里发现，仍然添加了注释来说明接口。不过在Composite类中添加了一个属性implementsInterfaces，说明该类必须实现那些接口。通过检查该属性来判断是否实现相应的接口，如果未实现就会抛出错误。但缺点在于你仍无法判断是否真正实现了对应的接口方法，仅仅只是"自称"实现了接口，同时也增加了相应的工作量。
3. 用"鸭式辨型"来实现接口。从属性检查实现中发现一个类是否支持所实现的接口无关紧要，只要接口中所有的方法出现在类中相应的地方，那足以说明已经实现接口了。就像"如果走路像鸭子，像鸭子嘎嘎的叫，不管它贴不贴标签说自己是鸭子，那我们认为它就是鸭子"。利用辅助类来判断一个类是否存在(实现)了相应接口中所有的方法，如果不存在则代表没有实现。
// Interfaces
var Composite = new Interface("Composite", ["add", "remove", "getChild"]);
var FormItem = new Interface("FormItem", ["save"]);
var CompositeForm = function(id, name, action) {
// implements Composite, FormItem interfaces
}
function checkInterfaces(formInstance) {
Interface.ensureImplements(formInstance, "Composite", "FormItem");
//...
}
接口类
// Interface class is for checking if an instance object implements all methods of required interface
var Interface = function(name, methods) {
if(arguments.length != 2) {
throw new Error("Interface constructor expects 2 arguments, but exactly provided for " + arguments.length + " arguments.");
}
this.name = name;
this.methods = [];
for(var i = 0;i < methods.length; i++) {
if(typeof methods[i] != "string") {
throw new Error("Interface constructor expects to pass a string method name.");
}
this.methods.push(methods[i]);
}
}
//static class method
Interface.ensureImplements = function(instance) {
if(arguments.length < 2) {
throw new Error("Function Interface.ensureImplements expects at least 2 arguments, but exactly passed for " + arguments.length + " arguments.");
}
for(var i = 1, len = arguments.length; i < len; i++) {
var interface = arguments[i];
if(interface.constructor != Interface) {
throw new Error("Function Interface.ensureImplements expects at least 2 arguments to be instances of Interface.");
}
for(var j = 0, mLen = interface.methods.length; j < mLen; j++) {
var method = interface.methods[j];
if(!instance[method] || typeof instance[method] != "function") {
throw new Error("Function Interface.ensureImplements: object doesn't implements " + interface.name + ". Method " + method + " wasn't found.");
}
}
}
}
严格的类型检查并非总是必需的，在平时的Web前端开发中很少用到以上的接口机制。但当你面对一个复杂特别是拥有很多相似模块的系统时，面向接口编程将变得非常重要。看似降低了JS的灵活性，实质上却提高了类的灵活性，降低了类之间的耦合度，因为当你传入任何一个实现了相同接口的对象都能被正确的解析。那什么时候使用接口比较合适呢？对于一个大型项目来说，肯定有许多团队成员，并且项目会被拆分为更细粒度的功能模块，为了保证进度需提前利用"占位程序"(接口)来说明模块的功能或与已开发完成的模块之间通信时，提供一个统一的接口(API)显得相当必要。随着项目的不断推进，可能需求会不断的发生变动，各模块功能也会发生相应的变动，但彼此之间通信以及提供给上层模块的API始终保持不变，确保整个架构的稳定性和持久性。下面我们通过一个具体的示例来说明接口的实际应用。假设设计一个类自动检测结果对象(TestResult类)并格式化输出一个网页视图，没有使用接口的实现方式：
var ResultFormatter = function(resultObject) {
if(!(resultObject instanceof TestResult)) {
throw new Error("ResultFormatter constructor expects a instance of TestResult.");
}
this.resultObject = resultObject;
}
ResultFormatter.prototype.render = function() {
var date = this.resultObject.getDate();
var items = this.resultObject.getResults();
var container = document.createElement("div");
var header = document.createElement("h3");
header.innerHTML = "Test Result from " + date.toUTCString();
container.appendChild(header);
var list = document.createElement("ul");
container.appendChild(list);
for(var i = 0, len = items.length; i++) {
var item = document.createElement("li");
item.innerHTML = items[i];
list.appendChild(item);
}
return container;
}
首先ResultFormatter类的构造函数仅仅是检查了是否为TestResult实例，却无法保证一定实现了render中的方法getDate()和getResults()。另外，随着需求的不断变动，现在有一个Weather类，包含了getDate()和getResults()方法，却因为只能检查是否为TestResult的实例而无法运行render方法，岂不是很无语呢？解决办法是移除instanceof检查并以接口代替。
//create the ResultSet interface
var ResultSet = new Interface("ResultSet", ["getDate", "getResults"]);
var ResultFormatter = function(resultObject) {
// using Interface.ensureImplements to check the resultObject
Interface.ensureImplements(resultObject, ResultSet);
this.resultObject = resultObject;
}
ResultFormatter.prototype.render = function() {
// keep the same as former
var date = this.resultObject.getDate();
var items = this.resultObject.getResults();
var container = document.createElement("div");
var header = document.createElement("h3");
header.innerHTML = "Test Result from " + date.toUTCString();
container.appendChild(header);
var list = document.createElement("ul");
container.appendChild(list);
for(var i = 0, len = items.length; i++) {
var item = document.createElement("li");
item.innerHTML = items[i];
list.appendChild(item);
}
return container;
}
可以看出render方法没有发生任何改变。改变的仅仅是添加一个接口和使用接口来进行类型检查。同时现在能够传递Weather类的实例来进行调用，当然也能传递实现了ResultSet接口的任何类的实例，使检查更加精确和宽容。随着后续对JS设计模式的推出，接口会在工厂模式、组合模式、装饰模式和命令模式中得到广泛的应用。希望大家可以细细品味接口给我们的JS模块化设计带来的益处。
