JavaScript Learning

学习目录：

Javascript DOM 编程艺术
Mastering Javascript
Design Patterns: Elements of Reusable Object-Oriented Software
锋利的jQuery
Javascript高级程序设计

Javascript DOM 编程艺术

1. JavaScript简史

1.1 JavaScript是一种脚本语言，通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行

1.2 DOM是一套对文档的内容进行抽象和概念化的方法。

W3C对DOM的定义：一个与系统平台和变成语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档的内容、结构和样式。

2.JavaScript语法

2.1结构

方法1:放在<head>标签中
<script>
	JavaScript goes here...
</script>
   
方法2:放在<body>标签中
<script src="file.js"></script>

2.2变量

//JS是弱类型
var mood = 33;
alert(mood);
//关联数组
var lennon = Array();
lennon["name"] = "John";
//对象
var lennon = Object();
lennon.name = "John";

2.3操作符

条件语句：if,else

比较操作符：<>=,==,===

逻辑操作符：&&,!,||

循环语句：while,for

3.DOM

3.1 定义

D:document(文档)

O:Object(对象)

M:Model(模型)

3.2 获取元素:通过元素ID、标签名字、类名字

getElementById()

getElementsByTagName()

getElementsByClassName()

3.3获取设置属性

.getAttribute()

.setAttribute()

4.JavaScript图片库

5.最佳实践

5.1平稳退化：当浏览器不支持JavaScript时也能正常浏览。（搜索机器人）

7.动态创建标记

7.1传统方法

document.write("<p>This is inserted.</p>");
innerHTML    //全部内容被替换
createElement()    //创建元素
appendChild()    //附上子节点
createTextNode()    //创建文本
insertBefore(newElement,targetElement)    //在已有元素前插入新元素
insertAfter()

7.2Ajax:对页面的请求以异步方式发送给服务器，依赖服务器端处理（Hijax）

XMLHttpRequest    

8.充实文档的内容

//缩略语： <abbr title="Application Programming Interface">API</abbr>

Mastering Javascript [Finished]

[Indian] Ved Antani

本书在我不是很理解的章节一直提及《设计模型》这本书，决定之后尝试研究一下。

1. JS入门

1.0 JavaScript支持的标准类型7种：Number, String, Boolean, Symbol, Object, Null, Undefined

1.1 Number类型的数字，如果大于Number.MAX_VALUE则被赋值为Number.POSITIVE_INFINITY；反之，若小于Number.MIN_VALUE则被赋值为Number.NEGATIVE_INFINITY.

1.2 高级数学计算使用Math，如Math.E/Math.SQRT2/Math.abs(-900)/Math.pow(2,3)

1.3 parseInt()/parseFloat()将字符串表达式转换成整数或浮点数

1.4 JSHint 检查js可疑语法的工具。很多配置文件结尾使用rc（bashrc/vimrc）：run com，来源于Unix祖先CTSS使用名为runcom文件表示命令行脚本特征，沿用至今缩写为rc。

2. 函数、闭包与模块

2.1 函数，作为参数传递给另一个函数；作为数据赋值给变量。

2.2 IIFE(Immediately Invoked Function Expression) 立即调用的函数表达式 (function() {})();和(function(){}())。缺点：很难调试、无法递归、过多IIFE代码难以阅读。

2.3 javascript没有块作用域，只有函数作用域。ES6引入let生成块作用域，let的声明在编译时不会提前到块作用域最顶部。

2.4 函数和变量的声明在编译阶段会被移到作用域的顶端（函数表达式不会被提升），函数在先变量在后，而赋值或其他可执行的逻辑依然保留在原位。

不要通过条件判断给使用函数声明给函数赋予不同逻辑，因为函数声明不能出现在块结构中，因为所有js实现在这个方面各不相同。块只能包含语句，不能包含函数声明。应该使用函数表达式替代函数声明。

2.5 arguments转化成数组：var args = Array.prototype.slice.call(arguments);。

2.6 this对象，也称作函数上下文。

作为函数调用的函数，this被绑定在全局对象上。
作为方法调用的函数，this被绑定在方法被调用时所在的对象上。
作为构造函数调用的函数，需在调用前加上关键字new，this被绑定在新创建的对象上。
apply()接受一个参数数组，call()接受参数列表。

