从leaflet源码解析来看面向对象设计
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
的源码值的细细体会,从源码中将学到很多的知识。
个人博客