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的源码值的细细体会，从源码中将学到很多的知识。
个人博客