1

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 オブジェクトについてあまり知りませんが、常に学習しているので、どうにかして初期化関数を他のすべてのオブジェクトを含むオブジェクトに変換しますか? （現在、JavaScriptオブジェクトについて私がどれだけ知っているかを考えると、それは実際には完全に狂っているかもしれません）

4

1 に答える 1

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

次に、次のように初期化オブジェクトを作成できます。

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コードに関しては、JSを使用してHTMLコードを挿入することはできるだけ避けることをお勧めします。それは良い習慣ではありません。

さらに、PHPコードをJSコードに混在させることもお勧めしません。JSコードにPHPから何かを提供する必要がある場合は、それらを分離して、data-*属性を使用することをお勧めします。

これがお役に立てば幸いです。

編集：フォーム送信イベントを処理する方法についての質問に答える際に、次のようなことを行うことができます：

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
    },
    ....
};
于 2013-03-04T10:55:39.297 に答える