如何在对象和 DRY 中移动 Javascript 函数

How to move Javascript functions within object and DRY?

本文关键字：移动 Javascript 函数 DRY 对象      更新时间：2023-09-26

下面介绍的函数重复相同的操作。我想尽可能多地移动到对象。也许一旦初始化对象中的正确方法，就可以直接从按钮？

.HTML：

<div id="map" style="width: 500px; height: 400px;"></div>
<button onclick="drawPoly()">Draw This Poly</button>
<button onclick="newPoly()">Create New Poly</button>
<button onclick="restorePolys()">Restore Polys</button>
<button onclick="dropMarker()">Drop Marker</button>

.JS：

var map;
var mapListener = null;
$(function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});
dropMarker = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.createMarker(e.latLng);
    });
}
drawPolyline = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}
newPolyline = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);
    tools.createPolyline();
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}
newPolygon = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);
    tools.createPolygon();
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}
var tools = {
    polyMarkers: [],
    polyLines: [],
    polyLine: null,
    // ...
    // mapListener: null,
    // tools: function(option) {
    //     if ( !! this.mapListener) google.maps.event.removeListener(this.mapListener);
    //     this.mapListener = google.maps.event.addListener(map, 'click', function(e) {
    //         option(e.latLng);
    //     });
    // },
    // and so on

编辑我得到了预期的功能，添加到工具中：

mapListener: null,
initFeature: function(type, aspect) {
    if ( !! this.mapListener) google.maps.event.removeListener(this.mapListener);
    if (aspect) this[aspect]();
    this.mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools[type](e.latLng);
    });
},

叫：

tools.initFeature(type, aspect);

如果我明白你想做的事情，也许有一个构建器函数会有所帮助，像这样的东西应该可以处理你的大部分案例用法。

function MakeNew(act1, act2) {
    return function() {
        if ( !! mapListener) google.maps.event.removeListener(mapListener);
        if ( act2 ) tools[act2]();
        mapListener = google.maps.event.addListener(map, 'click', function(e) {
            tools[act1](e.latLng);
        });
    };
};

dropMarker = MakeNew('createMarker');
newPolygon = MakeNew('addPoint', 'createPolygon');
createPolygon = MakeNew('addPoint', 'createPolyline');
相关文章：