模块化与闭包

在《《JavaScript核心技术开发解密》》讲模块化与闭包中，提到了一个案例，实现每隔一秒 body的背景颜色就随着一个数字的递增在固定的三种颜色之间切换。

目前流行的模块化开发思路，无论是requier，还是ES6中的module，虽然实现方式不同，但是核心的思路都是一样，模块化其实就是建立在单例模块基础之上的，因此模块化开发和闭包息息相关。

下面实现每隔一秒 body的背景颜色就随着一个数字的递增在固定的三种颜色之间切换的案例

• 首先创建一个专门用来管理全局状态的模块。这个模块中有一个私有变量保存了所有的状态值，并对外提供了访问与设置这个私有变量的方法，代码如下：

	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: get,
          set: set,
        };
      })();

• 再来创建一个专门负责改变body背景颜色的模块

	var module_color = (function () {
		//用这种方式执行第二步引入操作，类似 import state from 'module_status'
        var state = module_status;
        var colors = ["orange", "#ccc", "pink"];

        function render() {
          var color = colors[state.get("number") % 3];
          document.body.style.backgroundColor = color;
        }
        return {
          render: render,
        };
      })();
      //这个模块中，引入了管理状态的模块，并且将颜色的管理与改变方式都定义在该模块中，使用时调用render方法即可

• 接下来我们创建另外一个模块，负责显示当前的number值，用于参考与对比

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

        function render() {
          document.body.innerHTML = "this Number is" + state.get("number");
        }
        return {
          render: render,
        };
      })();

• 功能模块创建完毕后，最后创建一个主模块，利用主模块来借助这些功能实现我们想要的效果。

      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.render();
        }, 1000);
      })();

上面的案例中 colors 数组中存放的颜色是 var colors =[“orange”, “#ccc”, “pink”] 三种，背景颜色 color 的变化利用的算法是根据数字 number 给3进行取模，var color = colors[state.get(“number”) % 3],所以 number 为 1 时取到的背景颜色是灰色 #ccc。