javascript - Javascript - 如何将显示模块拆分/划分为更小的部分？

Question

我想将我的模块“引擎”拆分/划分为更小的部分（并将其保存在一个文件中）。

假设我在方法“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（）”方法分离到子模块中，但我不知道如何正确地做到这一点。

错误的方法：

我创建了 2 个模块“引擎”和“颜色”，它可以工作，但是拥有 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
}

但我不知道如何使它工作！

请帮忙。

标签： javascriptdesign-patternsmodule