JavaScrpit高级程序设计(Professional JavasScrip for Web Developers 3rd Edition)

来源：互联网发布：淘宝怎么买电棍编辑：程序博客网时间：2024/06/05 02:52

零：
-------------------------------------------------------------------------------------------

JavaScript,后简称JS

一在HTML中使用JavaScript：

-------------------------------------------------------------------------------------------

JS由3个部分组成：

1. ECMAScrip：语法，类型，语句，关键字，保留字，操作符，对象

2. BOM：浏览器对象模型

3. DOM：文档对象模型

使用JS两种方法：

1. 本页面定义

bala..bala..bala

2. 引用外部文件

标签的位置：

1. 传统放在<head></head>之间

2. 现代放在<body></body>后面

延迟脚本：只适用于外部脚本。立即下载，按照顺序执行，且先于DOMContentLoaded事件。

异步脚本：只适用于外部脚本。立即下载，不按照顺序执行。建议确保两个异步脚本不相互依赖，且不修改DOM。

文档模式：<!DOCTYPE HTML...>

二基本概念：

-------------------------------------------------------------------------------------------

区分大小写

首字符：字母、下划线（_）、美元符号（$）

单行注释：//

多行注释：/* ...*/

局部变量（作用域内）：

var message = "hi";

全局变量（不推荐）：

message = "hi";

简单数据类型：

undefined

null

boolean：转换为boolean值：Boolean(xxx)

number

string

复杂数据类型：

object：var o = new Object();

属性和方法：

constructor

hasOwnProperty(propertyName)

isPrototypeof(object)

propertyIsEnumerable(propertyName)

toLocaleString()

toString()

valueOf()

检查类型：typeof

操作符：

自增：++

自减：--

一元加：+

一元减：-

按位非（32位）：~

按位与：&

按位或：|

按位异或：^

左移：<<

有符号右移：>>

无符号右移：>>>

逻辑非：！

逻辑与：&&

逻辑或：||

算术运算：+，-，*，/，%

关系运算：<，<=，>，>=，==

条件运算：B1？ B2：result

赋值运算：=

逗号操作符：，

语句：

do-while

while

for

for-in

label

break

continue

with

switch

函数：

function

三变量、作用域和内存问题：

-------------------------------------------------------------------------------------------

基本类型和引用类型

检测类型：instanceof

作用域：执行环境

全局

局部

没有块级作用域：

if(true) {

var color = "blue";

}

alert(color); // blue

四引用类型：

-------------------------------------------------------------------------------------------

Object类型

Array类型

var colors1 = new Array();

var colors2 = new Array(20);

var colors3 = new Array("red", "blue", "green");

var colors4 = ["red", "blue", "green"];

检测数组：

if(value instanceof Array) {}

Array.isArray();

join方法：

Array.join("||");

栈方法：

push();

pop();

队列方法：

shift();

unshift();

排序：

reverse();

sort(compare);

操作放方法：

Array.concat(array);

slice(start, end);

splice(0, 2);

splice(2, 0, "red", "green");

splice(1, 1, "red", "green");

位置方法：

indexOf();

lastIndexOf();

迭代方法：

every(); 对数组的每一项都运行给定函数, 如果每一项都返回true，则返回true (all 的关系, 数组中每个值, 即所有的运行该函数都要返回true)
filter(); 对数组的每一项都运行给定函数, 返回该函数返回 true 的数组项组成新的数组( 注意, 这是原数组项组成一个新的数组)
forEarch(); 对数组的每一项都运行给定函数, 没有返回结果
map(); 对数组的每一项都运行给定函数, 每次调用函数的结果组成一个数组. (执行函数的结果, 会组成一个数组)

some(); 对数组的每一项都运行给定函数, 只要有一项执行函数后返回位 true, 那么就返回为 true.

归并方法：

reduce(function(pre, cur, index, array){...});

reduceRight(function(pre, cur, index, array){...});

都会迭代处理数组所有项, 一个从前开始, 一个从后开始, 会接收 4 个参数, 当前值, 下一个值, 项的索引, 数组对象

Date类型：

var now = new Date();

Date.now();

日期/时间组件getter/setter方法：

getTime();

getFullYear();

getUTCFullYear();

getMonth();

getUTCMonth();

getDate();

getUTCDate();

getDay();

