JavaScript基础初始时期分支（018）

Init-Time Branching初始时期分支是一种用做优化的模式。如果某些条件在程序启动后就不再改变，那么我们就只需要在初始时期检查一次就可以了，而不是在每次需要用到这些条件的时候都检查一次。比如，Javascript经常需要判断运行在哪个浏览器里，这个检查工作通常只需要在初始时期完成就可以了。又如，假设程序在运行期间需要检查是否支持XMLHttpRequest 对象（Ajax应用时的重要对象），如果运行环境支持，那我们就可以认为程序在运行期间一直都可以使用这个对象。

Javascript的程序员都会需要运行环境中是否支持一些特性，比如下面的代码：

// BEFORE
var utils = {addListener: function (el, type, fn) {if (typeof window.addEventListener === 'function') {el.addEventListener(type, fn, false);} else if (typeof document.attachEvent === 'function') { // IEel.attachEvent('on' + type, fn);} else { // older browsersel['on' + type] = fn;}},removeListener: function (el, type, fn) {// pretty much the same...}
};

这段代码没有逻辑上的错误，问题是运行效率不高。因为每次addListener都会检查运行环境是否支持window.addEventListener，这显然有些多余。使用初始时期分支的方法，程序可以改为：

// 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') { // IEutils.addListener = function (el, type, fn) {el.attachEvent('on' + type, fn);};utils.removeListener = function (el, type, fn) {el.detachEvent('on' + type, fn);};
} else { // older browsersutils.addListener = function (el, type, fn) {el['on' + type] = fn;};utils.removeListener = function (el, type, fn) {el['on' + type] = null;};
}

最后建议不要对运行环境进行过多的“猜测”。比如，运行环境不支持window.addEventListener，并不代表它一定是IE，也不代表它不支持XMLHttpRequest。所以最好把这些运行环境的特性看成是独立的没有关联的条件来检查。

转载于:https://www.cnblogs.com/Bryran/p/3976121.html

JavaScript基础初始时期分支（018）相关推荐

JavaScript基础06-day08【if练习、条件分支语句switch、for循环】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript基础第01天—编程语言—计算机基础—初始JavaScript—JavaScript注释—JavaScript输入输出语句—变量的使用—数据类型—关键字和保留字
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
JavaScript基础(一)(编程语言,计算机基础,初始JavaScript,JavaScript注释,输入输出语句,变量的概念,变量的使用,数据类型,解释型语言和编译型语言)
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
前端JavaScript基础知识点
JavaScript基础阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容变量的声明及使用数据类型类型转换运算符 JavaScript的组成 E ...
前端基础入门四（JavaScript基础）
为什么80%的码农都做不了架构师?>>> 目标: 掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础,后续会讲解JavaScript高级. 自己是个做 ...
JavaScript基础第02天—运算符（操作符）—流程控制—循环—代码规范
JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...
阿里架构师学习笔记，一文掌握JavaScript基础
一 JavaScript 简介 1 JavaScript基本介绍 1 JavaScript 简称JS,是一种动态的弱类型脚本解释型语言,和HTML,CSS并成为三大WEB核心技术,得到了几乎所有主流浏 ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
JavaScript基础总结（2）
JavaScript基础总结(2) 六.数组与函数数组 1. 数组的概念一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素.数组是一种将一组数据存储在单个变量名下的优雅方式. ...

JavaScript基础初始时期分支（018）

JavaScript基础初始时期分支（018）相关推荐

最新文章

热门文章