2.7 闭包是在函数声明时所创建的作用域，使得函数能够访问并处理函数的外部变量。闭包常用来将信息封装成私有变量的形式。

2.8 setTimeout()的回调函数在时间到达时才执行，改成立即调用函数表达式解决这个问题。

2.9 模块：一个外围函数（IIFE或者具名函数）至少执行一次；外围函数至少返回一个内部函数。

3. 数据结构及相关操作

3.1 正则表达式

3.1.1 正则表达式：字面量var pattern = /test/;和构造RegExp对象的实例var pattern = new RegExp("test");使用pattern.test("xxxtest")实现匹配，返回true/false。使用exec()参数为单个字符串，返回包含了所有匹配的数组。

3.1.2 正则表达式中\b表示单词边界。^/$表示正则表达式的首尾。向后引用可以匹配同一字符串已经匹配好的内容，使用\1,\2等数字定义。

3.1.3 正常情况下是贪婪模式，会尽可能多的匹配，使用.。在正则表达式后面加上？设置为懒惰模式，会尽可能少的匹配。

3.2 数组

xxx.forEach(function() {}); 迭代数组
xxx.concat(xxx); 合并数组
join() 数组合并成字符串
ES6引入map和set

underscore.js库，提供函数式变成辅助程序

4. 面向对象的JS

艰深，不太理解

4.1 使用普通函数var crazyBob = Player();，不会实例化crazyBob，使用构造函数var swingJay = new Player();会得到一个实例化对象swingJay。

4.2 对象的原型，默认属性：prototype。实例属性的优先级高于原型属性。

4.3 this的值由函数调用上下文以及调用位置所决定。同2.6

全局上下文中，this在浏览器中一般指代window。
对象方法中，this被赋值或绑定到包含对象上。
不存在上下文，this被绑定到全局上下文。
this用于构造函数，this指向被构造的对象。

4.4 将对象实例继承的方法：Child.prototype = new Person();。

4.5 JS没有类的概念，只能通过函数作用域实现类似于private/public这种访问修饰器的作用。

特权方法使用this.method = function() {}来声明。可以从外部调用，也可以由成员访问。
公共方法使用Class.prototype.method = function() {}声明。任何人可以读取或写入。
公共属性使用this.prototype来声明。

4.6 Object.create()可以在不用调用对象的构造函数的情况下，在父子之间创建使用new操作符一样的原型链。例如：Manager.prototype = Object.create(Employee.prototype);

4.7 接收器和设置器 getter/setter

Underscore.js中包含keys()/allKeys()/values()等功能函数

5. JavaScript模式

5.1 标准化方法创建模块：CommonJS适用于服务器端JS环境(Node.js)。异步模块定义，浏览器优先，支持异步行为。

5.2 工厂模式创建相似对象抽出重复出现的操作；允许工厂的用户在无需了解对象创建内部细节的情况下创建对象。

5.3 mixin模式和继承的区别：如需多个对象层次之间共享的功能，使用mixin；如果是单层次，使用继承，且继承的情况下修改原型会影响从原型继承的一切内容。

5.4 装饰器模式 xxx.decorate('xxxx');对空白对象进行修饰以满足不同需求。

7. ES6语法上的变化

7.1 引入四个新的数据结构：Map, WeakMap, Set, WeakSet。对象的缺点是不能使用非字符串值作为键。WeakMap的键必须是对象，值的类型没有限制，不能迭代，无法清除。

引入数据类型Symbol，是唯一且不可变的值，通常用作对象属性的标识符，可看做ID。

7.2 ...将数组元素分散或集合到函数的各个参数中，如print(a,b)函数，print(...[1,2]);，类似于spread/rest，将参数分散成多个参数/将多个参数集中成一个参数。

7.3 for…in遍历索引，for…of遍历数组的值。箭头函数 var f1 = (x,y) => x*y;，另外箭头函数解决了箭头函数范围内直接使用上一个块this值而不需要单独赋值。

8. DOM操作与事件

8.1 DOM是HTML的编程接口，允许使用JS等脚本语言对其进行结构化操作。

