如何根据需要优雅地添加javascript/css？

在我的实际项目中，用户可以选择单击按钮，以便进入他们网站的“编辑模式”。单击按钮后，我必须下载几个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");
        });
    });
})();

//开始编辑模式
（功能（）{
$.get（'/helpers/edit/v/edit.php'，函数（数据）{
$（数据）.appendTo（'body'）；
var css='/helpers/edit/css/edit.css'；
$.get（css，函数（数据）{
$('')
艾特先生({
“rel”：“样式表”，
“href”：css
}).appendTo（“head”）；
$（“body”）。触发器（“editReady”）；
});
});
})();

它工作得很好，但现在我需要插入更多的JS和CSS文件，如果我继续嵌套jquery get请求，代码将变得难看和难以维护，这是我想要避免的，并向我表明，这可能不是完成任务的最佳方式

我还尝试在第一个get请求中使用Yep Nope（我已经在项目的其他部分中使用了它），但它似乎不起作用（我没有收到错误消息，但它就是不起作用）

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

---

提前谢谢

您可以使用像head.js这样的脚本加载程序

似乎require.js适合您的需要：

还提到：LabJS和YepNope

YepNope似乎很简单，有函数

injectJs（）

和

injectCss

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

---

最近我在从多个源加载JSON时遇到了类似的问题。我修改了代码并提出了这个。它的要点是循环get请求到各种URL，然后在完成的请求数等于data\u URL数组中的URL数时触发“editReady”事件

（i=data\u URL.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");
      }
    });
  }
} 

function（）{
var data_url=['/helpers/edit/v/edit.php'，'/helpers/edit/css/edit.css']；
var i=0；
变量i，_len；
对于（_i=0，_len=data_url.length；_i<_len；_i++）{
$.get（数据）\u url[i]，函数（数据）{
如果（数据\ URL[i].match（/\.php/）.length>0）{
$（数据）.appendTo（'body'）；
}else if（数据\ URL[i].match（/\.css/）.length>0）{
$('')
艾特先生({
“rel”：“样式表”，
“href”：css
}).appendTo（“head”）；
}
i+=1；
if（i==数据长度）{
$（“body”）。触发器（“editReady”）；
}
});
}
} 

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

});

$.get（'/helpers/edit/v/edit.php'，函数（数据）{
$（数据）.appendTo（'body'）；
var css=['mycss1.css'，'mycss2.css'，'mycss3.css']；
$.each（css、函数（索引、元素）{
$('')
艾特先生({
“rel”：“样式表”，
'href'：元素
}).appendTo（“head”）；
});
var js=['myjs1.js'，'myjs2.js'，'myjs3.js']；
$.each（js，函数（索引，元素）{
$('')
艾特先生({
'type'：'text/javascript'，
“src”：元素
}).appendTo（“head”）；
});
$（“body”）。触发器（“editReady”）；
});

---

希望这会有所帮助。

没有重复，因为我不是在寻找Yep Nope的替代方案。在您上面的代码中，您没有使用yepnope，您的问题可能是由于错误的chmod权限或任何其他问题造成的，您的控制台中是否没有错误，当您不再需要css时，您希望如何删除它？q请求中的请求？为什么不在php文件中包含css？我知道我没有使用Yep Nope。正如我所说：它在这里不起作用。而且chmod权限设置正确。它应该可以工作-或者你做错了什么我也认为它应该工作，但是。。。关于您的其他问题：我在控制台中没有收到任何错误，我没有理由在以后删除css，我也不在php文件中使用css。我当然可以将它加载到文件的开头，但它只是一个片段，没有开头。我已经在使用脚本加载程序，这是唯一一个解决我应用程序中所有问题的程序。不幸的是，它不能解决这个问题。。。无论如何谢谢你！因为这将限制解决方案的使用Yep-Nope，这是不必要的。我想找到一个解决方案，它不需要使用Yep-Nope。它不限制jquery的使用。如果你有一个使用纯js的解决方案，那绝对欢迎！我不想让它变得更难，我只想为我的问题找到一个解决方案！我不在乎解决方案是否依赖jquery（但就个人经验而言，我相信它可能会，我完全同意你最后的评论），我也不在乎它是否依赖于Yep Nope。将答案限制在jquery用户和Yep Nope用户（我无论如何都不会这么做）之间的主要区别在于两者的用户数量。我可能弄错了，但我不相信您的解决方案会等到所有请求完成后触发editReady事件。@niiru，为什么您不相信？我的密码有错误吗？你可以用成功的密码method@DanielRuf，在$.get中没有可用的成功方法。所以请告诉我哪里是最好的位置。如果不是@niiru提出的观点，这将是一个很好的解决方案。它将在脚本正确加载之前触发事件。