分享JavaScript的 3 种工厂模式的用法

// 0.0.2/es5.simple.factory.js
function Role(options){
this.role = options.role;
this.permissions = options.permissions;
}
Role.prototype.show = function (){
var str = '是一个' + this.role + ', 权限：' + this.permissions.join(', ');
console.log(str)
}
function simpleFactory(role){
switch(role) {
case 'admin':
return new Role({
role: '管理员',
permissions: ['设置', '删除', '新增', '创建', '开发', '推送', '提问', '评论']
});
break;
case 'developer':
return new Role({
role: '开发者',
permissions: ['开发', '推送', '提问', '评论']
});
break;
default:
throw new Error('参数只能为 admin 或 developer');
}
}
// 实例
const xm = simpleFactory('admin');
xm.show();
const xh = simpleFactory('developer');
xh.show();
const xl = simpleFactory('guest');
xl.show();

// 0.0.2/simple.factory.js
class SimpleFactory {
constructor(opt) {
this.role = opt.role;
this.permissions = opt.permissions;
}
// 静态方法
static create(role) {
switch (role) {
case 'admin':
return new SimpleFactory({
role: '管理员',
permissions: ['设置', '删除', '新增', '创建', '开发', '推送', '提问', '评论']
});
break;
case 'developer':
return new SimpleFactory({
role: '开发者',
permissions: ['开发', '推送', '提问', '评论']
});
break;
default:
throw new Error('参数只能为 admin 或 developer');
}
}
show() {
const str = `是一个${this.role}, 权限：${this.permissions.join(', ')}`;
console.log(str);
}
}
// 实例
const xm = SampleFactory.create('admin');
xm.show();
const xh = SampleFactory.create('developer');
xh.show();
const xl = SampleFactory.create('guest');
xl.show();

// 0.0.2/es5.function.factory.js
function FunctionFactory(role) {
if(!(['admin', 'developer'].indexOf(role) > -1)){
throw new Error('参数只能为 admin 或 developer');
}
// 安全的工厂方法
if (this instanceof FunctionFactory) {
return this[role]();
}
return new FunctionFactory(role);
}
FunctionFactory.prototype.show = function () {
var str = '是一个' + this.role + ', 权限：' + this.permissions.join(', ');
console.log(str)
}
FunctionFactory.prototype.admin = function (permissions) {
this.role = '管理员';
this.permissions = ['设置', '删除', '新增', '创建', '开发', '推送', '提问', '评论'];
}
FunctionFactory.prototype.developer = function (permissions) {
this.role = '开发者';
this.permissions = ['开发', '推送', '提问', '评论'];
}
var xm = FunctionFactory('admin');
xm.show();
var xh = FunctionFactory('developer');
xh.show();
var xl = FunctionFactory('guest');
xl.show();

// 0.0.2/jquery.factory.js
// 工厂模式
class jQuery {
constructor(selector) {
let slice = Array.prototype.slice;
let dom = slice.call(document.querySelectorAll(selector));
let len = dom ? dom.length : 0;
for (let i = 0; i < len; i++) {
this[i] = dom[i];
}
this.length = len
this.selector = selector || ''
}
addClass(name) {
console.log(name)
}
html(data) {
}
// 省略多个 API
}
// 工厂模式
window.$ = function(selector) {
return new jQuery(selector);
}
// 实例
const $li = $('li')
$li.addClass('item');