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