原帖：http://www.douban.com/note/169097922/
1. 命名空间模式
// unsafe
var MYAPP = {};
// better
if (typeof MYAPP === "undefined") {
var MYAPP = {};
}
// or shorter
var MYAPP = MYAPP || {};
//一次性创建长命名层级时
//确保每层都存在
MYAPP.namespace = function (ns_string) {
var parts = ns_string.split('.'),
parent = MYAPP,
i;
// strip redundant leading global
if (parts[0] === "MYAPP") {
parts = parts.slice(1);
}
for (i = 0; i < parts.length; i += 1) {
// create a property if it doesn't exist
if (typeof parent[parts[i］ === "undefined") {
parent[parts[i］ = {};
}
parent = parent[parts[i］;
}
return parent;
};
// assign returned value to a local var
var module2 = MYAPP.namespace('MYAPP.modules.module2');
module2 === MYAPP.modules.module2; // true
// skip initial `MYAPP`MYAPP.namespace('modules.module51');
// long namespace
MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property');
2. 声明依赖 -----------------------------------------------------------------
var myFunction = function () {
// dependencies
var event = YAHOO.util.Event,
dom = YAHOO.util.Dom;
// use event and dom variables
// for the rest of the function...
};
或
function test2() {
var modules = MYAPP.modules;
alert(modules.m1);
alert(modules.m2);
alert(modules.m51);
}
优点:
> 声明写在程序上部, 便于查找检查其依赖, 并确保相关模块文件的引入
> 缓存成本地变量会比全局变量运行更快
> 压缩工具会把本地变量替换成更短的名字
3. 私有变量和方法 ----------------------------------------------------------
3.1 在构造方法里用闭包创建私有成员:
function Gadget() {
// private member
var name = 'iPod';
// public function
this.getName = function () {
return name;
};
}
*如果返回的是object或array, 因为传递的是引用, 数据可能被外部修改:
function Gadget() {
// private member
var specs = {
screen_ 320,
screen_height: 480,
color: "white"
};
// public function
this.getSpecs = function () {
return specs;
};
}
解决的办法
> 返回object或array等的clone对象
> 用新方法, 比如getDimensions()等直接返回数值对象
3.2 字面量对象实现隐私性:
var myobj; // this will be the object
(function () {
// private members
var name = "my, oh my";
// implement the public part
// note -- no `var`
myobj = {
// privileged method
getName: function () {
return name;
}
};
}());
或
var myobj = (function () {
// private members
var name = "my, oh my";
// implement the public part
return {
getName: function () {
return name;
}
};
}());
3.3 原型和隐私性:
*使用构造函数创建隐私性会在每次都创建新对象, 从而耗费内存, 可以使用prototype解决
function Gadget() {
// private member
var name = 'iPod';
// public function
this.getName = function () {
return name;
};
}
Gadget.prototype = (function () {
// private member
var browser = "Mobile Webkit";
// public prototype members
return {
getBrowser: function () {
return browser;
}
};
}());
3.4 揭秘模块模式
*无法像ECMAScript5中的对象一样可以设置freeze属性使外界无法修改
但是可以使用 revealing module pattern 暴露某些有必要保护的私有方法
var myarray;
(function () {
var astr = "[object Array]",
toString = Object.prototype.toString;
function isArray(a) {
return toString.call(a) === astr;
}
function indexOf(haystack, needle) {
var i = 0,
max = haystack.length;
for (; i < max; i += 1) {
if (haystack[i] === needle) {
return i;
}
}
return 1;
}
myarray = {
isArray: isArray,
indexOf: indexOf,
inArray: indexOf
};
}());
即使外界修改了对象的indexOf, inArray引用的私有方法indexOf的功能依然正常
myarray.indexOf = null;
myarray.inArray(["a", "b", "z"], "z"); // 2
4. 模块模式 ----------------------------------------------------------
*广泛使用的模式, 提供结构化并帮助应付增长的代码, 在黑盒中实现增删改
//首先定义命名空间
MYAPP.namespace('MYAPP.utilities.array');
//使用一个局部方法返回的对象创建模块, 从而实现私密性和公开的API
MYAPP.utilities.array = (function () {
// dependencies
var uobj = MYAPP.utilities.object,
ulang = MYAPP.utilities.lang,
// private properties
array_string = "[object Array]",
ops = Object.prototype.toString;
// private methods
// ...
// end var
// optionally one-time init procedures
// ...
// public API
return {
inArray: function (needle, haystack) {
for (var i = 0, max = haystack.length; i < max; i += 1) {
if (haystack[i] === needle) {
return true;
}
}
},
isArray: function (a) {
return ops.call(a) === array_string;
}
// ... more methods and properties
};
}());
4.1 揭秘模块模式
*结合使用模块和解密模式, 可以将所有方法设为私有, 并在局部方法的最后决定公开哪些API
MYAPP.utilities.array = (function () {
// private properties
var array_string = "[object Array]",
ops = Object.prototype.toString,
// private methods
inArray = function (haystack, needle) {
for (var i = 0, max = haystack.length; i < max; i += 1) {
if (haystack[i] === needle) {
return i;
}
}
return −1;
},
isArray = function (a) {
return ops.call(a) === array_string;
};
// end var
// revealing public API
return {
isArray: isArray,
indexOf: inArray
};
}());
4.2 创建构造器的模块
*某些情况下需要对象的构造器函数, 与上面例子的区别是返回一个function而非object
MYAPP.namespace('MYAPP.utilities.Array');
MYAPP.utilities.Array = (function () {
// dependencies
var uobj = MYAPP.utilities.object,
ulang = MYAPP.utilities.lang,
// private properties and methods...
Constr;
// end var
// optionally one-time init procedures
// ...
// public API -- constructor
Constr = function (o) {
this.elements = this.toArray(o);
};
// public API -- prototype
Constr.prototype = {
constructor: MYAPP.utilities.Array,
version: "2.0",
toArray: function (obj) {
for (var i = 0, a = [], len = obj.length; i < len; i += 1) {
a[i] = obj[i];
}
return a;
}
};
// return the constructor to be assigned to the new namespace
return Constr;
}());
var arr = new MYAPP.utilities.Array(obj);
4.3 将全局变量传入模块
*通常可以向局部方法中传递全局变量, 包括模块自身, 使其变为局部变量以加速
MYAPP.utilities.module = (function (app, global) {
// references to the global object
// and to the global app namespace object
// are now localized
}(MYAPP, this));
5. 沙盒模式 -------------------------------------------------------------------
*此模式着眼于解决命名空间模式的以下缺陷:
>一个页面中无法有两个以上的相同程序或库共存, 因为会共用全局的变量名
>需要打印长的命名空间名称, 并在运行时解析之
*沙盒模式使得模块在自己的沙盒中运行, 不受其他模块的影响
//这个Sandbox可以命名成自己的程序名, 比如MYAPP
function Sandbox() {
var args = Array.prototype.slice.call(arguments), //将参数表转换为数组
callback = args.pop(), //最后一个参数必须是callback方法
//模块名称可以用数组或分开传递进来
modules = (args[0] && typeof args[0] === "string") ? args : args[0],
i;
//确保方法由new操作符调用
if (!(this instanceof Sandbox)) {
return new Sandbox(modules, callback);
}
//一些必要的属性
this.a = 1;
this.b = 2;
//将指定的模块附加到'this'对象上
//没指定模块, 或者使用了'*', 将附加所有模块
if (!modules || modules === '*') {
modules = [];
for (i in Sandbox.modules) {
if (Sandbox.modules.hasOwnProperty(i)) {
modules.push(i);
}
}
}
//初始化所需模块
for (i = 0; i < modules.length; i += 1) {
Sandbox.modules[modules[i］(this);
}
//调用callback, 其中使用的'this'就是附加了所需模块后的独立对象
callback(this);
}
//一些必要的受保护信息
Sandbox.prototype = {
name: "My Application",
version: "1.0",
getName: function () {
return this.name;
}
};
//模块定义
Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
box.getElement = function () {};
box.getStyle = function () {};
box.foo = "bar";
};
Sandbox.modules.event = function (box) {
// access to the Sandbox prototype if needed:
// box.constructor.prototype.m = "mmm";
box.attachEvent = function () {};
box.dettachEvent = function () {};
};
Sandbox.modules.ajax = function (box) {
box.makeRequest = function () {};
box.getResponse = function () {};
};
//使用实例
Sandbox(function (box) {
//参数表中的box不写也行, 直接用this
});
Sandbox('*', function () {
//等同于上一种
});
Sandbox(['ajax', 'event'], function (box) {
// console.log(box);
});
Sandbox('ajax', 'dom', function (box) {
// console.log(box);
});
Sandbox('dom', 'event', function (box) {
// work with dom and event
Sandbox('ajax', function (box) {
// another sandboxed "box" object
// this "box" is not the same as
// the "box" outside this function
//...
// done with Ajax
});
// no trace of Ajax module here
});
http://www.nowamagic.net/javascript/js_SandBoxPatterm.php
http://www.nowamagic.net/javascript/js_SandBox.php
http://www.planabc.net/lab/yui/sandbox.html
6. 静态成员 ---------------------------------------------------------------
6.1 公开的静态成员
// constructor
var Gadget = function () {};
// a static method
Gadget.isShiny = function () {
return "you bet";
};
// a normal method added to the prototype
Gadget.prototype.setPrice = function (price) {
this.price = price;
};
6.2 私有静态成员
*所谓私有静态成员, 即只能在由构造函数创建的对象中共享的成员
var Gadget = (function () {
//静态变量/属性
var counter = 0;
// 返回的方法成为了新的构造函数
return function () {
console.log(counter += 1);
};
}()); //立即执行的局部方法
var g1 = new Gadget(); // 1
var g2 = new Gadget(); // 2
var g3 = new Gadget(); // 3
7. 对象常量 -------------------------------------------------------------
*一般采用通行的全大写变量的方法表示常量, 如果确实需要不变的值, 可以这样:
var constant = (function () {
var constants = {},
ownProp = Object.prototype.hasOwnProperty,
allowed = {
string: 1,
number: 1,
boolean: 1
},
prefix = (Math.random() + "_").slice(2);
return {
set: function (name, value) {
if (this.isDefined(name)) {
return false;
}
if (!ownProp.call(allowed, typeof value)) {
return false;
}
constants[prefix + name] = value;
return true;
},
isDefined: function (name) {
return ownProp.call(constants, prefix + name);
},
get: function (name) {
if (this.isDefined(name)) {
return constants[prefix + name];
}
return null;
}
};
}());
// check if defined
constant.isDefined("maxwidth"); // false
// define
constant.set("maxwidth", 480); // true
// check again
constant.isDefined("maxwidth"); // true
// attempt to redefine
constant.set("maxwidth", 320); // false
// is the value still intact?
constant.get("maxwidth"); // 480
8. 链式模式 -------------------------------------------------------------
*就是jQuery式的调用方法:
myobj.method1("hello").method2().method3("world").method4();
如果方法没有明确的有意义的返回值时, 就可以返回this, 这样就可以实现链式模式
var obj = {
value: 1,
increment: function () {
this.value += 1;
return this;
},
add: function (v) {
this.value += v;
return this;
},
shout: function () {
alert(this.value);
}
};
// chain method calls
obj.increment().add(3).shout(); // 5
// as opposed to calling them one by one
obj.increment();
obj.add(3);
obj.shout(); // 5
9. method()方法
*使用prototype定义方法可能在写法上带来不便, 结合链式模式, 可以采用method()方法
if (typeof Function.prototype.method !== "function") {
Function.prototype.method = function (name, implementation) {
this.prototype[name] = implementation;
return this;
};
}
var Person = function (name) {
this.name = name;
}.method('getName', function () {
return this.name;
}).method('setName', function (name) {
this.name = name;
return this;
});
var a = new Person('Adam');
a.getName(); // 'Adam'
a.setName('Eve').getName(); // 'Eve'