Объект Jquery, преобразованный в обычную переменную после минимизации с помощью оптимизатора RequireJS r.js

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> <- не закрывается должным образом.

Насколько переменная... это, кажется, поведение по умолчанию для 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 - поэтому минификатор / углификатор кода изменит имена переменных на максимально короткие, другими словами, начиная с одного символа и часто в случайный порядок (хотя некоторые начинаются с a,b,c и т. д.). По умолчанию uglifier поймет, что window и т. д. является глобальным и не переименовывать его.

Если вы не завернули все в закрытие, вы должны начать с чего-то вроде $: window["jQuery"] так ваш местный вар $ будет правильным, когда произойдет переименование переменной, и она будет указывать на нужную вещь.

Если обернуть все в замыкание (обернуть функцию вокруг всего, что может вызвать ее немедленно), то вы передадите jQuery в качестве аргумента - часто вы также передаете глобальные переменные с более длинными именами, которые также используются как window а также document,

Как правило, вы включаете ваш скрипт в конец HTML или заключаете его в $() что эквивалентно состоянию document.ready.