在代码中调用外部加载的javascript函数
我对Javascript有点陌生，但我知道我不应该用HTML内联编写Javascript，而是从外部文件加载它。我一直试图将它放在一个外部文件中，但由于我的代码的工作方式，我认为最好将它安排在可以在不同点调用的函数中。这方面的最佳做法是什么 我猜，我应该把所有的JS封装在一个单独的文件中，然后用一个函数调用每个代码片段。。。但我不完全确定如何做到这一点，我也没有足够的知识，不知道如何提出这个问题，看看网上 以下是一个示例：在代码中调用外部加载的javascript函数,javascript,html,css,Javascript,Html,Css,我对Javascript有点陌生，但我知道我不应该用HTML内联编写Javascript，而是从外部文件加载它。我一直试图将它放在一个外部文件中，但由于我的代码的工作方式，我认为最好将它安排在可以在不同点调用的函数中。这方面的最佳做法是什么 我猜，我应该把所有的JS封装在一个单独的文件中，然后用一个函数调用每个代码片段。。。但我不完全确定如何做到这一点，我也没有足够的知识，不知道如何提出这个问题，看看网上 以下是一个示例： <html> <script type="text/j
<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>
var locationLat=新数组（）；
var locationLong=新数组（）；
var postrl=新数组（）；
var postExcept=新数组（）；
var postTitle=新数组（）；
var featImg=新数组（）；
var i=0；
位置lat[i]=“”；
locationLong[i]=“”；
姿势[i]=“”；
后摘录[i]=“”；
职称[i]=“”；
特征[i]=“”
i++；
函数初始化（）{
google.maps.visualRefresh=true；
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（37.09024，-95.712891），
disableDefaultUI:true，
};
var桩=位置横向长度；
var j=0；
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
var place=新数组（）；
while（posts！=j）
{
var image='/location_marker.png'；
var mylatng=new google.maps.LatLng（locationLat[j]，locationLong[j]）；
place[j]=新的google.maps.Marker({
职位：myLatLng，
地图：地图，
图标：图像，
url:postrl[j]，
摘录：后摘录[j]，
标题：postTitle[j]，
封面：featImg[j]
});
google.maps.event.addListener（place[j]，'click'，function（）{
map.panTo（this.getPosition（））；
map.setZoom（8）；
$（'#spantext'）.html（this.title）；
$（'#poste'）.html（本节选）；
$（'.fillme'）.html（''）；
$（'.readmore'）.html（''）；
$（'.sidebar'）.show（）.stop（）.animate({
“宽度”：“400px”，
“不透明度”：“1”
}, 500);
});
j++；
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
如果我完全偏离了轨道，一些指导会很好。所有东西都是这种格式的，但我真的不认为它是正确的。我知道这是一个相对愚蠢的问题，但不是在我认为值得问的任何地方找到一个真正好的答案。我建议将不同的js图片放入不同的文件中，并用php添加它们 但为此，首先将js裁剪为独立的块，即一个js不应该从另一个js访问变量 所以它看起来像：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<script type="text/javascript" src="myScript.js">
</script>
<!--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++;
位置lat[i]=“”；
locationLong[i]=“”；
姿势[i]=“”；
后摘录[i]=“”；
职称[i]=“”；
特征[i]=“”
i++；
脚本scriptinit（）document.onload