我对 Javascript 有点陌生，但我知道我不应该在我的 HTML 中内联编写我的 Javascript，而是从外部文件加载它。我一直试图将它放在一个外部文件中，但由于我的代码的工作方式，我认为最好将它安排在可以在不同点调用的函数中。这方面的最佳做法是什么？
我猜测，我应该将所有 JS 包装在一个单独的文件中，然后用一个函数调用每个代码片段……但我不完全确定该怎么做，我也不知道知识渊博，知道如何提出问题以在线查看。
这是一个示例:
<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>
如果我完全偏离轨道，一些指导会很好。一切都以这种格式工作，但我真的不认为它是正确的。我知道这是一个相对愚蠢的问题，但我没有在任何我认为值得一问的地方找到真正好的答案。
最佳答案
我建议将不同的 js 文件放入不同的文件中，然后用 php 添加它们。
但为此，首先将 js 裁剪为独立的 block ，即一段 js 不应从另一段访问变量。
所以它看起来像:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<script type="text/javascript" src="myScript.js">
</script>
myScript.js 的内容
<!--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++;
关于javascript - 在代码中调用外部加载的javascript函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18039284/