Я хотел бы разделить / разделить мой модуль "Engine" на более мелкие части (и сохранить его в одном файле).
Предположим, у меня много кода в методе "paintText ()" - это код должен быть в отдельной части.
Как это сделать?
Мой модуль "Двигатель" выглядит так:
HTML
<button type="button" id="addText">1. Add some text</button>
<button type="button" id="countText">2. Count letters</button>
<button type="button" id="addColor">3. Add color</button>
<div id="elText"></div>
- - - - - - - - - - - - - - - - - -
<div id="elCounter"></div>
Javascript:
var Engine = (function(){
var addTextButton = document.querySelector('#addText');
var countButton = document.querySelector('#countText');
var colorButton = document.querySelector('#addColor');
var textArea = document.querySelector('#elText');
var counter = document.querySelector('#elCounter');
addTextButton.addEventListener('click', addText, false);
countButton.addEventListener('click', showCounter, false);
colorButton.addEventListener('click', paintText, false);
// Engine function
function addText( event ){
textArea.innerHTML += '<br /> add some text';
}
// Engine function
function showCounter( event ){
counter.innerHTML = 'amount of liter = ' + textArea.innerText.length;
}
// ADDITION function - separate it as submodule!!!
function paintText( event ){
/*
lot of code....
lot of code....
*/
textArea.style.backgroundColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);// random color
}
return {
paintText : paintText
}
})();
Это просто - вы можете: 1. добавить текст 2. подсчитать буквы 3. добавить цвет фона.
Работа JSFiddle - «Один большой модуль»:
Я пытаюсь разделить метод paintText () на подмодуль, но я не знаю, как это сделать правильно way.
Неправильный путь:
Я создал 2 модуля "Engine" и "Color", он работает, но глупо иметь 2 модуля.
var Engine = (function(){
(...)
function randomColor( event ){
Color.paintText( textArea )
}
})();
//submodule
var Color = (function(){
function paintText(){
}
return {
paintText : paintText
}
})();
Работающий JSFiddle - «Разделенный модуль - неправильный путь»
Он знает, что это должно выглядеть так (чтобы все части были в одном объекте):
pseudo code:
app = {};
//engine
app.engine = function(){
... engine here
}
//additional submodule
app.color = function(){
... color here
}
//additional submodule
app.images = function(){
... images here
}
но я не не знаю, как заставить это работать!
Помогите пожалуйста.