在多个事件上正确格式化和分发jquery按钮单击？

Question

现在，在一个按钮上单击“我拥有它”，以便它从两个文本框中获取数据，并将其用于

1）将推文附加到面板上，然后

2）在地图上放置图钉。

我的下一步是设置它，以便在单击按钮时对位置进行地理解码，然后执行相同的操作。 我觉得我的jquery.click函数真的变得越来越大，并且想知道是否存在一种标准的方法来“分离”它，使它看起来更漂亮，更易读。 您通常可以在被调用的jQuery文件中包含javascript函数，或者该怎么走？

这是我当前的jquery文件。 如您所见，它非常大，但发生的事情很简单：单击“搜索”按钮获取一些值，并在该位置设置新地图，然后访问我的Web服务器的信息，将其附加到面板上，并在其上放置图钉一张地图。

$(function () {

    $("#search-button").click(function() {
        // variables for google maps
        var LatValue = parseFloat($("#searchLat").val());
        var LonValue = parseFloat($("#searchLon").val());
        var myLatLng = {lat: LatValue, lng: LonValue};

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 12,
            center: myLatLng
        });

        $.getJSON(
            "http://localhost:3000/tw",

            {   
                geoSearchWord: $("#searchme").val(),
                geoSearchWordLat: $("#searchLat").val(),
                geoSearchWordLon: $("#searchLon").val(),
                geoSearchWordRad: $("#searchRadius").val()
            }

        ).done(function (result) {
            $("#fromTweets").empty();   

            console.log(result);
            for (i = 0; i < result.statuses.length; i++) {

                //Print out username and status
                $("#fromTweets").append('<b>' + "Username: " + '</b>' + result.statuses[i].user.screen_name + '<br/>');
                $("#fromTweets").append('<b>' + "Tweet: " + '</b>' + result.statuses[i].text + '<br/>');
                $("#fromTweets").append('<b>' + "Created at: " + '</b>' + result.statuses[i].created_at + '<br/>');

                if (result.statuses[i].geo !== null) {
                    //Print out the geolocation
                    $("#fromTweets").append('<b>' + "GeoLocation: " + '</b>' + "Lat: " + result.statuses[i].geo.coordinates[0] + " Lon: " + result.statuses[i].geo.coordinates[1] + '<br/>'+ '<br/>');

                    //dropping a new marker on the map for each tweet that has lat/lon values
                    //Multiplying by i * 0.0005 to space them out in case they are from the same gelocation while still holding
                    //the integrity of their location.
                    LatValue = parseFloat(result.statuses[i].geo.coordinates[0] + i*0.0005);
                    LonValue = parseFloat(result.statuses[i].geo.coordinates[1] + i*0.0005);
                    myLatLng = {lat: LatValue, lng: LonValue};
                    var newMarker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        animation: google.maps.Animation.DROP,
                    });
                } else {
                    $("#fromTweets").append('<b>' + "GeoLocation: " + '</b>' + "Cannot be identified" + '<br/>' + '<br/>')
                }
            }

        });
    });

Answer 1

您可以执行的最简单和显而易见的操作是，通过将独立的逻辑块提取到函数中来拆分代码：

就像这样：

var map;

function combineTweetsAjaxRequestData()
{
    return {   
        geoSearchWord: $("#searchme").val(),
        geoSearchWordLat: $("#searchLat").val(),
        geoSearchWordLon: $("#searchLon").val(),
        geoSearchWordRad: $("#searchRadius").val()
    };
}

function createGMap()
{
    return new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 12,
        center: {
            lat: parseFloat($("#searchLat").val()), 
            lng: parseFloat($("#searchLon").val())
        }
    });
}

function createGMarker(coords)
{
    var coordsFixed = {
        lat: parseFloat(coords[0] + i * 0.0005),
        lng: parseFloat(coords[1] + i * 0.0005)
    };
    return new google.maps.Marker({
        position: coordsFixed,
        map: map,
        animation: google.maps.Animation.DROP,
    });
}

function clearInfo() {
    $("#fromTweets").empty();
}

function appendInfo(title, text)
{
    $("#fromTweets").append('<b>' + title + ':</b> ' + text + '<br/>');
}

function processTweet(tw)
{           
    appendInfo('Username', tw.user.screen_name);
    appendInfo('Tweet', tw.text);
    appendInfo('Created at', tw.created_at);

    if (tw.geo !== null) {
        var twCoords = tw.geo.coordinates;
        appendInfo('GeoLocation', "Lat: " + twCoords[0] + " Lon: " + twCoords[1]);
        createGMarker(twCoords);        
    } else {
        appendInfo('GeoLocation', "Cannot be identified")
    }
}

function loadTweets() {
    $.getJSON(
        "http://localhost:3000/tw",
        combineTweetsAjaxRequestData()
    ).done(function (result) {
        clearInfo();
        console.log(result);

        result.statuses.forEach(processTweet);
    });
}

$(document).ready(function () {
    map = createGMap();
    $("#search-button").click(function() {
        loadTweets();
    });
});

现在，它可以很容易地阅读为文本。 乍一看，您的代码应易于阅读和理解。 如果非开发人员可以阅读并理解一些基本概念，那就更好了。

• 页面加载后会怎样？ 我们创建一个Google地图控件并加载推文
• 我们如何加载推文？ 我们通过合并来自输入的请求数据来发出AJAX请求
• 加载后会发生什么？ 我们清除当前信息并处理每条推文
• 我们如何处理一条推文？ 我们输出一些基本信息。 然后，我们输出地理位置信息（如果可用）。 否则，我们将输出错误。

现在，如果需要将信息添加到另一个源，则不会扩展或修改loadTweets方法-您将扩展或修改appendInfo方法，因为信息输出的逻辑封装在此处。