What if you want to access the same variable everywhere?

In practice, there are many such scenarios, such as global state management.

But what about the fact that, as we mentioned earlier, global variables should not be used lightly in real development? Modular thinking can help us solve this problem.

Modularization development is the most popular and must be mastered development ideas. Modularity is based on the singleton pattern, so modular development is closely related to closures.

Currently popular modular development ideas, whether require, or ES6 modules, although the implementation of different ways, but the core idea is the same. Therefore, in order to facilitate everyone to understand the modular thinking, here to establish the singleton mode on the basis of function self-execution as an example, together to feel the charm of modular development.

First, remember: each singleton is a module.

In fact, as you know, each file is also a module. Instead, think of each singleton as a separate file. Define a module, and the variable name is the module name.

var module_test = (function() {
    
})();Copy the code

Second, to interact with other modules, each module must have the ability to obtain other modules, such as require in RequireJS and import in ES6modules.

//require
var $ = require('jquery');

//es6 modules
import $ from 'jquery';Copy the code

Third, each module should have an external interface to ensure the ability to interact with other modules. This provides the interface directly by returning a literal object. (You can recall how easy it is to export those modules now.)

var module_test = (function() {...return {
          testfn1: function() {},
          testfn2: function{}}}) () ();Copy the code

Now let’s walk through the process of modular development with a simple example. What this example is trying to do is that every second, the background color of the body switches between a fixed set of three colors as the number increases.

(1) First create a module dedicated to managing global state. This module has a private variable that holds all the state values and provides methods to access and set this private variable. The code is as follows:

var module_status = (function() {
    var status = {
        number: 0,
        color: null
    }

    var get = function(prop) {
        return status[prop];
    }
    
    var set = function(prop,value) {
        status[prop] = value;
    }

    return {
        get,
        set
    }
})();Copy the code

Create a module that is responsible for changing the color of the body background.

var module_color = (function() {// Pretend to import modules in the second step this way // similar to import state from'module_status';

    var state = module_status;
    var colors = ['yellow'.'#ccc'.'red'];

    function render() {
        var color = colors[state.get('number'3) %]; document.body.style.backgroundColor = color; }return {
        render
    }
})();Copy the code

In this module, the state management module is introduced, and the color management and change methods are defined in this module, so we only need to call the render method when using.

Next we need to create another module to display the current number value for reference.

var module_context = (function() {
    var state = module_status;

    function renderNumber() {
        document.body.innerHTML = 'now number is' + state.get('number');
    }

    return {
        renderNumber
    }
})()Copy the code

After all these functional modules are created, we only need to create a main module. The purpose of this main module is to use the function module to achieve the desired effect.

var module_main = (function() {
    var state = module_status;
    var color = module_color;
    var context = module_context;

    setInterval(function() {
        var newNumber = state.get('number') + 1;
        state.set('number',newNumber); color.render(); context.renderNumber(); }, 1000)}) ();Copy the code

Ok, the whole modularity is done. You can see this by inserting the entire code into an HTML file under the script tag.

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change yourself</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
    var module_status = (function() {
        var status = {
            number: 0,
            color: null
        }

        var get = function(prop) {
            return status[prop];
        }

        var set = function(prop,value) {
            status[prop] = value;
        }

        return {
            get,
            set
        }
    })();

    var module_color = (function() {// Pretend to import modules in the second step this way // similar to import state from'module_status';

        var state = module_status;
        var colors = ['yellow'.'#ccc'.'red'];

        function render() {
            var color = colors[state.get('number'3) %]; document.body.style.backgroundColor = color; }return {
            render
        }
    })();

    var module_context = (function() {
        var state = module_status;

        function renderNumber() {
            document.body.innerHTML = 'now number is' + state.get('number');
        }

        return {
            renderNumber
        }
    })();

    var module_main = (function() {
        var state = module_status;
        var color = module_color;
        var context = module_context;

        setInterval(function() {
            var newNumber = state.get('number') + 1;
            state.set('number',newNumber); color.render(); context.renderNumber(); }, 1000)}) (); </script>Copy the code

Run the complete code above to see how it works



Of course it changes every second….

These are my old study notes. If you see this note, I hope you can point out my mistakes. There is such a group, inside the small partners supervise each other, adhere to the output of their own learning experience every day, not output is out. I hope you can join us and we will learn together for life. Welcome to add my personal wechat account: Pan1005919589