2

私の実際のプロジェクトでは、ユーザーは自分のWebサイトの「編集モード」に入るためにボタンをクリックするオプションがあります。ボタンをクリックした後、いくつかのJSファイルとCSSファイルをダウンロードする必要があり、次のコードを使用してダウンロードしていました。

//Start edition mode
(function(){
    $.get('/helpers/edit/v/edit.php',function(data){
        $(data).appendTo('body');
        var css = '/helpers/edit/css/edit.css';
        $.get(css,function(data){
            $('<link/>')
                .attr({
                    'rel':'stylesheet',
                    'href':css
                }).appendTo('head');
            $("body").trigger("editReady");
        });
    });
})();

正常に動作しますが、JSファイルとCSSファイルをさらに挿入する必要があり、jquery getリクエストをネストし続けると、コードが醜くなり、管理が困難になります。これは避けたいので、これはおそらく最善の方法ではないことを示しています。タスクを実行します。

また、最初のgetリクエスト内でYep Nope（プロジェクトの他の部分ですでに使用しています）を使用しようとしましたが、機能しないようです（エラーメッセージは表示されませんが、機能しません）。

誰かがこれをそれほど醜くならず、主に管理しやすい方法でこれを行う方法を知っていますか（すべてのJS / CSSが適切に含まれているときにイベントをトリガーする必要があることを考慮して）？

前もって感謝します！

4

3 に答える 3

1

最近、複数のソースから JSON をロードする際に同様の問題が発生しました。そのコードを変更して、これを思いつきました。その要点は、さまざまな URL への get リクエストをループし、完了したリクエストの数が data_urls 配列内の URL の数と同じになったときに「editReady」イベントをトリガーすること(i = data_urls.length)です。

私はもともとこれをCoffeeScriptで書いたので、括弧か何かを台無しにした可能性があります...

function() {
  var data_urls = ['/helpers/edit/v/edit.php', '/helpers/edit/css/edit.css'];
  var i = 0;
  var _i, _len;
  for (_i = 0, _len = data_urls.length; _i < _len; _i++) {
    $.get(data_urls[i], function(data) {
      if (data_urls[i].match(/\.php/).length > 0) {
        $(data).appendTo('body');
      } else if (data_urls[i].match(/\.css/).length > 0) {
      $('<link/>')
        .attr({
          'rel':'stylesheet',
          'href':css
        }).appendTo('head');
      }
      i += 1;
      if (i == data_urls.length) {
        $("body").trigger("editReady");
      }
    });
  }
}
于 2012-09-04T19:05:40.960 に答える
1

cssおよびjsファイルパスの配列を作成し、それらを繰り返してロードできると思います

$.get('/helpers/edit/v/edit.php',function(data){
    $(data).appendTo('body');
    var css = ['mycss1.css','mycss2.css','mycss3.css'];
    $.each(css,function(index, elem){
       $('<link/>')
            .attr({
                'rel':'stylesheet',
                'href':elem
         }).appendTo('head');
    });

    var js = ['myjs1.js','myjs2.js','myjs3.js'];
    $.each(js,function(index, elem){
       $('<script></script>')
            .attr({
                'type':'text/javascript',
                'src':elem
         }).appendTo('head');
    });

    $("body").trigger("editReady");

});

これが役立つことを願っています。

于 2012-09-04T19:06:12.460 に答える
1

head.js http://headjs.com/のようなスクリプト ローダーを使用できます。

require.js がニーズに合っているようです: http://requirejs.org/

また言及: LabJS http://labjs.com/および YepNope http://yepnopejs.com/

YepNope と LabJS の代替

ええいいえ、とても簡単に思えます。機能が injectJs()あり、injectCss

yepnope.injectJs("jquery.js", ...
yepnope.injectCss("print.css", ...
于 2012-09-04T18:58:19.160 に答える