Including jqPlot files in particular order

问题

Is there a particular order that jQPlot has to be included in a header? Currently I'm using jQMobile, but for some reason my jqPlot BarRenderer.js isn't being recognized...

<head>  
    <!-- CSS -->
  <link rel="stylesheet" href="./signup.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /> 

  <!-- Modernizer -->
  <script type="text/javascript" src="./modernizr.custom.56582.js"></script>
  <!-- jquery -->
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

   <!-- simpleDiaglo2 -->
  <script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
  <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
  <!-- Bar Chart -->
  <script class="include" language="javascript" type="text/javascript" 
        src="./jquery-jqPlot/jquery.jqplot.js"></script>
 <script class="include" language="javascript" type="text/javascript" src="./jquery-jqPlot/plugins/jqplot.barRenderer.min.js"></script>

</head>

回答1:

An example loading order might be jQuery, jqplot, main renderer(s), axis renderer, then point labels. Order is dependent on project dependencies.

You are including JS from CDNs which is good. But in your example, you have JavaScript included in the <head> of the page. You should include your JS just above the </body> tag, to speed page load times. CSS should be included in the <head> area.

The newly updated official jqplot example page "Bar Charts" shows this loading order as documentation:

Documented order:

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />

Note that both the actual source and the documentation of the official page appears to have an error - jqplot is being loaded twice. However, they load the CSS in the header properly in the actual source - the example shows it loading in the footer with the JS which is improper. Here's the actual JS loading order in the example page:

Actual order on example page:

<!-- Don't touch this! -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<!-- End additional plugins -->

References: http://www.jqplot.com/deploy/dist/examples/barTest.html, http://developer.yahoo.com/performance/rules.html, personal experience

来源：https://stackoverflow.com/questions/11747241/including-jqplot-files-in-particular-order

标签

jquery-mobile

jqplot