JavaScript学习笔记(十六) 初始化时分支
2012-10-21 21:32
501 查看
初始化时分支(Init-Time Branching)
初始化时分支(也叫做载入时分支(load-time branching))是一种优化的模式;当你知道某一个明确的条件在整个程序生命周期中都不会发生改变,那么只判断这一次条件就会变的有意义;
浏览器嗅探(Browser sniffing)(或者功能探测(feature detection)))都是典型的例子。
比如,当你已经嗅探到XMLHttpRequest被作为一个原生对象而支持;
那么在整个程序执行的过程中,相关联的浏览器是没有机会改变的,你不会突然被要求去处理ActiveX对象;
因为环境没有改变,所以没有理由让的代码在你每次需要一个XHR对象是都进行嗅探(并得到相同的结论)。
附加事件监听器程序也可以从初始化时分支模式获益,绝大部分程序猿都写过——在他们的客户端编程人生中至少写过一次——一个工具;
具有附加和移除事件监听器方法,像下面:
// BEFORE var utils = { addListener: function(el, type, fn) { if (typeof window.addEventListener === 'function') { el.addEventListener(type, fn, false); } else if (typeof document.attachEvent === 'function') { // IE el.attachEvent('on' + type, fn); } else { // older browsers el['on' + type] = fn; } }, removeListener: function(el, type, fn) { // pretty much the same... } };
这段代码的问题是低效的,因为每次当你调用utils.addListener() 或 utils.removeListener()的时候,相同的检查就会一次又一次被执行;
使用初始化时分支,你只需要在脚本载入的过程中嗅探一次浏览器的特征,在这个时候你可以重定义函数行为;
下面是个例子,如何实现这个任务:
// AFTER // the interface var utils = { addListener: null, removeListener: null }; // the implementation if (typeof window.addEventListener === 'function') { utils.addListener = function(el, type, fn) { el.addEventListener(type, fn, false); }; utils.removeListener = function(el, type, fn) { el.removeEventListener(type, fn, false); }; } else if (typeof document.attachEvent === 'function') { // IE utils.addListener = function(el, type, fn) { el.attachEvent('on' + type, fn); }; utils.removeListener = function(el, type, fn) { el.detachEvent('on' + type, fn); }; } else { // older browsers utils.addListener = function(el, type, fn) { el['on' + type] = fn; }; utils.removeListener = function(el, type, fn) { el['on' + type] = null; }; }
接下来是一些关于使用浏览器嗅探的警告,当你使用这种模式,不要过分假设浏览器的功能;
比如:你已经嗅探到浏览器不支持window.addEventListener,不要仅仅假设你正在应对的浏览器就是IE,而且它也不支持原生的XMLHttpRequest;
也有一些情况你可以安全的假设功能是想对应,比如.addEventListener和 .removeEventListener;
但是一般来说浏览器功能改变是独立的,最好的策略是去单独嗅探功能然后再使用载入时分支模式仅仅只做一次嗅探。
相关文章推荐
- 学习Swift笔记 (十六)Swift的初始化
- 学习Swift笔记 (十六)Swift的初始化
- JavaScript学习笔记(十六)
- javascript学习笔记(十二)初始化表单,及对其简单验证
- JavaScript权威设计--CSS(简要学习笔记十六)
- JavaScript 学习笔记(十六) js事件
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
- JavaScript 学习笔记(十六) js事件
- 韩顺平 javascript教学视频_学习笔记5_js三大流程控制(顺序流程、分支控制、循环控制)
- javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
- JavaScript for Kids 学习笔记5. 分支和循环
- javascript学习笔记(十六) 系统对话框
- JavaScript学习笔记26-对象的初始化
- JavaScript学习笔记十六:generator
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- javascript学习笔记(二十) 获得和设置元素的特性(属性)
- javascript学习笔记
- GitHub学习笔记:分支管理
- JavaScript--基于对象的脚本语言学习笔记(一)