8.2 使用CDN（content delivery network）导入jQuery库。$(document).ready();函数会在DOM文档准备好之后执行。

$( '#username' ).addClass( 'hidden' );添加一个类
$( '#username' ).removeClass( 'hidden' );删除一个雷、类
$( '#username' ).toggleClass( 'hidden' );切换元素的类

8.3 增加时间监听器button.addEventListener("click", function(){});。类似的使用$('button').on()可以一次绑定多个事件。

9. 服务器端JavaScript

9.1 Node采用异步处理的方式，作为一个单线程运行，其本身内部是多线程的。每一个I/O操作都有回调函数。

9.2 如下实现一个简单的Node.js服务器（使用request的Node.js模块）。

	var http = require('http');
	var server = http.createServer();
	server.on('request', function (req, res) {
		res.writeHead(200, {'Content-Type': 'text/plain'});
		res.end('Hello Node\n');
	});
	server.listen(3000);

9.3 可以通过curl知名查看内部信息。curl -v http://localhost:3000

9.4 Node包管理器npm(Node Package Manager)。

创建package.json文件：npm init。
将模块的依赖关系自动添加到package.json中：npm install package --save。
全局安装npm install package -g/--global；本地安装npm install package /--save-dev

Design Patterns: Elements of Reusable Object-Oriented Software

设计模型：可复用面向对象软件的基础

Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides

本书介绍了什么是设计模式以及如何设计面向对象的软件系统。

模型分为3类：创建型、结构型、行为型。

本书把面向对象软件的设计经验作为设计模式记录下来，命名、解释、评价这些设计模式，方便人们有效地利用。

目前没有需要开发大型软件的需求，暂时不做深入研究，但是这本书还是很有意义的。

锋利的jQuery

单东林张晓菲魏然

1. 认识jQuery

1.1 JavaScript库：Prototype, Dojo, YUI, Ext JS, MooTools, jQuery。

1.2 $(document).ready()表示等待网页中所有DOM结构绘制完毕执行。

1.3 jQuery对象是通过jQuery包装DOM对象后产生的对象

//jQuery对象转成DOM对象
var $cr = $("#cr");		//jQuery对象
var cr = $cr[0];			//DOM对象
var cr = $cr.get(0);	//DOM对象

//DOM对象转成jQuery对象
var cr = document.getElementById("cr");	//DOM对象
var $cr = $(cr);						//jQuery对象

1.4 若jQuery库在其他库之前导入，可以直接使用；jQuery在其他库之后导入，使用var $j = jQuery.noConflict()定义快捷方式来使用。

【红宝书】Javascript高级程序设计

[America] Nicholas C.Zakas

1. 基础

1.1 Javascript组成部分：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。

ECMAScript由ECMA-262定义，其宿主环境包括：Web浏览器、Node、Adobe Flash等。提供核心语言功能。
文档对象模型(DOM, Document Object Model)：针对XML但经过扩展用于HTML的应用程序编程接口。提供访问和操作网页内容的方法和接口。
浏览器对象模型(BOM, Browser Object Model)：控制浏览器显示的页面以外的地方。提供与浏览器交互的方法与接口。

1.2 <script>元素6个属性

async：立即下载脚本且不妨碍页面其他操作，只对外部脚本有效。
charset：通过src属性指定代码的字符集。
defer：脚本延迟到文档完全被解析和显示后再执行，只对外部脚本有效。
language：废弃
src：包含要执行的代码的外部文件。
type：language的替代属性，表示编写代码使用的脚本语言内容类型。一般使用text/javascript

在使用<script>嵌入JS代码时，内部不能出现</script>字符，否则浏览器会以为是结束标签。

使用外部文件时，带有src属性的<script>元素内不能有额外的JS代码。外部文件位置一般放在body开头，放在head里会使得外部文件在页面渲染前运行，在放在body中则是页面渲染之后再运行外部文件。当然，可以通过增加defer属性实现脚本运行延迟。若使用async属性，则多个外部脚本的运行顺序不能确定。

在XHTML中，可以使用CDATA[]片段来包裹js代码，实现可以使用特殊符号，如<等。

1.3 文档模式：混杂模式、标准模式