使用 RequireJS 优化器 r.js 缩小后，Jquery 对象转换为普通变量

Question

我在 CoffeeScript 中有这个功能

render: -> 
_.each @$elements, ($el) =>
  if $el[0].id is 'tabs-div'
    emptySlate = "<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>"
    @setEmptyPlacholde($el, emptySlate)
    return 

  @setEmptyPlacholde($el)


setEmptyPlacholde: ($el, emptySlate)->
emptySlateHTML = emptySlate or "<h3 class='js-empty-slate'>no data available</h3>"
if $el.hasClass('mobile-os-con') or 
   $el.hasClass('time-of-visit-con') or 
   $el.hasClass('gender-visit-con') or 
   $el.hasClass('time-redemption-sales-con') or 
   $el.hasClass('gender-redemption-con')

  $el.children().hide()
else
  $el.empty()
$el.append emptySlateHTML 

$elements 是一个 jQuery 变量，它使用这样的数组：

$elements: [
$("#tabs-div")
$("#visits-male")
$("#visits-female")
$("#days-of-visits")
$(".time-of-visit-con")
]

当我使用使用 Uglify 的 RequireJS 优化器 r.js 时，生成的缩小代码.. 看起来像这样：

render:function(){var e=this;return _.each(this.$elements,function(t){var n;if(t[0].id==="tabs-div"){n="<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>",e.setEmptyPlacholde(t,n);return}return e.setEmptyPlacholde(t)})}

在之前的缩小代码中，$el 变成了t .. 所以这拒绝在生产中将$el 作为 jQuery 元素执行。

这是问题所在，但我不知道为什么会这样。谁能解释一下为什么会发生这种情况，谢谢。

更新：缩小的代码不是问题，而是在数组中的节点正确加载之前执行的脚本，但是我在文档 ready 之后调用函数表示 DOM 必须完全加载。

提示：我将脚本标签放在 中，当代码没有被缩小时，这可以正常工作。

Answer 1

仅在纯粹的技术说明上，您可以通过以下方式改进代码 -

$elements: $("#tabs-div,#visits-male,#visits-female,#days-of-visits,.time-of-visit-con")

和

$elements.filter("#tabs-div")

至于变量重命名 - 变量名称对任何东西都没有任何区别，除非它用于公共 API - 因此代码压缩器/uglifier 会将变量名称更改为尽可能短，换句话说，从单个字符开始，并且通常以随机顺序（尽管有些从 a、b、c 等开始）。默认情况下，uglifier 会理解 window 等是全局的并且不会重命名它。

除非您将所有内容都包装在一个闭包中，否则您应该从 $: window["jQuery"] 之类的内容开始，这样当变量重命名发生时您的本地 var $ 将是正确的，它将指向正确的东西。

如果将所有内容包装在一个闭包中（在所有内容周围包装一个函数可以立即调用它），那么您可以将 jQuery 作为参数传递 - 通常您还会传递更长的命名全局变量，这些变量也会像 window 和 @987654327 这样使用@。

通常，您将脚本包含在 HTML 的末尾，或将其包装在 $() 中，这相当于 document.ready 状态。

Answer 2

首先，您的<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>

就变量而言..这似乎是UgliyJS 的默认行为，它只是缩短了您在优化过程中提供的变量名称。它应该不会引起任何问题...但是，如果您想阻止它，请尝试在选项下将 uglify: { no_mangle: true } 添加到 r.js 优化器设置：

english: {
  ..your settings...
  options: {
   ...your other options...
    uglify: {
      no_mangle: true
    },
  }
}

对于 Uglify2，改用这个：

uglify2: {
  mangle: false
}