JavaScript进阶：安全工厂模式类以及工厂方法
2022-01-19 本文已影响0人
听书先生
1、安全模式类
安全模式类可以避免开发者对类的错误使用造成一些报错问题，比如在创建的一个类名为Test时，有些人知道这个是一个类，因此会在前面加new关键字，但是也有些使用这个的不知道是个类，忽略了new关键字，直接执行了该类，因此就会导致报错。
-
解决方案：
在构造函数开始时先判断它当前对象this指代的是不是该类，如果是，则通过new关键字创建对象，如果不是说明类在全局作用域中执行了（也就是执行了window对象中的），那么我们就需要返回new实例出去。
// 安全工厂模式
const safeFactory = function(type, message) {
if (this instanceof safeFactory) {
// 如果this指向为safeFactory类的实例
return this[type](message);
} else {
return new safeFactory(type, message);
}
}
2、安全工厂方法
创建了安全模式类之后，需要添加什么类只需要在安全模式类的原型链上追加即可。
// 添加多个对象(登录、注册)
safeFactory.prototype = {
'login': function(message) {
(function() {
container.innerHTML = `<p>${ message }模块</p>
<p><span>用户名: </span><input type="text" value='' /></p>
<p><span>密码: </span><input type="password" value='' /></p>
<button>${message}</button>
`;
container.style.border = '1px solid #d5c7c7';
container.style.padding = '20px';
})(message);
},
'register': function(message) {
(function() {
container.innerHTML = `<p>${ message }模块</p>
<p><span>用户名: </span><input type="text" value='' /></p>
<p><span>密码: </span><input type="password" value='' /></p>
<p><span>确认密码: </span><input type="password" value='' /></p>
<button>${message}</button>
`;
container.style.border = '1px solid #f5bb828f';
container.style.padding = '20px';
})(message);
},
}
3、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div > p {
text-align: center;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
flex-wrap: nowrap;
margin: 40px 0;
}
.btn > button {
width: 80px;
height: 25px;
border: none;
background: #2196f3;
color: #ffffffe0;
margin-right: 8px;
border-radius: 3px;
box-shadow: 3px 3px 3px #ccc;
}
div > button {
margin-left: calc(50% - 40px);
width: 80px;
height: 25px;
border: none;
background: #2196f3;
color: #ffffffe0;
border-radius: 3px;
box-shadow: 3px 3px 3px #ccc;
}
p > span {
width: 80px;
text-align: right;
display: inline-block;
margin-right: 10px;
}
p > input {
border: 1px solid #e3d9d9;
height: 21px;
border-radius: 3px;
}
</style>
</head>
<body>
<span class="btn">
<button onclick="handleSwitch('login')">登录</button>
<button onclick="handleSwitch('register')">注册</button>
</span>
<script type="text/javascript">
const container = document.createElement('div');
document.body.appendChild(container);
// 安全工厂模式
const safeFactory = function(type, message) {
if (this instanceof safeFactory) {
// 如果this指向为safeFactory类的实例
return this[type](message);
} else {
return new safeFactory(type, message);
}
}
// 添加多个对象(登录、注册)
safeFactory.prototype = {
'login': function(message) {
(function() {
container.innerHTML = `<p>${ message }模块</p>
<p><span>用户名: </span><input type="text" value='' /></p>
<p><span>密码: </span><input type="password" value='' /></p>
<button>${message}</button>
`;
container.style.border = '1px solid #d5c7c7';
container.style.padding = '20px';
})(message);
},
'register': function(message) {
(function() {
container.innerHTML = `<p>${ message }模块</p>
<p><span>用户名: </span><input type="text" value='' /></p>
<p><span>密码: </span><input type="password" value='' /></p>
<p><span>确认密码: </span><input type="password" value='' /></p>
<button>${message}</button>
`;
container.style.border = '1px solid #f5bb828f';
container.style.padding = '20px';
})(message);
},
}
var temp; // 创建一个空的对象实例，追加到window属性中去
const handleSwitch = function(type) {
// 切换时先清空之前创建的对象实例
temp = null;
switch (type) {
case 'login':
temp = new safeFactory('login', '登录');
break;
case 'register':
temp = new safeFactory('register', '注册');
break;
default:
break;
}
}
</script>
</body>
</html>
图1.png
图2.png
