0

私は Javascript にやや慣れていませんが、Javascript を HTML とインラインで記述するのではなく、外部ファイルからロードするべきであることを十分に認識しています。私はそれを外部ファイルに入れようとしていましたが、私のコードの動作方法のために、さまざまな時点で呼び出すことができる関数に配置する方が良いと思います. これのベストプラクティスは何ですか?

推測では、すべての JS を 1 つのファイルにラップしてから、各コード フラグメントを関数で呼び出す必要があると思いますが、その方法が完全にはわかりませんし、十分な知識もありません。オンラインで見回すために質問をする方法を知っています。

サンプルは次のとおりです。

<html>
<script type="text/javascript"> <!--Create the arrays-->
    var locationLat = new Array();
    var locationLong = new Array();
    var postURL = new Array();
    var postExcerpt = new Array();
    var postTitle = new Array();
    var featImg = new Array();

    var i = 0;
</script>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<script type="text/javascript"> <!--Load data from Wordpress into the arrays so we can use them on a map later-->
    locationLat[i] = "<?php echo get_post_meta( get_the_ID(), 'locationLat', true ) ?>";
    locationLong[i] = "<?php echo get_post_meta( get_the_ID(), 'locationLong', true ) ?>";
    postURL[i] = "<?php echo get_permalink( $id );?>";
    postExcerpt[i] = "<?php echo  get_the_excerpt();?>";
    postTitle[i] = "<?php echo get_the_title($ID);?>";
    featImg[i] = "<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>"

    i++;
</script>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<script type="text/javascript">
function initialize() { <!--**I tried putting this function into an external JS file and calling it onLoad with body but it didn't do anythin**g-->
    google.maps.visualRefresh = true;
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024,-95.712891),
        disableDefaultUI: true,
    };

    var posts = locationLat.length;
    var j = 0;
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    var place = new Array();

        while (posts != j)
        {
            var image = '<?php echo get_template_directory_uri(); ?>/location_marker.png';
            var myLatLng = new google.maps.LatLng(locationLat[j],locationLong[j]);

            place[j] = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                url: postURL[j],
                excerpt: postExcerpt[j],
                title: postTitle[j],
                cover: featImg[j]
            });   

            google.maps.event.addListener(place[j], 'click', function() {
            map.panTo(this.getPosition());
            map.setZoom(8);

            $('#spantext').html(this.title);
            $('#poste').html(this.excerpt);
            $('.fillme').html('<img src="' + this.cover + '">');
            $('.readmore').html('<p><a href="' + this.url + '">Read more ></a>');
            $('.sidebar').show().stop().animate({
                'width' : '400px',
                'opacity' : '1'
            }, 500);
            });
            j++;
        }
} 

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<body>

私が完全に軌道から外れている場合は、いくつかのガイダンスが良いでしょう。すべてがこの形式で機能しますが、それが正しいとは本当に思いません。これが比較的ばかげた質問であることは承知していますが、どこでも本当に良い答えを見つける代わりに、尋ねる価値があると思いました.

4

1 に答える 1