Leaflet/src/core/Class.leafdoc

192 lines
4.4 KiB
Plaintext
Raw Normal View History

Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
2016-04-02 20:12:02 +08:00
@class Class
@aka L.Class
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
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.
2016-04-02 20:12:02 +08:00
@example
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
```js
var MyClass = L.Class.extend({
initialize: function (greeter) {
this.greeter = greeter;
// class constructor
},
greet: function (name) {
alert(this.greeter + ', ' + name)
}
});
// create instance of MyClass, passing "Hello" to the constructor
var a = new MyClass("Hello");
// call greet method, alerting "Hello, World"
a.greet("World");
```
2016-04-02 20:12:02 +08:00
@section Class Factories
@example
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
You may have noticed that Leaflet objects are created without using
the `new` keyword. This is achieved by complementing each class with a
lowercase factory method:
```js
new L.Map('map'); // becomes:
L.map('map');
```
The factories are implemented very easily, and you can do this for your own classes:
```js
L.map = function (id, options) {
return new L.Map(id, options);
};
```
2016-04-02 20:12:02 +08:00
@section Inheritance
@example
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
You use L.Class.extend to define new classes, but you can use the same method on any class to inherit from it:
```js
var MyChildClass = MyClass.extend({
// ... new properties and methods
});
```
This will create a class that inherits all methods and properties of the parent class (through a proper prototype chain), adding or overriding the ones you pass to extend. It will also properly react to instanceof:
```js
var a = new MyChildClass();
a instanceof MyChildClass; // true
a instanceof MyClass; // true
```
You can call parent methods (including constructor) from corresponding child ones (as you do with super calls in other languages) by accessing parent class prototype and using JavaScript's call or apply:
```
var MyChildClass = MyClass.extend({
initialize: function () {
MyClass.prototype.initialize.call("Yo");
},
greet: function (name) {
MyClass.prototype.greet.call(this, 'bro ' + name + '!');
}
});
var a = new MyChildClass();
a.greet('Jason'); // alerts "Yo, bro Jason!"
```
2016-04-02 20:12:02 +08:00
@section Options
@example
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
`options` is a special property that unlike other objects that you pass
to `extend` will be merged with the parent one instead of overriding it
completely, which makes managing configuration of objects and default
values convenient:
```js
var MyClass = L.Class.extend({
options: {
myOption1: 'foo',
myOption2: 'bar'
}
});
var MyChildClass = L.Class.extend({
options: {
myOption1: 'baz',
myOption3: 5
}
});
var a = new MyChildClass();
a.options.myOption1; // 'baz'
a.options.myOption2; // 'bar'
a.options.myOption3; // 5
```
There's also [`L.Util.setOptions`](#util-setoptions), a method for
conveniently merging options passed to constructor with the defaults
defines in the class:
```js
var MyClass = L.Class.extend({
options: {
foo: 'bar',
bla: 5
},
initialize: function (options) {
L.Util.setOptions(this, options);
...
}
});
var a = new MyClass({bla: 10});
a.options; // {foo: 'bar', bla: 10}
```
2016-04-02 20:12:02 +08:00
@section Includes
@example
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
`includes` is a special class property that merges all specified objects into the class (such objects are called mixins).
```js
var MyMixin = {
foo: function () { ... },
bar: 5
};
var MyClass = L.Class.extend({
includes: MyMixin
});
var a = new MyClass();
a.foo();
```
You can also do such includes in runtime with the `include` method:
```js
MyClass.include(MyMixin);
```
`statics` is just a convenience property that injects specified object properties as the static properties of the class, useful for defining constants:
```js
var MyClass = L.Class.extend({
statics: {
FOO: 'bar',
BLA: 5
}
});
MyClass.FOO; // 'bar'
```
2016-04-02 20:12:02 +08:00
@section Constructor hooks
@example
Trying out Leafdoc comments in L.Marker Added Leafdoc comments to Layer.js Leafdoc comments for Popup, Layer Leafdoc comments: L.Evented, inheritances, minor tilelayer Leafdoc comments: gridlayer & tilelayer options Leafdoc comments: tilelayer, marker drag Typos Leafdoc: switch to shorthand method params Leafdoc: Switch to shorthands in marker drag, WMS. Leafdoc: Vector layers Leafdoc: Layer group, feature group, geojson Leafdoc: LatLng, Point, Bounds, Icons. Leafdoc: Controls. Leafdoc: DOM & utils. Leafdoc: "jake docs" now builds the documentation Leafdoc: Commit actual templates instead of symlinks Leafdoc: Fix broken build, have jake print out uglifyjs errors Leafdoc: Several L.Map bits. Leafdoc: Map handlers Leafdoc: Map events, L.CRS, misc. fixes Leafdoc: Fixed ordering of classes by using new leafdoc features Leafdoc: Misc bits at the bottom of the docs 🍂doc: Map panes 🍂doc: CRSs, projections and their templates 🍂doc: miniclasses for map methods' options Leafdoc: Cleanup L.Class, mark uninheritable sections, use Leafdoc 0.3.0 🍂doc: miniclasses for event types, bump to Leafdoc 1.0.0 🍂doc: Make linter happy after branch rebase 🍂doc: Tweaked headers for inherited stuff. 🍂doc: Tweaking section headers (white, padding, triangles) Leafdoc: upgrade to 1.2, document SVG&Canvas, and misc bits 🍂doc: minor CSS tweaks, version in filename, typo. Add missing bits - supersedes #4105, #4065, #4031 🍂doc: moved sections around, minor typos & fixes Typo about LocationEvent
2015-08-13 02:51:04 +08:00
If you're a plugin developer, you often need to add additional initialization code to existing classes (e.g. editing hooks for `L.Polyline`). Leaflet comes with a way to do it easily using the `addInitHook` method:
```js
MyClass.addInitHook(function () {
// ... do something in constructor additionally
// e.g. add event listeners, set custom properties etc.
});
```
You can also use the following shortcut when you just need to make one additional method call:
```js
MyClass.addInitHook('methodName', arg1, arg2, …);
```