最近想做leaflet的一个小扩展，顺便就阅读了一下leaflet的源码。
- 总体结构
首先是一个匿名函数,将window和document作为参数输入到匿名函数内部，另外重新定义undefined，防止被重写
(function (window, document, undefined) {
}(window, document));
- L的定义
L相当于Jquery里面的$,这个库定义了三种引入形式。第一，定义了Browserify的引入形式，利用typeof module来检测，第二，typeof define === 'function' && define.amd 来检测amd的存在，第三，普通的windows直接引入的形式，这个时候调用expose函数，如果L以及被定义的话，用oldL来存储这个变量，同时把L赋值给window.L
(function (window, document, undefined) {
var L = {
version: "1.0.1+26cce79"
};
function expose() {
var oldL = window.L;
L.noConflict = function () {
window.L = oldL;
return this;
};
window.L = L;
}
// define Leaflet for Node module pattern loaders, including Browserify
if (typeof module === 'object' && typeof module.exports === 'object') {
module.exports = L;
// define Leaflet as an AMD module
} else if (typeof define === 'function' && define.amd) {
define(L);
}
// define Leaflet as a global L variable, saving the original L to restore later if needed
if (typeof window !== 'undefined') {
expose();
}
}(window, document));
- L.Util定义一些通用功能函数
(function (window, document, undefined) {
L.Util = {
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;
},
create: Object.create || (function () {
function F() {}
return function (proto) {
F.prototype = proto;
return new F();
};
})(),
...
};
}(window, document));
首先介绍extend函数就是Util里面的一个，这个函数的功能接受一系列的参数，dest[,src]，然后把src，也就是第二个参数以外的参数都赋值给dest,其实就是一个浅拷贝,create就是一个对于Object.create的polyfill
- Class
Class的文档
L.Class powers the OOP facilities of Leaflet and is used to create almost all of the Leaflet classes documented here. In addition to implementing a simple classical inheritance model, it introduces several special properties for convenient code organization — options, includes and statics.
Class提供了Leaflet面向对象的基础，也是Leaflet所有的类，除了简单的类的继承模型，还有options,includes,statics.
// @class Class
// @aka L.Class
// @section
// @uninheritable
// Thanks to John Resig and Dean Edwards for inspiration!
L.Class = function () {};
L.Class.extend = function (props) {
// @function extend(props: Object): Function
// [Extends the current class](#class-inheritance) given the properties to be included.
// Returns a Javascript function that is a class constructor (to be called with `new`).
var NewClass = function () {
// call the constructor
if (this.initialize) {
this.initialize.apply(this, arguments);
}
// call all constructor hooks
this.callInitHooks();
};
//做了继承的事情，Class()的prototype 是parentProto,
// 然后NewClass是Class的子类，它的prototype是proto
var parentProto = NewClass.__super__ = this.prototype;
var proto = L.Util.create(parentProto);
proto.constructor = NewClass;
NewClass.prototype = proto;
// inherit parent's statics
//NewClass继承所有Class的属性
for (var i in this) {
if (this.hasOwnProperty(i) && i !== 'prototype') {
NewClass[i] = this[i];
}
}
// mix static properties into the class
//用static的属性替代NewClass里面的属性
if (props.statics) {
L.extend(NewClass, props.statics);
delete props.statics;
}
// mix includes into the prototype
//对props也就是NewClass的prototype进行属性的浅拷贝，include和static的区别是，include不会直接替代NewClass原来有的属性
if (props.includes) {
L.Util.extend.apply(null, [proto].concat(props.includes));
delete props.includes;
}
// merge options
if (proto.options) {
props.options = L.Util.extend(L.Util.create(proto.options), props.options);
}
// mix given properties into the prototype
L.extend(proto, props);
proto._initHooks = [];
// add method for calling all hooks
proto.callInitHooks = function () {
if (this._initHooksCalled) { return; }
if (parentProto.callInitHooks) {
parentProto.callInitHooks.call(this);
}
this._initHooksCalled = true;
for (var i = 0, len = proto._initHooks.length; i < len; i++) {
proto._initHooks[i].call(this);
}
};
//基本在proto上面做文章
return NewClass;
};
