Вызов внешних функций javascript в коде

Я немного новичок в Javascript, но знаю, что знаю, что я не должен писать свой 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>

Если я полностью покинуть трек, некоторые рекомендации, было бы хорошо. Все работает в этом формате, но я действительно не думаю, что это правильно. Я знаю, что это относительно глупый вопрос, но вместо того, чтобы найти действительно хороший ответ, я думал, что это стоит того.

источник

2013-08-04 Herp

Это зависит от того, где вы положили 'script' теги. По большей части теги «script» загружаются на место при загрузке страницы. Если страница сначала обрабатывается как PHP, вам может потребоваться указать ее на то, как вы ее написали. Один из вариантов заключается в том, чтобы инициализировать JS-скрипты в общей функции, называемой 'init()', которая установлена как действие по умолчанию для события document.onload. – abiessu

Я предполагаю, что правильный способ сделать это - загрузить в JS-файл сразу после файла CSS и использовать что-то вроде [this] (http://stackoverflow.com/a/9530992/744961), чтобы вызвать инициализацию функция, например – Herp

Да, но более того, вы должны зависеть от того, что ваш PHP-код завершен до того, как выполняется любой Javascript-код. Кроме того, да, поместите все функции в (внешний) файл (ы). Тогда им легче управлять должным образом. – abiessu

Я бы предложил разместить разные пикеты js в разные файлы & добавить их с 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 в коде

ответ

Смежные вопросы