7

我在 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在生产中执行 as jQuery 元素。

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

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

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

4

2 回答 2

0

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

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

和

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

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

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

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

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

于 2015-02-25T13:21:46.320 回答
0

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

至于变量 ..this 似乎是 的默认行为UgliyJS，它只是缩短了您作为优化的一部分提供的变量名称。它不应该引起任何问题...但是，如果您想阻止它，请尝试在选项下添加uglify: { no_mangle: true }到优化器设置：r.js

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

对于 Uglify2，请改用：

uglify2: {
  mangle: false
}
于 2015-02-20T21:53:28.450 回答