从leaflet源码解析来看面向对象设计

2019-12-26  本文已影响0人  写前端的大叔

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原型链

理解原型链前,需要先理清下面这几个关系

 function Map() {
    }
    Map.prototype.name = '地图'
    var map = new Map();
    console.log(map.__proto__ === Map.prototype);
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的源码值的细细体会,从源码中将学到很多的知识。
个人博客

上一篇下一篇

猜你喜欢

热点阅读