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なりました。したがって、これはプロダクションで as jQuery 要素tを実行することを拒否しました。$el

これは問題ですが、なぜこれが発生するのかわかりません。なぜこれが私に起こるのか、誰でも説明できますか、ありがとう。

更新:縮小されたコードは問題ではありませんでしたが、配列内のノードが適切にロードされる前にスクリプトが実行されましたが、ドキュメントの準備が整った後に関数を呼び出しています。つまり、DOM を完全にロードする必要があります。

ヒント: script タグを に入れています。これは、コードが縮小されていない場合に適切に機能します。

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"]ローカル$変数が正しくなり、正しいものを指しているようにする必要があります。

すべてをクロージャーでラップする場合 (すべてを関数でラップするとすぐに呼び出すことができます)、jQuery を引数として渡しwindowますdocument。

通常、スクリプトは HTML の最後に含めるか$()、document.ready 状態と同等の 内にラップします。

于 2015-02-25T13:21:46.320 に答える
0

まず、<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
}
于 2015-02-20T21:53:28.450 に答える