设计模式知识连载（42）---惰性模式:
2017-12-31 17:56
381 查看
<body>
<h3>设计模式知识连载（42）---惰性模式:</h3>
<p>
减少每次代码执行时的重复性的分支判断，通过对对象重定义来屏蔽原对象中的分支判断
</p>
<hr>
<button id = 'btn'>点击</button>
<script type="text/javascript">
/**
* 案例一：，方式一：初始
*/
// // // 单体模式定义命名空间
// var A = {} ;
// // 添加绑定事件方法on
// A.on = function(dom, type, fn) {
// if(dom.addEventListener) {
// dom.addEventListener(type, fn, false) ;
// }else if(dom.attachEvent) {
// dom.attachEvent('on' + type, fn) ;
// }else {
// dom['on' + fn] = fn ;
// }
// }
// var btn = document.getElementById('btn') ;
// A.on(btn, 'click', function() {
// console.log('111') ;
// }) ;
/**
* 案例一：，方式二：进阶
*/
// // 单体模式定义命名空间
// var A = {} ;
// // 添加绑定事件方法on
// A.on = (function(dom, type, fn) {
// // 如果支持addEventListener方法
// if(document.addEventListener) {
// // 返回重新定义方法
// return function(dom, type, fn) {
// dom.addEventListener(type, fn, false) ;
// }
// // 如果支持attachEvent方法（IE）
// }else if(document.attachEvent) {
// // 返回重新定义方法
// return function(dom, type, fn) {
// dom.attachEvent('on' + type, fn) ;
// }
// // 定义on方法
// }else {
// // 返回重新定义方法
// return function() {
// dom['on' + fn] = fn ;
// }
// }
// })() ;
// console.log(A.on) ;
/**
* 案例一：，方式三：进阶
*/
// 单体模式定义命名空间
var A = {} ;
// 添加绑定事件方法on
A.on = function(dom, type, fn) {
// 如果支持addEventListener方法
if(dom.addEventListener) {
// 显示重新定义on方法
A.on = function(dom, type, fn) {
dom.addEventListener(type, fn, false) ;
}
// 如果支持attachEvent方法（IE）
}else if(dom.attachEvent) {
// 显示重新定义on方法
A.on = function(dom, type, fn) {
dom.attachEvent('on' + type, fn) ;
}
// 定义on方法
}else {
// 显示重新定义on方法
A.on = function(dom, type, fn) {
dom['on' + fn] = fn ;
}
}
// 执行重新定义on方法
A.on(dom, type, fn) ;
} ;
// 测试用例
var btn = document.getElementById('btn') ;
A.on(btn, 'click', function() {
console.log('111') ;
}) ;
/**
* 案例二：创建XHR对象，方式一：初始
*/
// 创建XHR对象
// function createXHR() {
// // 标准浏览器
// if(typeof XMLHttpRequest != 'undefined') {
// return new XMLHttpRequest() ;
// // IE浏览器
// }else if(typeof ActiveXObject != 'undefined') {
// if(typeof arguments.callee.activeXString != 'string') {
// var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'] ;
// var i = 0 ;
// var len = versions.length ;
// // 遍历并设置版本
// for(; i < len; i++) {
// try {
// new ActiveXObject(versions[i]) ;
// arguments.callee.activeXString = versions[i] ;
// break ;
// }catch(e) {
// }
// }
// }
// return new ActiveXObject(arguments.callee.activeXString) ;
// // 对不支持的浏览器抛出错误提示
// }else {
// throw new Error('您的浏览器并不支持Ajax') ;
// }
// }
/**
* 案例二：创建XHR对象，方式二：进阶
* 加载时损失性能，但是第一次调用时不损失性能
*/
// 创建XHR对象
// var createXHR = (function () {
// // 标准浏览器
// if(typeof XMLHttpRequest != 'undefined') {
// return function() {
// return new XMLHttpRequest() ;
// }
// // IE浏览器
// }else if(typeof ActiveXObject != 'undefined') {
// return function() {
// if(typeof arguments.callee.activeXString != 'string') {
// var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'] ;
// var i = 0 ;
// var len = versions.length ;
// // 遍历并设置版本
// for(; i < len; i++) {
// try {
// new ActiveXObject(versions[i]) ;
// arguments.callee.activeXString = versions[i] ;
// break ;
// }catch(e) {
// }
// }
// }
// return new ActiveXObject(arguments.callee.activeXString) ;
// }
// // 对不支持的浏览器抛出错误提示
// }else {
// return function() {
// throw new Error('您的浏览器并不支持Ajax') ;
// }
// }
// })() ;
/**
* 案例二：创建XHR对象，方式三：进阶
* 加载时不损失性能，但是第一次调用时损失性能
*/
function createXHR() {
// 标准浏览器
if(typeof XMLHttpRequest != 'undefined') {
createXHR = function() {
return new XMLHttpRequest() ;
}
// IE浏览器
}else if(typeof ActiveXObject != 'undefined') {
createXHR = function() {
if(typeof arguments.callee.activeXString != 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'] ;
var i = 0 ;
var len = versions.length ;
// 遍历并设置版本
for(; i < len; i++) {
try {
new ActiveXObject(versions[i]) ;
arguments.callee.activeXString = versions[i] ;
break ;
}catch(e) {
}
}
}
return new ActiveXObject(arguments.callee.activeXString) ;
}
// 对不支持的浏览器抛出错误提示
}else {
createXHR() {
throw new Error('您的浏览器并不支持Ajax') ;
}
}
return createXHR() ;
}
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 设计模式知识连载（20）---适配器模式:
- 设计模式知识连载（21）---代理模式:
- 设计模式知识连载（31）---命令模式:
- 设计模式知识连载（11）---继承_7:多继承
- 设计模式知识连载（48）---MVC模式:
- 设计模式知识连载（26）---模板方法模式:
- 设计模式知识连载（37）---链模式:
- 设计模式知识连载（4）---封装_3:创建对象的安全模式
- 设计模式知识连载（1）---函数的书写方式
- 设计模式知识连载（2）---封装_1
- 设计模式知识连载（6）---继承_2:创建即继承-构造函数继承
- 设计模式知识连载（9）---继承_5:如虎添翼-寄生式继承
- 设计模式知识连载（15）---抽象工厂模式:
- 设计模式知识连载（23）---桥接模式:
- 设计模式知识连载（49）---MVP模式:
- 设计模式知识连载（12）---调用方式:多态
- 设计模式知识连载（50）---MVVM模式:
- 设计模式知识连载（10）---继承_6:终极继承者-寄生组合式继承
- 设计模式知识连载（44）---等待者模式:
- 设计模式知识连载（22）---装饰者模式: