Leaflet Map Class—L.Class为Leaflet的OOP提供强大支持

Leaflet Map Class—L.Class为Leaflet的OOP提供强大支持

L.Class powers the OOP facilities of Leaflet and is used to create almost all of the Leaflet classes documented here.

L.Class为Leaflet的OOP功能提供了强大的支持,并用于创建此处记录的几乎所有Leaflet类。

In addition to implementing a simple classical inheritance model, it introduces several special properties for convenient code organization — options, includes and statics.

除了实现一个简单的经典继承模型之外,它还为方便的代码组织引入了几个特殊属性——选项、includes和statics。

Usage example

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");

Class Factories

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:

您可能已经注意到,创建 Leaflet 对象时不使用new关键字。这是通过用小写的工厂方法补充每个类来实现的:

new L.Map('map'); // becomes:
L.map('map');

The factories are implemented very easily, and you can do this for your own classes:

工厂很容易实现,您可以为自己的类执行此操作:

L.map = function (id, options) {
    return new L.Map(id, options);
};

Inheritance

You use L.Class.extend to define new classes, but you can use the same method on any class to inherit from it:

可以使用L.Class.extend定义新类,但可以在任何类上使用相同的方法从其继承:

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:

这将创建一个继承父类的所有方法和属性的类(通过适当的原型链),添加或覆盖传递给扩展的方法和属性。它还将正确响应instanceof:

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:

通过访问父类原型并使用JavaScript的调用或应用,您可以从相应的子方法调用父方法(包括构造函数)(就像在其他语言中使用超级调用一样):

var MyChildClass = MyClass.extend({
    initialize: function () {
        MyClass.prototype.initialize.call(this, "Yo");
    },

    greet: function (name) {
        MyClass.prototype.greet.call(this, 'bro ' + name + '!');
    }
});

var a = new MyChildClass();
a.greet('Jason'); // alerts "Yo, bro Jason!"

Options

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:

选项是一个特殊的属性,与传递给扩展的其他对象不同,它将与父对象合并,而不是完全覆盖它,这使得管理对象和默认值的配置更加方便:

var MyClass = L.Class.extend({
    options: {
        myOption1: 'foo',
        myOption2: 'bar'
    }
});

var MyChildClass = MyClass.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, a method for conveniently merging options passed to constructor with the defaults defines in the class:

还有L.Util.setOptions,它是一种方便地将传递给构造函数的选项与类中定义的默认值合并的方法:

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}

Note that the options object allows any keys, not just the options defined by the class and its base classes. This means you can use the options object to store application specific information, as long as you avoid keys that are already used by the class in question.

注意,options对象允许任何键,而不仅仅是类及其基类定义的选项。这意味着您可以使用options对象来存储特定于应用程序的信息,只要您避免相关类已经使用的键。

Includes

includes is a special class property that merges all specified objects into the class (such objects are called mixins).

includes是一个特殊的类属性,它将所有指定的对象合并到类中(此类对象称为mixin)。

 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:

您也可以在运行时使用include方法执行这样的include:

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:

statics只是一个方便的属性,它将指定的对象属性注入类的静态属性,用于定义常量:

var MyClass = L.Class.extend({
    statics: {
        FOO: 'bar',
        BLA: 5
    }
});

MyClass.FOO; // 'bar'

Constructor hooks

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:

如果您是插件开发人员,通常需要向现有类添加额外的初始化代码(例如,为L.Polyline编辑挂钩)。传单提供了一种使用addInitHook方法轻松实现的方法:

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:

当您只需要另外调用一个方法时,也可以使用以下快捷方式:

MyClass.addInitHook('methodName', arg1, arg2, …);

Functions

FunctionReturnsDescription
extend(<Object> props)FunctionExtends the current class given the properties to be included. Returns a Javascript function that is a class constructor (to be called with new).
给定要包含的属性,扩展当前类。返回一个Javascript函数,它是一个类构造函数(用new调用)。
include(<Object> properties)thisIncludes a mixin into the current class.
在当前类中包含混合。
mergeOptions(<Object> options)thisMerges options into the defaults of the class.
将选项合并到类的默认值中。
addInitHook(<Function> fn)thisAdds a constructor hook to the class.
向类添加构造函数钩子。
5 1 投票
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x