开发中的有效 jQuery 在生产中失败

Posted 2023-05-07

【中文标题】开发中的有效 jQuery 在生产中失败

【英文标题】：Valid jQuery on Development fails on Production

【发布时间】：2010-09-15 14:33:48

【问题描述】：

我正在使用 jQuery 编写一个相当基本的脚本。但是，脚本的行为会有所不同，具体取决于我是在本地 Web 服务器 (localhost) 上还是在生产服务器上运行它。

在开发中，以下代码返回我期望的 html：

$('#objID').siblings('.mAddress').html();

在生产中，同样的语句返回undefined。

两台机器上的文档结构相同。我能找到的唯一区别是当我使用 Firebug 单步执行脚本时。在开发机器上，将手表放在 $('#objID').siblings('.mAddress') 上会产生 [ span#object ]，而在生产机器上，同样的手表会产生 [ [ span#object ] ] （注意双组方括号）。

有什么想法吗？

添加：

我已经验证这两个库是相同的。

我使用 Firebug 做了更多的试验。脚本的另一部分使用以下语句抓取一组元素：

$('.ParentColumn2').each(function(i)  ... )

在该函数的主体内，如果我在 this 上设置了手表，则在开发中 this 的值是我所期望的：div.ParentColumn2，但在生产中 this 的值返回看起来像一个数组：[ div.ParentColumn2, div.ParentColumn2, div.ParentColumn2, .....]

HTML 基本上是一个表格（我已经删除了不相关的 HTML，并且行重复）：

<table>  
 <tr>  
  <td>  
    <div class="ItemTemplate">  
      <div class="ParentColumn2">  
        <div><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address" class="lbl_Address mAddress">111 W Wacker Dr, </span><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_City" class="lbl_Address mCity">Chicago</span>&nbsp;<span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_PostalCode" class="lbl_Address mPostalCode">60601</span>&nbsp;<a href="javascript:MapMe(this);" id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_hypMap" class="hypMap">Map</a>&nbsp;&nbsp;<span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Area" class="mArea">Loop</span><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lt" class="mLt">41.8868010285473</span><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lg" class="mLg">-87.6312860701286</span>  
        </div>  
      </div>  
    </div>  
  </td>  
 </tr>  
 <tr>  
  <td>  
    <div class="ItemTemplate">  
      <div class="ParentColumn2">  
        <div><span id="dnn_ctr45874_ViewProjectGrid_GridView1_ctl03_lbl_Address" class="lbl_Address mAddress">...</span> ...  
        </div>  
      </div>  
    </div>  
  </td>  
 </tr>  
</table>

鉴于 HTML 都是由 .Net 生成的（不要让我开始），两台机器之间的 HTML 尽可能相同。

【问题讨论】：

您能与我们分享您拥有的 HTML 示例吗？

两台机器上的 HTML 代码是否完全相同？您的生产环境是否通过 AJAX 注入其他 HTML？

这是托管在 DNN 中的东西吗？如果是这样，您的开发机器是否包含与同一页面上的生产机器完全相同的模块？

【参考方案1】：

鉴于您有不同的行为，可以合理地假设 something 在两个页面之间有所不同，因此我的建议是将两个页面减少到保持当前行为的最低限度，然后看看是什么不一样。

【参考方案2】：

我不使用 .siblings() ...（或者不需要）...

根据 jquery docs .... 在 div（如下）上运行 .siblings() 不会返回任何内容，但在其中一个 p 上 $('p:first') 会返回另一个

<div><p></p><p></p></div>

尝试使用

$('#objID').find('.mAddress').html();

或

$('#objID').children('.mAddress').html();

或

$('#objID .mAddress').html();

这似乎很奇怪，它适用于开发但不适用于生产......但试试吧。

-布鲁斯

【讨论】：

我也推荐使用 .find()

【参考方案3】：

您的代码是否在 $(document).ready(function() ... ); ?

如果不是，这可能会导致不同的行为。在您的本地开发机器上，可能所有内容都加载得如此之快，以至于 DOM 树按您的 Javascript 调用的类型完成，但在生产服务器上，事情可能还没有完成。

虽然没有解释在 FireBug 中出现的额外嵌套括号。

【参考方案4】：

我想说几个要看的地方是缓存，在你的开发环境中，每一个请求都可能会重新加载所有内容，尝试在你的 javascript 包含标记的末尾放置一个“?asdfasfrandom”，以确保一切都得到更新了。

如果不是这样，您的 javascript 文件在您提供服务时是否会合并？例如，在 Rails 中，默认行为是将它们全部放入一个文件中，这可能会造成混乱。

如果不是这样，则可能是服务器上的 javascript 文件以不同的顺序加载，或者由于下载时间而以与本地不同的顺序执行。尝试在执行代码之前确保 dom 已准备就绪。

基本上，您的代码可能不是问题（假设您使用相同的浏览器并具有相同的 HTML），但是事情发生的顺序有问题。

【参考方案5】：

将与 prod 中相同的数据放入 dev 中，然后转储两者的视图源并进行差异。

为什么要使用兄弟属性而不仅仅是：

$('#objID .mAddress').html();

另外我认为兄弟姐妹和上面的都返回一个项目数组，而不仅仅是一个项目，所以我可能会选择这样的东西：

$($('#objID .mAddress').get(0)).html();

只返回第一项的 html。

【参考方案6】：

我不经常使用 jQuery，但我首先怀疑你的库不同步。

【讨论】：

我已经验证这两个库是相同的。