Архитектура для создания фреймворка JavaScript

Question

Около года назад мы запустили веб-систему, которая за это время выросла совсем немного. С самого начала цель заключалась в том, чтобы создать многоразовый код, который ускорит разработку будущих проектов, и он имеет. С каждым новым проектом был использован код повторного использования из предыдущего и основывался на нем.

В настоящий момент код на стороне сервера действительно чист, и существует четкое разделение между «инфраструктурой» (общей функциональностью) и конкретной логикой проекта.

Однако javascript вышел из-под контроля. Для конкретного javascript (события кнопки, аякс-звонки и т. Д.) Мы использовали закрытие и the module pattern. Но общие файлы javascript (те, которые мы импортируем на каждой странице), полны функций, не связанных между собой, помимо некоторых сходств имен.

Из-за этого я сейчас пытаюсь создать своего рода фреймворк (легко повторяемый и обслуживаемый код), инкапсулирующий логику и функции, которые у нас уже есть. Это должен быть один «основной» объект и несколько дополнительных «расширений». Они будут в отдельных файлах, чтобы улучшить порядок кода. В частности, я пытаюсь достичь:

• Инкапсуляция кода для предотвращения столкновений имен. Мы очень довольны частным/общественным разделением закрытий.
• Расширяемая функциональность, что-то вроде open/close principle. Трудная часть здесь заключается в том, что расширение может потребовать доступа к частному методу ядра.

Я много читал в OO в javascript, и я даже пытался понять, как это делает jQuery, но я все еще не могу его обвести. Для архитектурной стороны кажется, что я должен строить модуль или инфраструктуру службы, но те, которые я нашел, намного сложнее, чем то, что я хочу достичь.

Если бы не сложная часть упомянутой выше, простой $.extension() будет делать, но я застрял в , как получить доступ к основному частному методу от расширения части. Короче говоря, мой вопрос был бы: Есть ли рекомендуемая архитектура в javascript для создания чего-то вроде следующего примера?

var framework = function() { 
    //Private variable 
    var internalState = 1; 

    //Private method 
    var validState = function() { ... } 

    //Public methods 
    return { 
     commonTask1: function() { ... }, 
     commonTask2: function() { ... } 
    } 
}(); 

framework.addMoreFunctionality(function() { 
    var specificData = ''; 

    return { 
     extensionMethod: function() { 
      //TRICKY PART HERE 
      if (core.validState()) { ... } 
     } 
    } 
}()); 

Answer 1

Просто верните функцию из каркасного модуля.

return { 
    isValidState: function() { ... } 
    commonTask1: function() { ... }, 
    commonTask2: function() { ... } 
} 

Функция isValidState может проверить внутреннее состояние.

// isValidState 
function() { 
    if (validState()) { 
     return true; 
    } 

    return false; 
} 

Проверьте, действительное ли состояние, вызвав core.isValidState(); Подобно этому вы не получите никакой ссылки на какую-либо «частную» переменную внутри ядра фреймворка, потому что функции возвращают bool, а не прямую ссылку на какие-либо объекты.

Answer 2

Вы изучили DOJO? Он имеет модульную систему, систему сборки и очень сложную структуру OO. У вас могут быть свои собственные модули/«базовые Dijits», которые помогут вам реализовать «общие модули/виджеты», а затем расширить их для каждого проекта, написав/добавив определенные возможности так, как вы описали.

DOJO не совсем в Vogue, но если ваше приложение имеет дело с формами, такими как интерфейс, то это определенно кандидат.