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")
]

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

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元素。

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

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

提示：我正在将脚本标记放入其中，并且当代码未缩小时，此方法正常工作。

Answer 1

首先，您的<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>＆lt; - 似乎没有正确关闭。

就变量而言......这似乎是UgliyJS的默认行为，它只是缩短了您作为优化的一部分提供的变量名称。它不会导致任何问题......但是如果您想阻止它，请尝试在选项下添加uglify: { no_mangle: true }到r.js优化工具设置：

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

对于Uglify2，请改用：

uglify2: {
  mangle: false
}

Answer 2

就纯技术说明而言，您可以使用诸如

之类的内容来改进代码

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

和

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

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

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

如果将所有东西都包装在一个闭包中（包裹一个函数可以立即调用它），那么你将传递jQuery作为参数 - 通常你也会传递更长的命名全局变量，它们也被用作window和document。

通常，您将脚本包含在HTML的末尾，或将其包装在$()中，该{{1}}等同于document.ready状态。

使用RequireJS优化器r.js进行缩小后，Jquery对象转换为正常变量

2 个答案: