JavaScript高级程序设计(第三版)学习笔记22、24、25章
第22章,高级技巧
高级函数
安全的类型检测
function isArray(value){return Object.prototype.toString.call(value) == "[object Array]"; }
也可以基于这一思路测试某个值是不是原生函数或正则表达式:
//判断是否原生函数 function isFunction(value){return Object.prototype.toString.call(value) == "[object Function]"; } //判断是否原生函数 function isFunction(value){return Object.prototype.toString.call(value) == "[object RegExp]"; }
作用域安全的构造函数
function Person(name,age,job){if(this instanceof Person){ //判断this是否是正确的类型this.name = name;this.age = age;this.job = job;}else{return new Person(name,age,job);} }var per1 = Person("Nicholas",29,"Software Engineer"); alert(window.name); //"" alert(per1.name); //"Nicholas"var per2 = new Person("Shelby",34,"Ergonomist"); alert(per2.name); //"Shelby"
惰性载入函数
function createXHR(){if(typeof XMLHttpRequest != "undefined"){return new XMLHttpRequest;}else if(typeof ActiveXObject != "undefined"){if(typeof arguments.callee.activeXString != "string"){var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;for(i=0,len=versions.length;i < len;i++){try{new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;}catch(ex){//跳过 }}}return new ActiveXObject(arguments.callee.activeXString);}else{throw new Error("No XHR Object available");} }
function createXHR(){if(typeof XMLHttpRequest != "undefined"){createXHR = function(){ //将原函数覆盖return new XMLHttpRequest();};}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"],i,len;for(i=0,len=versions.length;i < len;i++){try{new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;}catch(ex){//跳过 }}}return new ActiveXObject(arguments.callee.activeXString);};}else{createXHR = function(){ //将原函数覆盖throw new Error("No XHR object available.");};}return createXHR(); }
方法2、在声明函数时指定适当的函数,这样第一次调用函数不损失性能,在代码首次加载时会损失性能
var createXHR = (function(){if(typeof XMLHttpRequest != "undefined"){return function(){return new XMLHttpRequest();};}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"],i,len;for(i=0,len=versions.length;i < len;i++){try{new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;}catch(ex){//跳过 }}}return new ActiveXObject(arguments.callee.activeXString);};}else{return function(){throw new Error("No XHR object available.");};} })();
函数绑定
var handler = {message : "Event handled",handleClick : function(event){alert(this.message);} };var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn,"click",handler.handleClick); //按钮按下显示undefined,不显示Event handled
按下按钮实际显示的是undefined,并不会显示Event handled。问题在于没有保存handler.handleClick的环境,所以this最后指向了DOM按钮,而非handler(IE8中this指向window),可以使用闭包解决问题:
var handler = {message : "Event handled",handleClick : function(event){alert(this.message);} };var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn,"click",function(event){handler.handleClick(event); //按钮按下显示Event handled });
//bind函数解决方案 function bind(fn,context){return function(){return fn.apply(context,arguments);}; }
调用方法:
EventUtil.addHandler(btn,"click",bind(handler.handleClick,handler)); ECMAScript5为所有函数定义了原生的bind函数,进一步简化了操作。调用方法 EventUtil.addHandler(btn,"click",handler.handleClick.bind(handler)); //传入作为this的对象
支持的浏览器:IE9+,Firefox4+,Chrome
函数柯里化
防篡改对象
不可扩展对象
var person = { name : "name"}; Object.preventExtensions(person);person.age = 28; alert(person.age); //undefined Object.isExtensible可检测对象是否可扩展
密封对象
var person = { name : "name" }; alert(Object.isExtensible(person)); //true alert(Object.isSealed(person)); //false Object.seal(person); alert(Object.isExtensible(person)); //false alert(Object.isSealed(person)); //true
冻结对象
高级定时器
重复定时器
函数节流
自定义事件
拖放
第24章,最佳实践
可维护性
特性:
代码约定
1、可读性
2、变量和函数命名
3、变量类型透明
var found /*Boolean*/ = false;
松散耦合
1、解耦HTML/JavaScript
2、解耦CSS/JavaScript
//CSS对于JavaScript的紧密耦合 element.style.color = "red"; element.style.backgroundColor = "blue";//CSS对于JavaScript的松散耦合 elements.className = "edit";
3、解耦应用逻辑/事件处理程序
编程实践
1、尊重对象所有权
2、避免全局变量
3、避免与null进行比较
4、使用常量
var Constants = {INVALID_VALUE_MSG:"Invalid value!",INVALID_VALUE_URL:"/errors/invalid.php" };function validate(value){if(!value){alert(Constants.INVALID_VALUE_MSG);location.href = Constants.INVALID_VALUE_URL;} }
性能
注意作用域
选择正确方法
最小化语句
1、多变量声明
//4个语句---浪费 var count = 5; var color = "red"; var values = [1,2,3]; var now = new Date();//一个语句 var count = 5;color = "red";values = [1,2,3];now = new Date();
2、插入迭代值
var name = values[i]; i++; //合并 var name = values[i++];
3、使用数组和对象字面量
优化DOM操作
压缩
代码长度和配重
第25章,新兴API
requestAnimationFrame()
Page VisibilityAPI
Geolocation API
File API
FileReader类型
读取部分内容
对象URL
Web计时
Web Workers
转载于:https://www.cnblogs.com/TwinklingZ/p/5280970.html
JavaScript高级程序设计(第三版)学习笔记22、24、25章相关推荐
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
- JavaScript高级程序设计第四版学习--第二十四章
title: JavaScript高级程序设计第四版学习–第二十四章 date: 2021-5-31 10:46:01 author: Xilong88 tags: JavaScript 本章内容: ...
- Js高级程序设计第三版学习(十二章)
Js高级程序设计第三版学习(十二章) 第十二章 DOM2和DOM3 1.样式: 访问样式属性 任何支持style特性的HTML元素都有一 ...
- JavaScript高级程序设计红宝书学习笔记第三章基本概念
第三章 基本概念 本章内容 语法 数据类型 操作符 语句 函数 3.1 语法 3.1.1 区分大小写,ECMAScript中的一切(变量.函数名和操作符)都区分大小写. 3.1.2 标识符 标识符:变 ...
- javascript 高级程序设计(第4版)阅读笔记(三)
第3章,内容很长,所以更得慢,主要讲的是ECMAScript es的语言基础:语法.数据类型.基本操作符.流控制语句.理解函数,ECMAScript 的语法很大程度上借鉴了 C 语言和其他类 C ...
- javascript高级程序设计 第三版
网盘地址 提取码:vh81 笔记 第二章 2.1script标签 <script>元素属性:async.charset.defer.language.src.type async和defe ...
- JavaScript高级程序设计第三版 第3章 基本概念
第3章 基本概念 3.1 语法 3.1.1 区分大小写 3.1.2 标识符 3.1.3 注释 3.1.4 严格模式 3.1.5 语句 3.2 关键字和保留字 3.3 变量 3.4 数据类型 3.4.1 ...
- 阅读JavaScript高级程序设计(第二版)笔记
第一章js简介 JavaScript诞生在1995年,当时负责进行输入型验证. JavaScript是一种专为与网页交互而设计的脚本语言,分为 : 1. ECMAScript核心语言功能. 2.文档对 ...
- 10.1.2 Document类型【JavaScript高级程序设计第三版】
JavaScript 通过Document 类型表示文档.在浏览器中,document 对象是HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML 页面.而且,docu ...
- 13.4.3 鼠标与滚轮事件【JavaScript高级程序设计第三版】
鼠标事件是Web 开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备.DOM3 级事件中定义了9 个鼠标事件,简介如下. click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发.这 ...
最新文章
- Android Tab大总结 Fragment+TabPageIndicator+ViewPager
- error CS0234: 命名空间“System.Drawing”中不存在类型或命名空间名称“Image”
- python3环境下用matplotlib库实现UI交互
- linux kvm安装win7,ubuntu14.04 使用kvm安装win7系统
- 推荐系统——GBDT+LR
- Python3 爬虫实战 — 模拟登陆哔哩哔哩【滑动验证码对抗】
- 记录通用权限管理系统组件使用心得体会,写技术博客赢IPad2
- 在C#中将字符串转换为字节数组
- php curl 命令行,curl 命令行教程
- 专利申请“技术交底书”的要素和撰写要求
- C语言中表示温度符号,摄氏度符号怎么打(SCI论文中摄氏度°C符号的正确输法)...
- 入职两个月的一些感受
- 数据结构---第四章:串
- 客户关系管理之会员管理
- java反射机制的优点和缺点
- 几种常见MOSFET栅极驱动电路
- inflate使用方法总结
- 别让自大成为职场绊脚石
- 腾云忆想构建云化IT生态,助力我国“双循环经济”数字化升级
- OLTP OLAP
热门文章
- 计算机应用入学考试,本科【计算机应用】入学考试模拟试题.doc
- eclipse服务器添加项目工程,eclipse创建和发布web项目(示例代码)
- 好看的二次元个人主页导航源码 动态背景+背景音乐
- 淘宝客API网站在这两年里经历了不少次百度K站风波
- Net Framework类库中提供的线程同步设施包括:
- GetWindowThreadProcessId
- CGI脚本跨站截取Cookie/附ASP的版本
- DotFuscator使用步骤
- Magento调试 - 页面空白,打开错误报告的方法
- 人工智障学习笔记——强化学习(5)DRL与DQN