编程模式，是源自经验和探索总结出的最佳实践方案，既有助于可读性和可维护性，也有助于提升整体性能。
行为隔离
总则：结构、样式和行为之间两两隔离。
- 避免在结构中使用内联事件
- 尽量少用
<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);