JS 實作 #3 | 模組化變數傳遞

接續 JS 實作 #2 | keypress event ;addEventListener

依照原本的模組化架構後,接著開始處理接收 DOM 的表單內容(UI CONTROLLER)

原本的內容:

// BUDGET CONTROLLER
var budgetController = (function(){

   // Some code

})();

// UI CONTROLLER
var UIController = (function() {

   // Some code

})();

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var ctrlAddItem = function() {
        // 1. Get the field input data
        // 2. add the item to the budget controller
        // 3. add the item to the UI
        // 4. Calculate the budget
        // 5. Display the budget on the UI
    }

    document.querySelector('.add__btn').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event) {

        if (event.keyCode === 13 || event.which === 13) {
            ctrlAddItem();
        }

    });
    // Some code

})(budgetController, UIController);

開始獲取表單內容

1. 藉由回傳 getInput 這個公開方法,可以獲得表單的內容。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/69142afb-e4bb-42fe-8b84-f38f6326f5e8/_2020-03-23_20.40.28.jpg
// UI CONTROLLER
var UIController = (function() {

    **return {
        getInput: function() {
            var type = document.querySelector('.add__type').value; // inc or exp
            var description = document.querySelector('.add__description').value;
            var value = document.querySelector('.add__value').value;
        }
    };**

})();

2. 更好的寫法是 getInput 改為回傳一個 object

// UI CONTROLLER
var UIController = (function() {

    return {
        getInput: function() {
            **return {
                type: document.querySelector('.add__type').value, // inc or exp
                description : document.querySelector('.add__description').value,
                value : document.querySelector('.add__value').value
            }**
        }
    };

})();

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var ctrlAddItem = function() {

        **// 1. Get the field input data
        var input = UICtrl.getInput();
        console.log(input); //{type: "inc", description: "dfkldf", value: "100"}**

        // 2. add the item to the budget controller
        // 3. add the item to the UI
        // 4. Calculate the budget
        // 5. Display the budget on the UI
    }

    document.querySelector('.add__btn').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event) {

        if (event.keyCode === 13 || event.which === 13) {
            ctrlAddItem();
        }

    });
    // Some code

})(budgetController, UIController);

3. 再更優化寫法,宣告 DOMstrings 將 DOM 中的元件名稱獨立出來,並且新增一個函式 getDOMstrings,將元件名稱可以公用

// UI CONTROLLER
var UIController = (function() {

    **var DOMstrings = {
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue: '.add__value'
    };**

    return {
        getInput: function() {
            return {
                type: document.querySelector(**DOMstrings.inputType**).value, // inc or exp
                description : document.querySelector(**DOMstrings.inputDescription**).value,
                value : document.querySelector(**DOMstrings.inputValue**).value
            }
        }**,

        getDOMstrings: function() {
            return DOMstrings;
        }**
    };

})();

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    **var DOM = UICtrl.getDOMstrings();**

    var ctrlAddItem = function() {
        // 1. Get the field input data
        var input = UICtrl.getInput();
        console.log(input);
        // 2. add the item to the budget controller
        // 3. add the item to the UI
        // 4. Calculate the budget
        // 5. Display the budget on the UI
    }

    document.querySelector('.add__btn').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event) {

        if (event.keyCode === 13 || event.which === 13) {
            ctrlAddItem();
        }

    });


})(budgetController, UIController);

4. 最後修尾,將 Global APP Controller 裡的 DOM 元件名稱也加回到 UI Controller裡,再由**UICtrl.getDOMstrings()**來呼叫,即為 DOM.inputBtn

// UI CONTROLLER
var UIController = (function() {

    var DOMstrings = {
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue: '.add__value',
        **inputBtn: '.add__btn'**
    };

    return {
        getInput: function() {
            return {
                type: document.querySelector(DOMstrings.inputType).value, // inc or exp
                description : document.querySelector(DOMstrings.inputDescription).value,
                value : document.querySelector(DOMstrings.inputValue).value
            }
        },

        getDOMstrings: function() {
            return DOMstrings;
        }
    };

})();

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var DOM = UICtrl.getDOMstrings();

    var ctrlAddItem = function() {
        // 1. Get the field input data
        var input = UICtrl.getInput();
        console.log(input);
        // 2. add the item to the budget controller
        // 3. add the item to the UI
        // 4. Calculate the budget
        // 5. Display the budget on the UI
    }

    document.querySelector(**DOM.inputBtn**).addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event) {

        if (event.keyCode === 13 || event.which === 13) {
            ctrlAddItem();
        }

    });

})(budgetController, UIController);

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.