«Аутсорсинг» повторяющегося кода в функцию с параметрами (js)

Question

поэтому я использую один файл js для загрузки нескольких файлов html и js всякий раз, когда это необходимо. У меня есть рабочий код для большого количества модулей. В приведенном ниже примере вы можете увидеть первые два модуля. Все они выглядят точно так же. Теперь я хочу «передать аутсорсинг» повторяющегося кода в функцию с параметрами, чтобы сумма кода была минимизирована. Поскольку я никогда не делал ничего подобного, прежде чем мне понадобится помощь (сейчас я изучаю js). Я бы очень хотел помочь.

//first module 
if (moduleID === "placeone") { 
      var isLoaded = 0; 
      if (isLoaded) { 
       console.log("file already loaded"); 
       returnValue = new PlaceOneModule(id, moduleInitialData); 
      } 
      $("#placeone").load("html/modules/PlaceOneModule.html", function (response, status, xhr) { 
       console.log("PlaceOneModule.html" + " " + status); 
       $.getScript("js/modules/PlaceOneModule.js").done(function() { 
        console.log("PlaceOneModule.js geladen"); 
        isLoaded = 1; 
        returnValue = new PlaceOneModule(id, moduleInitialData); 
       }).fail(function() { 
        console.log("PlaceOneModule.js nicht geladen"); 
       }); 
      }); 
     } 

    //second module 
     if (moduleID === "placetwo") { 
      var isLoaded = 0; 
      if (isLoaded) { 
       console.log("file already loaded"); 
       returnValue = new PlaceTwoModule(id, moduleInitialData); 
      } 
      $("#placetwo").load("html/modules/PlaceTwoModule.html", function (response, status, xhr) { 
       console.log("PlaceTwoModule.html" + " " + status); 
       $.getScript("js/modules/PlaceTwoModule.js").done(function() { 
        console.log("PlaceTwoModule.js geladen"); 
        isLoaded = 1; 
        returnValue = new PlaceTwoModule(id, moduleInitialData); 
       }).fail(function() { 
        console.log("PlaceTwoModule.js nicht geladen"); 
       }); 
      }); 
     } 

Answer 1

вопрос довольно сложно ответить, так как есть много вещей, которые приходится.

var cache = {}; 

function module(name, target, done) { 
    if (!(name in cache)) { 
     return $(target).load('html/modules/' + name + '.html', function(response, status, xhr) { 
      console.log(name + '.html ' + status); 

      $.getScript('js/modules/' + name + '.js') 
       .done(function() { 
        console.log(name + '.js geladen'); 
        cache[name] = window[name]; 

        done(null, cache[name]); 
       }) 
       .fail(function() { 
        var message = name + '.js nicht geladen'; 

        cache[name] = function() { 
         console.error(message); 
        }; 

        done(message); 
       }); 
     }); 
    } 

    setTimeout(function() { 
     done(null, cache[name]); 
    }, 0); 
} 

Я попытаюсь объяснить ход мыслей за этим:

• var cache = {} - вам нужно что-то, чтобы следить за каждого отдельного модуля
• function module(name, target, done) {
  • name бы быть базовым именем вашего модуля, например PlaceTwoModule, это уже был использован последовательно через HTML и JS-файлов и имя функции JS
  • target будет селектор, где HTML файл должен быть загружен
  • в качестве одного из действий, которые вы принимаете требует асинхронной операции, вся функциональность должно стать асинхронным, я познакомлю обратный вызов (done) аргумента
• if (!(name in cache)) - если модуль еще не кэшируются, это требует некоторой выборки данных, поэтому load срабатывает первое
• однажды load Complet эс, он будет стрелять $.getScript
  • если $.getScript работает, то name будет считаться в window и ссылка хранится в переменной cache, после того, done обратного вызова (с помощью функции как второй аргумент).
  • Если $.getScript не сработал, добавим функцию к cache, которая ничего не говорит о том, что она не будет работать, после чего вызывается обратный вызов (с ошибкой в ​​качестве первого аргумента).
• если name существовали в cache, мы будем называя done обратного вызова сразу же после того, как мы выходим из module функции

Итак, как использовать это? Теперь сводится к вызову функции module

module('#placeone', 'PlaceOneModule', function(error, PlaceModule) { 
    if (error) throw new Error(error); 

    var instance = new PlaceModule(id, initial); 

    // ... 
} 

Я использовал общую function(error, value) {..} подпись для функции обратного вызова, которая всегда имеет ошибку в качестве первого аргумента (с учетом других аргументов, которые будут добавлены и сделаны по желанию).

Есть некоторые оговорки/допущение стоит упомянуть:

• Я не предоставил отказоустойчивый для предотвращения нескольких нагрузок того же модуля (так же, как в вашем примере), если предыдущие призывы к module являются до сих пор загрузки
• независимо от того, что target вы вызываете module с, он будет загружать только «один раз» (ну, смотрите предыдущую строку ;-))
• Я предполагаю, загруженные модули находятся в глобальных (window) рамках для того, чтобы простой пример, k eep в виду не 'pollute the global scope'

Это стало довольно сложным ответом, и я надеюсь, что я объяснил, что каждый шаг был задействован достаточно.

Answer 2

Нечто подобное возможно:

var modules = []; 
modules.push({ 
    js: 'PlaceOneModule', 
    id: 'placeone' 
}); 

modules.push({ 
    js: 'PlaceTwoModule', 
    id: 'placetwo' 
}); 

var module = modules.filter(function(m) { 
    return m.id === moduleID; 
}); 

if (module) { 
    var isLoaded = 0; 
    if (!!window[module.js]) { 
     console.log("file already loaded"); 
     returnValue = window[module.js]; 
    } 

    $("#" + module.id).load("html/modules/" + module.js + ".html", function(response, status, xhr) { 
    $.getScript("js/modules/" + module.js + ".js").done(function() { 
     returnValue = new window[module.js](id, moduleInitialData); 
    }).fail(function() { 
     console.log("PlaceOneModule.js nicht geladen"); 
    }); 
    }); 
}