您的位置：首页 > 其它

设计模式知识连载（22）---装饰者模式:

2017-12-19 17:35 357 查看 
<body>

<h3>设计模式知识连载（22）---装饰者模式:</h3>
<p>
在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户更复杂需求。
</p>
<hr>
<form>
<div>
<label>用户名：</label>
<input type="text" name="name" id = 'name'>
<span id = 'name_warn_text' style="display: none">不能为空</span>
<span id = 'name_demo_text'>请输入3~6用户名</span>
</div>
<div>
<label>年龄：</label>
<input type="text" name="age" id = 'age'>
<span id = 'age_warn_text' style="display: none">不能为空</span>
<span id = 'age_demo_text'>请输入年龄</span>
</div>
<div>
<label>电话：</label>
<input type="text" name='tel' id = 'tel'>
<span id = 'tel_warn_text' style="display: none">不能为空</span>
<span id = 'tel_demo_text'>请输入7位电话号码</span>
</div>
<div>
<label>性别：</label>
<input type="radio" name="sex" checked="true">男
<input type="radio" name="sex">女
</div>
</form>

<script type="text/javascript">

/**
*   案例一：，方式一：初始1
*/
// // 输入框元素
// var telInput = document.getElementById('tel') ;
// // 输入框输入格式提示文案
// var telWarnText = document.getElementById('tel_warn_text') ;
// // 点击输入框显示输入框输入格式提示文案
// telInput.onclick = function () {
//  telWarnText.style.display = 'inline-block' ;
// } ;

/**
*   案例一：，方式一：初始2
*/
// //输入框元素
//  var telInput = document.getElementById('tel') ;
//  // 输入框输入格式提示文案
//  var telWarnText = document.getElementById('tel_warn_text') ;
//  // 输入框提示输入文案
//  var telDemoText = document.getElementById('tel_demo_text') ;
//  // 点击输入框显示输入框输入格式提示文案
//  telInput.onclick = function () {
//      telWarnText.style.display = 'inline-block' ;
//      telDemoText.style.display = 'none' ;
//  } ;

/**
*   案例一：，方式二： 进阶
*/
// 装饰者
var decorator = function(inputId, fn) {
// 获取事件源
var input = document.getElementById(inputId) ;
// 若事件源已经绑定事件
if(typeof input.onclick === 'function') {
// 缓存事件源原有回调函数
var oldClickFn = input.onclick ;

// 为事件源定义新的事件
input.onclick = function() {
// 事件源原有回调函数
oldClickFn() ;
// 执行事件源新增回调函数
fn() ;
}
// 事件源未绑定事件，直接为事件源添加新增回调函数
}else{
input.onclick = fn ;
}
// 做其他事情
} ;
// 测试用例：
// 用户名输入框功能装饰
decorator('name', function() {
document.getElementById('name_demo_text').style.display = 'none' ;
document.getElementById('name_warn_text').style.display = 'inline-block' ;

}) ;
// 年龄输入框功能装饰
decorator('age', function() {
document.getElementById('age_demo_text').style.display = 'none' ;
document.getElementById('age_warn_text').style.display = 'inline-block' ;

}) ;
// 电话输入框功能装饰
decorator('tel', function() {
document.getElementById('tel_demo_text').style.display = 'none' ;
document.getElementById('tel_warn_text').style.display = 'inline-block' ;
}) ;

</script>

</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  设计模式 装饰者模式
相关文章推荐
新的分享
章节导航