3

さて、この例をできるだけ単純化しようと思います。これが私の問題です。私はノードを使用しており、HTMLを生成するためにjadeで表現しています。メインのlayout.jadeファイルがあります。このファイルの本文の最後には次のものが含まれています。

block scripts
  script(src='/javascripts/libs/jquery-1.8.1.min.js')

次に、次のコードを持つヒスイの部分（_shapes.jade）があります。

block append scripts
  script(src='/javascripts/wire.js')

次に、htmlを生成するjadeファイル（properties_panel.jade）があります。

extends ../layout

include _shapes

block controls
  include ../_controls

wire.jsファイルを実行するにはjQueryが必要です。翡翠からのhtml出力は、私が期待するとおりです。bodyタグの最後に正しい順序（jQueryが最初）のスクリプトタグのブロックがあります。

問題は、jQueryが最初にブラウザによってロードされていないことです。しかし、jQueryがロードされた後、ファイルも再度ロードされるようです。私のwire.jsファイルは次のような自己実行型の無名関数でラップされているため、これを推測しました。

!function (context, $) {
  console.log($);
}(this, window.jQuery);

そして、私のコンソールでは、2つのログを取得します。1つ目は「undefined」と表示され、2つ目はjQueryを正しくログに記録します。

ですから、ここに奇妙な部分があります。_shapes.jadeからスクリプト行をコメントアウトし、代わりにjQueryインポート行の後にlayout.jadeファイルに追加すると、まったく同じhtmlファイルが生成されますが、すべてが正しい順序で読み込まれます。

Chrome開発ツールを使用すると、[リソース]タブで読み込み順序を確認できます。また、htmlがまったく変更されていなくても、jadeファイルが同じ同じhtmlを生成する方法に応じて読み込み順序が変更されます。

私は何か間違ったことをしていますか？私は翡翠に比較的慣れていないので、そうかもしれません。

ありがとう！

4

1 に答える 1

1

シェイプで「extends layout」を使用する必要があります。

extends layout

block append scripts
   script(src='/javascripts/wire.js')
于 2012-12-29T19:48:20.893 に答える