出版日期:2015-10
ISBN:9787115401942
作者:John Resig,Bear Bibeault
页数:350页
《JavaScript忍者秘籍》的笔记-第323页
将HTML字符串转换成DOM结构不会涉及太多的魔法知识。事实上，它使用的是一个我们可能已经非常熟悉的工具方法：DOM元素的innerHTML属性。
innerHTML属性的使用时一个多步骤的过程。
1.确保HTML字符串包含有效的HTML/XHTML(或许可以友好地调整它，以便更接近于有效)。
2.根据浏览器规则，将所需字符串包装在任意封闭标签内。
3.使用innerHTML，将HTML字符串包装在任意封闭标签内。
4提取该DOM节点。
《JavaScript忍者秘籍》的笔记-原型与面向对象 - 原型与面向对象
使用 new 操作符来进行构造器调用
初始化操作的优先级
1. 通过原型给对象实例添加的属性
2. 在构造器函数内给对象实例添加的属性
JavaScript 中的每个对象都有一个名为 constructor 的隐式属性
原型链的创建方式
SubClass.prototype = new SuperClass();
避免将原型对象复制给另一个原型，因为这是一个引用
利用JavaScript对象构造器都有可以被操作和扩展的原型属性，可以扩展这门语言自身的功能。可以参考 .net extension method， ruby open class。
JavaScript 原型链是实时生效的，在扩展基类的时候需要注意。
ECMAScript 2015 (6th Edition, ECMA-262) 已经支持使用 class 关键字定义类了。
《JavaScript忍者秘籍》的笔记-闭包 - 闭包
# 闭包是什么，它们是如何工作的
闭包(closure)是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域。
换句话说，闭包可以让函数访问所有的变量和函数，只要这些变量和函数存在于该函数声明时的作用域内就行。
在函数声明的时候不仅仅声明了函数，还创建了一个闭包，该闭包不仅包含函数声明，还包含了函数声明的那一时刻点上该作用域中所有的变量。
使用闭包时，闭包里的信息会一直保存在内存里，直到这些信息确保不再被使（可以安全进行垃圾回收），或页面卸载时，JavaScript引擎才能清理这些信息。
# 利用闭包简化开发
每一个函数都有自己的上下文，所以函数从来都不是闭包的一部分。但是可以通过创建一个变量引用到上下文上，从而可以将上下文变成闭包的一部分。函数包装是一种封装函数逻辑的技巧，用于在单个步骤内重载创建新函数或者继承函数。最有价值的场景是，在重载一个写已经存在的函数时，同时保持原始函数在被包装后仍然能够有效使用。
即时函数也是函数。
# 利用闭包提高性能
闭包记住的是变量的引用，而不是闭包创建时刻的该变量的值。
# 利用闭包解决常见的作用域问题
很多编程语言变量的作用域依赖代码块，而JavaScript依赖变量所在的闭包。
通过参数限制作用域内的名称，同时也可以通过参数来创建变量作用域内的快捷方式。
《JavaScript忍者秘籍》的笔记-挥舞函数 - 挥舞函数
函数式编程专注于：少、通常无副作用、将函数作为程序代码的基础构建快
当一个函数作为方法调用时，函数上下文指的是调用该方法的哪个对象。
神奇的 this
使用内联函数，在内部和函数所赋予的变量引用是同一个东西。在外部是不可见的。
函数 == 对象
建议在 {} 后面放置分号 => function (){};
利用函数属性作为cache
可变长度的参数列表
JavaScript没有强制函数声明多少个参数就得传入多少个参数。
利用arguments可以把函数作为一个工厂方法，根据传入不同的参数来执行不同的代码。
利用arguments来实现重载方法，只能基于length，否则就要实现更复杂的类型判断。
《JavaScript忍者秘籍》的笔记-第342页
HTML5在标准方法里添加了getElementsByClassName()方法
《JavaScript忍者秘籍》的笔记-第308页
function isEventSupported(eventName){
var element = document.createElement('div'),isSupported;
eventName = 'on' + eventName;
isSupported = (eventName in element);
if(!isSupported){
element.setAttribute(eventName,'returnl');
isSupported = typeof element[eventName]=='function';
}
element = null;
return isSupported;
}
《JavaScript忍者秘籍》的笔记-函数是根基 - 函数是根基
函数的作用域很大，在同一个作用域内，即使在声明之前调用也可以。就这一点，变量就做不到，必须在声明之后使用。
大写字母开头用于构造函数，即其他面向对象语言的类定义。
this 依赖函数调用的方式，成为调用上下文 （invocation context）
每个函数都有两个隐式参数： arguments，this
每个函数都有两个方法：apply(), call()
apply() 有两个参数： 1. 作为函数上下文函数的对象。2. 作为函数参数所组成的数组
call()的使用方式类似apply(), 不同的地方是给函数传入的是一个参数列表，而不是单个数组
《JavaScript忍者秘籍》的笔记-第250页
function isXML(elem){
return elem.ownerDocument || elem.documentElement.nodeName.toLowerCase() !== 'html';
}如果不确定一个特性是否存在，可以对其进行测试，如果不存在的话再使用DOM方法。这里有一个例子：var value = element.someValue ? element.someValue : element.getAttribute('someValue');
《JavaScript忍者秘籍》的笔记-第253页
window.attr = function(element,name,value){
var property = name,propertyExists = typeof element[property] !== 'undefined';
if(typeof value !== 'undefined'){
if(propertyExists )
element[property] = value;
else
element.setAttriBute(name,value);
}
return propertyExists ? element[property] : element.getAttribute(name);
}
《JavaScript忍者秘籍》的笔记-第20页 - 2.4.1断言
先来说说assert，应用代码是这个样子的： <script type="text/javascript">
assert(1 + 1 === 2, "1 + 1 = 2");
assert(1 + 1 === 3, "1 + 1 = 3");
</script>assert就是一个javascript函数，有两个参数，第一个参数用来判断表达式是true或false，第二个参数用来对测试做一些说明，测试结果直接显示在html中，这里的测试结果是这个样子的：assert结果还挺酷的吧。好了，那么我们就来看看如何实现这个assert？首先新建一个html文件然后在body中加入一个id为rusults的ul节点：123<body> <ul id="results"></ul></body> 后面所有的assert结果列表都要加到这个节点下。assert执行完成后的html结果是这样的：assert的html结构看起来挺简单的吧，就是在ul节点下对每个assert测试用li节点来表现。对于测试为true的li节点的class被赋值为pass，对于测试为false的li节点的class被赋值为fail。原理清楚了，那么这个assert函数的代码看起来就不复杂了： function assert(value, desc) {
// 创建li节点
var li = document.createElement("li");
// 如果value为true，li的class为pass
// 如果value为false，li的class为fail
li.className = value ? "pass" : "fail";
// 根据desc创建text节点，然后添加到li节点下
li.appendChild(document.createTextNode(desc));
// 找到document中id为results的节点元素，就是那个body下的ul，
// 然后把新建的li节点添加到ul节点下
document.getElementById("results").appendChild(li);
}剩下的就是添加一些css，美化一下html了，既然已经学习javascript了，一般的html和css的内容就不在这说了，完整的html如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>assert</title>
<style>
body {
font-family: sans-serif;
font-size: 12pt;
}
#results {
background-color: #e0e0e0;
border-radius: 1em;
padding: 1em;
list-style-position: inside;
}
ul {
list-style-type : circle;
}
#results li {
margin-bottom: 0.2em;
}
#results li.fail {
color: red;
text-decoration: line-through;
}
#results li.pass {
color: green;
}
</style>
<script type="text/javascript">
function assert(value, desc) {
// 创建li节点
var li = document.createElement("li");
// 如果value为true，li的class为pass
// 如果value为false，li的class为fail
li.className = value ? "pass" : "fail";
// 根据desc创建text节点，然后添加到li节点下
li.appendChild(document.createTextNode(desc));
// 找到document中id为results的节点元素，就是那个body下的ul，
// 然后把新建的li节点添加到ul节点下
document.getElementById("results").appendChild(li);
}
</script>
</head>
<body>
<ul id="results"></ul>
<script type="text/javascript">
assert(1 + 1 === 2, "1 + 1 = 2");
assert(1 + 1 === 3, "1 + 1 = 3");
</script>
</body>
</html>
《JavaScript忍者秘籍》的笔记-第341页
if(typeof document.evaluate === 'function'){
function getElementsByXpath(expression,parentElement){
var results = [];
var query = document.evaluate(expression ,
parentElement || document,
null ,
XpathResult.ORDERED_NODE_SNAPSHOY_TYPE ,
null);
for(var i=0,length = query.snapshotLength;i<length;i++){
results.push(query.snapshotItem(i));
return results;
}
}