Question

我正在处理集成问题，处理一个基于原型的许多脚本的旧网站。我必须将它集成到外部网站的模板中，该模板使用我无法控制的脚本（我称之为external-jquery-script.js），使用jQuery。

external-jquery-script.js使用$运算符，显然脚本与原型冲突。该问题特别针对external-jquery-script.js中的一项功能（让我们称之为externalFunction()），以便模板正常运行。

我无法更改外部模板，但我可以填写可用的占位符。

在整合产生的页面中，我有以下内容：

<html>
  <!-- external template's stuff - begin -->
...
  <script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
  <!-- external template's stuff - end -->
  <!-- my page's stuff - begin -->
...
  <script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
  <script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
  <!-- my page's stuff - end -->
... <!-- other contents... --> ...
</html>

现在，我尝试在我的externalFunction()中重新声明script.js，但它仍然无效。

我重新宣布如下：

(function($){
window.externalFunction = function(){
... //copied as is from external-jquery-script.js
}
})(jQuery);

我有两个问题：

有没有办法让external-jquery-script.js告诉脚本使用$运算符作为jQuery运算符？
如果第一个问题的答案是＆＃34;否＆＃34;，您会如何建议我解决这个问题？

Answer 1

我找到了解决问题的方法，我将在这里分享。

由于我无法更改模板，除了＆＃34;我的页面内容＆＃34;区域，我决定覆盖模板的jQuery部分，自动下载脚本，通过cron，并在原始版本之后自动替换原型/冲突安全版本的jQuery调用，包括页面中的固定脚本。

现在，由于脚本添加了一个监听器$(document).ready，我还必须用Prototype版本替换它，从而禁用（在某种意义上）jQuery监听器。

以下是执行自动替换的脚本（$1表示作为参数传递的js脚本名称）：

#!/bin/bash
sed -i "s#\$(document)\.ready(#document\.observe(\'dom\:loaded\'\,#g" $1 ##THIS REPLACES $(document).ready with the prototype's equivalent
sed -i 's#\$(#jQuery(#g' $1 ##THIS REPLACES $( with jQuery(
sed -i 's#\$\.#jQuery\.#g' $1 ##THIS REPLACES $. with jQuery.
sed -i 's#(\$)#(jQuery)#g' $1 ##THIS REPLACES ($) with (jQuery)

在包含这个新脚本之前，我还添加了以下脚本，以避免冲突并阻止$(document).ready被触发：

<script>
<!--
        jQuery = jQuery.noConflict(true); //After this jQuery is callable only throught the jQuery variable
        jQuery.holdReady(true); //After this jQuery(document).ready stays pending, waiting for a jQuery.holdReady(false) that will never come, turning off the listener in the first jQuery script, that would cause problems otherwise
-->
</script>

所以，我现在可以使用外部模板，包括external-jquery-script.js的固定版本，在同一页面中同时使用jQuery和Prototype，完美地工作：

<html>
  <!-- external template's stuff - begin -->
...
  <script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
  <!-- external template's stuff - end -->
  <!-- my page's stuff - begin -->
...
  <script>
  <!--
        jQuery = jQuery.noConflict(true);
        jQuery.holdReady(true);
  -->
  </script>
  <script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
  <script type="text/javascript" src="http://www.my-website.com/js/external-jquery-script-fixed.js"></script>
  <script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
  <!-- my page's stuff - end -->
... <!-- other contents... --> ...
</html>

在同一页面处理原型和jQuery，包括外部js文件

1 个答案: