如何在需求下執行javascript

我正在使用jquery構建選項卡。我可以在標籤之間切換，並根據點擊哪個標籤來顯示/隱藏內容。如何在需求下執行javascript

真正需要的是基於哪個標籤點擊，我需要爲每個標籤調用不同的JavaScript。我不想加載頁面加載的所有javascirpts。我使用highcharts來建立圖表，這些圖表可能會非常沉重。我不想在頁面加載時加載所有這些javascript。我需要根據點擊哪個標籤來加載javascript。我如何輕鬆完成這項任何幫助？

現在這是我在做什麼：

這是對標籤

<script> 
    // Wait until the DOM has loaded before querying the document 
    $(document).ready(function() { 
     $('ul.tabs').each(function() { 
      // For each set of tabs, we want to keep track of 
      // which tab is active and it's associated content 
      var $active, $content, $links = $(this).find('a'); 

      // If the location.hash matches one of the links, use that as the active tab. 
      // If no match is found, use the first link as the initial active tab. 
      $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]); 
      $active.addClass('active'); 
      $content = $($active.attr('href')); 

      // Hide the remaining content 
      $links.not($active).each(function() { 
       $($(this).attr('href')).hide(); 

      }); 

      // Bind the click event handler 
      $(this).on('click', 'a', function (e) { 
       // Make the old tab inactive. 
       $active.removeClass('active'); 
       $content.hide(); 

       // Update the variables with the new link and content 
       $active = $(this); 
       $content = $($(this).attr('href')); 

       // Make the tab active. 
       $active.addClass('active'); 
       $content.show(); 

       // Prevent the anchor's default click action 
       e.preventDefault(); 
      }); 
     }); 
    }); 
</script>

這是一個樣本highchart JavaScript來創建圖表並將其綁定到div的

的JavaScript

<script type="text/javascript"> 
$(document).ready(function() { 
$.ajaxSetup({ cache: false }); 

//$(function() { 
function cdc1_web_cpu() { 

var timeout; 
    $.getJSON('cdc1_web_cpu.php', function(data) { 

     // Create a timer 

     // Create the chart 


    $('#web1_cpu').highcharts('StockChart', { 
      chart: { 
       borderColor: '#801500', 
       borderRadius: 20, 
       borderWidth: 1, 
       type: 'line', 
       events: { 
        load: function(chart) { 
         this.setTitle(null, { 

         }); 
        } 
       }, 
       zoomType: 'x' 
           } 
         )}; 
        )};

這是html

<ul class='tabs'> 
    <li><a href='#tab1'>HOME</a></li> 
    <li><a href='#tab2'>APPS</a></li> 
</ul> 
<div id='tab1'> 
    <div id="container"> 
     <table align="center"> 
     <tr> 
     <td> 
      <div id="web1_cpu" class="chart" style="width:550px; height:250px;"></div> 
     </td> 
     </tr> 
    </div> 
</div> 
<div id='tab2'> 
    <div id="container"> 
     <table align="center"> 
     <tr> 
     <td> 
      <div id="app_cpu" class="chart" style="width:550px; height:250px;"></div> 
     </td> 
     </tr> 
    </div> 
</div>

來源

2013-07-25 user1471980

如果你真的不希望加載所有的JS與頁面，那麼我強烈建議尋找到一個AMD腳本管理器，例如http://requirejs.org/ – Sethcran

你可能想加載所有的JS一次，但只有_execute_是相關/可見的部分。 – Mathletics

@Mathletics，是的，我該怎麼做？ – user1471980

的意見似乎已經涵蓋了答案，但我只想澄清，採取以下JavaScript：

function yeSawgHohgothNektu() { 
    // Execute a labyrinthine mammoth of 80 KB of complicated calculation code to summon 
    // SawgHogoth, the dark lord of Javascript code, and destroy the user's processor. 
}

......一旦該功能實際上是調用只會發生。加載80KB文件並解析其內容所花費的時間對於大多數瀏覽器來說通常很小。正如一位評論者所說，如果你真的想盡可能地優化這個時間，那就用AMD吧。它需要在另一端進行特別的定義，但這裏是如何調用的。

function onClickedBeginSummoning() { 
    // user has initiated the summoning ritual 
    require(['libraries/forbiddenhall/yeSawgHogothNektu'], function(ye) { 
    // libraries/forbiddenhall are directories containing JS files 
    ye(); 
    }); 
}

來源

2013-07-25 20:55:13 Katana314

如何在需求下執行javascript

回答

相關問題