javascript - 带有回调的多个版本的 jQuery

Question

我正在使用 2 个版本的 jQuery(CMS 需要 1.4，我需要 1.9 用于 flot/绘图)。我有这样的设置:

<script type="text/javascript">
    var jQueryOriginal = jQuery.noConflict(true);
</script>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="jquery.flot.time.js"></script>
 //Other libraries...

<script type="text/javascript">
   //Save the new jQuery.  
   var jq = jQuery.noConflict( true );
   //Restore the original one.
   jQuery = jQueryOriginal;  
   $ = jQuery;
</script>

我遇到的问题是在我的代码中我做了一个回调来做实际的绘图:

<script type="text/javascript">

    (function($) {
        $(document).ready(function () {
        $('input[id=startDate]').datepicker({ minDate: new Date(2012, 4 - 1, 30), maxDate: -7, dateFormat: 'yy-m-d' });  
        $('input[id=endDate]').datepicker({ minDate: new Date(2012, 4 - 1, 30), maxDate: -7, dateFormat: 'yy-m-d' });  
        // Default to 7 days ago
        var date = new Date(Date.now() - (7*24*60*60*1000)); 
        loadData($.datepicker.formatDate('yy-m-d', date),
            $.datepicker.formatDate('yy-m-d', date), 'plotData');
        })
    })(jq);

    function loadData(start, end, callback) {
        jq("#startDateLabel").text(start);
        jq("#endDateLabel").text(end);
        var URLString="/getJSONData.php?start="+start+"&end="+end+"&callback=?";
        jq.ajax({
            url: URLString,
            dataType: 'jsonp',
            jsonpCallback: callback,
            cache: true,
            success: function(json) {}
       });
    }

    function updateGraph() {
        loadData(jq('input[id=startDate]').val(),jq('input[id=endDate]').val(), 'plotData');
    }
</script>

我该怎么做才能使回调函数 (plotData) 可以使用我命名的 jQuery 变量 jq？

绘图数据如下所示:

function plotData(data) {
    var power = [];
    var energy = [];
    var totalEnergy = 0;
    var date = new Date();

    for ( var i = 0; i < data.length; i++) {
            date = parseInt(data[i].Time) * 1000; 
            totalEnergy = totalEnergy + parseFloat(data[i].Energy);
            power.push([ date, data[i].Power / 1000 ]);
            energy.push([ date, totalEnergy / 1000 ]);
    }

 .... //Snip 
    var plot = $.plot($("#container"), [ {
            label : "kWh",
            data : energy,
            color : "rgb(0, 99, 255)",
            yaxis : 2,
            lines : {
                    fill : true
            }
    }, {
            label : "kW",
            data : power,
            color : "rgb(215, 89, 39)",
            yaxis : 1
    } ], options);

}

Answer 1

我建议通过将 jq 分配给函数体顶部的 $ 来改变您的函数，或者将 jq 对象作为参数传递:

function plotData(args){
     var $ = jq;
}

或

function plotData(args, $){

}

plotData(...., jq);