C++JavaScript 编程模式

编程模式,是源自经验和探究总结出的极品实践方案,既助长可读性和可维护性,也推提升整体性。

行隔离

总则:结构、样式与行为中少星星隔断。

  • 避免以布局被以内联事件
  • 尽可能少用 <script> 标签
  • 考虑 JavaScript 被剥夺的事态,添加一些调换标签

取名空间

以减少命名冲突,优化 JavaScript
性能,尽量只定义几个全局变量,并将其他变量和措施定义为当下几只变量的习性。

//定义全局变量
var MYAPP = window.MYAPP || {};
//定义属性
MYAPP.event = {};
//定义方法
MYAPP.event = {
  addListener : function() {
    //执行相关的逻辑操作
  }
  removeListener : function() {
    //执行相关的逻辑操作
  }
  //其他方法
};

以命名空间受到采取结构器函数。

MYAPP.dom = {};
MYAPP.dom.Element = function (type, prop) {
  var tep = document.createElement(type);
  for (var i in prop) {
    tmp.setAttribute(i, prop[i]);
  }
  return tmp;
}

取名空间法:

var MYAPP = window.MYAPP || {};
MYAPP.namespace = function (name) {
  var parts = name.split(“.”);
  var current = MYAPP;
  for (var i in parts) {
    if (!current[parts[i]]) {
      current[parts[i]] = {};
    }
    current = current[parts[i]];
  } 
}
MYAPP.namespace(“dom.event”);
// 上述操作等价于:
var MYAPP = {
    dom: {
        event: {}
    }
}

初始化功能

是因为浏览器的不一致性,当我们以 JavaScript 操作 DOM 或 BOM
前,通常会开展定之功力检测。如果以运作前用检测的效力比较多,那么即便会见重影响脚本的实行进度。对于此问题,可以经过初始化功能解决,即以剧本加载后,立即对首要之函数执行力量检测。如此,后续就管需检测功能,可以一直实施有关的函数。

var MYAPP = window.MYAPP || {};
MYAPP.event = {
  addListener: null,
  removeListener: null
};
// 初始化功能演示如下:
if (typeof window.addEventListener === ‘function’) {
  MYAPP.event.addListener = function (el, type, fn) {
    el.addEventListener(type, fn, false);
  };
  MYAPP.event.removeListener = function (el, type, fn) {
    el.removeEventListener(type, fn, false);
  };
} else if (typeof document.attachEvent === “function”) {
  MYAPP.event.addListener = function (el, type, fn) {
    el.attachEvent(“on” + type, fn);
  };
  MYAPP.event.removeListener = function (el, type, fn) {
    el.detachEvent(“on” + type, fn);
  };
} else {
  MYAPP.event.addListener = function (el, type, fn) {
    el[“on” + type] = fn;
  };
  MYAPP.event.removeListener = function (el, type, fn) {
    el[“on” + type] = null;
  }; 
}

推定义

缓定义,恰巧和初始化模式之思辨相反。对于那些不必然会吃调用的函数,可以给那于调用时再次初始化,并且仅进行同样次初始化。

var MYAPP = window.MYAPP || {};
MYAPP.event = {
  addListener: function(el, type, fn) {
    if (typeof window.addEventListener === ‘function’) {
      MYAPP.event.addListener = function (el, type, fn) {
        el.addEventListener(type, fn, false);
      };
    } else if (typeof document.attachEvent === “function”) {
      MYAPP.event.addListener = function (el, type, fn) {
        el.attachEvent(“on” + type, fn);
      };
    } else {
      MYAPP.event.addListener = function (el, type, fn) {
        el[“on” + type] = fn;
      };
    }
    MYAPP.event.addListener(el, type, fn);
  }
};

以此地方我需要修改一下,使用得另行写好的函数。

布对象

布置对象模式,适用于向函数中传递多只参数。简单的说,就是拿参数集合放入一个对象吃,将目标传给参数,这个目标还可以是一个
JSON
文件。当参数量较少时,就比如是人情的传参,当参数集庞大时,就好似传递环境布置变量。将变量和函数解耦,是非常不利的履行:

  • 无需考虑参数的逐一
  • 足忽略某些参数
  • 装有双重好之可读性和可维护性

var MYAPP = window.MYAPP || {};
MYAPP.dom = {};
MYAPP.dom.Button = function(text, conf) {
    var type = conf.type || “submit”;
    var color = conf.color || “red”
}
// 使用方式
var conf = {
    type: “reset”,
    color: “green”
};
new MYAPP.dom.Button(“Reset”, conf);

村办变量和方

及 C++、JAVA 不同,JavaScript
中并从未决定访问权限的修饰符,但咱得以用有变量和函数来贯彻类似的权控制。

var MYAPP = window.MYAPP || {};
MYAPP.dom = {};
MYAPP.dom.Button = function (text, conf) {
  var styles = {
    color: “black”
  }
  function setStyles() {
    for (var i in styles) {
      b.style[i] = conf[i] || styles[i];
    }
  }
  conf = conf || {};
  var b = document.createElement(“input”);
  b.type = conf[“type”] || “submit”;
  b.value = text;
  setStyles();
  return b;
}

在这里,styles 是一个民用属性,而 setStyle()
则是一个私方法。构造器可以于里边调用它们(它们为得以拜构造器中的旁对象),但它们不能够让表面代码所调用。

特权函数

于上例中,我们得吧 b 添加一个 getDefaults() 方法,返回 styles
对象,从而实现对其中属性或措施的拜会,这个 getDefaults()
就是同一栽特权函数。

私函数的公有化

为以防万一外部修改,将函数设为私有,有时候还要想外部可以拜到,所以发生要设为公有。解决方案是,使用国有变量引用私有函数,即可将该公有化。

var MYAPP = window.MYAPP || {};
MYAPP.dom = {};
MYAPP.dom.Button = (function () {
  var _setStyle = {};
  var _getStyle = ();
  return {
    setStyle: _setStyle,
    getStyle: _getStyle,
    yetAnother: _setStyle
  };  
})();

起推行的函数

使用就施行的匿名函数,同样可管全局命名空间不见面遭受污染。这种函数的所有变量都是有些的,并当函数返回时让灭绝(非闭包)。

符吃实践一次性的初始化任务。

(function(){
    //编写逻辑操作代码
})()

链式调用

链式调用,是平种便利的调用方式。其促成精神是以相同的上下文对象,并当链式方法中传递者目标。这种活的调用方式吗是
jQuery 的相同分外特征。

JSON

JSON 是同样栽轻量级的数据交换格式。由于它们自己就是是由接近 JavaScript
的目标与数组标记的数整合的,所以解析起来很好。

商解析,我们得下 JavaScript 的 eval() 方法变;但是由于
eval() 本身的老毛病,这起事还是采取更安全之艺术吧,比如 JavaScript
的少数库(http://json.org):

var obj = JSON.parse(xhr.respnseText);
参考资料
  • 《JavaScript面向对象编程指南》