【读书笔记】读《JavaScript高级程序设计-第2版》 - 非函数部分
章节列表：
第08章：BOM
第09章：客户端检测
第10章：DOM
第11章：DOM2和DOM3
第12章：事件
第13章：表单脚本
第14章：错误处理与调试
第17章：Ajax和JSON
第20章：最佳实践
片段串接：
(function($){
/**
* 第8章：BOM
* window对象的核心函数
* 1>超时调用和间歇调用
* 2>核心对象：
* a>location
* b>navigator
* c>screen
* d>history
*/
//超时调用和间歇调用
(function(){
window.setTimeout('alert("hello world!")', 1000); //不推荐传递字符串
var timeoutId = window.setTimeout(function(){ //推荐方式
alert('hello world!');
}, 5000);
//只要在指定的事件尚未过去之前调用clearTimeout()，就可以完全取消超时调用
//有时，没有必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止
clearTimeout(timeoutId);
//间歇调用，间歇调用的ID我们一般是需要跟踪的
var intervalId = setInterval(function(){
alert('hello world!');
}, 1000);
clearInterval(intervalId);
})();
/**
* 第9章：客户端检测
* 能力检测：在编写代码之前先检测特定浏览器的能力。
* 怪癖检测：检测浏览器实现中的bug。
* 用户代理检测：通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器相关的信息，包括浏览器、平台、操作系统及浏览器版本。
*/
/**
* 第10章：DOM
* 节点层次：类型（Document类型、Element类型、Text类型、Attr类型等等）、关系、操作。
* DOM1级主要定义的是HTML和XML文档的底层结构
* 1>节点层次
* a>Node类型：文档节点、元素节点、属性节点、文本节点、注释节点等等。
* i>节点名字nodeName和节点值nodeValue
* ii>节点关系
* iii>操作节点
* b>文档节点Document
* i>文档子节点<html>: var html = document.documentElement;
* ii>文档信息：title、URL、domain、referrer
* iii>查找元素
* iv>特殊集合
* v>DOM一致性检测
* c>元素节点Element
* d>文本节点Text
*/
//DOM1
(function(){
var ele = document.getElementById('container');
//注意：Node.ELEMENT_NODE在IE中是无效的
console.log(ele.nodeType === Node.ELEMENT_NODE);
//适用于所有浏览器
if (ele.nodeType === 1) {
console.log('element node');
console.log(ele.nodeName);
console.log(ele.nodeValue);
}
//节点的关系
//document对象是window对象的一个属性，可以把其当做全局对象来访问
console.log(window.document); //HTMLDocument(#document)——对象
console.log(window.document.documentElement); //HTMLHtmlElement
var html = document.documentElement;
console.log(html === document.firstChild); //true
console.log(html === document.childNodes[0]); //true
document.title = 'xxxxxx';
})();
/**
* 第11章：DOM2和DOM3
* 元素大小：
* 1>偏移量：offset系列(offsetLeft,offsetTop,offsetWidth,offsetHeight)
* 2>客户区：client系列(clientWidth,clientHeight)
* 3>滚动条：scroll系列(scrollLeft,srollTop,scrollWidth,scrollHeight)
* DOM遍历
* DOM范围
*/
/**
* 第12章：事件
* ------------------------------第一部分-----------------------------------
* 1>每个元素都有自己的事件处理程序属性，将这种属性的值设置为一个函数，就可以指定事件处理程序。
* 2>使用DOM0级方法指定的事件处理程序被认为是元素的方法。
* 因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
* var btn = document.getElementById('myBtn');
* btn.onclick = function () {...}
* 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
* 删除DOM0级事件处理程序的方法是将对应事件处理程序属性的值赋值为null
* 3>DOM2级事件
* btn.addEventListener('click', function(){...}, false);
* btn.removeEventListener('click', handler, false);
* false表示冒泡阶段，true表示捕获阶段
* 4>IE事件处理程序attachEvent()和detachEvent()。
*
* ------------------------------第二部分------------------------------------
* 1>事件处理程序数量直接会影响到页面的整体性能：
* a>事件处理函数占用内存
* b>必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
* 2>由此，启用事件委托：
* a>什么情况下用？
* b>优势在哪儿？
* 3>为document对象添加事件处理程序
* a>分析与传统的事件处理程序设置相比的优势
* 4>每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。
* 因此，限制建立的连接数量是提高性能的方式，可采用事件委托。
* 另外，在不需要的时候移除事件处理程序，也是提高性能的方法。
* 5>模拟事件
* var myEvent = document.createEvent("MouseEvents");
* myEvent.initEvent("click", false, false);
* elm.dispatchEvent(myEvent);
* 6>事件冒泡：
* 无法冒泡的事件：blur、focus、load、unload
*
*/
//jquery事件绑定
(function(){
//最开始的方法
//最新的jQuery中bind目前其实最后也是调用on()方法来实现的，
//所以呢，如果现在大家使用最新jQuery版本（目前为1.7.1）的话，尽量避免使用bind()方法。
$('.scv').bind('click', function(){
$('#container').append('<img class="scv" src="sth-bg.jpg" alt="鹿鼎记" />');
});
//克隆方法
$('.scv').bind('click', function(){
$(this).clone(true).insertAfter(this);
});
//live方法
//在最新的jQuery版本中，我们最好不要使用live()方法，因为它已经被放弃了
$('.scv').live('click', function(){
$(this).clone(false).appendTo('#container');
})
//我们使用#container作为绑定的上下文，jQuery将会在#container这个元素中查询.scv元素
$('.scv', '#container').live('click', function(){
$(this).clone(false).appendTo('#container');
})
//在最新的jQuery版本中，我们最好不要使用live()方法，因为它已经被放弃了，
//这里我们使用delegate方法来指定事件绑定的上下文
$('#container').delegate('.scv', 'click', function(){
$(this).clone(false).appendTo('#container');
})
//其实在最新版本的jQuery类库中，所有以上方法在后面其实都是调用on()方法
$('.scv').on('click', function(){
$(this).clone(true).appendTo('#container');
});
})();
//事件冒泡和默认事件
(function(){
$("body").click(function(){
alert("body")
})
$('a').click(function(){
alert("xxxxx");
//阻止事件传播
event.stopPropagation(); //ie不好使
window.event.cancelBubble = true; //全都好使
//阻止默认事件
window.event.returnValue = false; //全都好使
window.event.preventDefault(); //ie不好使
return false; //在jquery环境下，此句代码既能够阻止浏览器默认事件，也能够阻止事件冒泡
})
var a = document.getElementsByTagName('a')[0];
a.onclick = function(){
alert('a element');
event.stopPropagation(); //ie不好使
window.event.cancelBubble = true; //全都好使
//阻止默认事件
window.event.preventDefault(); //IE下不好使
window.event.returnValue = false; //全都好使
return false; //原生js下，这句代码无法阻止事件冒泡
//但能够阻止浏览器的默认事件
}
})();
/**
* 第13章：表单脚本
*/
(function(){
//取得表单
var myForm = document.forms[0]; //第一个表单
console.log(myForm.elements.length); //表单项：2
myForm.elements[0].select(); //聚焦并选中文本
})();
/**
* 第14章：错误处理与调试
* IE：工具——>Internet选项——>高级——>浏览下.显示每个脚本的错误通知
*/
(function(){
try {
window.king();
} catch (error) {
alert(error.message);
} finally {
alert('haha'); //只要代码中包含finally子句，那么无论try还是catch语句块中的return语句都将被忽略。
//因此，在使用finally子句之前，一定要非常清楚你想让代码怎么样
}
})();
/**
* 第17章：Ajax和JSON
*/
(function(){
var obj1 = eval('{}'); //会把{}当做js处理，并未将其赋值，所以抛出错误
var obj2 = eval('({})'); //()在js中是一个表达式，没有问题
var jsonText = '{}';
var obj3 = eval('(' + jsonText + ')');
var jsonText1 = '{"name":"king","age":28,"author":true}'; //在json字符串中，其属性必须用引号括起来
var people = JSON.parse(jsonText1, function(key, value){
switch (key) {
case 'age': return value + 1;
case 'author': return undefined;
default: return value;
}
});
console.log(people.age);
console.log(people.author);
var json = '[1, 2, (function(){\
alert("xxxxx");\
})(), 4, 5]';
var array = eval(json); //具有不安全性
var array = JSON.parse(json); //能够过滤恶意脚本
array[2];
})();
/**
* 第20章：最佳实践
*
* 1>可维护性
* (1)定义
* a>可理解性
* b>直观性
* c>可适应性
* d>可扩展性
* e>可调试性
* (2)代码约定：
* a>缩进、注释
* 注释在什么地方：函数和方法、大段代码、复杂的算法、Hack
* b>变量和函数命名
* 小写驼峰、合乎逻辑（如布尔型：is开头）
* c>变量类型透明
* 初始化指定：var found = false;
* 匈牙利标记法：var bFound;（"b"代表布尔型...）
* 指定类型注释：var found /*:Boolean*/ = false;
* 2>松散耦合
* (1)解耦HTML/JavaScript
* i>从HTML角度
* a>避免内联代码的<script>元素
* b>避免使用HTML属性来分配事件处理程序
* ii>从JavaScript角度——避免在JavaScript中创建大量HTML
* a>页面中直接包含并隐藏对应HTML，在页面渲染之后，再用JavaScript显示该标记
* b>进行Ajax请求获取更多要显示更多HTML
* (2)解耦CSS/JavaScript
* i>从JavaScript角度
* 避免直接更改样式，而采用动态更改样式类
* ii>从CSS角度
* 避免使用css表达式
* (3)解耦应用逻辑/事件处理程序
* 从事件处理程序中分离应用逻辑，有以下3点原则
* i>勿将event对象传给其他方法；只传来自event对象中所需的数据；
* ii>任何可以在应用层面的动作都应该可以再不执行任何事件处理程序的情况下进行；
* iii>任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑。
* 3>编程实践
* (1)尊重对象所有权
* 永远不修改不是由自己所拥有的对象
* (2)避免全局量
* 推荐最多一个全局变量，让其他对象和函数存在其中
* 引入命名空间：将功能组合在一起的单一的全局量的延伸。
* (3)避免与null进行比较
* i>如果值应为一个引用类型，使用instanceof操作符检查其构造函数
* ii>如果值为一个基本类型
* iii>如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上。
* (4)使用常量
* i>重复值——任何在多处用到的值都应抽取为一个常量。
* ii>用户界面字符串——任何用于显示给用户的字符串，都应被抽取出来以方便国际化。
* iii>URLs——在Web应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的URL。
* iv>任何可能会更改的值——每当在用到字面量值的时候，都要问一下自己这个值在未来是不是会变化。
* 如果答案是"是"，那么这个值就应该被提取出来作为一个常量。
* 4>性能
* (1)注意作用域——将在一个函数中会用到多次的全局对象存储为局部变量。
* (2)选择正确的方法
* i>避免不必要的属性查找
* O(1):不管有多少值，执行的时间都是恒定的。一般表示简单值和存储在变量中的值。
* O(n):总执行时间和值的数量直接相关。
* 使用字面量、变量和数组要比访问对象上的属性更有效率，因为后者是O(n)操作。
* 一般来讲，只要能减少算法的复杂度，就要尽可能减少。尽可能多地使用局部变量将属性查找替换为值查找。
* ii>避免双重解释
* //某些代码求值——避免
* eval("alert('hello world')"); //用：alert('hello world');
* //创建新函数——避免
* var sayHi = new Function("alert('hello world')");
* //用：var sayHI = function(){alert('hello world');}
* //设置超时——避免
* setTimeout("alert('hello world')", 500);
* 用：serTimeout(function(){alert('hello world');}, 500)}
* 这些例子中都要解析包含了JavaScript代码的字符串。这个操作时不能在初始的解析过程中完成的，
* 因为代码是包含在字符串中的，也就是说在JavaScript代码运行的同时必须新启动一个解析器来解析新的代码。
* 实例化一个新的解析器有不容忽视的开销，所以这种代码要比直接解析慢得多。
* iii>其他方面
* a>原生方法较快
* b>switch语句较快
* c>位运算较快
* (3)最小化语句
* i>多个变量声明转变为单变量声明
* ii>插入迭代值
* 如：var name = values[i];
* i++;
* 转换为：
* var name = values[i++];
* ii>使用数组和对象字面量
* 如：var values = new Array();
* values[0] = 123;
* values[1] = 456;
* values[2] = 789; //用4个语句创建和初始化数组——浪费
* 转换为：
* var values = [123, 456, 789]; //只用一条语句创建和初始化数组
* (4)优化DOM交互
* i>最小化现场更新
* 不管是怎样的一个DOM操作，对其都有一个性能惩罚，因为浏览器要重新计算无数尺寸以进行更新。
* 因此，完成一个操作所需的现场更新越少，代码就越快。
* 一旦需要更新DOM，请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。
* ii>使用innerHTML
* 而不用createElement()或appendChild()之类的DOM方法。
* iii>使用事件代理
* 事件处理程序的数量和页面响应用户交互的速度之间有个负相关。为了减轻这种惩罚，最好使用事件代理。
* iv>注意NodeList
* 任何时候要访问NodeList，不管它是一个属性还是一个方法，都是在文档上进行一个查询，这个查询开销很昂贵。
* var images = document.getElementsByTagName('img'); //生成的是一个NodeList
* for (var i = 0, len = images.length; i < len; i++) { //只调用了一次NodeList的length属性
* var image = images[i]; //避免在循环体内多次调用NodeList
* }
* 以下情况会返回NodeList对象：
* a>进行了对getElementsByTagName()的调用
* b>获取了元素的childNodes属性
* c>获取了元素的attributes属性
* d>访问了特殊的集合，如documents.forms、document.images等
* (5)部署
* i>构建过程——合并JavaScript文件(Ant等)
* 保存原有代码的逻辑结构，最好避免使用一个文件存放所有的JavaScript，遵循面向对象语言中的典型模式：
* 将每个对象或自定义类型分别放入其单独的文件中。这样可以确保每个文件包含最少量的代码，使其在不引入错误的情况下更容易修改。
* 要行进部署的时候，将这些源代码合并为一个或几个归并文件。
* ii>验证——JSLint
* iii>压缩
* a>文件压缩——如YUI压缩器
* 代码长度——压缩内容包括：删除额外的空白（包括换行）、删除所有注释、缩短变量名。
* b>HTTP压缩
* 配重指的是实际从服务器传送到浏览器的字节数——
* 在服务器端压缩JavaScript文件，传输的字节数量大大减少，再由浏览器端解压缩。
*
*/
})(jQuery)
【读书笔记】读《JavaScript高级程序设计-第2版》 - 非函数部分的更多相关文章
- 【读书笔记】读《JavaScript高级程序设计-第2版》 - 函数部分
1. 定义 函数实际上是对象,每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定. 对于函数 ...
- 读书笔记（javascript 高级程序设计）
一. 数据类型: 1. undefined: 未声明和未初始化的变量,typeof 操作符返回的结果都是 undefined:(建议未初始化的变量进行显式赋值,这样当 typeof 返回 undefi ...
- 读书笔记：javascript高级程序设计
> 变量.作用域和内存问题js为弱类型的语言 变量的值和数据类型可以在脚本的生命周期内改变.5种基本类型:string, number, undefined, null, boolean,基本数 ...
- [已读]JavaScript高级程序设计(第3版)
从去年开始看,因为太长,总是没有办法一口气把它看完,再加上它与第二版大部分一致,读起来兴致会更缺一点. 与第二版相比,它最大的改变就是增加了很多html5的内容,譬如:Object对象的一些新东西,数 ...
- 读Javascript高级程序设计第三版第六章面向对象设计--创建对象
虽然Object构造函数或者对象字面量都可以用来创建单个对象,但是缺点非常明显:使用同一接口创建很多对象,会产生大量重复代码. 工厂模式 1 function CreatePerson(name,a ...
- [已读]JavaScript高级程序设计(第2版)
经典红皮书~~
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读书时间《JavaScript高级程序设计》一：基础篇
第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
随机推荐
- HackerRank Ice Cream Parlor
传送门 Ice Cream Parlor Authored by dheeraj on Mar 21 2013 Problem Statement Sunny and Johnny together ...
- iOS开发编码建议与编程经验
作者:乞力马扎罗的雪(GitHub) 原文 在开发过程中,我们不仅要去看别人的代码,也要让别人看我们的代码.那么,有一个良好的编码习惯将会非常重要.下面将会罗列使用Objective-C来开发iOS的 ...
- chrome 阻止跨域操作的解决方法 --disable-web-security
做chrome插件时,遇到https页面上请求htttp页面资源时被blocked的问题,初苦寻解决方法未果,最后找到: 给chrome加上 --disable-web-security 参数
- phpcms 调取全站文章
路径:phpcms/module/content/classes/content_tag.class.php 添加如下方法 /** * 列表页标签:主要返回的是主表中数据与附表中数据 * @param ...
- EDdb 是ED数据
eddb 是ED数据统计汇总软件的简称,用于统计汇总企事业单位的各类信息数据. 采用Excel界面,操作简单. 对各类信息数据,均可以自定义数据格式,通过internet联网,收集各类信息数据,并通 ...
- 漫长Appium之路（一）——从黑苹果到虚拟机
作为一名普普通通的实习生,我也开始习惯折腾一般的生活了.部门应该最近是要搞个iOS自动化测试工具,我从最开始说起吧. 应该是上上上周五.主管找到我,说要装一个黑苹果,要我尽快把黑苹果能支持的硬件配置给 ...
- .net环境下从PDF文档中抽取Text文本的一些方法汇总
1.PDFBox的IKVM版本:据我所知,目前只有PDFBox的IKVM版本能比较好地从PDF中提取文本,PDFBOX更多信息请访问http://www.pdbox.org,关于其应用实例,可以参考C ...
- 关于 jsonp 跨域
jquery的jsonp真是一个很深沉的东西.....我一直以为,jsonp就是和json一样,然而并不是,jsonp的返回格式必须包在定义的回调里面...就是这样,默认是cb.要不然就报错,就是这样 ...
- 一个Java对象到底占用多大内存？
最近在读<深入理解Java虚拟机>,对Java对象的内存布局有了进一步的认识,于是脑子里自然而然就有一个很普通的问题,就是一个Java对象到底占用多大内存? 在网上搜到了一篇博客讲的非常好 ...
- HDOJ 1536 S-Nim
S-Nim Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...