Question

设置

我有一个脚本，该脚本可以在可能已经包含旧版jQuery的页面上使用noConflict（true）加载jQuery。我的脚本使用模块内置在节点中，并使用browserify打包到一个文件中。

问题

我无法从其他模块正确地确定我的函数范围，以保留通过noConflict（）设置的变量$。例如，假设某个站点已经加载了jQuery 1.8，并且我的脚本已加载到页面上并加载了jQuery v.3.2

<!-- Client site loads old version of jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>

<!-- Our script loads via ajax as a self executing anonymous function.
Just using this scrip tag as an example -->
<script src="myScript.js"></script>

// Contents of myScript.js is bundled with Browserify and hosted
//on our server.  Here is the pre-Browserify code: 

var otherModule = require('./funcB')

//check version of jQuery and load newer version if necessary
if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 3.0)) {
  //loadScript (not shown) is just a function that adds a script tag via
  //ajax to the site <head>
  loadScript("https://code.jquery.com/jquery-3.2.1.min.js", function(){
      jQuery321 = jQuery.noConflict(true);
      funcA(jQuery321);
  });
  } else {
      funcA(jQuery);
}

var funcA = function($){ 
    $('document').ready(function(){
    
      console.log('jquery in funcA: v' + $.fn.jquery)  
      //outputs:  "jquery in funcA: v3.2.1"
      otherModule.funcB();  
      //outputs: "jquery in funcB: v1.8.1"
      funcC();  
      //outputs: "jquery in funcB: v3.2.1"
      
    })
    
    function funcC(){
      console.log('jquery in funcC: v' + $.fn.jquery)
    }  
}

//code from otherModule --> funcB.js 

exports.funcB = function(){
  console.log("jQuery in funcB: v" + $.fn.jquery)
}

module.exports = exports;

问题显然，这按预期工作，但是有没有办法在模块otherModule中保留$作为对jQuery v3.2.1的引用？也许使用Browserify转换？

将我所有的模块都移到funcA中，以便正确地确定函数的范围当然是一个巨大的难题，因此，如果有解决方法，那就太好了。我尝试将我的require语句移到funcA中，还尝试将$传递到funcB中，但两者都没有用。

感谢您的帮助！

Answer 1

感谢贝尔吉的小费！它引导我朝着正确的方向前进。现在，模块中$的所有版本均为3.2.1，而浏览器控制台中的$为1.8.1

注释表示新代码：

var jQuery321;    //add variable name for exporting

var otherModule = require('./funcB')

//now we set jQuery321 to the proper version of jQuery to export
if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 3.0)) {

  loadScript("https://code.jquery.com/jquery-3.2.1.min.js", function(){
      jQuery321 = jQuery.noConflict(true);
      funcA(jQuery321);
  });
  } else {
      jQuery321 = jQuery;   //added this line
      funcA(jQuery);
}

var funcA = function($){ 
    $('document').ready(function(){
    
      console.log('jquery in funcA: v' + $.fn.jquery)  
      otherModule.funcB();  
      funcC();  
      
    })
    
    function funcC(){
      console.log('jquery in funcC: v' + $.fn.jquery)
    }  
}

export { jQuery321 };   //export proper version of jQuery

//code from otherModule --> funcB.js 

import { jQuery321 as $ } from '/myScript.js';  //add import statement

exports.funcB = function(){
  console.log("jQuery in funcB: v" + $.fn.jquery)
}

module.exports = exports;

模块，函数范围和jQuery noConflict（）问题

1 个答案: