处理prototype和jQuery，在同一页面中包含外部js文件

Dealing with prototype and jQuery including external js files in the same page

本文关键字：包含外 文件 js 一页 prototype jQuery 处理      更新时间：2023-09-26

我正在处理一个集成问题，处理一个有许多基于原型的脚本的旧网站。我必须将它集成到一个外部网站的模板中，该模板使用一个我无法控制的脚本（让我们称之为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>

现在，我尝试在script.js中重新定义externalFunction()，但仍然不起作用。

我重新声明如下：

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

我有两个问题：

  1. 有没有一种方法可以包含external-jquery-script.js，告诉脚本使用$运算符作为jQuery运算符
  2. 如果第一个问题的答案是"否"，你会建议我如何解决这个问题

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

由于我无法更改模板，除了"我的页面内容"区域，我决定覆盖模板的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>
相关文章：