getUTCDay();

getHours();

getUTCHours();

getMinutes();

getUTCMinutes();

getSeconds();

getUTCSeconds();

getMilliseconds();

getUTCMilliseconds();

getTimezoneOfset();

RegExp类型：

g：global

i：case-insensitive

m：multiline

var pattern = /[bc]at/i;

var pattern = new RegExp("[bc]at", "i");

RegExp实例属性：

global

ignoreCase

lastIndex

multiline

source

实例方法：

exec(); 属性input，index

还有一点说明：

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern1.lastIndex);//0

matches = pattern1.exec(text);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern1.lastIndex);//0

var pattern2 = /.at/g;

var matches = pattern2.exec(text);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern2.lastIndex);//0

matches = pattern2.exec(text);
alert(matches.index); //5
alert(matches[0]); //"bat"
alert(pattern2.lastIndex);//0

test()；

返回true或false

构造函数属性：

RegExp.input
RegExp.leftContext
RegExp.rgihtContext
RegExp.lastMatch
RegExp.lastParen

RegExp.multiline

Function类型：

函数内部属性：

arguments：参数对象数组

arguments.callee：拥有该参数对象数组的函数引用

this：作用域

caller：调用该函数的函数引用

属性和方法：

length：参数的个数

prototype：

apply方法：函数名.apply(作用域，参数数组)

call方法：函数名.call(作用域，参数1，参数2，参数……)

function sum(num1, num2){
return num1 + num2;
}

function callSum(num1, num2){
return sum.call(this, num1, num2);
}

alert(callSum(10,10)); //20

作用：

window.color = "red";
var o = { color: "blue" };

function sayColor(){
alert(this.color);
}

sayColor(); //red

sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue

bind方法：

window.color = "red";
var o = { color: "blue" };

function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

基本包装类型：

Boolean

Number：toFixed(num),toExponential(num),toPrecision(num)

String：concat(str),slice(),substring(),substr(),indexOf(),lastIndexOf(),trim(),

toUpperCase(),toLocaleUppercase(),toLowerCase(),toLocaleLowerCase()

match(),search(),replace(),split() //注意：RegExp.exec(String),String.match(RegExp)

toLocaleCompare()

单体内置对象：

Object，Array，String等等

Global：encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent()

eval()

window：

Math：max(),min(),ceil(,round(),floor(),random(),其他数学函数方法

五面向对象的程序设计：

-------------------------------------------------------------------------------------------

理解对象

属性类型：

数据属性（属性的特性）configurable,enumerable,writable,value

访问器属性（属性的特性）configurable,enumerable,get,set

定义多个属性：Object.defineProperties(arg1,arg2)

读取属性的特性：Object.getOwnPropertyDescriptor(arg1,arg2)

创建对象：

工厂模式：创建对象的函数

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

构造函数模式：（更好，可以识别类型，Instanceof）

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}

