私は現在、主にリソースローダーのためにrequirejsを使用しています。フォールバックを管理する方法が気に入っています。
私の JavaScript アプリはまったく複雑ではなく、いくつかの jQuery UI ウィジェットとその他の微調整だけです。
requirejs を使い始めるまで、FOUC が何であるかさえ知りませんでした。それは非常に目立つので、現時点では次の方法で回避しています。
var protect_from_FOUC = function(element) {
if(typeof element === 'string') {
element = document.querySelector(element);
}
element.classList.add('ui-helper-hidden');
};
<div id="main" class="main_block" role="main">
<!-- a block affected by FOUC -->
</div>
<script>protect_from_FOUC('#main');</script>
そして私のスクリプトでは：
require(['jquery', 'jquery-ui' /*, ...*/], function($) {
var recover_from_FOUC = function(element) {
$(element).show({
effect: 'blind',
duration: 200
}).removeClass('ui-helper-hidden');
};
$(document).ready(function() {
// Themed buttons:
$(':button, :submit, :reset, .button').button();
// ... Some other similar changes
recover_from_FOUC('#main');
}); // document.ready
}); // require
これは私が持っている最高のものであり、私が見つけた主題に関するすべてのオンライン リソースは、これらの線に沿ったものを推奨しています。
私の質問は、UI のみに影響を与えるスクリプトについて話していることを考えると、requirejs はそれだけの価値がありますか? 私が言ったように、私はそのリソースフォールバックシステムを使い続けたいと思っていますが、「FOUCのパッチ適用」全体は逆効果のようです...
すべての jQuery UI の例には head にスクリプトが含まれていますが、インターネットの誰もが、body を閉じる前に、または非同期ローダーを使用してスクリプトを含めることを推奨しています。このアドバイスは「非 UI」スクリプトにのみ適用されますか?
そのような場合、何が最善でしょうか？
近いとはいえ、これは単なる「FOUC の質問を回避する方法」ではないことに注意してください。
編集: my page と my に含まれる外部ファイルを追加するrequire.config:
<!-- This is in my head right below the meta tags and exactly in this order -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<!-- Keep before the site css to allow overriding jquery's style -->
<link rel="stylesheet" href="style/lib/jquery-ui/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" href="style/lib/chosen/chosen.css"/>
<link rel="stylesheet" href="style/lib/icheck/minimal/yellow.css">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/style.css"/>
<!-- Here I have the definition of `protect_from_FOUC` in an inline script -->
<script data-main="js/main" src="js/lib/require.js"></script>
main.js で:
require.config({
paths: {
// Common:
'jquery': ['//code.jquery.com/jquery-2.0.3.min', 'lib/jquery'],
'sugar': ['//cdnjs.cloudflare.com/ajax/libs/sugar/1.3.9/sugar.min', 'lib/sugar'],
// UI:
'jquery-ui': ['//code.jquery.com/ui/1.10.3/jquery-ui.min', 'lib/jquery-ui'],
'autosize': ['//cdnjs.cloudflare.com/ajax/libs/autosize.js/1.17.1/autosize-min', 'lib/jquery.autosize'],
'chosen': ['//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.15/chosen.jquery.min', 'lib/chosen.jquery'],
'icheck': ['lib/jquery.icheck'],
// django i18n:
'gettext': [translations_url + '?noext']
},
shim: {
'jquery-ui': {
deps: ['jquery']
},
'autosize': {
deps: ['jquery']
},
'chosen': {
deps: ['jquery']
},
'icheck': {
deps: ['jquery']
}
}
});
require(['style', 'interaction']);