Javascript - как разделить / разделить раскрывающий модуль на более мелкие части? - PullRequest
0 голосов
/ 25 апреля 2020

Я хотел бы разделить / разделить мой модуль "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
}

но я не не знаю, как заставить это работать!

Помогите пожалуйста.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...