在代碼中調用外部加載的javascript函數

我對JavaScript有點新，但是知道的我知道我不應該用我的HTML內聯我的Javascript，而是從外部文件加載它。我一直在試圖把它放在一個外部文件中，但由於我的代碼的工作方式，我認爲最好將它安排在可以在各個點調用的函數中。最佳做法是什麼？在代碼中調用外部加載的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>

如果我完全偏離了軌道，一些指導，將是一件好事。一切工作在這種格式，但我真的不認爲這是正確的。我知道這是一個相對愚蠢的問題，但代替在任何地方找到真正好的答案，我認爲這值得提問。

來源

2013-08-04 Herp

這要看你把'script'標籤。大部分情況下，當頁面加載時，'script'標籤被加載到位。如果頁面首先作爲PHP進行處理，那麼您可能需要將其分解爲如何編寫它。一種選擇是將JS腳本初始化爲一個名爲'init（）'的公共函數，該函數被設置爲'document.onload'事件的默認行爲。 – abiessu

我猜這樣做的正確方法是在CSS文件之後立即加載我的JS文件並使用類似[this]（http://stackoverflow.com/a/9530992/744961）來調用初始化功能，例如 – Herp

是的，但更重要的是，您必須依賴您的PHP代碼在執行任何Javascript代碼之前完成。另外，是的，將所有功能放在（一個）外部文件中。然後他們更容易正確管理。 – abiessu

我會建議把js的不同pice放到不同的文件&用php添加它們。

但是，首先要定製js爲獨立的塊，即一塊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++;

來源

2013-08-04 03:10:39 loxxy

在代碼中調用外部加載的javascript函數

回答

相關問題