function sayName(){
alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

原型模式：

实例和函数没有直接构成关联关系，而是通过prototype这个中间桥梁

in的两种操作：

for in

单独使用in：attr in obj（给定属性是否能在obj中访问到）

Object.hasOwnProperty(attr)：实例中是否含有属性（不是从原型里面来）

Object.hasPrototypeProperty(attr)：实例中属性是否来自原型

更简单的枚举语法：

function Person() {

}

Person.prototype= {

。。。。

}

实例中的指针仅仅指向原型，而不指向构造函数

重写原型切断了现有的（重写后的）原型与任何之前已经存在的对象实例之间的联系

组合使用构造函数和原型模式

动态原型模式：（prototype只加一次）

寄生构造函数模式

function Person(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

稳妥构造函数模式：

继承：

原型链（父类实例赋给子类的prototype属性）

借用构造函数（在子类内部调用超累构造函数call或apply）

组合继承

原型式继承

寄生式继承

寄生组合式继承

六函数表达式：

-------------------------------------------------------------------------------------------

递归：

闭包：

模仿块级作用域：

私有变量：

七 BOM：

-------------------------------------------------------------------------------------------

window：window，top，parent，self

窗口位置：screenLeft，screenRight

窗口大小：innerWidth，innerHeight，outerWidth，outerHeight

导航和打开窗口：window.open()，window.resizeTo()，window.moveTo()，window.opener

间歇和超时：setTimeout(function, time)，setInterval(function, time)，clearTimeout()，clearInterval()

对话框：alert，confirm，prompt

location：href，host，hostname，pathname，port，protocol

location.reload()

navigator：

screen：height，left，top，width

history：go()，back()，forward()

八客户端检测：

-------------------------------------------------------------------------------------------

能力检测（首选）

怪癖检测

用户代理检测（万不得已）

九 DOM：

-------------------------------------------------------------------------------------------

节点层次：

Node类型：

属性nodeType（12种）：

常用属性：

1：Node.ELEMENT_NODE

2：Node.ATTRIBUTE_NODE

3：Node.TEXT_NODE

parentNode

nodeName，nodeValue属性

childNodes类似数组，有length属性

previousSibling，nextSibling

firstChild，lastChild

常用方法：

appendChild(),insertBefore()

replaceChild(),removeChild()

cloneNode()

Document类型：nodeType=9

属性：

URL,地址栏URL

referrer,链接到当前页面的那个页面的URL

domain域名

各种获取元素的方法

Element类型：nodeType=1

Text类型：

Comment类型：

CDATASection类型：

DocumentType类型：

DocumentFragment类型：

Attr类型：

DOM操作技术：

十二事件：

-------------------------------------------------------------------------------------------

事件流：

问题：页面的哪个部分会拥有某个特定的事件

类比：在纸上画一组同心圆，手指指向圆心，那么你指向的不是一个圆，而是所有的圆。

因此：当你单击某个button时，你不仅仅是单击了这个button，你还单击按钮的容器element，还单击了整个page

事件流：从页面中接收事件的顺序

事件冒泡（推荐）：从最具体的元素开始接收，逐级向上

事件捕获：正好相反

DOM事件流：

三个阶段：事件捕获，处于目标，事件冒泡

事件处理程序（事件监听器）：on开头，如onclick，onload

html事件处理程序：

在HTML元素上指向处理事件function

event函数内部变量，this事件的目标元素

DOM0级事件处理程序（冒泡阶段处理）：

定义一个变量名指向某个html元素，（var btn = document.getElementBy.....）

该变量名.事件名 = function(){}。（btn.onclick = function()P{}）

DOM2级事件处理程序：addEventListener(),removeEventListener()

var btn = document.getElementById("btn");

btn.addEventListener("click", funtion(){}, true);

第三个参数，true代表捕获阶段调用事件处理函数，false代表冒泡阶段调用事件处理函数

好处：可以add多个事件处理程序；

只能使用removeEventListener(相同参数)移除某个事件处理函数

IE事件处理程序：attachEvent(),detachEven()

与DOM区别：

作用域：全局的，因此window==this，

事件名：“onclick”，而不是“click”

处理阶段：冒泡阶段

跨浏览器的事件处理程序：

removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},

。。。未完待续

事件对象（event）：包含事件的元素，类型，其他信息等

DOM中的事件对象：event.type

几个有用的属性好方法：event.currentTarget, .preventDefault(), .target, .type, .stopPropagation, .eventPhase

处理多个事件：

var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break;

case "mouseover":
event.target.style.backgroundColor = "red";
break;

case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};

btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

IE中的事件对象：

主要注意与DOM的区别

跨浏览器的事件对象：

getEvent: function(event){
return event ? event : window.event;
},

getTarget: function(event){
return event.target || event.srcElement;
},

preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},

stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}

事件类型：

UI：DOMActivate（不建议），load，unload，abort，error，select，resize，scroll

焦点：blur，focusin，focusout，focus

鼠标：click，dblclick，mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup

滚轮

文本

键盘

合成

变动：DOM结构发生变化

变动名称

HTML5事件：contextmenu

内存和性能：

每个函数都是对象，都会占用内存，内存中的对象越多，性能就越差

必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪事件

事件委托：利用事件冒泡，只指定一个处理程序，就可以管理某一类型的所有事件

click，mousedown，mousup，keydown，keyup，keypress

移除事件处理程序：在不需要的时候移除事件处理程序

element.function = null;

在页面卸载的时候，在onunload里面把处理程序全部置空，释放内存

模拟事件：

DOM中的模拟事件：

IE中的模拟事件：

八客户端检测：

-------------------------------------------------------------------------------------------

0 0