4

jquery-ui コードベースを RequireJs を使用するように適応させようとしています。以前使用していた専用ホストよりもはるかに遅い (ただしスケーラブルな) 仮想化クラウド サービスにデプロイしています。

私のページは、デフォルトではバニラ HTML の醜い大惨事です。この混乱を引き起こしているのは、適切なタブ コントロールとレイアウトを提供する JavaScript 関数の呼び出しだけです。実際、ページは長く縦にレイアウトされています...セクションが次々と....tabs()横方向のコントロールでそれらを単一のユニットに折りたたむ関数を呼び出す前に。

(私は jQuery UI の考え方で「正しくやっている」とかなり確信しています。最初からコードを使用して UI 全体を構築しないことで、少なくともJavaScript を無効にして見ることができます。誰もまだLynxを使用しているとは思えませんが、アクセシビリティの問題です...または、コンテンツが検索エンジンによって分析可能であることを確認します. これがコンテンツとUIの分離を達成するための不条理な方法であるという私の老人のスピーチは割愛します. :-/)

タグを使用し<script>てサードパーティ ライブラリの依存関係をロードし$(document).ready、jQuery UI ブードゥーを実行していたとき、ユーザーはバニラの醜い HTML を見たことはありませんでした。RequireJs を使用するようになったので、HTML の後page.jsでファイルが遅延し、非同期に読み込まれます... DOMready 処理に実際には必要ないライブラリを待っています。サーバーが遅いと、これは本当にひどいものになります。

もちろん、最初は CSS スタイルを使用して醜さを隠し、UI の準備が整うまで「読み込み中...」のグラフィックを重ねることもできます。それが最初に頭に浮かんだことであり、同様のアプローチがここで提案されています。

document.ready の前に Jquery UI インターフェイスが醜いように見える

(注: これはよくある問題のように思われるので、これを実行する RequireJs プラグインが存在するのではないかと思います。ありますか?)

いずれにせよ、以前はこれについて心配する必要はなかったようです...そして、もっと簡単な解決策が欠けているのではないかと思っています。RequireJs を使用している場合、ユーザーに「醜い」HTML が表示されないようにするにはどうすればよいですか?

4

3 に答える 3

3

CSS ウィザードリィを実行してから、RequireJs の「キック オフ」スクリプトでそれを非表示にすることをお勧めします。また、SEO への影響と JavaScript が無効になっているシナリオも考慮する必要があります。

結局のところ、それは HTML、CSS、および JavaScript にすぎないことを忘れないでください。そこにたどり着くためにどのようなテンプレート/コード生成システムを使用しても、最終的には、CSS でスタイル設定され、JavaScript でアニメーション化された HTML コンテンツにすぎません。

于 2012-05-15T20:53:23.810 に答える
1

JqueryMobileとRequireJSで同じ問題が発生しています。

私は最初にこのヒントに従ってみて、CSSを追加して「醜いHTML」を隠しました。

.requireJS-init { visibility: hidden;}
.requireJS-init.done { visibility: visible;}

そして、ページが起動したときに.requireJS-initを割り当て、別のクラスを追加してすべてがロードされたらページを削除します（最初のクラスも削除できます）。

ただし、これにより2つの問題が発生します
。1。ロードされているコンテンツによっては、ユーザーがしばらく空白のページを表示する
場合があります。

クラスフォームHTMLからBODY、ページコンテンツを保持する要素に移動しようとしましたが、実際には何も機能しませんでした。

はるかに簡単なCSSのみのソリューションは次のとおりです。

.ui-mobile-rendering:before { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0;         
    left: 0; 
    right: 0; 
    display: block; 
    height: 100%; 
    z-index: 0; 
    background:#fff url(../images/ajax-loader.gif) no-repeat center center; 
    content: "" 
    }

ui-mobile-renderingクラスは本体にあり、JQMはウィジェットの拡張を行います。ページが完了すると、クラスは削除されます。フルスクリーン：before（この場合は背景画像としてJQMローダーを使用）を追加することにより、レンダリングされるまでページ上のすべてを非表示にします。可視性の必要はありません：非表示、IE8は文句を言いません（ありがとう、IE8とFF3.6は：beforeを知っています）。

于 2012-07-25T08:46:58.550 に答える
1

node-browserify のようなものを使用してすべての Javascript モジュールを実行requireし、単一の JS ファイルをエンドユーザーにストリーミングする方が理にかなっていると私は主張します。

クライアントが明らかにオフライン モードでの実行を意図していないのに、TCP ハンドシェイクと HTTP ヘッダーのすべてを調べて、はるかに低いパフォーマンスで同じことを取得するのはなぜでしょうか?

ちょっとドク、こうすると痛い。

じゃあ、そんなことしないで！

于 2012-05-15T21:05:33.107 に答える