【读书笔记】读《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 是一种非常松散的面向对象语言,也是 ...
随机推荐
- groovy–运算符重载
Groovy支持运算符重载,各种运算符被映射到普通的java对象的方法调用,这就使得开发者可以利用运算符重载的优势来编写自己的Java或者groovy对象. 下面的表格描述了groovy中的操作符所映 ...
- ZOJ 3430 Detect the Virus
传送门: Detect the Virus ...
- CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）
CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...
- python + selenium + PhantomJS 获取腾讯应用宝APP评论
PhantomJS PhantomJS 是一个基于WebKit的服务器端JavaScript API,它无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM 处理.JavaScr ...
- User表格式
"_id":基本是700多 "name":"xx01" "pwd":"123"
- Laravel教程 六：表单 Forms
Laravel教程 六:表单 Forms 此文章为原创文章,未经同意,禁止转载. Form laravel 5.2 之后请使用 laravelcollective/html 替换 illuminate ...
- 笔记：PHP查询mysql数据后中文字符乱码
新建表Clubs CREATE TABLE `Clubs` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) CHARACTER SET utf8 NOT NULL ...
- Iterator&Vector应用实例
public class test1 { /** * @param args */ public static void main(String[] args) { // TODO Auto-gene ...
- .NET平台上的Memcached客户端介绍
早上接到一个任务,需要对Linux服务器的Memcached的update操作进行性能测试,我发现我是一个典型的“手里拿着锤子, 就把所有问题都当成钉子”的人.我第一个念头就是,上Memcached的 ...
- RPC 编程 使用 RPC 编程是在客户机和服务器实体之间进行可靠通信的最强大、最高效的方法之一。它为在分布式计算环境中运行的几乎所有应用程序提供基础。
RPC 编程 使用 RPC 编程是在客户机和服务器实体之间进行可靠通信的最强大.最高效的方法之一.它为在分布式计算环境中运行的几乎所有应用程序提供基础.本文介绍 RPC 客户机和服务器之间基本的事件流 ...