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
JavaScript高级程序设计(第三版)学习笔记22、24、25章的更多相关文章
- JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈
null.NaN.undefined三者的区别是什么? 在初次接触到JavaScript的时候,傻傻的分不清null.NaN.undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑 ...
- JavaScript高级程序设计第三版-读书笔记(1-3章)
这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript 提供核心语言功能 DOM 提供访问 ...
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
- DOM 操作技术【JavaScript高级程序设计第三版】
很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...
- Javascript高级程序设计第三版-笔记
1.JS数值最大值最小值: >Number.MIN_VALUE <5e-324 >Number.MAX_VALUE <1.7976931348623157e+308 判断数值是 ...
- javascript高级程序设计第三版书摘
在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...
- 22.1 高级函数【JavaScript高级程序设计第三版】
函数是JavaScript 中最有趣的部分之一.它们本质上是十分简单和过程化的,但也可以是非常复杂和动态的.一些额外的功能可以通过使用闭包来实现.此外,由于所有的函数都是对象,所以使用函数指针非常简单 ...
- 21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】
IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLH ...
- 2.1 <script>元素【JavaScript高级程序设计第三版】
向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...
- 14.5 富文本编辑【JavaScript高级程序设计第三版】
富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得).在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一.虽然也没有规范,但在IE 最早 ...
随机推荐
- HDU 3289 Cat VS Dog (二分匹配 求 最大独立集)
题意:每个人有喜欢的猫和不喜欢的狗.留下他喜欢的猫他就高心,否则不高心.问最后最多有几个人高心. 思路:二分图求最大匹配 #include<cstdio> #include<cstr ...
- Node.js也分裂了-开源社区动态
继CoreOS与Docker分道扬镳继而推出自己的容器引擎Rocket后不久,又传来了Node.js分裂的消息.由于Node.js的贡献者因对负责Node.js开发的公司Joyent在对Node.js ...
- rsync 的安装
Server setup 0)yum -y install xinetd vi /etc/xinetd.d/rsync and ensure following: disable = n ...
- Java文件清单列表
package FileDemo; import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; imp ...
- [iOS基础控件 - 6.6] 展示团购数据 自定义TableViewCell
A.需求 1.头部广告 2.自定义cell:含有图片.名称.购买数量.价格 3.使用xib设计自定义cell,自定义cell继承自UITableViewCell 4.尾部“加载更多按钮”,以及其被点击 ...
- [Objective-c 基础 - 3.3] block数据类型
A.概念 1.block类似函数 (1)可以保存代码 (2)有返回值 (3)有形参 2.block的标志:^ // 没有参数和返回值的block void (^myblock)() = ^{ // ...
- Linux安装JDK详细步骤
Linux安装JDK步骤 1.先从网上下载jdk(jdk-7u1-linux-i586.rpm),下载地址:http://www.oracle.com/technetwork/java/javase/ ...
- 【IOS界面布局】横竖屏切换和控件自适应(推荐)
[IOS界面布局]横竖屏切换和控件自适应(推荐) 分类: [MAC/IOS下开发]2013-11-06 15:14 8798人阅读 评论(0) 收藏 举报 横竖屏切换 自适应 第一种:通过人为的办法改 ...
- myeclipse和eclipse安装Java反编译插件
为myeclipse和eclipse安装Java反编译插件 插件所需包 1.解压jad1.5.8g.zip.将jad.exe放到jre的bin目录下,下载地址: http://ishare.ia ...
- android122 zhihuibeijing 新闻中心NewsCenterPager加载网络数据实现
新闻中心NewsCenterPager.java package com.itheima.zhbj52.base.impl; import java.util.ArrayList; import an ...