javascript - 如何使模块模式中的太多属性可读，是否有其他选择

Question

这是一个模块，

var UI = UI || {};
UI.Old = {
  v1: "",
  v2: "",
  v3: [],
  v4: 0,
  v5: "",
  v6: "",
  v7: "xxxx",
  v8: "",
  v9: "",
  v10: "",

  init: function(options) {
    this.v1 = options.v1;
    this.v10 ... and so on

    this.showLatestTime(new Date().getSeconds())
  },
  showLatestTime: function(time) {
    document.getElementById('results').innerHTML = time;
  }
};

有什么方法可以隐藏这些变量并使它们更具可读性吗？

Answer 1

您可以拥有一个具有所有选项的对象并使用扩展函数

(function (root) {
    root.extend = function (obj) {
        var source, prop;
        for (var i = 1, length = arguments.length; i < length; i++) {
            source = arguments[i];
            for (prop in source) {
                if (hasOwnProperty.call(source, prop)) {
                    obj[prop] = source[prop];
                }
            }
        }
        return obj;
    };

})(window);

var UI = UI || {};
UI.Old = {
  settings:{
 v1: "",
  v2: "",
  v3: [],
  v4: 0,
  v5: "",
  v6: "",
  v7: "xxxx",
  v8: "",
  v9: "",
  v10: ""
  },
  init: function(options) {
    this.settings = extend(this.settings,options);

   // this.showLatestTime(new Date().getSeconds())
  },
  showLatestTime: function(time) {
    document.getElementById('results').innerHTML = time;
  },
  showSettings:function(){
    console.log(this.settings)
  }
};


UI.Old.init({
  v1:"test1",v2:"test2",v3:[1,2,3],v10:"123"
});
UI.Old.showSettings();