Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。Leaflet设计坚持简便、高性能和可用性好的思想。作为一名giser,解析其源码是相当必要的，初读源码的时候，被其面向对象的设计所吸引，为了学习其设计思想，觉得很有必要来总结下，学习一下大神的设计思路。
1.JavaScript面向对象与原型链
想了解其源码，首先需要了解JavaScript的面向对象编程和原型链相关的知识。
1.1面向对象
JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。面向对旬具有封装、多态、继承等特性。
1.1.1创建对象
在JavaScript创建对象的方式有很多种，主要包括字面量创模式，构造函数模式，工厂模式、原型模式、通过Object()方法来创建等。这里主要介绍构造函数模式和原型模式。
构造函数模式
使用构造函数模式创建对象比较简单，跟创建一个函数一样，只是函数名的第一个大写字母用大写，如下是创建了一个地图类，创建好地图类后，使用new关键字来实例化一个地图对象。
function Map() {
this.layers = []
this.center = null
this.addLayer = function (layer) {
console.log('添加图层')
}
}
//创建一个地图对象
var map = new Map();
原型模式
原型模式创建对象跟构造函数差不多，只是添加属性和方法时不是在构造函数中，而是添加在了prototype上，如下所示原型模式创建的对象：
function Map() {
}
Map.prototype.layers = [];
Map.prototype.center = null;
Map.prototype.addLayer = function (layer) {
console.log('添加图层')
};
//创建一个地图对象
var map = new Map();
1.2原型链
理解原型链前，需要先理清下面这几个关系
- 在
JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。如前面的Map函数的prototype为Map.prototype - 每个对象都有一个
__proto__属性指向其构造函数的原型，如下面的代码，打印结果是一个true
function Map() {
}
Map.prototype.name = '地图'
var map = new Map();
console.log(map.__proto__ === Map.prototype);
- 每个原型对象都有一个
constructor指向其构造函数本身，如下代码打印结果是一个true
function Map() {
}
Map.prototype.name = '地图'
var map = new Map();
console.log(Map === Map.prototype.constructor);
通过上面的几个关系，就可以实现继承，构成了一个原型链，当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
2.leaflet面向对象设计
leaflet源码中实现多面向对象的核心类主要是在Class中，首先创建一个Class的构造函数，然后再通过extent来实现继承，将对象的属性和方法添加到原型上，以下为Class实现的精简版本。
function Class() {
}
Class.extend = function (props) {
//创建一个新的构造函数
var NewClass = function () {
if (this.initialize) {//有初始化方法时执行初始化方法
this.initialize.apply(this, arguments);
}
};
//取出当前对象的原型
var parentProto = NewClass.__super__ = this.prototype;
//创建一个原型对象
var proto = Util.create(parentProto);
//将新创建原型对象的constructor指向当前构造函数
proto.constructor = NewClass;
//赋值原型对象
NewClass.prototype = proto;
for (var i in this) {//添加属性和方法
if (this.hasOwnProperty(i) && i !== 'prototype' && i !== '__super__') {
NewClass[i] = this[i];
}
}
//将props中的对像和方法赋给当前的原型对象
Util.extend(proto, props);
return NewClass;
}
var Util = {
//创建对象
create: Object.create || (function () {
function F() {
}
return function (proto) {
F.prototype = proto;
return new F();
};
})(),
//合并对象
extend: function (dest) {
var i, j, len, src;
for (j = 1, len = arguments.length; j < len; j++) {
src = arguments[j];
for (i in src) {
dest[i] = src[i];
}
}
return dest;
}
}
创建好Class后，就可以来创建其它的类，比如Map.js中是通过Class.extend来创建一个地图的封装类，其参数为一个字面量的对象，在该对象中可以添加属性和方法，然后再通过extend方法，将参数对象中的属性和方法赋值给Map函数的原型。如下所示：
var Map = Class.extend({
initialize:function (id,option) {
console.log('初始化')
}
});
function createMap(id,option) {
return new Map(id,option)
}
leaflet通过其简洁的代码将面向对象设计的很到位，leaflet的源码值的细细体会，从源码中将学到很多的知识。
个人博客
