前言
也算老生常谈的问题了，再深入搞一搞怎么玩儿封装，如果看到这篇文章的你，正好你也是追求完美的代码洁癖狂者，那么这篇文章相信非常适合你。
举一个例子，编写一个Person类，具有name和birthday（时间戳）两个属性及对应的getter和setter方法，注意，setBirthday输入的参数是日期字符串，如"2016-04-08"。getBirthday同样得到的也是日期字符串。那么这个类是这样的——
var Person = function(name, birthday) {
this.name = name;
this.birthday = birthday; // timestamp
};
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
}
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
Person.prototype = {
setName: function(name) {
this.name = name;
},
getName: function() {
return this.name;
},
/**
* 设置生日
* @param dateString
*/
setBirthday: function(dateString) {
this.birthday = getTimestampOfInput(dateString);
},
/**
* 获取生日
* @returns {*}
*/
getBirthday: function() {
return getFormattedDay(this.birthday);
}
};
如果采用面向过程的方式去写，我们需要借助自执行匿名函数闭包的方式，如——
// 常用模式一：单例/静态 - 私有变量&共有方法
// 生成一个人
var person = (function() {
// 私有变量
var name = '';
var birthday = new Date().getTime(); // 默认是时间戳方式
// 共有方法
return {
setName: function(newName) {
name = newName;
},
getName: function() {
return name;
},
setBirthday: function(dateString) {
// 私有函数
function getTimestampOfInput() {
return new Date(dateString).getTime();
} birthday = getTimestampOfInput();
},
getBirthday: function() {
return getFormattedDay(birthday); // 函数式 - 不访问外界变量，没有闭包的呈现
// 有了输入，便有了预想中的输出，不保存状态
// 私有函数 - 已工具方法存在
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
}
};
})(); person.setName('king');
console.log(person.getName()); person.setBirthday('2016-4-8');
console.log(person.getBirthday());
一、精分面向过程的写法
要知道，上面的面向过程person是一个单例，这种写法更像是一种命名空间提供工具函数的方式，如——
/**
* @file cookie
* @author
*/
define(function (require, exports, module) { /**
* 操作 cookie
*
* 对外暴露三个方法:
*
* get()
* set()
* remove()
*
* 使用 cookie 必须了解的知识：
*
* 一枚 cookie 有如下属性：
*
* key value domain path expires secure
*
* domain: 浏览器只向指定域的服务器发送 cookie，默认是产生 Set-Cookie 响应的服务器的主机名
* path: 为特定页面指定 cookie，默认是产生 Set-Cookie 响应的 URL 的路径
* expires: 日期格式为（Weekday, DD-MON-YY HH:MM:SS GMT）唯一合法的时区是 GMT，默认是会话结束时过期
* secure: 使用 ssl 安全连接时才会发送 cookie
*
* 有点类似命名空间的意思
*
*/ 'use strict'; /**
* 一小时的毫秒数
*
* @inner
* @const
* @type {number}
*/
var HOUR_TIME = 60 * 60 * 1000; /**
* 把 cookie 字符串解析成对象
*
* @inner
* @param {string} cookieStr 格式为 key1=value1;key2=value2;
* @return {Object}
*/
function parse(cookieStr) { if (cookieStr.indexOf('"') === 0) {
// 如果 cookie 按照 RFC2068 规范进行了转义，要转成原始格式
cookieStr = cookieStr.slice(1, -1)
.replace(/\\"/g, '"')
.replace(/\\\\/g, '\\');
} var result = { }; try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
cookieStr = decodeURIComponent(cookieStr.replace(/\+/g, ' ')); $.each(
cookieStr.split(';'),
function (index, part) {
var pair = part.split('=');
var key = $.trim(pair[0]);
var value = $.trim(pair[1]); if (key) {
result[key] = value;
}
}
);
}
catch (e) { } return result;
} /**
* 设置一枚 cookie
*
* @param {string} key
* @param {string} value
* @param {Object} options
*/
function setCookie(key, value, options) { var expires = options.expires; if ($.isNumeric(expires)) {
var hours = expires;
expires = new Date();
expires.setTime(expires.getTime() + hours * HOUR_TIME);
} document.cookie = [
encodeURIComponent(key), '=', encodeURIComponent(value),
expires ? ';expires=' + expires.toUTCString() : '',
options.path ? ';path=' + options.path : '',
options.domain ? ';domain=' + options.domain : '',
options.secure ? ';secure' : ''
].join('');
} /**
* 读取 cookie 的键值
*
* 如果不传 key，则返回完整的 cookie 键值对象
*
* @param {string=} key
* @return {string|Object|undefined}
*/
exports.get = function (key) {
var result = parse(document.cookie);
return $.type(key) === 'string' ? result[key] : result;
}; /**
* 写入 cookie
*
* @param {string|Object} key 如果 key 是 string，则必须传 value
* 如果 key 是 Object，可批量写入
* @param {*=} value
* @param {Object=} options
* @property {number=} options.expires 过期小时数，如 1 表示 1 小时后过期
* @property {string=} options.path 路径，默认是 /
* @property {string=} options.domain 域名
* @property {boolean=} options.secure 是否加密传输
*/
exports.set = function (key, value, options) { if ($.isPlainObject(key)) {
options = value;
value = null;
} options = $.extend({ }, exports.defaultOptions, options); if (value === null) {
$.each(
key,
function (key, value) {
setCookie(key, value, options);
}
);
}
else {
setCookie(key, value, options);
}
}; /**
* 删除某个 cookie
*
* @param {string} key
* @param {Object=} options
* @property {string=} options.path cookie 的路径
* @property {string=} options.domain 域名
* @property {boolean=} options.secure 是否加密传输
*/
exports.remove = function (key, options) { if (key == null) {
return;
} options = options || { };
options.expires = -1; setCookie(
key,
'',
$.extend({ }, exports.defaultOptions, options)
);
}; /**
* 默认属性，暴露给外部修改
*
* @type {Object}
*/
exports.defaultOptions = {
path: '/'
}; });
对于这个person单例或者理解为一个普通的（命名空间）对象，我们会发现两个工具函数（用于birthday的格式化）——
getTimestampOfInput：服务于setBirthday这个方法
getFormattedDay：服务于getBirthday这个方法
1.1 将工具函数私有性封装，利用闭包缓存该工具函数
会发现，每一次执行setBirthday，都会创建getTimestampOfInput这个函数，执行完setBirthday之后，getTimestampOfInput又会被销毁；同理getFormattedDay方法。私有性，我们做到了，但是每一次都需要去创建工具函数（getTimestampOfInput和getFormattedDay）。如果我们想把工具函数仅仅执行一次，可以这样写——
// 常用模式一：单例/静态 - 私有变量&共有方法
// 生成一个人
var person = (function() {
// 私有变量
var name = '';
var birthday = new Date().getTime(); // 默认是时间戳方式
// 共有方法
return {
setName: function(newName) {
name = newName;
},
getName: function() {
return name;
},
setBirthday: (function() {
// 私有函数
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
}
return function(dateString) {
getTimestampOfInput(dateString);
};
})(),
getBirthday: (function() {
// 函数式 - 不访问外界变量，没有闭包的呈现
// 有了输入，便有了预想中的输出，不保存状态
// 私有函数 - 已工具方法存在
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
return function() {
return getFormattedDay(birthday);
};
})()
};
})();
要看见里面用了一层闭包哦，也就是多需要耗损内存，但换来了性能上的优化。
1.2 将工具函数抽取为私有
我们继续变态的走下去，把这两个工具函数抽取出来，如——
// 常用模式一：单例/静态 - 私有变量&共有方法
// 生成一个人
var person = (function() {
// 私有变量
var name = '';
var birthday = new Date().getTime(); // 默认是时间戳方式
// 函数式 - 不访问外界变量，没有闭包的呈现
// 有了输入，便有了预想中的输出，不保存状态
// 私有函数 - 已工具方法存在
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
// 函数式 - 不访问外界变量，没有闭包的呈现
// 有了输入，便有了预想中的输出，不保存状态
// 私有函数 - 已工具方法存在
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
}
// 共有方法
return {
setName: function(newName) {
name = newName;
},
getName: function() {
return name;
},
setBirthday: function(dateString) {
birthday = getTimestampOfInput(dateString);
},
getBirthday: function() {
return getFormattedDay(birthday);
}
};
})();
那么这两个工具方法同样具有私有性，但是它能够服务的方法就更多了，所有对外暴露的方法（如将来有个新的方法getCreateDay），都可以使用这两个工具函数。
1.3 将工具函数显示声明为私有
OK，我们看到上面的例子中，name，birthday，包含两个工具方法都是私有的，我们可以使用"_"的方式来显示声明它是私有的，就可以这样去改装——
// 常用模式一：静态私有变量&共有方法
// 生成一个人
var person = {
// 单例的私有属性 - 或者可理解为静态变量
_name: '',
// 单例的私有属性 - 或者可理解为静态变量
_birthday: new Date().getTime(), // 默认是时间戳方式
// 工具函数
_getTimestampOfInput: function(dateString) {
return new Date(dateString).getTime();
},
// 工具函数
_getFormattedDay: function(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
},
// 共有方法
setName: function(newName) {
this._name = newName;
},
getName: function() {
return this._name;
},
setBirthday: function(dateString) {
this._birthday = this._getTimestampOfInput(dateString);
},
getBirthday: function() {
return this._getFormattedDay(this._birthday);
}
};
看起来还不错，但是私有属性还是可以被访问的，如person._birthday，
1.4 利用private和public命名空间来实现私有和共有
那么，我们想要让私有的属性达到真正的私有，并借助命名空间的方式，会有这个方式——
// 常用模式一：静态私有变量&共有方法
// 生成一个人
var person = (function() {
// 该对象保存静态属性
// 保存单例的状态
var _private = {
// 单例的私有属性 - 或者可理解为静态变量
_name: '',
// 单例的私有属性 - 或者可理解为静态变量
_birthday: new Date().getTime(), // 默认是时间戳方式
// 工具函数
getTimestampOfInput: function(dateString) {
return new Date(dateString).getTime();
},
// 工具函数
_getFormattedDay: function(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
},
getFormattedDayOfBirthday: function() {
return this._getFormattedDay(this._birthday);
}
}; // 共有对象
var _public = {
setName: function(newName) {
_private._name = newName;
},
// 直接从_private对象中获取
getName: function() {
return _private._name;
},
/**
* 可直接操作_private中的静态属性
* @param dateString
*/
setBirthday: function(dateString) {
_private._birthday = _private.getTimestampOfInput(dateString);
},
getBirthday: function() {
return _private.getFormattedDayOfBirthday();
}
}; return _public;
})();
_private和_public这两个命名空间还不错。在此基础上，建议把工具函数拿出来，可以这样——
// 常用模式一：静态私有变量&共有方法
// 生成一个人
var person = (function() { // 工具函数
// 可供_private和_public对象共用
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
}
// 工具函数
// 可供_private和_public对象共用
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
} // 该对象保存静态属性
// 保存单例的状态
var _private = {
// 单例的私有属性 - 或者可理解为静态变量
_name: '',
// 单例的私有属性 - 或者可理解为静态变量
_birthday: new Date().getTime() // 默认是时间戳方式
}; // 共有对象
var _public = {
setName: function(newName) {
_private._name = newName;
},
// 直接从_private对象中获取
getName: function() {
return _private._name;
},
/**
* 可直接操作_private中的静态属性
* @param dateString
*/
setBirthday: function(dateString) {
_private._birthday = getTimestampOfInput(dateString);
},
getBirthday: function() {
return getFormattedDay(_private._birthday);
}
}; return _public;
})();
1.5 将工具函数就近于它的调用者
有些同学非常喜欢将工具函数靠近与它的调用者，类似于这样——
// 常用模式一：静态私有变量&共有方法
// 生成一个人
var person = (function() { // 该对象保存静态属性
// 保存单例的状态
var _private = {
// 单例的私有属性 - 或者可理解为静态变量
_name: '',
// 单例的私有属性 - 或者可理解为静态变量
_birthday: new Date().getTime() // 默认是时间戳方式
}; _private.name = '';
_private.birthday = new Date().getTime(); // 默认是时间戳方式 var _public = {}; _public.setName = function(newName) {
_private._name = newName;
}; _public.getName = function() {
return _private._name;
}; // 工具函数
// 可供_private和_public对象共用
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
}
_public.setBirthday = function(dateString) {
_private._birthday = getTimestampOfInput(dateString);
}; // 工具函数
// 可供_private和_public对象共用
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
_public.getBirthday = function() {
return getFormattedDay(_private._birthday);
}; return _public;
})();
1.6 将工具函数放入util等全局命名空间
同样的，我们发现这两个工具函数具有通用性，可以放置于全局，供所有函数使用，那么就有这样的方式，如——
// 这里的工具类，可以以单独文件存在，供全局工程来使用
var util = {
/**
* 生日格式化显示
* @param timestamp
* @returns {string}
* @private
*/
getFormattedDay: function(timestamp) { // 模拟实现静态方法
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
},
/**
* 根据用户输入来获取时间戳，如输入'1995-10-05'
* @param timestamp
* @returns {string}
* @private
*/
getTimestampOfInput: function(dateString) {
return new Date(dateString).getTime();
}
}; var person = (function() {
// 私有变量
var name = '';
var birthday = new Date().getTime(); // 默认是时间戳方式
// 共有方法
return {
setName: function(newName) {
name = newName;
},
getName: function() {
return name;
},
setBirthday: function(dateString) {
birthday = util.getTimestampOfInput(dateString);
},
getBirthday: function() {
return util.getFormattedDay(birthday);
}
};
})();
上面这种方式，也是我们最常用的方式，很直观，易维护。
OK，那么面向过程的写法方式，就算是精分完了，很变态对不对？
总之，没有严格的对错，按照你认同喜欢的模式来。下面精分一下面向对象的写法。
二、精分面向对象的写法
面向对象的写法，要注意prototype中的方法供所有实例对象所共有，且这里的方法都是对实例状态变更的说明，即对实例属性的操作的变更。
2.1 不要把工具函数放入prototype中
基于前言里面的例子，我们常常不注意的将工具函数也都放在prototype当中，如——
// 多实例
var Person = function(name, birthday) {
this.name = name;
this.birthday = birthday; // timestamp
};
Person.prototype = {
setName: function(name) {
this.name = name;
},
getName: function() {
return this.name;
},
/**
* 设置生日
* @param dateString
*/
setBirthday: function(dateString) {
this.birthday = this._getTimestampOfInput(dateString);
},
// 工具函数
_getTimestampOfInput: function(dateString) {
return new Date(dateString).getTime();
},
/**
* 获取生日
* @returns {*}
*/
getBirthday: function() {
return this._getFormattedDay(this.birthday);
},
// 工具函数
_getFormattedDay: function(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
};
会看见上面的_getTimestampOfInput和_getFormattedDay两个方法也都放置在了prototype当中，然而这里的方法并没有操作实例属性，因此不应该将这类工具方法置于prototype当中。
2.2 不要将缓存变量放入this当中
还有一个大家常常犯的一个大错误，就是习惯性把各个方法间通讯的变量放入到this当中，如下——
var Person = function(name, birthday) {
this.name = name;
this.birthday = birthday; // timestamp
};
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
}
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}
Person.prototype = {
setName: function(name) {
this.name = name;
},
getName: function() {
return this.name;
},
/**
* 设置生日
* @param dateString
*/
setBirthday: function(dateString) {
this.birthday = getTimestampOfInput(dateString);
},
/**
* 获取生日
* @returns {*}
*/
getBirthday: function() {
// 不要把缓存变量放置于this中
this.birthdayOfFormatted = getFormattedDay(this.birthday);
return this.birthdayOfFormatted;
}
};
会看到，这里的this.birthdayOfFormatted是一个缓存变量，并不能代表这个实例的某个状态。好了，我们回到正确的方式。
2.3 将工具函数就近于方法的调用者
// 多实例 - 抽取工具函数
var Person = function(name, birthday) {
this.name = name;
this.birthday = birthday; // timestamp
}; Person.prototype.setName = function(name) {
this.name = name;
}; Person.prototype.getName = function() {
return this.name;
}; // 工具函数
function getTimestampOfInput(dateString) {
return new Date(dateString).getTime();
} Person.prototype.setBirthday = function(dateString) {
this.birthday = getTimestampOfInput(dateString);
}; // 工具函数
function getFormattedDay(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
} Person.prototype.getBirthday = function() {
return getFormattedDay(this.birthday);
};
在维护性方面略胜一筹，主要看个人的变成习惯。
2.4 将工具函数放入类命名空间中，充当类的静态函数
// 多实例 - 抽取工具函数
var Person = function(name, birthday) {
this.name = name;
this.birthday = birthday; // timestamp
}; // 工具函数 - 对外静态变量
Person.getTimestampOfInput = function (dateString) {
return new Date(dateString).getTime();
}; // 工具函数 - 对外静态变量
Person.getFormattedDay = function(timestamp) {
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
}; Person.prototype = {
setName: function(name) {
this.name = name;
},
getName: function() {
return this.name;
},
/**
* 设置生日
* @param dateString
*/
setBirthday: function(dateString) {
this.birthday = Person.getTimestampOfInput(dateString);
},
/**
* 获取生日
* @returns {*}
*/
getBirthday: function() {
return Person.getFormattedDay(this.birthday);
}
};
我个人比较推荐这种写法，当然也可以把工具函数放入某个类似于util的命名空间中，供全局调用。
2.5 将工具函数放入util等全局命名空间
// 这里的工具类，可以以单独文件存在，供全局工程来使用
var util = {
/**
* 生日格式化显示
* @param timestamp
* @returns {string}
* @private
*/
getFormattedDay: function(timestamp) { // 模拟实现静态方法
var datetime = new Date(timestamp);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
return year + '-' + (String(month).length < 2 ? "0" + month : month) + "-"
+ (String(date).length < 2 ? "0" + date : date);
},
/**
* 根据用户输入来获取时间戳，如输入'1995-10-05'
* @param timestamp
* @returns {string}
* @private
*/
getTimestampOfInput: function(dateString) {
return new Date(dateString).getTime();
}
}; // 多实例 - 抽取工具函数
var Person = function(name, birthday) {
this.name = name;
this.birthday = birthday; // timestamp
}; Person.prototype = {
setName: function(name) {
this.name = name;
},
getName: function() {
return this.name;
},
/**
* 设置生日
* @param dateString
*/
setBirthday: function(dateString) {
this.birthday = util.getTimestampOfInput(dateString);
},
/**
* 获取生日
* @returns {*}
*/
getBirthday: function() {
return util.getFormattedDay(this.birthday);
}
};
好啦，整个面向对象的写法方式介绍到这儿。
总之，归于一点——要知道什么方法可以当做工具函数处理，并合理地放置工具函数的位置。
三、总结
整篇文章主要围绕工具函数的写法展开，模式不同，没有对与错，依照自身的编码习惯而定。欢迎看到文章的博友补充。