Javascript 这是实现面向对象的最佳方法

我正在做一个关于传单js的小项目，我想知道什么是实现OOP的最好方法。好的，交易如下：

创建一个使用标记的“类”，这些标记来自数据库。因此，我想我将创建一个对象数组，我说得对吗

我的第一个问题是，我必须创建一个自定义类，将marker对象作为该类的属性，还是从传单扩展L.marker类

第二个问题：如何在每个标记上绑定click事件，以便此事件可以调用和ajax请求，并用信息绑定弹出窗口

以下是我目前的代码：

<script>
    var map = L.map('map').setView([25.55246, -103.50328], 18);
    var marcas = [];

   L.tileLayer('https://{s}.tiles.mapbox.com/v3/kinopio.kikc39gj/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

    function Marcador(marca, usuario, seccional, identificador){
        this.marca = marca;
        this.identificador = identificador;
        this.usuario = usuario;
        this.seccional = seccional;
    }

    Marcador.prototype.verUsuario = function(){
        console.log(this.usuario);
    }

    Marcador.prototype.verVotos = function(){
        $.ajax({
            type: 'GET',
            url: '/votos/' + this.identificador,
            datatype: 'json',
            success:function(data){
                msg = $.parseJSON(data);
                //marcador.bindPopup('Votos: ' + msg[0].Votos ).openPopup();
                console.log(msg[0].Votos);
            }
        });

    }

    function onMapClick(e) {
//When clicking in the map, create a marker so i can register a new one to the DB...

        var formulario =    "<form action='/registro' id='registro' method='post'> " +
                                "<input name='usuario' placeholder='usuario'> " +
                                "<input name='password' placeholder='passwword'>" +
                                "<input name='seccional' placeholder='seccional'>" +
                                "<input name='latitud' type='hidden' value = " + e.latlng.lat  + ">" +
                                "<input name='longitud' type='hidden' value = " + e.latlng.lng + ">" +
                                "<input type='submit' value='Aceptar'>" +
                            "</form>"

        var marker = L.marker( e.latlng ).addTo( map ).bindPopup( formulario );

            marker.on("popupopen", function(){
               
                var forma = $('#registro');
                forma.on('submit', function(ev){
                    ev.preventDefault();

                    $.ajax({
                        type: forma.attr('method'),
                        url: forma.attr('action'),
                        data: forma.serialize(),
                        success:function(data){
                            marker.closePopup();
                            marker.bindPopup( 'Usuario registrado exitosament' ).openPopup();
                        }
                    });
                });

            });
        }

        function cargarRegistros(e){
            e.preventDefault();

            $.ajax({
                type: 'GET',
                url: '/registrados',
                datatype: 'json',

                success: function(d){

                    $.each(d.marcadores, function(i, item){                        
                        marca = new L.marker( [ parseFloat(item.latitud), parseFloat( item.longitud) ] )
                                    .addTo(map).bindPopup();
                        marcas.push( new Marcador( marca, item.usuario, item.seccional, item.identificador ) );

                    });
                }
            });

            return marcas;
        }

        map.on('click', onMapClick);

        function clickMarcador(e){
            console.log(e.target  + '---' + e.currentTarget);
            if (e.target.id !== e.currentTarget) {
                console.log('hola');
            }
            
            e.stopPropagation();
    }

    $('#registrados').on('click', cargarRegistros);

</script>

var map=L.map（'map'）.setView（[25.55246，-103.50328]，18）；
var marcas=[]；
L.tileLayer（'https://{s}.tiles.mapbox.com/v3/kinopio.kikc39gj/{z}/{x}/{y}.png'{
最大缩放：18
}).addTo（地图）；
功能Marcador（marca、usuario、seccional、Identificator）{
this.marca=marca；
this.identificator=identificator；
this.usuario=usuario；
this.seccional=seccional；
}
Marcador.prototype.verUsuario=函数（）{
console.log（this.usuario）；
}
Marcador.prototype.verVotos=函数（）{
$.ajax({
键入：“GET”，
url:'/votos/'+this.identificator，
数据类型：“json”，
成功：功能（数据）{
msg=$.parseJSON（数据）；
//marcador.bindpoop（'Votos:'+msg[0].Votos.openPopup（）；
console.log（msg[0].Votos）；
}
});
}
函数onMapClick（e）{
//在地图中单击时，创建一个标记，以便我可以向数据库注册一个新标记。。。
var formulario=“”+
" " +
"" +
"" +
"" +
"" +
"" +
""
var marker=L.marker（e.latlng）.addTo（map）.bindpoop（formulario）；
marker.on（“popupopen”，function（））{
var forma=$（'注册'）；
“提交”功能的形式（ev）{
ev.preventDefault（）；
$.ajax({
类型：forma.attr（'method'），
url:forma.attr（'action'），
数据：forma.serialize（），
成功：功能（数据）{
marker.closePopup（）；
marker.bindPopup（'Usuario registrado exitosament'）.openPopup（）；
}
});
});
});
}
功能汽车（e）{
e、 预防默认值（）；
$.ajax({
键入：“GET”，
url:“/registrados”，
数据类型：“json”，
成功：功能（d）{
$。每个（d.marcadores，职能（i，项目）{
marca=新的L.标记（[parseFloat（item.latitud）、parseFloat（item.longitud）]）
.addTo（map.bindpoop（）；
marcas.push（新的Marcador（marca，item.usuario，item.seccional，item.identificator））；
});
}
});
返回马尔卡斯；
}
map.on（'click'，onmaclick）；
功能clickMarcador（e）{
log（e.target+'--'+e.currentTarget）；
如果（e.target.id！==e.currentTarget）{
console.log（'hola'）；
}
e、 停止传播（）；
}
$（#registordos'）。在（'click'，cargarRegistros'）；

我只想扩展

L.Marker

类以包含所需的功能，例如，单击事件，您可以在触发标记的

onAdd

方法时将其挂钩，然后在

onRemove

方法上将其解锁：下面是代码中的一个示例（使用jQuery中的$.getJSON）：

下面是一个关于Plunker的工作示例：

这当然是非常粗糙的，在实际实现中，如果弹出窗口已经绑定，则可以检入

单击

事件，这样您就不会绑定它两次，但它可以让您很好地了解扩展

L.Marker

关于存储标记，您可以使用

L.LayerGroup

和一个用于映射的标记。创建标记时，将其添加到组中。这样，您就可以使用layergroup的实用方法，如

hasLayer

，

getLayer

，

clearLayers

，

eachLayer

等

---

下面是

L.LayerGroup

的参考资料：

非常感谢，现在我清楚地看到扩展marker类可以实现什么。。。

L.CustomMarker = L.Marker.extend({

  onAdd: function (map) {
    this.on('click', this.clickHandler);
    L.Marker.prototype.onAdd.call(this, map);
  },

  onRemove: function (map) {
    this.off('click', this.clickHandler);
    L.Marker.prototype.onRemove.call(this, map);
  },

  clickHandler: function (e) {
    $.getJSON('data.json', function (data) {
      e.target.bindPopup(data.myProperty);
      e.target.openPopup();
    }, this);
  }

});

L.customMarker = function (latLng, options) {
  return new L.CustomMarker(latLng, options);
}