【读书笔记】读《JavaScript高级程序设计-第2版》 - 非函数部分
2013-12-16 23:52
246 查看
章节列表：
片段串接：
第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版》 - 函数部分
- 《C++捷径教程》读书笔记--Chapter 7--函数，第一部分：基础知识（第一部分）
- 《C++捷径教程》读书笔记--Chapter 7--函数，第一部分：基础知识（第二部分）
- 《C++捷径教程》读书笔记--Chapter 8--函数，第二部分：引用，重载和默认参数
- 《C++捷径教程》读书笔记--Chapter 6--指针（第二部分）
- js - 关于部分浏览器内置函数console详解（用开发调试的利器）
- PHP使用部分函数传入乱码作为变量会报错
- 《C和指针》 读书笔记 -- 第7章 函数
- 阅读《代码大全》后的读书笔记（第三部分）（未完待续......）
- 经典读书笔记!---交换部分
- 12.输入一个整数数组，实现一个函数来调整该数组中数字的顺序，使得所有的奇数位于数组的前半部分，所有的偶数位于位于数组的后半部分，并保证奇数和奇数，偶数和偶数之间的相对位置不变。
- linux高性能服务器读书笔记之高级I/O函数
- dirname() 函数返回路径中的目录部分。
- T-SQL部分函数（转）
- yii 2.0 使用部分自带函数来优化代码
- 关于群部分含同态映射函数的核的集合到G2所有子集集合的映射函数为同态映射函数（例17.45）
- [李景山php] 深入理解PHP内核[读书笔记]--第四章：函数的实现 --函数的定义
- [读书笔记]iOS与OS X多线程和内存管理 [Blocks部分-2]
- 浪潮之巅（第2版）- 读书笔记
- cas 封装ticket的部分函数