2

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

您可以使用像 head.js http://headjs.com/这样的脚本加载器

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

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

YepNope 和 LabJS 的替代品

YepNope 似乎很简单，有功能 injectJs()和injectCss

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

我最近在从多个来源加载 JSON 时遇到了类似的问题。我修改了那个代码并想出了这个。它的要点是循环获取对各种 URL 的请求，然后在完成的请求数等于 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 回答