Question

在我的实际项目中，用户可以选择单击按钮以进入其网站的“编辑模式”。单击按钮后，我必须下载几个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请求中使用Yep Nope（我已经在项目的其他部分使用），但似乎没有工作（我没有收到任何错误消息，但它只是不起作用）。

有没有人知道如何以一种不那么丑陋的方式做到这一点，主要是容易保持（考虑到我必须在所有JS / CSS被正确包含时触发事件）？

提前致谢！

Answer 1

您可以使用head.js等脚本加载器 http://headjs.com/

似乎require.js符合您的需求：http://requirejs.org/

还提到：LabJS http://labjs.com/和YepNope http://yepnopejs.com/

Alternatives to YepNope and LabJS

YepNope似乎很容易，有injectJs()和injectCss

的函数

yepnope.injectJs("jquery.js", ...
yepnope.injectCss("print.css", ...

Answer 2

我最近从多个来源加载JSON时遇到了类似的问题。我修改了那段代码并提出了这个问题。它的要点是循环获取对各种URL的请求，然后在完成的请求数等于data_urls数组(i = data_urls.length)中的URL数时触发“editReady”事件。

我最初是用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");
      }
    });
  }
}

Answer 3

我猜你可以创建一个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");

});

希望这会有所帮助。

如何按需优雅地添加javascript / css？

3 个答案: