Уменьшение глобальных переменных и поддержание потока функций

Question

Javascript не является моим первым языком выбора, и я не являюсь одним из них. Я все это хорошо разбираюсь. Функциональные вещи прекрасные, объекты, не так много.

Я смотрю, может ли кто-нибудь предложить варианты для работы со следующим сценарием.

function postcodeEntry(destination,postcode) { 
    "use strict"; 
    document.getElementById('googlemappostcode').innerHTML = <?php if ($_GET['page']==="fun") echo "<div id=\"map\"></div>' + ";?>'<form id="postcodeEntry" method="post" action="/" onsubmit="calcRoute(\'driving\',this.postcode.value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;">' 
     + '<h2>Get directions</h2>' 
     + '<fieldset>' 
     + '<input type="hidden" name="action" value="gmap-directions" />' 
     + '<p class="where"><a href="/contact/" onclick="geoLoc();return false;">Where am I?</a></p>' 
     + '<label for="postcode">Enter your postcode for directions</label>' 
     + '<input type="text" name="postcode" id="postcode" onfocus="checkthis(this,\'Your Postcode/Address:\')" onblur="checkthis(this,\'Your Postcode/Address:\')" value="Your Postcode/Address:" />' 
     + '<input type="submit" name="submitTravelType" value="Driving" id="gms_driving" onclick="calcRoute(\'driving\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" />' 
     + '<input type="submit" name="submitTravelType" value="Walking" id="gms_walking" onclick="calcRoute(\'walking\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" />' 
     + '<input type="submit" name="submitTravelType" value="Public Transport" id="gms_transit" onclick="calcRoute(\'transit\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" />' 
     + '<input type="submit" name="submitTravelType" value="Cycling" id="gms_bicycling" onclick="calcRoute(\'bicycling\',document.getElementById(\'postcode\').value,' + destination.hb + ',' + destination.ib + ',\'' + postcode + '\');return false;" />' 
     + '</fieldset>' 
     + '</form>' 
     + '<div id="directions"></div>'; 
} 

function initialize() { 
    "use strict"; 
    var contentString, destination, el, entryPanoId, i, image, infowindow, links, mapOptions, panoId, panoOptions, radius, shadow, shape; 
    /* Destination becomes a four part array. 1st being lat, 2nd being long, 3rd being a google maps latlng and the 4th being postcode */ 
    destination = [<?php echo $venue['latlong']?>]; 
    destination[2] = new google.maps.LatLng(destination[0], destination[1]); 
    destination[3] = '<?php echo $venue['postcode']?>'; 
    postcodeEntry(destination[2], destination[3]); 
    directionsService = new google.maps.DirectionsService(); 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    trafficLayer = new google.maps.TrafficLayer(); 
    streetviewService = new google.maps.StreetViewService(); 
    ... 

Когда функция инициализации называется, она делает бит и делает карту прекрасной. Запись почтового индекса/местоположения работает отлично. На самом деле все работает, никаких проблем с этим.

Мой вопрос заключается в том, что некоторая информация отбрасывается в форму почтового индекса, возврат из этой формы относится к функциям geoLoc или calcRoute. Это, конечно, означает, что я теряю контакт с чем-либо, установленным в функции инициализации.

Это означает, что я должен использовать довольно много глобальных переменных, включая, но не ограничиваясь, каждый из этих элементов в показанном сегменте скрипта.

Я пытаюсь узнать больше о языке и стать более опытным в его использовании. В результате я хотел бы (в основном, из чистого упрямства) попытаться уменьшить глобальные значения до одного (если это возможно) или как можно меньше.

Есть ли способ решить эту проблему? Я не знаю много о javascript-объектах, но я все время учусь так, чтобы каким-то образом превратить функцию initialize в объект, который затем содержит все остальные объекты? (Учитывая, насколько мало я знаю об объектах javascript в настоящее время, на самом деле это может быть совершенно безумно)

Answer 1

Обычно я использую конструктор/прототип (забыли, что такое правильный термин), когда мне нужно сделать что-то вроде этого.

например.

// This is the constructor 
function initialise(){ 
    // Add various settings values here 
    this.foo = 'bar'; 
} 

// These are some publicly accessible methods 
initialise.prototype = { 
    alertFoo: function(){ 
     alert(this.foo); // The value of foo can be accessed via this.foo 
    }, 

    consolelogFoo: function(){ 
     console.log(this.foo); 
    } 
} 

Вы можете создать объект Initialise, например, так:

var obj = new initialise(); 

и вызвать общественные функции следующим образом:

obj.alertFoo(); 

Это лишь краткий пример такого подхода. Вам нужно будет реализовать свой код самостоятельно, но чтобы дать вам краткое представление о том, как вы можете это сделать, вот что я сделал бы.

function initialize(options){ // options can be an object with stuff from data-* attributes 
    this.destination = {}; 
    this.destination.coords = new google.maps.LatLng(options.lat, options.long); 
    this.destination.postcode = options.postcode; 
    this.directionsService = new google.maps.DirectionsService(); 
    this.directionsDisplay = new google.maps.DirectionsRenderer(); 
    this.trafficLayer = new google.maps.TrafficLayer(); 
    this.streetviewService = new google.maps.StreetViewService(); 
    .... 
} 

initialize.prototype = { 
    geoLoc: function(){ 
     // do stuff 
    }, 

    calcRoute: function(){ 
     // do stuff 
    } 
} 

Таким образом, когда вам необходимо обновить значение, например. координаты назначения, вы должны сообщить своему публичному методу об обновлении свойства this.destination.coords.

Что касается HTML-кода, я бы посоветовал вам избегать инъекции HTML-кода с использованием JS, насколько это возможно. Это не очень хорошая практика.

Кроме того, я также не рекомендую смешивать PHP-код в вашем JS-коде. Лучше держать их отдельно и использовать атрибуты data- *, когда вам нужно предоставить код JS из PHP.

Надеюсь, это поможет.

EDIT: В ответ на ваш вопрос о том, как обработчик отправки формы события, вы можете сделать что-то вроде этого:

function initialize(){ 
    .... 
    this.form = document.form1; // Assuming you have a form called form1 
    this.init(); 
} 

initialize.prototype = { 
    init: function(){ // I usually use this approach for attaching event handlers and other stuff so as keep the constructor clean, and separate the concerns 
     this.form.onsubmit = this.formHandler; 
    }, 
    .... 
    formHandler: function(){ // This is the form handler 
     alert(this.textField1.value); // Assuming form1 has a field called textField1 
     return false; // This will prevent the form from being submitted via traditional page POST request 
    }, 
    .... 
};