llwcy8801 / blog Goto Github PK
View Code? Open in Web Editor NEWstay hungry stay foolish
blog's People
Watchers
blog's Issues
第21章 Ajax与Comet
Ajax与Comet
XMLHttpRequest XHR 异步调用
远程脚本
21.1XMLHttpRequest对象
IE ActiveX对象
var xhr=new HTMLHttpRequest()
21.1.1XHR的用法
open(类型，URL，是否异步)
send(null); null必须
属性
responseText 作为响应主体返回的文本
responseXML 内容类型 "text/xml"或"application/xml"
status HTTP状态
statusText HTTP状态说明
200 多正常
304 无变化
status
1xx 信息响应类，接受处理
2xx 处理成功
3xx 重定向
4xx 错误
5xx 服务器错误
100 （继续）收到请求第一部分，等待其余部分
101 （切换协议）要求服务器根据请求转换HTTP协议，已确认并准备切换
200 （成功）提供了请求页面
201 （已创建）创新新的资源
202 （已接受）接受，尚未处理
203 （非授权信息）信息来自另一源
204 （无内容）收到，为空
205 （重置内容）服务器完成，用户需复位文件
206 （部分请求）服务器完成部分GET请求
300 （多种选择）可执行多种操作
301 （永久移动）删除数据
302 （临时移动）其他地址发现数据
303 （查看其它位置）访问其他URL
304 （未修改）完成GET，文件未变化
305 （使用代理）必须从指定地址得到
306 前版本HTTP代码，现行不可用
307 （临时重定向）请求资源临时删除
400 （错误请求）错误请求
401 （身份验证错误）请求授权失败
402 保留ChargeTo响应
403 （禁止）请求不允许
404 （未找到）没发现文件
405 （方法禁用）
406 （不接受）
407 （需要代理授权）
408 （请求冲突）
409 （冲突）
410 （已删除）
411 （需要有效长度）
412 （未满足前提条件）
413 （请求实体过大）
414 （请求URL过长）
415 （不支持的媒体类型）
416 （请求范围不符合要求）
417 （未满足期望值）
500 （服务器内部错误）服务器错误
501 （尚未实施）
502 （错误网关）
503 （服务不可用）
504 （网关超时）
505 （HTTP版本不受支持）
readyState
0 未初始化 未调用open()
1 启动 调用open()，未send()
2 发送 调用send()
3 接收 解析
4 完成 客户端调用
readyState 变化触发readyStatechange
xhr.abort() 取消异步请求
21.1.2HTTP头部信息
Accept 能处理内容类型
Accept-Charset 能显示字符集
Accept-Encoding 能处理压缩编码
Accept-Language 浏览器语言
Connection 链接类型
Cookie 当前设置Cookie
Host 所在域
Referer 发出请求URL
User-Agent 用户代理字符串
setRequestHeader(名称，字段)
getRequestHeader(名称)
getAllRequestHeaders() 所有头部长字段
21.1.3Get请求
字符串使用encodeURIComponet()编码
21.1.4POST请求
setRequestHeader("Content-Type","application/x-www-form-rulencoded")
发送编码后文本
21.2XMLHttpRequest2级
21.2.1FormData
表单序列化
var data=new FormDate()
data.append(键，值)
可传入表单元素
不用设置头部
21.2.2超时设定
xhr.timeout 事件
21.2.3 overrideMimeType() 事件
重写XHR的MIME类型
xhr.overrideMimeType("text/xml")
21.3进度事件
loadstart 接受到相应数据触发
progress 接受期间
error 出错
abort 暂停
load 接受完整数据
loaded 通信完成或触发error/abort或load事件
21.3.1load事件
target XHR
响应完成触发load事件
21.3.2progress事件
target XHR
lengthComputable 进度是否可用
position 接受字节数
totalSize 预期字节数
第13章 事件
侦听器（或处理程序）
观察员模式
13.1事件流
13.1.1事件冒泡
具体元素接受，逐级向上
冒泡到window对象
13.1.2事件捕获
不具体节点先接受事件
从window开始捕获
13.1.3DOM事件流
事件流包括：事件捕获节点、处于目标阶段、事件冒泡阶段
13.2事件处理程序
事件处理程序 on开头
13.2.1HTML事件处理程序
特性中不能使用未经转义的HTML语法字符 & " <>
事件处理程序执行 有权访问全局作用域代码
创建封装元素属性值函数
event 局部变量 ，事件对象
this 目标元素
扩展作用域方式
with()
try-catch中
13.2.2DOM0级事件处理程序
在元素作用域运行，this当前元素
null删除
冒泡阶段处理
13.2.3DOM2级事件处理程序
节点方法 元素作用域
addEventListener() 添加处理程序
removeEventListener() 删除处理程序
3个参数
事件名、处理程序、布尔值true捕获处理 false冒泡处理
大部分在冒泡阶段
13.2.4IE事件处理程序
attachEvent()和detachEvent()
事件处理程序名称、处理程序
在全局作用域运行
相反顺序执行
13.2.5跨浏览器的事件处理程序
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
removeHandler:function(){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
};
13.3事件对象
event 事件元素、时间类型
13.3.1DOM中的事件对象
event.type 事件类型
bubbles Boolean 是否冒泡
cancelable Boolean 是否可以取消默认行为
currentTarget Element 处理程序所在元素
defaultPrevented Boolean true调用preventDefault()
detall Integer 细节信息
eventPhase Integer 时间阶段1捕获、2目标、3冒泡
preventDefault() Funtion 取消事件默认行为
stopImmediatePropagation() Function 取消事件进一步捕获或冒泡
stopPropagation() Function 取消事件进一步捕获或冒泡
target Element 事件事件目标
trusted Boolean true浏览器生成，false开发
type String 事件类型
view AbstractView 抽象视图，发生事件window对象
this为currentTarget
event处理完销毁
13.3.2IE中的事件对象
HTML
event
DOM0
window.event
DOM2
event
cancelBubble Boolean 读写 true取消冒泡 stopPropagation()
returnValue Boolean 读写 false取消默认 preventDefault()
srcElement Element 只读 target
type String 只读 类型
13.3.3跨浏览器的事件对象
var EventUtil={
getEvent:function(){
return event?event:window.event;
},
getTarget:function(){
return event.target||event.srcElemnt;
},
preventDefault:function(){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=false;
}
}
};
13.4事件类型
UI 元素交互
焦点事件 获得或失去焦点
鼠标事件 鼠标
滚轮事件 滚轮
文本事件 输入文本
键盘事件 键盘
合成事件 IME输入法编辑器输入字符
変动事件 底层DOM变化
变动名称事件 元素或属性名变动
13.4.1UI事件
DOMActive 操作激活 抛弃
load 加载后window触发
unload 完全卸载触发
abort 下载暂停
error 出错
select 选择文本框字符
resize 窗口框架变化
scroll 用户滚动
1.load事件
在document上 Window向后兼容
<script><link><img> 设置链接 添加文档开始下载
2.unload事件
切换页面
3.resize事件
重复触发 最大最小化
4.scroll事件
safari 基于body
重复触发
13.4.2焦点事件
blur 失去焦点 不冒泡
DOMFocusIn focus
DOMFoucsOut
focus 不冒泡
focusin 冒泡
focusout
13.4.3鼠标与滚路事件
click 左键点击或回车
dbclick 左键双击
mousedown 鼠标按下
mouseenter 鼠标从外部首次进入，不冒泡
mouseleave 移动到元素外，不冒泡
mousemove 重复触发
mouseout 元素外部或内部
mouseover 元素上
mouseup 释放鼠标
1.客户区坐标位置
clientX和clientY上 视口
2.页面坐标位置
pageX或pageY 页面
3.屏幕坐标位置
screenX和screenY
4.修改键
shiftKey
ctrlKey
altKey
metaKey windows键
5.相关元素
mouseover 主目标获得光标元素 相关元素失去光标元素
mouseout 主目标失去光标元素 相关元素得到光标元素
relatedTarget
var EventUtil={
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElemnt){
return event.fromElemnt;
}else{
return null;
}
}
}
6.鼠标按钮
event.button 按下按钮 0主按钮左键 1滚轮 2次按钮右键
getButton:function(event){
if(document.implemention.hasFeature("MouseEvetnts","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
onmouseup button 释放哪个按钮
7.更多的事件信息
detail
8鼠标滚轮事件
mousewheel
wheelDeltal 120倍数
getWheelDelta:function(event){
if(event.wheelDelta){
return(client.engine.opera&&client.engine.opera<9.5?
-event.wheelDelta:event.wheelDelta);
}else{
return -event.detail*40;
}
}
9.触摸设备
不支持dbclick
首先触发mouseover 依次触发mousedown/mouseup和click事件
mousemove 触发 mouseover 和mouseout
两个手指 触发mousewheel 和 scroll事件
10.无障碍性问题
onmousedown 不要使用
onmouseover 不要使用
dblclick 不要使用
13.4.4键盘与文本事件
keydown 重复键盘按下
keypress 重复键盘按下
keyup 释放触发
textinput 文本输入之前
1.键码
event.keyCode 对应键盘
2.字符编码
getCharCode:function(event){
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}
fromCharCode() 转换实际字符
charCodeAt()
3.DOM3级变化
key 文本字符 键名
char 非字符null
getModifierState() 检测修改键
4.textInput事件
event.data 字符
event.inputMethod 输入方式
5.设备中的键盘事件
13.4.5复合事件
13.4.6変动事件
DOM变化触发
DOMSubtreeModified DOM变化
DOMNodeInseted 添加节点
DOMNodeRemoved 删除节点
DOMNodeInsertedIntoDocument 插入document触发
DOMNodeRemovedFromDocument 删除document节点触发
DOMAttModified 特性修改
DOMCharacterDataModified 文本节点值修改
13.4.7HTML5事件
1.contextMenu事件
冒泡
2.beforeunload事件
event.returnValue=message
3.DOMContentLoaded事件
形成DOM数触发
不理会图像、js、CSS、其他资源
target属性为 document
4.readyStateChange事件
readyState属性
uninitialized 未初始化
loading 加载数据
loaded 加载数据完毕
interactive 交互，还没完全加载
complete 完成
DOMcontentLoaded
load
readystatechange
5.pageshow和pagehide事件
bfeache 后退，从内存加载
event.persisted 是否在内存中
pagehide页面卸载
6.hashchange事件
window对象添加
oldURL和newURL
documentMode ie几触发
13.4.8设别事件
1.orientationchange事件
打开触发
window.orientation 0 90 -90
2.MozOrientation事件
加速情况 0 0 1
3.deviceorientation事件
朝向
x从左往右 y从上往下 z从后往前
13.4.9触摸与手势事件
touchstart 触摸开始
touchmove 滑动
touched 移开
touchcancel 停止跟踪
touches Touch对象数组
targetTouchs 特定事件Touch数组
changeTouches
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
13.4.9触摸与手势事件
13.5内存和性能
13.5.1事件委托
click/mousedown/mouseup/keydown/keyup和keypress
13.5.2移除事件处理程序
removeChild() replaceChild() innerHTML
先移除事件处理程序
空事件处理程序
onunload 移除事件
13.6模拟事件
13.6.1DOM中的事件模拟
document.createEvent() 创建事件
UIEvents UI事件 鼠标键盘
MouseEvents 一般化鼠标
MutationEvents 一般化DOM变动
HTMLEvents 一般化HTML
事件初始化
dispatchEvent() 触发事件
1.模拟鼠标事件
initMouseEvent()
type 事件类型
bubbles 是否冒泡
cancelable 是否可以取消
view 事件关联视图 document.defaultView
detail 整数 详细信息
screenX
screenY
clientX
clientY
ctrlKey
altKey
shiftKey
metaKey
button 鼠标键
relatedTarget 对象
2.模拟键盘事件
"KeyboardEvent"
initKeyEvent()
type
bubbles
cancelable
view
key 按下键码
location 0主键盘 1左 2右 3数字键盘 4移动设备 5手柄
repeat 多少次
3.模拟其他事件
4.自定义DOM事件
"CustomEvent"
第20章 客户端存储
-Web存储 包含localStorage对象和sessionStorage对象
-cookie 最大4k
-IE User Data
-离线Web应用
-Web数据库
-文件系统API
20.1 localStorage和sessionStorage
两个属性代表同一个Storage对象-一个持久化关联数组
两者在存储的有效期和作用域不同
var name=localStorage.username;
name=localStorage['username'];
if(!name){
name=prompt('Whats is your name?');
localStorage.username=name;
}
for(var name in localStrorage){
var value=localStorage[name];
}
自动转码为字符串，获取要解码
parseInt/Date.parse/JSON.parse
20.1.1存储有效期和作用域
localStorage 永久存储，限定文档源级别，通过协议、主机名和端口确定，同源可共享
sessionStorage 存在最顶层，一旦窗口或标签页关闭，数据删除，顶级窗口
20.1.2 存储API
setItem() 将对应的名字和值传递进去，实现存储
getItem() 获取值
removeItem() 删除数据
clear() 删除所有存储数据
length以及key() 枚举存储的名字
对象或数组存储他们的副本，使用getItem()和setItem()
20.1.3 存储事件
在数据可见的窗口对象上触发存储事件
可通过addEventListener()和attachEvent()方法，还可以给Window设置onstorage属性
事件对应的属性
key 被设置或移除项的名字或键名，clear()函数，该值为null
newValue 保存的新值，removeItem时，该值为null
oldValue 改变或删除该项前，保存的原先的值，插入新的时为nulll
storageArea Window对象上的localStorage或seesionStorage
url 触发变化所在文档的URL
20.2 cookie
通过Document对象的cookie属性，不采用加密机制
navigator.cookieEnabled 是否可用cookie
20.2.1 cookie属性：有效期和作用域
在web浏览器会话期前
cookie和整个浏览器进程有效期一致，sessionStorage和单个浏览器窗口有效期一致
max-age 延长有效期
path、domain 设置文档源和文档路径 path设置共享'/' domain域属性 子域之间共享
对同目录、或子目录可见
secure 只有当HTTPS或安全协议链接传递
20.2.2 保存cookie
设置为name=value的字符串值
encodeURIComponet编码 decodeURIComponent解码
//名、值存储cookie
function setcookie(name,value,daysToLive){
var cookie=name+'='+encodeURIComponent(value);
if(typeof daysToLive==='number')
cookie+='; max-age='+(daysToLive6060*24);
document.cookie=cookie;
}
;path=path
;domain=domain
;secure
通过‘分号和空格’分开
要改变使用相同名字、路径和域，设置新值
删除max-age设置为0
20.2.3 读取cookie
//返回名、值对象
function getcookie(){
var cookie={};
var all=document.cookie;
if(all==='')
return cookie;
var list=all.split('; ');
for(var i=0;i<list.length;i++){
var cookie=list[i];
var p=cookie.indexOf('=');
var name=cookie.substring(0,p);
var value=cookie.substring(p+1);
value=decodeURIComponent(value);
cookie[name]=value;
}
return cookie;
}
20.2.4 cookie的局限性
浏览器保存限制300
Web服务器保存限制20
每个cookie限制保存数据4KB
//基于cookie的存储API，cookieStorage.js
function cookieStorage(maxage,path){
var cookie=(function(){
var cookie={};
var all=document.cookie;
if(all==='')
return cookie;
var list=all.split('; ');
for(var i=0;i<list.length;i++){
var cookie=list[i];
var p=cookie.indexOf('=');
var name=cookie.substring(0,p);
var value=cookie.substring(p+1);
value=decodeURIComponent(value);
cookie[name]=value;
}
return cookie;
}());
var keys=[];
for(var key in cookie) keys.push(key);
this.length=keys.length;
this.key=function(n){
if(n<0||n>keys.length) return null;
return keys[n];
};
this.getItem=function(key,value){
if(!(key in cookie)){
keys.push(key);
this.length++;
}
cookie[key]=value;
var cookie=key+'='+encodeURIComponent(value);
if(maxage) cookie+='; max-age'+maxage;
if(path) cookie+='; path'+path;
document.cookie=cookie;
};
this.removeItem=function(key){
if(!(key in cookie)) return;
delete cookie[key];
for(var i=0li<keys.length;i++){
if(keys[i]===key){
keys.splice(i,1);
break;
}
}
this.length--;
document.cookie=key+='=; max-age=0';
};
this.clear=function(){
for(var i=0;i<keys.length;i++){
document.cookie=keys[i]+'=; max-age=0';
}
cookie={};
keys=[];
this.length=0;
};
}
20.4.1 应用程序缓存清单
<!DOCTYPE html>
<html manifest="myapp.appcache">
<head>
<title></title>
</head>
<body>
</body>
</html>
缓存清单，相对路径URL相对清单文件的URL
CACHE MANIFEST
#注释
myapp.html
myapp.js
images/background.png
MIME类型，通过‘text/cache-manifest’
'CACHE' 简单缓存
'NETWORK' 资源不缓存，从网络获取
'FALLBACK' 包含两个URL，第一个是URL前缀，第二个是URL需要加载或存储在缓存中的资源，第一个可匹配从网络载入，不可载入第二个替代，
CACHE MANIFEST
CACHE:
myapp.html
myapp.css
myapp.js
FALLBACK
videos/ offline_help.html
NETWORK
cgi/
20.4.2 缓存的更新
CACHE MANIFEST
MyApp version 1
myapp.html
myapp.js
卸载就是删除清单文件
载入两次保证最新版本生效：第一次是载入老版本跟新，第二次从缓存载入新版本
applicationCache.onupdateready=function(){
var reload=confirm('A new version of this application is available\n'+
'and will be used the next time you reload.\n'+
'Do you want to reload now?');
if(reload) location.reload();
}
//处理应用缓存相关事件
//显示默认状态
function status(msg){
//输出到id为'statusline'的文档元素中
document.getElementById('statusline').innerHTML=msg;
console.log(msg);
}
//载入时检查清单
window.applicationCache.onchecking=function(){
status('Checking for a new version.');
return false;
};
//没有改动，应用程序缓存
window.applicationCache.onupdate=function(){
status('This version is up-to-date.');
return false;
};
//未缓存，或有改动，下载
window.applicationCache.ondownloading=function(){
status('Downloading new version');
window.progresscount=0;
return false;
};
//下载简短除法progress，在每个文件下载完毕
window.applicationCache.onprogress=function(e){
var progress='';
if(e&&e.lengthComputable)
progress=' '+Math.round(100*e.loaded/e.total)+'%'
else
progress='('+ ++progresscount+ ')'
status('Downloading new version'+progress);
return false;
};
//首次下载完成
window.applicationCache.oncached=function(){
status('This application is now cached locally');
return false;
};
//下载完成并更新，能看到老版本
window.applicationCache.onupdateready=function(){
status('A new version has been downloaded. Reload to run it');
return false;
};
//缓存引用不存在文件，应用移除缓存
window.applicationCache.onobsolete=function(){
status('This application is no longer cached.'+
'Reload to get the latest version from the network');
return false;
};
载入设置manifest属性HTML文件，触发checking
没有可用更新 noupdate
有可用更新 已经缓存，清单变动，触发downloading，下载过程触发progress，下载完成触发updateready
首次载入新的应用 没有缓存，触发downloading和progress，完成触发cached
浏览器离线 触发error或文件不存在
清单文件不存在 在线，清单文件不存在，触发obsolete，移除缓存
applicationCache.status查看缓存状态
applicationCache.UNCACHED(0) 没有设置manifest，未缓存
applicationCache.IDLE(1) 清单检查完毕，缓存新的应用
applicationCache.CHECKING(2) 检查清单
applicationCache.DOWNLOADING(3) 下载缓存清单文件
applicationCache.UPDATEREADY(4) 下载缓存新的应用
applicaitonCache.OBSOLETE(5) 清单不存在，缓存清除
20.4.3离线Web应用
navigator.onLine 是否在线
第3章 类型、值和变量
原始类型：number/string/boolean
对象类型：object/Array/Function/Date/RegExp/Error
特殊原始值：null/undefined
3.1数字
Math.pow(2.53)//求幂
Math.round(.6)//四舍五入
Math.ceil(.6)//向上求整
Math.floor(.6)//向下求整
Math.abs(-5)//绝对值
Math.max(x,y,z)//最大值
Math.min(x,y,z)//最小值
Math.random()//大于0小于1.0伪随机数
Math.PI//圆周率
Math.E//自然对数的底数
Math.sqrt(3)//平方根
Math.pow(3,1/3)//立方根
Math.sin(0)//三角函数Math.cos,Math.atan
Math.log(10)//10的自然对数
Math.log(100)/Math.LN10//10为底的100对数
Math.exp(3)//e的三次幂
infinity无穷大
0/0==NaN
isNaN 是NaN返回true
isFinite 不是NaN/Infinity和-Infinity返回true
3.1.5日期和时间
Date.getFullYear()//年
Date.getMonth()//从0开始计数的月份
Date.getDate()//从1开始计算的天数
Date.getDay()//星期几
Date.getHours()//当地时间
3.2.2转义字符
\o nul字符
\b 退格符
\t 水平制表符
\n 换行符
\v 垂直制表符
\f 换页符
\r 回车符
" 双银行
' 单引号
\ 反斜杠
3.2.3字符串的使用
s.charAt(0)//第一个字符
s.substring(1,4)//2-4字符
s.slice(1,4)//同上
s.slice(-3)//最后三个字符
s.indexOf("1")//1第一个出现的位置
s.lastIndexOf("1")//最后一次出现的位置
s.indexOf("1",3)//在3之后1出现的位置
s.split(",")//从，分割
s.replace("h","H")//全文替换
s.toUpperCase()//大写
.substring()//起始和结束，两个中小的作为起始，负数转化为0
.slice()//起始和结束，负数和长度相加
.substr()//起始和长度，负数第一个加长度
3.2.4正则表达式（RgeExp）
pattern.test(text)//正则匹配字符串
text.search(pattern)//首次匹配成功的位置
text.match(pattern)//所有匹配组成的数组
text.replace(pattern,"#"//替换
text.split(/\D+/)//用非数字字符截取字符串
3.3布尔值
false:null/undefined/0/false/NaN/""
3.5全局对象
全局属性，undefined/Infinity/NaN
全局函数，isNaN()/parseInt()/eval()
构造函数，Date()/RegExp()/String()/Object()/Array()
全局对象，Math和JSON
客户端Js中window=this代表Window对象
3.6包装对象
String()/Number()/Boolean()/创建临时对象
3.7不可变的原始值和可变的对象引用
两个单独的对象永不相等
两个单独的数组永不相等
数组和对象为引用类型
数组和对象值为引用
字符串 数字 布尔 对象
undefined 'undefined NaN false throws TypeError
null 'null' 0 false throws TypeError
true 'true' 1 new Boolean(true)
false 'false' 0 new Boolean(false)
'' 0 false new String('')
'1.2' 1.2 true new String('1.2')
'one' NaN true new String('one')
0 '0' false new Number(0)
-0 '0' false new Number(-0)
NaN 'NaN' false new Number(NaN)
Infinity 'Infinity' true new Number(Infinity)
-Infinity '-Infinity' true new Number(-Infinity)
1 1 true new Number(1)
{} 3.8.3 3.8.3 true
[] '' 0 true
[9] '9' 9 true
['a'] join()方法 NaN true
function 3.8.3 NaN true
3.8.1转换和相等性
null==undefined
3.8.2显示类型转换
Number.toString(2)//转换为2进制字符串
Number.toFixed(2)//指定小数点后位数的字符串
Number.toExponential()//指数计数法
Number.toPrecision()//指定有效位数
全局函数（跳过前导空格，尽可能多的解析数值字符，第一个非法，返回NaN）：
parseInt()//解析整数，可接受第二个参数为基数
parseFloat()//解析整数和浮点数
3.8.3对象转换为原始值
所有对象（包括数组和函数）转化为true
.toString():
Aarry()数组返回元素加逗号的字符串
Function()函数返回函数定义的表示方式，源码字符串
Date()可读日期和时间的字符串
RegExp()返回正则直接量的字符串
.valueOf():
返回原始值，对象返回本身
对象到字符串： toString()返回原始值到字符串，valueOf()原始值到字符串，typeError
对象到数字：valueOf()原始值到数字，toString()原始值到字符串，typeError
'+''==''!='日期先到字符串
3.10.1函数作用域和声明提前
js是函数作用域
声明提前(hoisting)
3.10.2作为属性的变量
var声明变量不可配置，无法删除
未声明赋值，自动创建全局变量，可配置删除
tapable
Tapable暴露出很多Hook类，用来为插件创建钩子
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
用法
所有的钩子函数使用一个字符串数组作为参数
const hook = new SyncHook(["arg1", "arg2", "arg3"]);
更好的方式是将所有钩子通过一个class的hooks属性暴露
class Car {
constructor() {
this.hooks = {
accelerate: new SyncHook(["newSpeed"]),
break: new SyncHook(),
calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
};
}
/* ... */
}
别人可以使用这些钩子
const myCar = new Car();
// Use the tap method to add a consument
myCar.hooks.break.tap("WarningLampPlugin", () => warningLamp.on());
可通过添加一个name定义插件
需要接受参数
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
同步钩子使用tap添加插件
异步钩子支持异步插件
myCar.hooks.calculateRoutes.tapPromise("GoogleMapsPlugin", (source, target, routesList) => {
// return a promise
return google.maps.findRoute(source, target).then(route => {
routesList.add(route);
});
});
myCar.hooks.calculateRoutes.tapAsync("BingMapsPlugin", (source, target, routesList, callback) => {
bing.findRoute(source, target, (err, route) => {
if(err) return callback(err);
routesList.add(route);
// call the callback
callback();
});
});
// You can still use sync plugins
myCar.hooks.calculateRoutes.tap("CachedRoutesPlugin", (source, target, routesList) => {
const cachedRoute = cache.get(source, target);
if(cachedRoute)
routesList.add(cachedRoute);
})
类可以触发这些钩子
class Car {
/* ... */
setSpeed(newSpeed) {
this.hooks.accelerate.call(newSpeed);
}
useNavigationSystemPromise(source, target) {
const routesList = new List();
return this.hooks.calculateRoutes.promise(source, target, routesList).then(() => {
return routesList.getRoutes();
});
}
useNavigationSystemAsync(source, target, callback) {
const routesList = new List();
this.hooks.calculateRoutes.callAsync(source, target, routesList, err => {
if(err) return callback(err);
callback(null, routesList.getRoutes());
});
}
}
这些钩子会编译一个最有效函数用来执行插件，依据以下生成代码：
- 注册插件数量（none，one，many）
- 注册插件的方式（sync，async，promise）
- 被call过的方法（sync，async，promise）
- 参数数量
- 是否使用拦截器
这样可以保证最快执行
拦截器
所有的钩子提供附加的拦截器api
myCar.hooks.calculateRoutes.intercept({
call: (source, target, routesList) => {
console.log("Starting to calculate routes");
},
tap: (tapInfo) => {
// tapInfo = { type: "promise", name: "GoogleMapsPlugin", fn: ... }
console.log(`${tapInfo.name} is doing it's job`);
return tapInfo; // may return a new tapInfo object
}
})
- call:(…args) => void 添加call函数到拦截器，会在钩子触发时触发，可以得到钩子参数
- Tap:(tap: Tap) => void 添加tap函数到拦截器，会在一个插件添加入钩子时触发。需要提供Tap对象，不可改变
- loop:(..args) => void 添加loop函数到拦截器，会在钩子循环的每个环节触发
- Register:(tap: Tap) => Tap | undefined 添加register函数到拦截器，会在每个添加的tap触发，并且允许修改tap
hookmap
hookmap 是一个帮助类，用来为钩子生成map
const keyedHook = new HookMap(key => new SyncHook(["arg"]))
keyedHook.tap("some-key", "MyPlugin", (arg) => { /* ... */ });
keyedHook.tapAsync("some-key", "MyPlugin", (arg, callback) => { /* ... */ });
keyedHook.tapPromise("some-key", "MyPlugin", (arg) => { /* ... */ });
const hook = keyedHook.get("some-key");
if(hook !== undefined) {
hook.callAsync("arg", err => { /* ... */ });
}
Hook/hookmap 接口
Public
interface Hook {
tap: (name: string | Tap, fn: (context?, ...args) => Result) => void,
tapAsync: (name: string | Tap, fn: (context?, ...args, callback: (err, result: Result) => void) => void) => void,
tapPromise: (name: string | Tap, fn: (context?, ...args) => Promise<Result>) => void,
intercept: (interceptor: HookInterceptor) => void
}
interface HookInterceptor {
call: (context?, ...args) => void,
loop: (context?, ...args) => void,
tap: (context?, tap: Tap) => void,
register: (tap: Tap) => Tap,
context: boolean
}
interface HookMap {
for: (key: any) => Hook,
tap: (key: any, name: string | Tap, fn: (context?, ...args) => Result) => void,
tapAsync: (key: any, name: string | Tap, fn: (context?, ...args, callback: (err, result: Result) => void) => void) => void,
tapPromise: (key: any, name: string | Tap, fn: (context?, ...args) => Promise<Result>) => void,
intercept: (interceptor: HookMapInterceptor) => void
}
interface HookMapInterceptor {
factory: (key: any, hook: Hook) => Hook
}
interface Tap {
name: string,
type: string
fn: Function,
stage: number,
context: boolean
}
Protected（只有在类包含hook时）
interface Hook {
isUsed: () => boolean,
call: (...args) => Result,
promise: (...args) => Promise<Result>,
callAsync: (...args, callback: (err, result: Result) => void) => void,
}
interface HookMap {
get: (key: any) => Hook | undefined,
for: (key: any) => Hook
}
multihook
用来帮助hook-class 融合进其他接口
const { MultiHook } = require("tapable");
this.hooks.allHooks = new MultiHook([this.hooks.hookA, this.hooks.hookB]);
第10章 DOM
10.1节点层次
<html> 文档元素
10.1.1Node类型
节点有nodeType属性，节点属性通过Node类型中12个常量表示
Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)
1.nodeName和nodeValue属性
nodeName标签名 nodeValue值为null
2.节点关系
childNodes属性
保存NodeList对象 有length 类数组 DOM动态执行查询结果
可通removeChild过方括号，或是item() 访问
对arguments对象使用 Array.prototype.slice() 方法可以转换为数组
parentNode属性 父节点
previousSibling和nextSibling属性 同胞节点 第一节点前和最后节点后为null
firstNode和lastNode 为第一和最后一个节点
hasChildNodes() 方法 有一个或多个节点返回ture
3.操作节点
appendChild() childNodes末尾添加节点 返回新节点
insertBefore(插入的节点，参照的节点) 插入参照节点前一个节点 null插入最后
replaceChild(插入节点，替换节点) 删除节点返回
removeChild() 删除节点 并返回
4.其他方法
cloneNode() 创建副本 true深复制
不复制js属性 事件处理程序
nomalize() 空文本节点删除，相邻文本节点合并
10.1.2Document类型
表示文档
document对象是HTMLDocument(继承自Document类型)的一个实例
nodeType 0
nodeName '#document'
nodeValue null
parentNode null
ownerDocument null
子节点可能是 DocumentType（最多一个）Element（最多一个）RrocessingInstruction或Comment
可通过HTMLDocument访问构造函数和原型
1.文档的子节点
documentElement属性 指向元素
body 指向属性
DocumentType
doctype属性 指向<!DOCTYPE>
2.文档信息
title <title>元素中文本
URL属性 地址栏完整
domain 页面域名 只可以设置包含域 松散loose不能设置为紧绷tight
referrer 链接到当前页URL
3.查找元素
getElementById() 不存在返回null
getElementsByTagName() 返回nodeList HTML中返回HTMLCollection
.namedItem() 返回特定name元素
getElementsByName() 取得单击按钮
4.特殊集合
document.anchors 返回带name特性的元素
document.applets 所有元素
document.forms 所有元素
document.images 所有元素
document.links 所有带有href 元素
动态更新
5.DOM一致性检验
document.implementation.hasFeature('名称','版本') 拥有返回true
Core 123 基本DOM
XML 123 XML扩展
HTML 12 HTML扩展
Views 2 某些样式文档格式化
StyleSheets 2 样式关联到文档
CSS 2 层叠样式1
CSS2 2 层叠样式2
Events 23 常规DOM事件
UIEvents 23 用户界面事件
MouseEvents 23 鼠标事件
MutationEvents 23 DOM树变化事件
HTMLEvents 2 HTML4.01事件
Range 2 操作DOM树中范围的对象和方法
Traversal 2 遍历DOM树方法
LS 3 同步加载
LS-Async 3 异步加载
Validation 3 有效前提修改DOM树
6.文档写入
write()和writeln() 输出流吸入网页中 加载后重写页面
<script> 需要分开写标签
open()和close() 打开和关闭输出流
10.1.3Element类型
表示XML或HTML元素
nodeType 1
nodeName 元素标签名
nodeValue null
parentNode 可能是Document或Element
子节点可能是Element/Text/Comment/ProcessingInstruction/CDARASection或EntityReference
nodeName==tagName
HTML中输出大写 toLowerCase
可访问Element构造函数和原型
1.HTML
HTML元素由HTMLElement类型表示，继承自Element类型
id 唯一标识符
title 附加说明
lang 语言代码
dir 语言方向 ltr rtl
className class特性毒性
2.取得特性
getAttribute() 传递特姓名与实际相同 使用class 返回相应文本
3.设置特性
setAttribute(特性名，值)
removeAttribute() 删除属性
4.attributes属性
包含NamedNodeMap 与 NodeList 类似，动态集合
getNamedItem(name) 返回nodeName属性等于name的节点
removeNamedItem(name) 移除nodeName为name节点 返回Attr节点
setNamedItem(node) 向列表中添加节点，以节点nodeName属性索引
item(pos) 位于数字pos位置处节点
遍历属性
specified 是否设置
5.创建元素
document.createElement(标签名)
同时设置ownerDocument属性
6.元素的子节点
使用Element.getElementByTagName() 取得所有后代节点
10.1.4Text类型
nodeType 3
nodeName #text
nodeValue 节点包含文本或data属性
parentNode Element
没有子节点
appendData(text) text添加到节点末尾
deleteDate(offset,count) 从offset指定位置删除count个字符
insertData(offset,text) offset指定位置插入text
replaceData(offset,count,text) 用text替换offset开始到offset+count
splitText(offset) 从offset分成两个文本节点
substringData(offset,count) 提取offset开始到offset+count
可访问Text构造函数和原型
1.创建文本节点
document.createTextNode(文本)
文本会按照HTML或XML格式编码
2.规范化文本节点
normalize() 合并文本节点
3.分割文本节点
splitText(offset) 原文本到制定位置，新文本返回剩下包含节点
10.1.5Comment类型
nodeType 8
nodeName #comment
nodeValue 注释内容
parentNode 可能是Document或Element
不支持子节点
document.createComment() 创建注释节点
可访问构造函数和原型
10.1.6CDATASction类型
针对XML文档，表示CDATA区域
nodeType 4
nodeName '#cdata-section'
nodeValue CDATA 内容
parentNode Document或Element
不支持子节点
document.createCDataSection() 创建
可访问CDATASection 构造函数或原型
10.1.7DocumentType类型
包含与文档doctype有关信息 保存在document.doctype
nodeType 10
nodeName doctype 名称
nodeValue null
parentNode Document
不支持子节点
name 文档类型名称
entities 实体NamedNodeMap对象
notations 文档类型描述的符号的NamedNodeMap对象
10.1.8DocumentFragment类型
没有对应标记 文档片段
nodeType 11
nodeName #docuemnt-fragment
nodeValue null
parentNode null
子节点 Element/ProcessingInstruction/Comment/Text/CDATASection或EntityReference
docuemnt.createDocumentFragment()
10.1.9Attr类型
特性存在于attributes属性中的节点
nodeType 11
nodeName 特性名称
nodeValue 特性值
parentNode null
HTML没有子节点
XML子节点可以是Text或EntityReference
document.createAttribute() 创建新特性
10.2DOM操作技术
10.2.1动态脚本
动态加载外部JavaScript能立即运行
IE创建TextNode插入
与全局作用域执行eval() 一样
10.2.2动态样式
异步执行
<link><style>
style.styleSheet.cssText=''
10.2.3操作表格
table属性
rows 行
insertRow()
tr属性
cells 单元格
insertCell()
10.2.4使用NodeList
减少使用，或做文档查询
第16章 脚本化CSS
层叠样式表（Cascading Style Sheet,CSS）
16.1CSS概述
/**/注释
内联样式
CSS样式表 stylesheet
<style></style>放在<head>内
<link rel='stylesheet' href='' type='text/css'>
16.1.4非标准属性
Firefox使用-moz-
Chrome和Safari使用-webkit-
IE使用-ms-
16.2重要的CSS属性
position 定位类型
top/left 上、左边缘的位置
bottom/right 下、右边缘的位置
width/height 尺寸
z-index 堆叠次序，元素的第三个维度
display 是否以及如何显示
visibility 是否可见
clip 裁剪区域
overflow 元素比分配空间大时处理方式
margin/border/padding 空白和边框
background 背景颜色和图片
opacity 不透明度
16.2.1用CSS定位元素
CSS的position元素上的定位类型
static 默认属性。按常规文档内容流定位，不能使用top/left和类似属性定位
relative 按照常规文档流布局，相对于文档流位置调整，保留正常空间
absolute 绝对定位，相对于包含元素定位，相对祖先元素或文档本身，不属于文档流
fixed 固定定位，相对于浏览器窗口定位，不属于文档流
left、right、top、bottom可指定元素大小
px 代表像素
in 英寸
cm 厘米
pt 点
em 当前字体行高
z-index默认为0，从低到高绘制
border-radius 圆角
text-shadow文本阴影：h-shadow/v-shadow/blur/color
border边框：border-width/border-style/border-color
border-style：
none 无边框
hidden 和none相同
dotted 点状，大部分为实线
dashed 虚线
solid 实线
double 双线
groove 3D凹槽边框
ridge 3D垄状边框
inset 3Dinset边框
outset 3Doutset边框
inherit 父元素继承
16.2.3CSS盒模型和定位细节
left和top制定容器边框内侧到定位元素边框外侧的距离
从容器内边距左上角开始
box-sizing:content-box/border-box应用IE盒模型
16.2.4元素显示和可见性
visibility：hidden不显示、visible显示，隐藏但留位置
display：指定是否块状元素、内联元素、列表项、隐藏不留位置
16.2.5颜色、透明度和半透明度
#fff红、绿、蓝
CSS3指定RGBA红、绿、蓝、透明度alpha值
HSL色相-饱和度-值
16.2.6部分可见：overflow和clip
overflow
visible 溢出并绘制边框外
hidden 裁剪和隐藏溢出内容
scroll 水平或垂直滚动条
auto 超出时显示scroll
clip 相对于左上角
rect(top right botton left)
(left,top)左上角 (right,bottom)右下角
16.3脚本化内联样式
style对象属性是CSSStyleDeclaration对象，style作为元素对象属性
可以使用元素的getAttribute()和setAttribute()或cssText属性实现
//震动
function shake(e,oncomplete,distance,time){
if(typeof e==='string') e=document.getElementById(e);
if(!time) time=500;
if(!distance) distance=50;
var originalStyle=e.style.cssText;
e.style.position='relative';
var start=(new Date()).getTime();
animate();
function animate(){
var now=(new Date()).getTime();
var elapsed=now-start;
var fraction=elapsed/time;
if(fraction<1){
var x=distanceMath.sin(fraction4*Math.PI);
e.style.left=x+'px';
//每秒40帧
setTimeout(animate,Math.min(25,time-elapsed));
}else{
e.style.cssText=originalStyle;
if(oncomplete) oncomplete(e);
}
}
}
//不透明到透明
function fadeOut(e,oncomplete,time){
if(typeof e==='string') e=document.getElementById(e);
if(!time) time=500;
var ease=Math.sqrt;
var start=(new Date()).getTime();
animate();
function animate(){
var elapsed=(new Date()).getTime()-start;
var fraction=elapsed/time;
if(fraction<1){
var opacity=1-ease(fraction);
e.style.opacity=String(opacity);
setTimeout(animate,Math.min(25,time-elapsed));
}else{
e.style.opacity='0';
if(oncomplete) oncomplete(e);
}
}
}
16.4查询计算出的样式
计算样式用CSSStyleDeclaration对象表示
window.getComputedStyle(元素，伪对象字符串或'') 计算样式
-只读、绝对值、不计算复合属性、未定义cssText
16.5脚本化CSS类
className
HTML5定义classList属性，是个DOMTokenList对象，只读类数组对象
add()和remove()添加清除类名
toggle()不存在添加，否则删除
contains()监测是否包含指定类名
16.6脚本化样式表
document.styleSheets属性表示CSSStyleSheet对象
.disabled不可使用
16.6.2查询、插入与删除样式表规则
CSSStyleSheet对象有一个cssRules[]数组，包含样式表的规则
IE中是rules
使用insertRule()和deleteRule()添加和删除规则
IE使用addRule()和removeRule()
.selectorText
.style.cssText
//创建样式表
function addStyles(styles){
var styleElt,styleSheet;
if(document.createStyleSheet){
styleSheet=document.createStyleSheet();
}else{
var head=document.getElementByTagName('head')[0];
styleElt=document.createElement('style');
head.appendChild(styleElt);
styleSheet=document.styleSheets[document.styleSheets.length-1];
}
//插入样式
if(typeof styles==='string'){
if(styleElt) styleElt.innerHTML=styles;
else styleSheet.cssText=styles;
}else{
var i=0;
for(selector in styles){
if(styleSheet.insertRule){
var rule=selector+'{'+style[selector]+'}';
styleSheet.insertRule(rule,i++);
}else{
styleSheet.addRule(selector,styles[selector],i++);
}
}
}
}
第15章 脚本化文档
Document对象是巨大的API核心对象
文档对象模型Document Object Model,DOM
-查询或选取单独元素
-文档作为节点树来遍历，找到文档元素的祖先、兄弟和后代元素
-查询和设置文档元素属性
-查询、设置和修改文档内容
-创建、插入和删除节点修改文档结构
-如何与HTML表单工作
15.1DOM概览
每一个文档节点表示一个Node对象
根部是Document节点，HTML元素是Element节点，文本节点是Text节点
Node：Document、CharaterData（Text、Comment注释）、Element、Attr
15.2选取文档元素
-制定id属性 getElementById()
-制定name属性 getElementsByName()
-制定标签名字 getElementsByTagName()
-制定的CSS类 getElementsByClassName()
-匹配制定CSS选择器
15.2.1通过ID选取元素
可以使用Document对象的getElementById()
function getElements(){
var elements=[];
fro(var i=0;i<arguments.length;i++){
var id=arguments[i];
var elt=document.getElementById(id);
if(elt==null)
throw new Error('No element with id:'+id);
elements[id]=elt;
}
return elements;
}
15.2.2通过名字选取元素
Document对象的getElementsByName()，返回NodeList对象
只返回HTML元素
15.2.3通过标签名选取元素
Document对象的getElementsByTagName()
返回HTML或XML元素，只读的类数组对象
NodeList方法返回值
images/forms/links为HTMLCollection为标签属性
15.2.4通过CSS类选取元素
getElementsByClassName()，参数如Class空格隔开
怪异模型为了向后兼容
15.2.5通过CSS选择器选取元素
# Id
div <div>
.classname class中包含classname
*[name='x'] 包含name='x'属性
#log span id='log'后代中所有<span>
#log>span id='log'子元素中所有<span>
body>h1:first-child <body>中第一个<h1>
div,#log 组合
Document方法querySelectorAll() 匹配给定选择器的元素的js方法
接受CSS选择器的字符串参数
返回NodeList对象，非法排除异常，不是实时的
querySelector()方法返回第一个匹配元素
jQuery中使用和querySeletorAll()等效的方法，命名为$()
15.3.1作为节点树的文档
Node定义了以下重要属性
parentNode 父节点，Document对象应该是null
childNodes 只读类数组对象，节点是实时表示
firstChild/lastChild 第一个或最后一个，没有返回null
nextSibling/previoursSibling 兄弟节点
nodeType 节点类型，9Document，1Element，3Text，8Comment，11DocumentFragment
nodeValue Text节点或Comment节点内容
nodeName 标签名，大写形式表示
只表示Element
firstElementChild/lastElementChild
nextElementSibling/previousElementSibling
childElementCount
15.4.2获取和设置非标准HTML属性
Element类型
getAttribute()和setAttribute()
hasAttribute()和removeAttribute()
15.4.3数据集属性
data- 为前缀的小写属性作为数据集属性
dataset属性指代对象，去掉前缀的data-属性
15.4.4作为Attr节点的属性
Node定义了attributes属性
15.5.1作为HTML的元素内容
innerHTML作为字符串返回元素内容
outerHTML包含被查询元素的开头和结尾标签
This is the element content
beforebegin/afterbegin/beforeend/afterend
15.5.2作为纯为本的元素内容
标准方法使用Node的textContent
textContent除了IE所有浏览器支持
innerText除了Firefox所有当前浏览器支持
15.6.1创建节点
Document对象的createElement()方法
createTextNode()
createComment()
createDocumentFragment()
createElementNS()
克隆节点
cloneNode() ture递归复制所有后代节点、false浅复制
importNode() 返回适合本文档插入的节点的副本，true作为第二参数递归后代
15.6.2插入节点
appendChild()
insertBefore(待插入节点，已存在节点)
15.6.3删除和替换节点
removeChild()
replaceChild(新节点，需要代替的节点)
(function(){
if(document.createElement('div').outerHTML) return;
function outerHTMLGetter(){
var container=document.createElement('div');
container.appendChild(this.cloneNode(true));
return container.innerHTML;
}
function outerHTMLSetter(value){
var container=document.createElement('div');
container.innerHTML=value;
while(container.firstChild)
this.parentNode.insertBefore(container.firstChild,this);
this.parentNode.removeChild(this);
}
if(Object.defineProperty){
Object.defineProperty(Element.prototype,'outerHTML',{
get:outerHTMLGetter,
set:outerHTMLSetter,
enumerable:false,configurable:true
});
}else{
Element.prototype.__defineGetter__('outerHTML',outerHTMLGetter);
Element.prototype.__defineGetter__('outerHTML',outerHTMLSetter);
}
}());
15.6.4使用DocumentFragment
DocumentFragment特殊的Node，作为其他节点的临时容器
document.createDocumentFragment
使用innerHTML实现insertAdjacentHTML()
15.7例子：生成目录表
window.onload=function(){
var toc=document.getElementById('TOC');
if(!toc){
toc=document.createElement('div');
toc.id='TOC';
document.body.insertBefore(toc,document.body.firstChild);
}
var headings;
if(document.querySelectorAll)
headings=document.querySelectorAll('h1,h2,h3,h4,h5,h6');
else
headings=findHeadings(document.body,[]);
function findHeadings(root,sects){
for(var c=root.firstChild;c!=null;c=c.nextSibing){
if(c.nodeType!==1) continue;
if(c.tagName.length==2&&c.tagName.charAt(0)=='H')
sects.push(c);
else
findHeadings(c,sects);
}
return sects;
}
var sectionNumbers=[0,0,0,0,0,0];
for(var h=0;h6) continue;
sectionNumbers[level-1]++;
for(var i=level;i<6;i++)
sectionNumbers[i]=0;
var sectionNumber=sectionNumbers.slice(0,level).join('.');
var span=document.createElement('span');
span.className='TOCSectNum';
span.innerHTML=sectionNumber;
heading.insertBefore(span,heading.firstChild);
//用明明锚点将标题包起来，增加链接
var anchor=document.createElement('a');
anchor.name='TOC'+sectionNumber;
heading.parentNode.insertBefore(anchor,heading);
anchor.appendChild(heading);
//创建链接
var link=document.createElement('a');
link.href='#TOC'+sectionNumber;
link.innerHTML=heading.innerHTML;
//放入div，用级别名字样式修饰
var entry=document.createElement('div');
entry.className='TOCEntry TOCELevel'+level;
entry.appendChild(link);
toc.appendChild(entry);
}
}
15.8.1文档坐标和视口坐标
文档坐标、视口坐标
偏移量scroll offset
鼠标指针的坐标是视口坐标系中的
//查询窗口的滚动条位置
function getScrollOffsets(w){
w=w||window;
//IE8及更早版本以外，其他都能用
if(w.pageXOffset!==null) return{x:w.pageXOffset,y:w.pageYOffset};
//标准模式下的IE
var d=w.document;
if(document.compatMode=='CSS1Compat')
return{x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
//怪异模式下的浏览器
return{x:d.body.scrollLeft,y:body.scrollTop};
}
//查询窗口的视口尺寸
function getViewportSize(w){
w=w||window;
//IE8及更早版本以外，其他都能用
if(w.innerWidth!==null) return{x:w.innerWidth,y:w.innerHeight};
//标准模式下的IE
var d=w.document;
if(document.compatMode=='CSS1Compat')
return{x:d.documentElement.clientWidth,y:d.documentElement.clientHeight};
//怪异模式下的浏览器
return{x:d.body.clientWidth,y:body.clientHeight};
}
15.8.2查询元素的几何尺寸
getBoundingClientRect() 返回视口坐标
包含left/right/top/bottom属性的对象，可能包含width和height属性
包含边框和内边距
getClientRects()方法获得类数组对象
15.8.3判定元素在某点
Document对象的elementFromPoint()方法
返回那个点的最里面和最上面的元素
15.8.4滚动
window.scrollTo()
scrollBy()参数是相对的，在当前滚动条的偏移量上增加
scrollIntoView()使HTML元素在视口中课件
15.8.5关于元素尺寸、位置和溢出的更多信息
offsetWidth和offsetHeight返回屏幕尺寸，包含边框和内边距，实际大小
offsetLeft和offsetTop返回文档坐标，相对于祖先元素
offsetParent指定相对的父元素
每个元素有以下属性
offsetWidth clientWidth scrollWidth
offsetHeight clientHeight scrollHeight
offsetLeft clientLeft scrollLeft
offsetTop clientTop scrollTop
offsetParent
clientWidth和clientHeight不包含边框，只包含内容和内边距，不包含滚动条
内联元素返回0，在根元素上和innerWidth和innerHeight相同
clientLeft和clientTop内边距外边缘到边框的外边缘，边框宽度，包括滚动条
内联元素返回0
scrollWidth和scrollHeight内容区域加上内边距加上溢出内容尺寸
不溢出和clientWidth和scrollHeight相同
scrollLeft和scrollTop制定元素的滚动条的位置
scrollWidth实际内容的宽度
offsetWidth元素的实际宽度
clientWidth内容可视区的宽度
15.9HTML表单
HTML元素、类型属性、事件处理程序、描述和事件
'button' onclick 按钮
'checkbox' onchange 复选按钮
'file' onchange 载入文件名输入域，value只读
'hidden' none 用户不可见
none none Select对象中单个选项，事件在Select上
'password' onchange 密码输入，不可见
'radio' onchange 单选按钮
'reset' onclick 重置表单
'select-one' onchange 只能单选的列表或下拉菜单
'select-multiple' onchange 选项可多选列表
'submit' onclick 提交
'text' onchange 文本输入域，默认
<textarea> 'textarea' onchange 多行文本
15.9.1选取表单和表单元素
document.forms.name.elments.name
action/encoding/method/target属性
type 标识表单元素类型
form Form对象只读引用
name HTML属性
value 制定按钮显示文本
15.9.3表单和元素的事件处理程序
Form元素有onsubmit/onreset事件处理程序，通过单击按钮触发
交互时触发click和change事件，
收到焦点触发focus事件，失去触发blur事件
this为触发该时间的文档元素
15.9.5开关按钮
cheked和defaultChecked睡醒
元素相关联，value元素为发送的web服务器的字符串
15.9.6文本域
placeholder指定提示信息
onkeypress/onkeydown/onkeyup
15.9.7选择框和选择元素
Select元素定义了options属性，是包含了多个Option元素的类数组对象
'select-one'通过判断selectedIndex属性判断是否选中
'select-multiple'通过遍历selected属性
text属性为选项显示纯文本字符串
value为发送的web服务器的字符串
15.10.1Document属性
Document属性有body.documentElement和forms等文档元素
cookie 允许js读写HTTP cookie的属性
domain web之间交互，相同域名下相互信任的web服务器之间同源策略安全限制
lastModified 文档修改时间的字符串
location Window对象的location属性同一个Location对象
referrer 浏览器导航到当前连接的上一个文档，和HTTP的referer头信息相同
title <title></title>之间内容
URL 文档的URL，只读字符串
15.10.2document.write()方法
15.10.3查询选取的文本
function getSelectedText(){
if(window.getSelection)
return window.getSelection().toString();
else if(document.selection)
return document.selection.createRange().text;
}
elt.value.substring(elt.selectionStart,elt.selectionEnd);
15.10.4可编辑的内容
contenteditable可编辑
spellcheck检查拼写
Document对象的designMode设置为on，整个文档可编辑
执行快捷键execCommand()
bold/subscript/justifycenter/insertimage
第二个true提示内容
document.queryCommandSupport() 传递命令名查询是否支持
document.queryCommandEnabled() 当前使用命令
document.queryCommandState() 当前状态
document.queryCommandValue() 查询该值
document.queryCommandIndeterm() 是否使用两种字体
第8章 设计模式分类
类
工厂方法：基于接口数据或事件生成几个派生类的一个实例
对象
抽象工厂：创建若干类系列的一个实例，无需详述具体的类
生成器：从表示中分离对象构建；总是创建相同类型的对象
原型：复制或克隆完全初始化的实例
单例：一个类在全局访问点只有唯一一个实例
结构型模式：基于构建对象块的想法
类
适配器：匹配不同类的接口，类可以在不兼容接口的情况下共同工作
对象
适配器：匹配不同类的接口，类可以在不兼容接口的情况下共同工作
桥接：将对象接口从其实现中分离，他们可以独立进行变化
组合：简单和复合对象的结构，使对象的总和不只是它各部分的总和
装饰：向对象动态添加备选的处理
外观：隐藏整个子系统复杂性的唯一一个类
享元：一个用于实现包含在别处信息的高效共享的细粒度实例
代理：占位符对象代表真正的对象
行为模式：基于对象在一起配合工作的方式
类
解释器：将语言元素包含在应用程序中的方法，以匹配预期语言的语法
模板方法：在方法中创建算法的shell，然后将确切的步骤推到子类
对象
职责链：在对象链之间传递请求的方法，以找到能够处理请求的对象
命令：将命令执行从其调用程序中分离的方法
迭代器：顺序访问一个集合中的元素，无需了解该集合的内部工作原理
中介者：在类之间定义简化的通信，以防止一组类显示应用彼此
备忘录：捕获对象的内部状态，以能够在以后恢复它
观察者：向多个类通知改变的方式，以确保类之间的一致性
状态：状态改变时，更改对象的行为
策略：在一个类中封装算法，将选择与实现分离
访问者：向类添加一个新的操作，无需改变类
第22章 HTML5 API
22.1 地理位置
navigator.geolocation.getCurrentPosition() 当前位置
navigator.geolocaiton.watchPosition() 监视当前位置
navigator.geolocation.clearWatch() 停止监视，参数watchPosition
navigator.geolocation.getCurrentPosition(function(pos)){
var latitude=pos.coords.latitude;
var longtitude=pos.coords.longitude;
}
function getmap(){
if(!navigator.geolocation) throw 'Geolocation not supported';
var image=document.getElementById('img');
navigator.geolocation.getCurrentPosition(setMapURL);
return image;
function setMapURL(pos){
var latitude=pos.coords.latitude;//纬度
var longtitude=pos.coords.longtitude;//精读
var accuracy=pos.coords.accuracy;//米
//请求Google地图
var url='http://maps.google.com/maps/api/staticmap'+
'?center='+latitude+','+longtitude+'&size=640x640&sensor=true';
//缩放级别
var zoomlevel=20;
if(accuracy>80)
zoomlevel-=Math.round(Math.log(accuracy/50)/Math.LN2);
url+='&zoom'+zoomlevel;
image.src='img/10.jpg';
}
}
getCurrentPosition()和watchPostion() 第二个参数失败情况下函数
第三个采纳数，配置对象，是否需要高精度位置信息，过期时间，多长时间获取信息
时间戳，海拔、速度和航向之类的额外信息
22.2历史记录管理
location.hash Window对象触发hashchange事件
history.pushState()和popstate事件，replaceState()
<!DOCTYPE html>
<html>
<head>
<title>I'm thinking of a number...</title>
<script type="text/javascript">
window.onload=newgame;
window.onpopstate=popState;//处理历史记录相关事件
var state,ui;
function newgame(plyagain){
ui={
heading:null,//<h1>元素
prompt:null,//输入猜测数字
input:null,//输入框
low:null,//三个表格单元
mid:null,//猜测范围
high:null
};
for(var id in ui)
ui[id]=document.getElementById(id);
ui.input.onchange=handleGuess;
state={
n:Math.floor(99*Math.random())+1,
low:0,
high:100,
guessnum:0,
guess:undefined
};
display(state);
if(plyagain===true) save(state);
}
function save(state){
if(!history.pushState) return;
var url='#guess'+state.guessnum;
history.pushState(state,"",url);
}
function popState(event){
if(event,state){
state=event.state;
display(state);
}else{
history.replaceState(state,'','#guess'+state.guessnum);
}
}
function handleGuess(){
var g=parseInt(this.value);
if((g>state.low)&&(g<state.high)){
if(g<state.n) state.low=g;
else if(g>state.n) state.high=g;
state.guess=g;
state.guessnum++;
save(state);
display(state);
}else{
alert('Please enter a number greateer than '+state.low+' and less than '+state.high);
}
}
function display(state){
ui.heading.innerHTML=document.title="I'm thinking of a number between "+state.low+' and '+state.high+'.';
ui.low.style.width=state.low+'%';
ui.mid.style.width=(state.high-state.low)+'%';
ui.high.style.width=(100-state.high)+'%';
//input字段，可见、空聚焦
ui.input.style.visibility='visible';
ui.input.value='';
ui.input.focus();
if(state.guess===undefined)
ui.prompt.innerHTML='Type your guess and hit Enter: ';
else if(state.guess<state.n)
ui.prompt.innerHTML=state.guess+' is too low. Guess again: ';
else if(state.guess>state.n)
ui.prompt.innerHTML=state.guess+' is too high. Guess again: ';
else{
ui.input.style.visibility='hidden';
ui.heading.innerHTML=document.title=state.guess+' is correct!';
ui.prompt.innerHTML="You Win!<button onclick='newgame(true)'>Play Again</button>";
}
}
</script>
<style type="text/css">
#prompt{font-size: 16pt;}
table{width: 90%;margin: 10px;margin-left: 5%;}
#low,#high{background-color: lightgray;height: 1em;}
#mid{background-color: green;}
</style>
</head>
<body>
<h1 id="heading">I'm thinking of a number...</h1>
<table><tr><td id="low"></td><td id="mid"></td><td id="high"></td></tr></table>
<label id="prompt"></label><input id="input" type="text"></input>
</body>
</html>
22.3跨域消息传递
window postMessage() 第一个参数要传递的消息，第二个是字符串指定源，协议、主机、URL端口，触发message时间，目标窗口定义message事件处理程序，传递事件对象
data 消息内容副本
source 源自的Window对象
origin 消息来源
第5章 语句
5.2复合语句和空语句
for(i=0;i<a.length;a[i++]=0);
5.3.2function
函数被显示提前到顶部和var变量一样
5.6.1标签语句
标签命名空间和变量或函数的命名空间是不同的
5.6.2break语句
break labelname终止语句块
break语句无法越过函数的边界
5.6.5throw语句
Error对象有一个name属性表示错误类型
message属性存放传递构造函数的字符串
try/catch/finally finally总会执行
5.7.1with语句
with（object）statement将对象添加到作用域链的头部
5.7.2debugger语句
用于调试
5.7.3'use strict'
var hasStrictMode=(function(){'use strict'; return this==undefined}());
未声明异常
第19章 jquery类库
19.1jQuery基础
全局函数jQuery()，快捷名称$
jQuery.noConflict()释放$变量
jQuery是工厂函数，不是构造函数，返回新创建对象
链式调用
19.1.1jQuery()函数
四种用法
-CSS选择器（字符串）给$()方法，返回匹配元素集，第二参数可选，定义起始点，称为上下文
-传递Element/Document/Window对象给$()方法，返回jQuery包装对象，传递数组返回元素集
-传递HTML文本字符串，包含<>，第二参数可传递Document，object对象
-传入函数，文档加载完毕DOM可操作，函数被调用，onLoad()函数
$(document).ready(f);
jQuery(f);
this 指向document对象
注册函数在DOMContentLoaded事件触发由jQuery触发，不支持时，load事件触发时由jQuery触发，文档解析完，图片还在加载
19.1.2查询与查询结果
size() 代替length属性
get() 代替方括号索引
toArray() 将jQuery对象转化为真实数组
selector 选择器字符串
context 上下文对象
jquery 版本号
each() 中this代表Element对象，将索引值和元素作为一二参数传递，false终止，返回jQuery对象
this和第二参数是原生文档元素
$(:header)返回h1到h5
map() 映射
index() 返回索引值
is() 至少一个匹配选择器返回true
19.2jQuery的getter和setter
同一个方法既是getter又是setter
setter给每一个元素设置值
getter查询第一个元素，遍历使用map()，不会回调自身对象，用在末尾
setter对象参数，每个属性设置键值对
setter函数参数，函数计算设置值
19.2.1获取和设置HMTL属性
attr() HTML属性的getter/setter
removeAttr() 删除属性
19.2.2获取和设置CSS属性
css() 返回当前计算样式，返回单个样式，将样式添加到是style中
允许使用连字符和驼峰格式样式名
可以设置符合样式
获取样式时将数值转换带有单位后缀的字符串，设置时会把数值转化为字符串，必要时添加px
19.2.3获取和设置CSS类
class属性值，js通过classname访问
addClass()和removeClass()添加和删除类
toggleClass()没有添加，反之删除，第二参数true类似addClass，false类似removeClass
hasClass()判断是否存在，接受单个类名，不接受函数参数
19.2.4获取和设置HTML表单值
val() HTML表单元素的value属性
获取和设置复选框、单选按钮及<select>元素选中状态
19.2.5设置和获取元素内容
text()和html()获取和设置元素的纯文本或HTML内容
text() 不带参数，返回匹配元素的子孙文本节点纯文本内容
html() 不带参数，返回第一个匹配元素的HTML内容，使用innerHTML实现
19.2.6获取和设置元素的位置高宽
offset()获取设置位置，相对文档计算位置，返回一个对象，带有left和top属性
position()只能用做getter()，相对父元素
width()和height() 返回基本的宽度和高度，不包含内边距、边框和外边距
-元素为Window对象或Document对象，窗口为视口大小或文档整体尺寸
-可获取可查询，可传入数值、字符串、函数
-getter和setter不对称 CSS box-sizing 设置为border-box 包含边框，context-box不包含边框
innerWith()和innerHeight 返回包含内边距宽度和高度
outerWith()和outerHeight 返回包含内边距和边框尺寸，传入true，包含外边距
scrollTop和scrollLeft，滚动条位置，不可传递函数
19.2.7获取和设置元素数据
data() 设置或获取元素相关联的数据，接受对象，名/值替换，不接受函数
removeData() 删除数据
19.3.1插入和替换元素
append() 在结尾添加
prepend() 在起始处添加
before() 在前面添加
after() 在后面添加
replaceWith() 替换
如果传入函数，第一参数为索引值，第二参数为当前内容HTML字符串形式
目标元素作为参数
appendTo()
prependTo()
insertAfter()
insertBefore()
replaceAll()
不接受函数参数，返回插入操作后新内容
document.createTextNode() 创建纯文本
19.3.2复制元素
clone() 得到副本，包括元素子孙节点
想要复制事件处理程序和与元素关联其他数据，传入true
19.3.3包装元素
wrap() 包装每一个选中的元素
wrapInner() 包装每一个选中元素的内容
wrapAll() 选中元素作为一组包装
19.3.4删除元素
empty() 删除选中子节点，不删除本身
remove() 删除选中节点，传入参数删除匹配元素，包括事件处理程序
detach() 删除元素，不移除事件处理程序
filter() 将元素从选中集中移除，不需要从文档中移除
unwrap() 移除每个选中元素的父元素
19.4 使用jQuery处理事件
blur() focusin() mousedown() mouseup()
change() focusout() mouseenter() resize()
click() keydown() mouseleave() scroll()
dbclick() keypress(0 mousemove() select()
error() keyup() mouseout() submit()
focus() load() mouseover() unload()
focus和blur不支持冒泡，focusin和focusout支持冒泡
mouseenter和mouseleave非冒泡
resize和unload只在window对象上触发，$(window)调用
scroll常用在$(window)和有滚动条元素上
error用于图片加载失败
hover(f,g) 给mouseenter(f)和mouseleave(g)注册事件
toggle() 绑定到单机事件，两个或多个处理程序
19.4.2jQuery事件处理程序
事件处理程序传入jQuery事件对象作为第一个参数，事件相关信息
trigger() 显示触发事件
返回false 取消冒泡
值储存在Event对象的result属性中
19.4.3jQuery事件对象
原生Event对象复制到jQuery Event对象上
altKey ctrlKey newValue screenX
attrChange currentTarget offsetX screenY
attrName detail offsetY shiftKey
bubbles eventPhase origianlTarget srcElement
button fromElement pageX target
cancelable keyCode pageY toElement
charCode layerX prevVlaue view
clientX layerY relatedNode wheelDelta
clientY metaKey relatedTarget which
Event对象还定义
preventDefault isDefaultPrevented()
stopPropagation isPropagationStopped
stopImmediatePropagation isImmediatePropagationStopped
metaKey 没有metaKey，会和ctrlKey一样，Mac中Command和meta一样
pageX,pageY 文档坐标
target,currentTarget,relatedTarget target其上发生事件的文档元素，currentTarget执行事件注册的元素，和this一样，过渡事件，mouseover事件中relatedTarget指移开的元素，可来自toElement,fromElement
timesStamp 事件发生事件，毫秒，Date.getTime()返回
which 事件发生事件中接下来的鼠标按钮和键盘按键，可来自charCode或keyCode
jQeury添加
data 额外的数据
handler 当前调用事件处理函数的引用
result 返回值
originalEvent 原生事件对象的引用
19.4.4事件处理程序的高级注册
$('p'),click(f);
$('p').bind('click',f); 事件类型字符串，处理函数
第二参数可传入任何值，设置为Event对象的data属性
$('a').hover(f)
$('a').bind('mouseenter mouseleave',f);
$('a').bind('mouseout.myMod.yourMod',f); //可添加命名空间
$('a').bind({mouseenter:f,mouseleave:g}); //第一参数可为对象
one()和bind()相同 但只调用一次
19.4.5注销事件处理程序
$('*').unbind() 注销事件
$('a').unbind('mouseover mouseout') 指明事件类型
//指定空间
$('a').unbind('mouseover.myMod mouseout.myMod')
$('a').unbind('.myMod');
$('a').unbind('click.ns1.ns2');
$('#mybutton').unbind('click',myClickHandler);//注销指定函数
$('a').unbind({mouseover:mouseverHanlder,mouseout:mouseoutHandler});
传入Event对象
unbind(ev)等价unbind(ev.type,ev.handler);
19.4.6触发事件
$('#my_form').submit(); //触发事件
事件触发时同步的
$('#my_form').trigger() 触发事件
$('button').trigger('click.ns1') //触发命名空间事件
$('button').trgger('click!') // 触发没有命名空间程序
可传入Event对象，jQuery事件对象，普通对象
可向trigger触发函数传入第二参数
jQuery.event.trigger() 全局触发事件
trigger() 在调用事件处理程序后，执行触发事件默认操作
triggerHandler() 不会冒泡，不会执行默认操作
19.4.7自定义事件
bind() 可自定义事件
trigger() 调用
$.event.trigger 全局触发器
19.4.8实时事件
bind() 不是实时绑定
判断冒泡是否匹配字符串
delegate()和undelegeta('a','mouseover',linkHandler) 实时绑定，用在document
live()和die()一样
$('a').live('mouseover',linkHandler);
19.5动画效果
fast 200ms
slow 600ms
默认 400ms
jQuery.fx.speeds['medium-fast']=300 添加映射关系添加新的时长名字
jQuery.fx.off 设置为true，禁用动画，时长为0ms
可设置回调函数，this为设置动画文档元素
jQuery动画默认是队列化的
可传入对象属性
{duration:'fast',
complete:function(){$(this).text('hello');}}
19.5.1简单动画
9个简单动画
-fadeIn()/fadeOut()/fadeTo() 改变opacity
-show()/hide()/toggle() 改变opacity，宽高为0
-slideDown()/slideUp()/slideToggle() 改变高度，display为none
19.5.2自定义动画
animate() 自定义动画
第一个参数，变化的CSS属性和目标值
第二个参数，duration、callback
1.动画属性对象
数值默认为像素，字符串可指定字符串，可使用相对值
属性对象中hide设置为0，调用hide
2.动画选项对象
step 每一步的回调函数
queue 是否需要队列化
缓动函数默认为swing，线性linear
jQuery.easing['squareroot']=Math.sqrt;
easing 缓动函数名
specialEasing 指定缓动函数
[目标值，缓动函数]
19.5.3动画的取消、延迟和队列
stop 停止动画 第一参数true，停止动画队列，默认false忽略
第二参数true，变化到最终值，默认false，保持当前
delay() 时长，队列名
queue() 添加新的函数，传入函数组，替代当前队列，无参数，返回队列
clearQueue() 清除队列
dequeue() 取消下一函数
19.6.1load()方法
URL、参数、回调函数
load() 传入URL，异步加载将内容传入元素
$('#temp').load('wheather_report.html #temperature');加载指定内容
jQuery选择器 加载选好的HTML
传入字符串自动追加GET请求，传入对象转化为字符串&POST请求
jQuery的Ajax状态码，回调函数的第二个参数是字符串
'success' 成功完成
'notmodified' 服务器返回HTTP304，和上次请求相同
'error' 错误
'timeout' 超市区间完成
'parsererror' 请求完成，无法解析
19.6.2Ajax工具函数
1.jQuery.getScript()
第一个参数是js文件URL，异步加载，全局作用域执行
第二个为回调函数
同源使用XMLHTTPRequest对象，第一个参数脚本内容，第二个success状态吗，第三个是XMLHttpRequest对象，返回XMLHttpRequest对象
跨域使用<script> 第一第三是undefined，返回值也是undefined
2.jQuery.getJSON()
将文本解析为JSON，使用jQuery.parseJSON
第一参数解析结果JSON，第二success，第三XMLHttpRequest
接受对象参数，为第二个，用？和&添加到URL后面
URL使用&分隔键值对，是‘application/x-www-form-urlencoded’MIME类型
serialize()方法，调用表单元素
jQuery.param() 将对象转化为字符串，可将数组转为字符串
传递true给第二参数，设置traditional为true阻止进一步序列化
contentType指定数据类型，将processData设置为false阻止传递对象给param
3.jQuery.get()和jQuery.post()
方法接受三个参数，必须的URL、可选字符串或对象、回调函数
回调函数接收三个参数，返回数据、success字符串、XMLHttpRequest对象
指定请求数据的类型，在传入回调函数钱处理
load() html类型
jQuery.getScript() script类型
jQuery.getJSON() json类型
jQuery.get和jQuey.post() 6种
-text 纯文本，不处理
-html 纯文本，load使用
-xml 使用XMLHttpRequest对象的responseXML属性代替responseText属性，返回Document对象
-script 认为是js文件，会当做脚本执行，使用<script>代替XMLHttpRequest对象，可跨域
-json 使用jQuery.parseJSON()解析，含有‘=？’会转换成jsonp
-jsonp 跨域请求，url中包含‘&jsonp=？’或‘&callback=？’，产生回调函数名
没包含检查响应中Content-Type头
19.6.3jQuery.ajax()函数
Ajax工具最后调用jQuery.ajax()
jQuery.ajaxSetup({
timeout:2000,//2秒后取消所有Ajax请求
cache:false//不缓存
])
1 通用选项
-type 请求方法，GET、POST、DELETE、PUSH，与数据类型无关，method
-url 获取的URL，GET时data会添加到URL后，JSONP请求cache为false时，jQuery可添加参数到URL中
-data GET中URL后，POST请求内容的数据，可是字符串或对象，通常字符串
-dataType 相应数据与其类型，处理数据方法，text/html/script/json/jsonp/xml
-contentType 指定请求的HTTP Cntent-Type，默认application/x-www-form-urlenconded，想发送纯文本或XML文档需要设置
-timeout 超时时间，毫秒。没有完成取消请求，发送error回调，
-cache 对于GET，false添加一个‘_=’加时间格式，禁用缓存
-ifModified 设置为true，为每个请求的URL记录Last-Modified和If-None-Match响应头的值，请求中为相同URL设置头部信息，传入succes回调的状态码是notmodified，默认不记录
-global 是否触发上面描述的Ajax事件，设置为false会禁用
-options 请求设置
-async boolean 请求为异步
2 回调
-context 指定上下文对象，就是this，指向选项对象
-beforeSend 发送到服务器前的回调函数，第一个参数是XMLHttpRequest对象，第二个是选项对象。有机会在XMLHttpRequest对象上自定义HTTP头部
-success 完成时调用的回调，第一个参数是服务器发送数据，第二个是jQuery状态码，第三个是XMLHttpRequest对象，xml返回Document对象
-error 不成功时回调，第一个是XMLHttpRequest对象，第二个是状态码，error错误，timeout超时，parseerror服务器响应时出错，xml或json对象不符合格式，第三个Error对象
-complete 完成时激活，第一个是XMLHttpRequest对象，第二个是状态码
3.不常用的选项和钩子
-async HTTP请求本身是异步的，false开启阻塞行为，
-dataFIlter 过滤或预处理服务器返回数据，第一个参数是原始数据，字符串或XML请求的Document对象，第二个是dataType选项值，在JSON解析和脚本执行之前，跨域不调用
-jsonp url或data包含‘jsonp=？’参数，会插入默认是callback，
-jsonpCallback ?替换包装函数名
-processData 第二参数转化为字符串，遵守表单标准，想将Document对象作为POST请求发送，设置为false
-scriptCharset 指定script和jsonp请求的charset属性值
-traditinal 1.4使用对象序列化方法，true回复到原来的方式
-username,password 指定用户名密码
-xhr 工厂函数，获得XMLHttpRequest对象，
19.6.4Ajax事件
回调 事件类型 处理程序注册方法
beforeSend ajaxSend ajaxSend()
success ajaxSuccess ajaxSuccess()
error ajaxError ajaxError()
complete ajaxComplete ajaxComplete()
ajaxStart ajaxStart()
ajaxStop ajaxStop()
可使用bind方法和第二列事件字符串注册Ajax事件，也可以使用第三列事件注册方法
event带有2个参数，第一个是XMLHttpRequest对象，第二个是选项对象
ajaxError事件第三个参数是Error对象
绑定context后在元素上触发
19.7工具函数
-jQuery.browser 客户端嗅探，IE有一个msie属性为true，Firefox有一个Mozilla属性为true，Safari和Chrome有一个webkit属性为true，Opera中opera为true，version为版本号
-jQuery.contains 第一个包含第二个返回true
-jQuery.each() each()遍历jQuery对象，函数遍历数组或对象属性，第一个参数为遍历的数组或对象，第二个参数是每个元素或属性上调用的函数，带有两个参数，序号和属性值。返回false停止遍历，返回第一个参数的值，for/in遍历可枚举属性，不包括继承属性，不跳过undefined
-jQuery.extend() 第二个及以后参数对象属性复制到第一个对象中，同名覆盖，忽略undefined和null，只传入一个参数，复制到jQuery对象中并返回，如果第一个为true进行深拷贝到第二个
-jQuery.globalEval() 全局上下文执行js代码字符串，<script>一样
-jQuery.grep() 类似Array对象的filter() 第一个参数数组，第二个判断函数，返回新数组，返回真值元素，第三个参数传入true，反转判断函数，返回false或假值
-jQuery.inArray() 类似Array对象的indexOf()方法，第一个是任意值，第二个是数组，返回在数组中第一次出现序号
-jQuery.isArray() 是原生数组返回true
-jQuery.isEmptyObject() 没有可枚举属性返回true
-jQuery.isFunction 是原生Function对象，返回true
-jQuery.makeArray() 类数组对象，复制到真数组，并返回，不是类数组对象，返回新数组和传入参数
-jQuery.map() 类似Array对象map()，第一个参数数组或类数组，第二个参数是映射函数，返回映射组成新数组，不返回null，返回数组元素添加到数组中
-jQuery.merge() 接受两个数组或类数组，将第二个参数元素添加到第一个上，返回第一个
-jQuery.parseJSON() 解析JSON格式字符串，使用标准JSON.parse()，没有序列化函数
-jQuery.proxy() 类似Function对象bind()方法，第一参数函数，第二个参数对象，返回新函数，作为第二个参数的对象方法调用，第一参数对象，第二参数属性名，属性值是一个函数
-jQuery.support() 类似jQuery.brower，可移植性的特性探测，值是对象，属性是布尔值，jQuery.support.boxModel，CSS标准context-box，属性为true，IE67怪异模型为false
-jQuery.trim() 字符串添加的trim()类似，接受字符串采纳数，返回开头结尾空白移除
19.8.1jQuery选择器
1.简单选择器
#id 匹配id元素
.class 匹配class属性
[attr] 匹配attr属性
[attr=val] 匹配attr属性为val元素
[attr!=val] 匹配attr属性不为val元素
[attr^=val] 匹配attr以val开头
[attr$=val] 匹配attr以val结尾
[attr*=val] 匹配attr含有val的元素
[attr~=val] 空格隔开时由val元素，'div.note'='div[class~=note]'
[attr|=val] 匹配attr以val开头其后没有其他字符，或是以连字符开头元素
:animated 动画中元素，由jQuery产生
:checked 匹配选中input元素
:contains(text) 匹配含有text的文本的元素
:disabled 匹配禁用元素
:empty 匹配没有子节点、文本内容的元素
:eq(n) 基于文档顺序、序列号从0开始选中列表中第n个元素
:even 匹配偶数序号的元素，从0开始
:odd 匹配奇数序号元素
:first 匹配列表第一个元素，和':eq(0)'相同
:first-child 匹配是父节点的第一个子元素
:gt(n) 匹配序号大于n的元素
:has(sel) 匹配拥有匹配内嵌选择器sel的子孙元素
:header 匹配头元素：<h1>
:hidden 匹配屏幕上不可见，offsetWidth和offsetHeight为0
:last 匹配选中列表最后一个元素
:last-child 匹配是其父节点最后一个子元素
:lt(n) 基于文档顺序，小于n
:not(sel) 匹配不内嵌选择器sel
:nth(n) 与eq(n)相同
:nth-child(n) 匹配元素是其父第n个元素，从1开始
:only-child 匹配其实父节点唯一节点的元素
:parent 匹配是父节点元素，与‘empty’相反
:input 匹配输入元素:<input>/<textarea>/<select>/<button>
:button 匹配<button tpye='button'>和<input type='button'>
:checkbox 匹配 <input type='checkbox'>，显示带有‘input:checkbox’跟高效
:password 匹配是<input type='password'>
:radio 匹配是<input type='radio'>
:file 匹配<input type='file'>元素
:image 匹配<input type='image'>元素，不匹配<img>
:selected 匹配选中<option>，使用‘:checked’选取的复选框和单选框
:reset 匹配是<input type='reset'>和<button type='reset'>
:submit 匹配<input ype='submit'>和<button type='submit'>
:text 匹配<input type='text'>
:visible 匹配所有可见元素
2.组合选择器
A B 从匹配选择器A元素子孙元素中，匹配选择器B的文档元素
A>B 从匹配A子元素中B
A+B 从匹配A下一个兄弟元素选中B
A~B 从匹配A元素后面元素中选取B
19.8.2选取方法
-slice() 和Array.slice()方法类似，前者接受开始和结束序号（负号从结尾开始）
-filter() 传递字符串返回jQuery对象；传递另一个对象，返回交集；传递判断函数，为每个元素调用函数，返回jQuery对象，this为当前值，参数为元素序号
-not() 和filter()一样，含义相反
-has() 选取包含子孙元素匹配选择器的选中元素
-add() 扩充选区，移除重复元素，按文档元素排序
1.将选中元素集用做上下文
-find() 当前选中元素子孙元素中寻找指定元素
-children() 返回每个选中元素的直接子元素
-contents() 返回所有子节点，包括文本节点，不接受选择器参数，包含<iframe>文档对象
-next()和prev() 返回上一个和下一个兄弟元素
-nextAll()和prevAll() 返回前面或后面的所有兄弟元素
-silbings() 返回每一个选中元素的兄弟元素
-nextUntill()和prevUntill() 每一个元素，接受一个选择器直到找到匹配该选择器兄弟位置
-parent() 返回选中元素的父节点
-parents() 每一个返回祖先元素直到
-parentsUntill() 每一个祖先元素，直到匹配元素
-closest() 返回匹配的祖先元素中最近的一个
2.恢复到之前的选中元素集
添加派生自的旧jQuery对象的内部引用，创建jQuery对象的链式表或栈
-end() 弹出栈
-pushStack() 手动定义选中元素集，原来元素压入栈中
-andSelf() 返回新的jQuery对象，包含之前所有选中元素
19.9jQuery的插件扩展
添加新功能的而模块成为插件（plug-in），在jQuery之后引入插件
jQuery.fn 是所有jQuery对象的原型对象
jQuery插件约定：
-不要依赖$标识符
(function($){
//插件代码
}(jQuery))
-返回自己的值，jQuery对象以便链式调用
-不要污染jQuery命名空间，使用插件名作为方法名前缀
-插件绑定事件处理程序，使用插件名命名空间
-使用data()方法与元素关联数据，将数据值放在单一对象中，插件名相同键值作为单一值存储
-jQuery.plugin.js 命名方式保存插件代码
jQuery.fx.speeds 添加动画时长名
jQuery.easing 添加属性添加新的缓动函数
jQuery.expr[':'] 添加属性添加新的伪类过滤器
自定义选择器（元素，整数序号-候选元素组位置，调用RegExp.exec()返回数组，候选元素组）
19.10jQuery UI类库
第14章 表单脚本
14.1表单基础知识
HTML
JavaScript HTMLFormElement类型
acceptCharset 服务器能处理的字符集 accept-charset
action URL action
elements 控件集合
enctype 编码类型 enctype
length 控件数量
method get post method
name name
reset() 重置
submit() 提交
target 窗口名称 target
14.1.1提交表单
Submit Form
触发submit事件
submit() 无需控件 不触发submit事件
14.1.2重置表单
type="reset"
触发reset事件
reset() 触发reset事件
14.1.3表单字段
elements 表单所有表单字段
同name 返回NodeList
1.共有的表单字段属性
disabled 是否禁用
form 当前字段表单 只读
name
readOnly 是否只读
tabIndex tab切换序号
type 类型
value 提交服务器的值
"select-one" 单选 "select-multiple" 多选
"submit" 自定义按钮
"button" 自定义非提交
"reset" 重置
"submit" 提交
2.共有的表单字段方法
focus() 不冒泡
blur() 不冒泡
tabIndex=-1 可设置focus() 方法
3.共有的表单字段事件
blur 失去焦点
change <textarea>失去焦点value变化，变化 focus 获得焦点 14.2文本框脚本
size 显示字符数
value 初始值
maxlength 最大字符数 <textarea> rows和cols特性 初始值在<textarea>之间</textarea>
value 不一定反应在DOM中
14.2.1选择文本
select() 选中所有文本，焦点在文本
1.选择（select）事件
选择文本触发select事件，select()可以触发
2.取得选择文本
selectionStart 和 selectionEnd
3.选择部分文本
setSelectionRange() 方法
同substring()
14.2.2过滤输入
1.屏蔽字符
2.操作剪贴板
剪贴板事件
beforecopy 复制前
copy 复制
beforecut 剪贴前
cut 建忒
beforepaste 粘贴前
paste
clipboardDate 剪贴板数据
getData() 参数格式
setData() 数据类型，文本
clearData()
14.2.3自动切换焦点
最大值后自动切换下一焦点
14.2.4HTML5约束验证API
1.必填字段
required属性
试用<textarea>
2.其他输入类型
3.数值范围
type类型
"number""range""datetime""datetime-local""date""month""week""time"
min 最小值
max 最大值
step 刻度
4.输入模式
pattern 正则表达式
<input pattern="\d+">
默认 ^$
5.检测有效性
checkValidity() 检测有效
validity
customError setCustomValidity()
patternMismatch pattern不匹配 true
rangeOverflow 大约max true
rangeUnderflow 小于min true
stepMisMatch 步长不合理 true
tooLoing 超过maxlength true
typeMismatch 不是type格式 true
valid 其他false true
valueMissing required 没值 true
6.禁用验证
form novalidate 不验证
input formnovalidate 不验证
14.3选择框脚本
<select><option>
HTMLSelectElement 提供属性方法
add(newOption,relOption)
multiple 是否多选 multiple
options HTMLCollection
remove(index)
selectedIndex 没有-1 多选保存第一个索引
size 可见行 size
选择框value决定规则
没有 空字符串
一个 value
一个 没有value 为文本
多个 第一个的值
<option> 由HTMLOptionElement 表示
index 索引
label 等于label
selected 是否选中
text 文本
value value
14.3.1选择选项
selectedIndex 选择的索引 只选择一个
selected=true 多选择
14.3.2添加选项
appendChild()
add(新选项，新选项后选项)
14.3.3移除选项
removeChild()
selectbox.remove(0)
options[0]=null
14.3.4移除和重排选项
appendChild() 转移
insertBefore()
14.4表单序列化
表单字段名称和值URL编码，使用&分割
不发送禁用
只发送勾选复选框和单选按钮
不发送reset 和 button
多选框每个选中的值都是条目
type image 提交按钮的情况下，提交按钮
<select> value
14.5富文本编辑
<iframe>
designMode off默认 on
第6章 面向对象的程序设计
6.1.1属性类型
1.数据属性 数据值的位置
[[Configurable]] 能否delete删除，默认false
[[Enumerable]] 能否for-in循环，默认false
[[Writable]] 能否修改，默认false
[[Value]] 属性值，默认undefined
修改属性默认特性
Object.defineProperty(对象，属性名，描述符)
默认false
2.访问器属性
[[Configurable]] 能否delete删除，默认false
[[Enumerable]] 能否for-in循环，默认false
[[Get]] 读取时调用函数，默认undefined
[[Set]] 写入时调用函数，默认undefined
__ 只能通过对象方法访问
6.1.2定义多个属性
Object.defineProperties(对象，要添加或修改属性)
6.1.3读取属性的特性
Object.getOwnPropertyDescriptor(对象，属性) 返回对象
用于实例属性，原型属性在原型上获得
6.2创建对象
6.2.1工厂模型
无法识别对象类型
6.2.2构造函数模型
new 操作符
1.构造对象
2.函数作用域赋给新对象
3.添加属性
4.返回对象
6.2.3原型模式
protoytype 原型，指针指向对象，用于所有实例共享的属性和方法
isPrototypeOf()
getPrototypeOf() 获取原型
hasOwnProperty() 监测属性是否在实例中
2.原型与in操作符
in 访问给定属性返回true，无论在实例中还是原型中
for-in 对象访问，可枚举属性，既包括在实例，也包括原型
Object.keys() 接受对象采纳数，返回可枚举属性字符串数组
Object.getOwnPropertyNames() 所有实例属性，无论是否可枚举
3. 更简单的原型语法
prototype={
constructor:function,
}
Object.defineProperty(prototype,'constructor',{
enumerable:false,
value:function
}
重新指向函数
4.原型的动态性
对象字面量重新prototype 切断原型和实例对象联系
5.原生对象的原型
6.2.4组合使用构造函数模式和原型模式
构造函数模式定义实例属性
原型模式定义方法和共享属性
6.2.5动态原型模型
判断某个应存在方法是否有效，初始化原型
6.2.6寄生构造函数模式
寄生 parasitic
和构造函数和构造函数原型无关，不建议使用
6.2.7稳妥构造函数模型
和构造函数和构造函数原型无关
6.3继承
instanceof 测试实例与原形链中出现过的构造函数
isPrototypeOf() 原型链中出现过的原型都是派生实例的原型
6.3.1原形链
原型对象等于另一个类型的实例
问题：包括引用类型的原型属性会被所有实例共享
6.3.2借用构造函数
子类型构造函数的内部调用超类型构造函数
问题：超类方法，子类不可见
6.3.3组合继承
原形链实现原型属性和方法继承
构造函数实行实例属性继承
6.3.4原型式继承
es5 Object.create(新对象原型对象，新对象额外属性对象)
funtion object(o){
function F(){}
F.prototype=o;
return new F();
}
第二参数与Object.defineProperties() 第二参数相同
每个属性通过描述符定义，覆盖原型对象上属性
引用类型值共享
6.3.5寄生式继承
function inheritPrototype(subType,superType){
var prototype=object(superType.prototype);
protoype.constuctor=subType;
subType.prototype=prototype;
}
第18章 脚本化HTTP
HTTP,HyperText Transfer Protocol
Ajax,Asynchronous JavaScript and XML
Comet 从服务器向客户端推数据，Ajax 客户端从服务端拉数据
18.1使用XMLHttpRequest
var request=new XMLHttpRequest();
HTTP请求由4部分组成
-HTTP请求方法或‘动作’
-正在请求的URL
-可选请求头集合，身份验证
-可选请求主体
服务器返回HTTP响应包含3部分
-数字和文字组成状态码，显示请求成功和失败
-响应头集合
-响应主体
浏览器级API 考虑cookie、重定向、缓存和代理
18.1.1指定请求
request.open('GET','data.csv') //URL内容
GET 常规请求，对服务器没有副作用，相应可缓存
POST HTML表单，存储到服务器数据库上，不缓存
DELETE/HEAD/OPTIONS/PUT 也支持
request.setRequestHeader('Content-Type','text/plain')
请求受密码保护的URL，用户名和密码作为第4个和第5个参数
request.send(null) GET没有请求主体
18.1.2取得相应
-status和statusText以数字和文本形式返回状态码
-getResponseHeader()和getAllResposeHeaders()检查头，过滤cookie头
-响应主体从responseText属性得到文本形式，responseXML属性得到Document形式
监听XMLHttpResquest上readystatechange事件
XMLHttpRequest的readyState值
UNSENT 0 open()未调用
OPENED 1 open()调用
HEADERS_RECEIVED 2 接收到头信息
LOADING 3 接收到响应主体
DONE 4 响应完成
//获取HTTP响应的onreadystatechange
function getText(url,callback){
var request=new XMLHttpRequest();
request.open('GET',rul);
request.onreadystatechange=function(){
if(request.readyState===4&&request.statues===200){
var type=request.getResponseHeader('Content-Type');
if(type.match(/^text/))
callback(request.resposeText);
}
};
request.send(null);
}
1.同步响应
open第三个参数false
2.相应解码
JSON.parse() 解析为json
xml 返回 request.responseXML
json 返回 JSON.parse(request.responseText)
text 返回 request.reponseText
//不把响应作为XML文档处理
overrideMimeType('text/plain;charset=utf-8')
18.1.3编码请求主体
1.表单编码的请求
正式MIME类型
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
2.JSON编码的请求
request.setRequestHeader('Content-Type','application/json');
reuqest.send(JSON.stringify(data));
3.XML编码的请求
document.implementation.createDocument('','query',null);
pizza
4.上传文件
5.multipart/form-data
FormData()
formdata.apped(name,value)
18.1.4HTTP进度事件
send() 触发单个loadstart事件
加载服务器响应时，发生progress事件，间隔50毫秒
完成触发load事件
超时触发timeout
请求终止触发abort
太多重定向网络错误阻止请求完成，触发error事件
与progress事件相关联的3个属性
loaded 传输的字节数值
total 自'Content-Length'头传输数据整体长度
lengthComputable true内容长度知道
reuqest.onprogress=function(e){
if(e.lengthComputable)
progress.innnerHTML=Math.round(100*e.loaded/e.total)+'% Complete';
}
上传进度事件
upload属性是个对象，定义addEventListener()方法和整个progress事件集合
仅触发新的事件类型，没有onreadystatechange
18.1.6跨域HTTP请求
withCredentials 测试是否支持CORS（Corss-Origin Resource Sharing，跨域资源共享）
supportsCORS 是否支持CORS
18.2借助<script>发送HTTP请求：JSONP
设置<script> src属性
追加参数?json 或&json 返回JSONP
18.3基于服务器端推送事件的Comet技术
EventSource对象
var ticker=new EventSource('stockprices.php');
ticker.ommessage=function(e){
var type=e.type;
var data=e.data;
}
onmessage接受一个给定服务器所有事件
window.onload=function(){
var nick=prompt('Enter your nickname');
var input=document.getElementById('input');
input.focus();
//EventSource注册新消息通知
var chat=new EventSource('/chat');
chat.ommessage=function(event){
var msg=event.data;
var node=document.createTextNode(msg);
var div=document.createElement('div');
div.appendChild(node);
document.body.insertBefore(div,input);
input.scrollIntoView();
}
//XMLHttpRequest发送给服务器
input.onchange=function(){
var msg=nick+': '+input.value;
var xhr=new XMLHttpRequest();
xhr.open('POST','/chat');
xhr.setRequestHeader('Content-Type','text/plain;charset=utf-8');
xhr.send(msg);
input.value='';
}
}
//NodeJS平台，新消息POST发送/chat，GET获取文本/
var http=requrie('http');//NodeJS http API
var clientui=requrie('fs').readFileSync('chatclient.html');
var emlation=requrie('fs').readFileSync('EventSourceEmulation.js');
//ServerResponse对象数组，接受发送事件
var clinets=[];
//每20秒发送一条注释到客户端
setInterval(function(){
clinets.forEach(function(client){
client.write(':ping?n');
});
},20000);
//新服务器
var server=new http.Server();
//服务器获得请求，运行回调函数
server.on('request',function(request,response){
//解析URL
var url=requrie('url').parse(request.url);
//发送到/，发送客户端聊天室UI
if(url.pathname==='/'){
response.writeHead(200,{'Content-Type:':'text/html'});
response.write('<script>'+emulation+'</script>');
response.write(clientui);
response.end();
return;
}
///chat之外地址，返回404
else if(url.pathname!=='/chat'){
response.writeHead(404);
response.end;
return;
}
//post,发送新消息
if(request.method==='POST'){
request.setEncoding('utf-8');
var body='';
//获取数据添加到请求主体
request.on('data',function(chunk){body+=chunk});
//请求完成发送空响应到监听客户端
request.on('end',function(){
response.writeHead(200);
response.end();
message='data: '+body.replace('\n','\ndata: ')+'\r\n\r\n';
clinets.forEach(function(client){client.write(message);});
});
}else{//不是POST，客户端请求信息
response.writeHead(200,{'Content-Type':'text/event-stream'});
response.write('data:Connected\n\n');
//关闭删除链接
request.connection.on('end',function(){
clinets.splice(clinets.indexof(response),1);
response.end();
});
//记下响应
clinets.push(response);
}
})；
server.listen(8000);
第21章 多媒体和编程
21.1脚本化图片
<script>(new Image()).src='1';</script>
<img src='0' mouseover='1' mouseout='0'>
优雅的图片翻转实现方式
<img src='0' data-rollover='1'>
onLoad(function(){
for(var i=0;i<document.images.length;i++){
var img=document.images[i];
var rollover=img.getAttribute('data-rollover');
if(!rollover) continue;
(new Image()).src=rollover;
img.setAttribute('data-rollout',img.src);
img.onmouseover=function(){
this.src=this.getAttribute('data-rollover');
};
img.onmouseout=function(){
this.src=this.getAttribute('data-rollout')
};
}
});
<video id='news' width=640 height=480 controls preload>
<!-- Firefox和Chrome支持webm格式-->
<sourse src='news.webm' type='video/webm;codecs="vp8,vorbis"'>
<!-- IE和Safari支持H.264格式-->
<source src="news.mp4" type='video/mp4;codecs="avc1.42E01E,mp41.40.2"'>
<!-- Flash作为后备方案-->
<object width=640 height=480 type="application/x-shockwave-flash" data='flash_movie_player.swf'>
<!-- 配置flash播放器-->
<div>video element not supported and flash plugin not insralled.</div>
</object>
</video>
controls显示播放控件
只有Audio() 没有 Video()
21.2.1 类型选择和加载
var a=new Audio();
if(a.canPlayType('audio/wav')){
a.src='soundeffect.wav'
a.play();
}
canPlayType() 判断媒体MIME类型，是否能播放，不能空字符串，可以'maybe''probaly'
加载少量内容，preload设置'auto'，自动加载
src直接加载播放
<source>不直接播放，显示调用load()方法
21.2.2控制媒体播放
play()和pause()控制开始暂停
currentTime 定点播放
initialTime和duration 确定currentTime有效取值范围
volume 播放音量，介于0-1
muted true静音
playbackRate 播放速度，默认defaultPlaybackRate
controls 显示控件
muted和currentTime 可查询
controls 显示播放控件，true显示
loop 是否循环播放，true循环
preload 是否需要预加载，none不需要，metadata默认加载比特率、帧大小
autoplay 缓存后自动播放
21.2.3查询媒体状态
paused true暂停
seeking true正在跳转新的播放点
ended true播放器播放完停下来
duration 媒体的时长，单位秒，未载入NaN，internet广播无限时长返回Infinity
initialTime 开始时间，单位秒，固定时长媒体剪辑0，流媒体，缓存最早时间和回退时间，currentTIme不小于initialTime
played 已经播放时间段
buffered 当前已经缓冲的时间段
seekable 需要跳到的时间段
played/buffered/seekable都是TimeRanges对象，有length属性以及start()和end()方法
readyState 加载多少媒体内容，
-HAVE_NOTTHING 0 没有加载媒体内容或元数据
-HAVE_METADATA 1 元数据加载，内容没有加载，可获得时长或维度
-HAVE_CURRENT_DATA 2 当前帧数据加载完成，没有加载足够内容播放，通常在文件最后
-HAVA_FUTURE_DATA 3 已经加载可以播放
-HAVE_ENOUGH_DATA 4 所有已经加载
NetworkState 是否使用网络
-NETWORK_EMPTY 0 媒体元素没有使用网络
-NETWORK_IDLE 1 没有通过网络加载内容
-NETWORK_LOADING 2 通过网络加载
-NETWORK_NO_SOURCE 3 无法获得媒体源
error 没有错误null，有的话错误对象，code描述错误数值
MEDIA_ERR_ABORTED 1用户要求停止加载
MEDIA_ERR_NETWORK 2 网络错误
MEDIA_ERR_DECODE 3 编码错误
MEDIA_ERR_SRC_NOT_SUPPORTED src文件不支持
21.2.4媒体相关事件
先后顺序22个媒体相关事件，通过addEventListener()注册函数
loadstart 开始请求媒体数据内容，networkState为NETWORK_LOADING
progress 通过网络加载媒体内容，networkState为NETWORK_LOADING，每秒2-8次
loadedmetadata 加载完成，时长和维度数据获取，readyState变为HAVE_METADATA
loadeddata 当前播放媒体内容首次加载完毕，readyState变为HAVE_CURRENT_DATA
canplay 已加载开始播放，还需更多数据，readyState属性为HAVE_FUTURE_DATA
canplaythrough 全部加载完毕，readyState属性为HAVE_ENOUGH_DATA
suspend 已经缓存大量数据，暂时停止，networkState为NETWORK_IDLE
stalled 尝试加载，但无法获得数据，networkState为NETWORK_LOADING
play play()方法或设置想用autoplay，加载足够多触发palying，否则，紧接着触发waiting
waiting 未缓存够数据，未能开始或播放停止，足够多触发playing
playing 开始播放文件
timeupdate currentTime改变，每秒4-60次
pause 调用pause()暂停播放
seeking 调制未缓冲时间点，停止播放，seeking属性true
seeked seeking为false
ended 播放完毕，停止播放
durationchange duration改变
volumechange volume或muted改变
ratechange playbackRate或defaultPlaybackRate改变
abort 用户要求停止加载，error.code为MEDIA_ERR_ABORTED
error 网络错误阻止加载，error.code为MEDIA_ERR_ABORTED
emptied 发生错误或中止，networkState为NETWORK_EMPTY
21.3SVG:可伸缩的矢量图形
Scalable Vector Graphics
SVG是描述图形的XML语法，必要路径的一种精确、分辨率无关的描述
21.4中的图形
绘制上下文对象，调用画布getContext()方法，创建CanvasRenderingContext2D对象
var canvas=document.getElementById('canvas');
var c=canvas.getContext('2d');
21.4.1绘制线段和填充多边形
c.beginPath() 开始新路径
c.moveTo() 开始定义一条新的子路径
c.lineTo() 连接路径
c.fill() 填充
c.stroke() 绘制线段
c.closePath() 连接起点和终点
非零绕数原则，从中心往外，顺时针加1，逆时针减1
var canvas=document.getElementById('canvas');
var c=canvas.getContext('2d');
//绘制多边形
function polygon(c,n,x,y,r,angle,conterclockwise){
angle=angle||0;
conterclockwise=conterclockwise||false;
c.moveTo(x+rMath.sin(angle),y-rMath.cos(angle));
var delta=2Math.PI/n;
for(var i=1;i<n;i++){
angle+=conterclockwise?-delta:delta;
c.lineTo(x+rMath.sin(angle),y-r*Math.cos(angle));
}
c.closePath();
}
c.beginPath();
polygon(c,3,50,70,50);
polygon(c,4,50,60,50,Math.PI/4);
polygon(c,5,50,55,50);
polygon(c,6,50,53,50,Math.PI/6);
polygon(c,4,50,53,20,Math.PI/4,true);
c.fillStyle='#cfc';
c.strokeStyle='#000';
c.lineWidth=5;
c.fill();
c.stroke();
21.4.2图形属性
画布API在CanvasRenderingContext2D对象定义15个图形属性
fillStyle 填充颜色、渐变或图案等样式
font 文本CSS字体
globalAlpha 透明度
globalCompositeOperation 合并新的像素点和下面的像素点
linceCap 线段末端
lineJoin 顶点
lineWidth 外框宽度
miterLimit 紧急斜街顶点的最大长度
textAlign 水平对齐方式
textBaseline 垂直对齐方式
shadowBlur 阴影模糊成都
shadowColor 阴影颜色
shadowOffsetx 阴影水平偏移量
shadowOffsety 阴影垂直偏移量
strokeStyle 线段颜色、渐变或图案样式
save() 图形状态压入保存栈
restore() 弹出最近保存
21.4.3画布的尺寸和坐标
21.4.4坐标系变换
setTransform() 设置变换矩阵，对默认坐标系变换
translate() 坐标上下左右移动
rotate() 顺时针旋转
scale() x或y轴延长或缩短
21.4.5绘制和填充曲线
arc() 弧线，6个参数，圆心xy坐标，半径，起始和结束的角度，方向
arcTo() 直线和圆弧
bezierCurveTo() 三次贝塞尔曲线，两个控制点
quadraticCurveTo() 二次贝塞尔曲线
21.4.6矩形
fillRect()使用fillStyle填充指定矩形
strokeRect()使用当前strokeStyle勾勒边框
clearRect()忽略填充样式
rect() 定义路径
21.4.7颜色、透明度、渐变以及图案
允许16进制rgb，rgb，rgba，hsla（色调，饱和度，亮度）颜色空间
globalAlpha全部透明1不透明，0透明
createPattern() 第一个参数指定图片，第二个参数repeat，repeat-x，repeat-y，no-repeat
createLinearGradient() 渐变线条
createRadialGradient() 渐变圆
addColorStop() 定义渐变色，第一个0到1数字，第二个css颜色值
21.4.8线段绘制相关的属性
lineCap() 线末端butt直接结束，square延长一般长度，round半圆
lineJoin() 默认miter外侧到汇合，round圆润，bevel切除顶点
miterLimit 延长上限
21.4.9文本
fillText() 使用fillStyle指定颜色
strokeText() 每个自行外边绘制轮廓，第一参数文本内容，x，y坐标为第二第三参数，第四个参数文本最大宽度
font 字体
textAlign start默认/left/center/right/end参照x轴水平对齐方式
textBaseLine alphabetic默认拉丁语/ideographic中文表意字/hanging印度语/top/midddle/bottom参照y轴对齐方式
measureText() 测量文本宽度，返回TextMetrics对象
21.4.10裁剪
clip() 裁剪区域
21.4.11阴影
shadowColor 阴影颜色，默认完全透明黑色
shadowOffsetX和shadowOffsetY 定义xy轴偏移量
shadowBlur 边缘模糊度
21.4.12图片
drawImage()
第一个参数原图片，
第11章 DOM扩展
11.1选择符API
11.1.1querySelector()方法
返回第一个匹配元素，没有返回null
11.1.2querySelectorAll()方法
返回所有匹配元素 NodeList实例
11.1.3matchesSelector()方法
匹配返回true
11.2元素遍历
childElementCount 子元素个数，不包含文本和注释
firstElementChild 第一个子元素
lastElementChild 最后一个子元素
previousElementSibling 前一个同辈元素
nextElementSibling 后一个同辈元素
11.3HTML5
11.3.1与类相关的补充
1.getElementsByClassName()
className 表示类名
可通过Document或HTML元素调用
2.classList 属性
className属性
新集合类型DOMTokenList实例
add(value) 添加字符串，存在不添加
contains(value) 存在true
remove(value) 删除
toggle(value) 存在删除，不存在添加
11.3.2焦点管理
document.activeElement 获得焦点元素
focus() 方法
加载完成默认 document.body
加载期间 null
document.hasFocus() 文档是否获得焦点
11.3.3HTMLDocument的变化
1.readyState属性
document.loading 加载
complete 完成
2.兼容模式
document.compatMode
CSS1Compat 标准模式
BackCompat 混杂模式
3.head属性
11.3.4字符集属性
document.charset 默认'UTF-16'
document.defaultCharset
11.3.5自定义数据属性
data-
dataset DOMStringMap 实例 名值对儿的映射
11.3.6插入标记
1.innerHTML属性
所有子节点，包括元素、注释和文本节点
插入<script>不执行
之前加入 有作用域的元素
<style> 可实现效果
插入前做可靠处理
2.outerHTML 属性
包含调用元素
3.insetAdjacentHTML() 方法
插入位置和 文本
'beforebegin' 当前元素前同辈
'afterbegin' 当前元素之下 第一个前插入
'beforeend' 当前之下 最后一个后插入
'afterend' 当前之后插入同辈
4.内存与性能问题
删除时间处理程序和JavaScript 对象属性
innerHTML 或 outerHTML C++编写解析器
11.3.7scrollIntoView() 方法
true 没参数 调用元素与视口顶部平齐
false 全部出现
某个元素设置焦点 可显示
11.4专有扩展
11.4.1文档模式
HTTP头部X-UA-Compatible
11.4.2children属性
第12章 DOM2和DOM3
12.1DOM变化
12.1.1针对XML命名空间的变化
<html xmlns='http://www.w3.org/1999/xhtml'>
1.Node类型变化
localName 不带命名空间
namespaceURL 命名空间URL
prefix 前缀
12.2.1访问元素的样式
style对象是CSSStyleDclaration实例
不包括外部样式和嵌入式样式
短划线通过驼峰式访问
cssFloat
改变同时外观更新
1.DOM样式属性和方法
cssText style中CSS代码
length CSS属性数量
parentRule
getPropertyCSSValue(propertyName) CSSValue包含cssText cssValueType
getPropertyPriority(propertyName) !improtant 返回true
getPropertyValue(PropertyName) 属性字符串值
Item(index) 给定位置名称
removeProperty(propertyName) 删除
setProperty(propertyName,value,priority)
cssValueType 0继承 1基本 2列表 3自定义
2.计算的样式
document.defaultView
getComputedStyle(元素，伪元素字符串) 方法
12.2.2操作样式表
CSSStyleSheet 样式表 只读
disabled 是否被禁用
href URL 否则null
media 支持媒体集合
ownerNode 拥有指针
parentStyleSheet 导入指针
title owner title
type type/css
cssRules 样式规则集合
ownerRule 导入规则
deleteRule(index) 删除规则
insetRule(rule,index) 插入
document.styleSheets 所有样式
通过
styleSheet
1.CSS规则
cssText 返回文本
parentRule 导入规则
parentStyleSheet 当前规则样式表
selectorText 当前规则选择符
style CSSStyleDclaration 对象
type 规则常量
2.创建规则
insetRule(文本，索引) 最多4095条
3.删除规则
deleteRule(索引)
12.2.3元素大小
1.偏移量
offsetHeight 垂直上空间，元素高度，可见水平滚动条高度，上边框和下边框高度
offsetWeight 水平空间，宽度，可见垂直滚动条，左右边框
offsetLeft 元素左边框至包含元素左边框
offsetTop 元素上边框至包含元素上边框
offsetParent 包含元素引用
只读，动态的
2.客户区大小
clientWidth 内容，左右内边距
clientHeight 内容，上下内边距
3.滚动大小
scrollHeight 没有滚动条，总高度
scrollWidth 总宽度
scrollLeft 隐藏左侧
scrollTop 隐藏上侧
4.确定元素大小
getBoundingClientRect() 矩形对象
left/top/right/bottom
12.3遍历
12.3.1NodeIterator
document.createNodeIterator() 4个参数
root 起始节点
whatToShow 哪些节点
filter NodeFilter 接受或拒接函数
entityReferenceExpansion 布尔值 扩展实体引用
NodeFilter.SHOW_ALL 所有类型
NodeFilter.SHOW_ELEMTN 元素节点
NodeFilter.SHOW_ATTRIBUTE 特性节点
NodeFilter.SHOW_TEXT 文本
NodeFilter.SHOW_CDATA_SECTION CDATA
NodeFilter.SHOW_ENTITY_REFERENCE 实体引用，pass
NodeFilter.SHOW_ENTITY 实体节点，pass
NodeFilter.SHOW_PROCESSING_INSTRUCTION 处理指令节点，pass
NodeFilter.SHOW_COMMENT 注释
NodeFilter.SHOW_DUCUMENT 文档
NodeFilter.SHOW_DOCUMENT_TYPE 文档类型
NodeFilter.SHOW_DOCUMENT_FRAGMENT 文档片段，pass
NodeFilter.SHOW_NOTATION 符号节点，pass
filter 制定自定义NodeFilter对象 包含caccpetNode()方法
返回 NodeFilter.FILTER_ACCEPT
不返回 NodeFilter.FILTER_SKIP
nextNode()
previousNode()
12.3.2TreeWalker
parentNode() 父节点
firstChild() 第一个
lastChild() 最后一个
nextSibling()下一个同辈
PreviousSibing() 上一个同辈
document.createTreeWalker()
根节点 类型 过滤函数 是否扩展实体引用
NodeFilter.FILTER_REJECT 跳过子树
currentNode 上一次遍历节点
12.4范围
document.createRange()
startContainer 开始节点父节点
startOffset 偏移量，跳过字符数量
endContainer 结束节点父节点
endOffset 重点偏移量
commonAncestorContainer 共同祖先最深的
1.用DOM范围实现简单选择
selectNode() 整个节点，子节点
selectNodeContents() 子节点
setStartBefore(refNode) 起点在refNode之前
setStartAfter(refNode) 起点在refNode之后
setEndBefore(refNode) 终点在refNode之前
setEndAfter(refNode) 重点在refNode之后
2.用DOM范围实现复杂选择
setStart() 和setEnd() 2参数 参照节点和偏移量
3.操作DOM范围中内容
范围在文档片段中 自动补充标签
deleteContents() 删除范围内容
extractContents() 删除返回文档片段
cloneContents() 返回文档片段副本
4.插入DOM范围中的内容
insertNode() 插入节点 范围开始的位置
surrondContents()
5.折叠DOM范围
collapse() 折叠 ture起始 false终点
6.比较DOM范围
compareBoundaryPoints() 常量 范围
Range.START_TO_START(0) 第一个起点和第二个起点
Range.START_TO_END(1) 第一个起点和第二个终点
Range.END_TO_END(2)
Range.END_TO_START(3)
返回值
第一个在第二个前 -1
相等0
第一个在第二个后 1
7.复制DOM范围
cloneRange()
8.清理DOM范围
detach() 清理垃圾
第8章 函数
8.1函数定义
函数名称作为函数内部局部变量
函数命名 动词或动词前缀词组
return导致函数停止
没有return 返回undefined
声明定义的函数不能出现在循环、判断或try/cache/finally和with中
函数定义表达式可以出现在js代码任何地方
8.2.1函数调用
//判断是否为严格模式 this为undefined
var strct=(function() {return !this;}());
8.2.2方法调用
嵌套函数作为方法调用，this指向调用对象
签到函数作为函数调用，this为全局对象或undefined
8.2.3构造函数调用
构造函数创建新空对象
这个对象集成自构造函数prototype属性
构造函数使用this引用新对象
new构成构造函数调用 可省略括号
创建新空对象，继承构造函数的prototype
8.3.1可选形参
实参少于形参
/optional/可选的
a=a||[];
8.3.2可变长的实参列表：实参对象
实参多于形参
arguments指向实参引用
Number.NEGETIVE_INFINITY=-infinity
实参对象数组是形参对应形参的别名
实参对象属性：
callee是正在执行的函数
caller是正在执行函数的函数
8.4作为值的函数
函数为一种特殊的对象
8.5作为命名空间的函数
匿名函数并调用
(function(){
//模块代码
})()
8.7.1length属性
arguments.length实参个数
arguments.callee.length形参个数
8.7.3call()方法和apply()方法
call()和apply()第一个实参是函数母对象 用this引用
f.call(o)
f.apply(o)
等同
o.m=f;
o.m();
delete o.m;
8.7.4bind()方法
传入实参绑定到this
ECMAScript3版本Function.bind()方法
if(!Function.prototype.bind){
Function.prototype.bind=function(o){
var self=this,boundArgs=arguments;
return funciton(){
var args=[],i;
for(i=1;i<boundArgs.length;i++) args.push(boundArgs[i]);
for(i=0;i<arguments.length;i++) args.push(arguments[i]);
return self.apply(o,args);
};
};
}
bind用作构造函数 instanceof运算符无两样
8.7.6Function()构造函数
传入任意数量字符串实参
Function()构造函数动态创建函数 在顶层函数执行
8.8.3不完全函数
function array(a,n){
return Array.prototype.slice.call(a,n||0);
}
function partialLeft(f){
var args=arguments;
return function(){
var a=array(args,1);
a=a.concat(array(arguments));
return f.apply(this,a);
}
}
function partialRight(f){
var args=arguments;
return function(){
var a=array(arguments);;
a=a.concat(array(args,1));
return f.apply(this,a);
}
}
function partial(f){
var args=arguments;
return function(){
var a=array(args,1);
var i=0,j=0;
for(;i<a.length;i++){
if(a[i]===undefined) a[i]=arguments[j++];
}
a=a.concat(array(arguments,j));
return f.apply(this,a);
}
}
var f=function(x,y,z){return x*(y-z);};
console.log(partialRight(f,2)(3,4));
console.log(partialLeft(f,2)(3,4));
console.log(partial(f,undefined,2)(3,4));
8.8.4记忆
function memorize(f){
var cache={};
return function(){
var key=arguments.length+Array.prototype.join.call(arguments,',');
if(key in cache) return cache[key];
else return cache[key]=f.apply(this,arguments);
}
}
function gcd(a,b){
var t;
if(a<b) t=b,b=a,a=t;
while(b!=0) t=b,b=a%b,a=t;
return a;
}
//var gcdmemo=memorize(gcd);
//console.log(gcdmemo(85,187));
var factorial=memorize(function(n){
return (n<=1)?1:n*factorial(n-1);
});
console.log(factorial(5));
第13章 web浏览器中的javascript
13.1客户端JavaScript
Window对象是客户端JavaScript特性和API的主要接入点
每个Element对象有style和className属性
13.2在HTML里嵌入JavaScript
嵌入JavaScript4种方法
-放置在<script></script>之间
-放置在<script>标签src指定外部文件
-HTML事件处理程序中，如onclick和onmouseover
-URL里，使用‘javascript：’协议
13.2.1<script>元素
如果js包含<&会被解释为XML
13.2.2外部文件中的脚本
src属性使js文件内容替换到<script></script>标签内
XHTML中可使用简短的<script/>
js库开发中用
13.2.3脚本类型
type制定MIME类型，默认text/javascript
13.2.5URL中的JavaScript
可在的href属性、
制定URL内容为任意字符串
alert()返回undefined
void操作符强制函数调用或给表达式赋予undefined
JavaScript Evaluator
13.3JavaScript程序的执行
第一阶段：载入文档内容，按顺序执行
第二阶段：事件驱动，响应用户输入、网络活动、运行时间或错误
13.3.1同步、异步或延迟的脚本
HTML解析器遇到<script>元素时，默认先执行脚本，后恢复文档的解析和渲染
defer属性延迟脚本执行（按顺序执行），直到文档载入和解析完成后操作
async属性尽快执行脚本（无序执行），不用在下载脚本时阻塞文档解析 <script defer src=""></script>
13.3.2事件驱动的JavaScript
异步处理
事件处理程序的属性名字以“on”开始，后面跟着事件名字
.addEventListener("name",function(){},false);
.attachEvent()
回到函数也是异步处理
.setTimeout()和.setInterval()
当文档载入完成时调用一个函数
function onLoad(f){
if(onLoad.loaded)
window.setTimeout(f,0);//放入异步队列，并尽快执行
else if(window.addEventListener)
window.addEventListener("load",f,false);
else if(window.attachEvent)
window.attachEvent("onload",f);
}
onLoad.loaded=false;
onLoad(function(){onLoad.loaded=true;});
13.3.4客户端JavaScript时间线
1、创建Document对象，解析HTML元素和文本内容后添加Element对象和Text节点到文档。document.readystate="loading"
2、解析器没有遇到async和defer属性，把元素添加到文档，脚本下载和执行时解析器会暂停，脚本可以用document.write()把文档插入到输入流中。同步脚本可定义函数和注册时间处理程序，可看到<script>元素和之前内容。
3、遇到async时下载脚本后尽快执行，异步脚本禁止使用document.write()。
4、文档解析完document.readystate="interactive"
5、defer脚本按文档中出现的顺序执行。不可使用document.write()
6、Document对象触发DOMContentLoaded时间，从同步脚本变异步事件
7、文档解析完成，等待图片载入。内容载入完成，异步脚本完成载入和执行，document.readyState="complete"，触发Window对象上的load时间
8、异步调用响应用户输入事件、网络事件、计算器过期
document.compatMode属性 CSS1Compat标准模式 BackCompat怪异模式
13.4.6Internet Explorer里的条件注释
条件注释
/@cc_on
@if(@_jscript)
//在js注释中但在IE中执行
@else/
//IE外浏览器执行
/@EnD
@/
13.5可访问性
13.6安全性
13.6.1JavaScript不能做什么
客户端JavaScript没有权限写入或删除客户计算机上任意文件或列出任意目录
-响应鼠标单击可以打开一个新的浏览器窗口
-可关闭自己打开的浏览器窗口，不允许不经过允许关闭其他窗口
-HTML FileUpload元素的value属性只读
-不能读取不同服务器载入文档内容（同源策略）
13.6.2同源策略
脚本只能读取和所属文档来源相同的窗口和文档属性
文档的来源包括协议、主机，以及载入文档的URL端口
指脚本所嵌入的文档的来源
-domain存放载入文档的服务器的主机名，必须具有有效的域前缀或他本身
-跨域资源共享，“Origin”请求头和Acces-Control-Allow-Origin响应头来扩展HTTP
-跨文档消息，使用Window对象上的postMessage()方法
13.6.4跨站脚本
XSS
<>HTML实体
toStaticHTML()
js escape()
第5章 引用类型
5.1Object类型
new Object()构造函数
对象字面量表示法 不调用构造函数
[name] 表示属性名可以使用变量、关键字
5.2Array类型
new Array()
数组字面量表示法 不调用构造函数
数组包含4,294,967,295个项
5.2.1检测数组
instanceof 不同全局变量不同
Array.isArray()
5.2.2转换方法
toString() 逗号拼接字符串
valueOf() 数组
alert() 接受字符串
join() 重组 无参数使用，数组中null和undefined使用空字符串表示
5.2.3栈方法
LIFO
push() 返回新数组长度
pop() 返回对尾移除项
5.2.4队列方法
FIFO
push() 添加返回长度
shift() 返回队首
unshift() 队首添加
5.2.5重排序方法
reverse() 反向排序
sort() 排序 使用toString() 转化 接受函数参数
5.2.6操作方法
concat() 返回新数组
slice() 返回新数组
splice() 返回删除项
-删除splice(0,2) 第一项的位置，项数
-插入splice(2,0,'red','green') 开始位置，项数，插入项
-替换 开始位置，删除项数，插入项
5.2.7位置方法
indexOf(searchvalue,fromindex) 开始0查找 返回位置
lastIndexOf() 末尾开始找 返回位置
没有返回-1
5.2.8迭代方法
(函数(值,位置,数组本身),作用域对象)
(item,index,array)
every() 每一项返回true，返回true
some() 任一项返回true，返回true
filter() 返回true组成数组
forEach() 没有返回值
map() 调用结果返回值
不修改原数组
5.2.9缩小方法
reduce() 函数，缩小基础的初始值
reduceRight()
函数（前一个值，当前值，索引，数组对象）
5.3Date类型
new Date()
Date.parse() 日期字符串参数，返回相应日期毫秒数 基于GMT
6/13/2004
January 12,2004
Date.UTC() 年份、基于0的月份、1-31的哪一天、小时0-23、分钟、秒、毫秒
基于当前时区
Date.now() 当前日期和时间毫秒数
使用 new +Date() 转化毫秒
5.3.1继承的方法
toLocaleString() 当前时区时间
toString() 带有时区信息的日期和时间
valueOf() 不反回字符串，返回日期毫秒
5.3.2日期格式化方法
toDateString() 特定格式显示星期几、月、日和年
toTimeString() 特定格式显示时、分、秒和时区
toLocaleDateString() 特定于地区显示星期几、月、日和年
toLocaleTimeString() 特定格式时、分、秒
toUTCString() 完成UTC日期
5.3.3日期/时间组件方法
UTC日期指没有时区偏差将日期转换为GMT时间
getTime() 返回日期毫秒数，与valueOf()相同
setTime(毫秒) 毫秒设置日期
getFullYear() 获得4位年份
getUTCFullYear() 返回UTC的4位年份
setFullYear(年) 设置年份
setUTCFullYear(年) 设置UTC年份
getMonth() 获得日期中月份 0开始
getUTCMonth() 返回UTC月份
setMonth(月) 设置月份
setUTCMonth(月) 设置UTC月份
getDate() 获得月份中天数
getUTCDate() 获得UTC天数
setDate(日) 设置天数
setUTCDate(日) 设置UTC天数
getDay() 获得星期几
getUTCDay() 获得UTC星期几
getHours() 获得小时
getUTCHours() 获得UTC小时
setHours(时) 设置时
setUTCHours(时) 设置UTC时
getMinutes() 获取
getUTCMinutes() 获取UTC分钟
setMinutes(分) 设置分钟
setUTCMinutes(分) 设置UTC分钟
getSeconds() 获取秒数
getUTCSeconds() 获取UTC秒数
setSecondes(秒) 设置秒
setUTCSecondes(秒) 设置UTC秒
getMilliseconds() 获取毫秒
getUTCMilliseconds() 获取UTC毫秒
setMilliseconds(毫秒) 设置毫秒
setUTCMilliseconds(毫秒) 设置UTC毫秒
getTimezoneOffset() 返回本地与UTC相差分钟
5.4RegExp类型
var expression=/pattern/flags; 字面量
g:global 应用于所有字符串
i:case-insensitive不区分大小写
m:multiline多行模式
元字符
([{^$|)?*+.]}
var pattern2=new RegExp("[bc]at","i");
字面量创建正则实例
5.4.1RegExp实例属性
-global 设置g
-ignoreCase 设置i
-lastIndex 开始搜索位置，0
-multiline 设置m
-source 正则字符串表示，规范字符串，字面量字符串
5.4.2RegExp实例方法
exec() 返回第一个匹配项数组 没有返回null
第一项是整个模式匹配 第二个是捕获组匹配字符串
数组两个属性 index 位置，input 应用字符串
不使用g 每次从头匹配
test() 匹配返回true，否则返回false
继承toLocaleString()和toString() 返回正则字面量
valueOf() 返回正则本身
5.4.3RegExp构造函数属性
RegExp.input $_ 最近一次要匹配字符串
RegExp.lastMatch $& 最近一次匹配项
RegExp.lastParen $+ 最近一次捕获组
RegExp.leftContext input字符串中lastMatch之前的文本
RegExp.Multiline 布尔值
RegExp.rightContext input字符串中lastMatch后文本
5.5Function 类型
函数实际是对象，是Function类型的实例
函数是对象，函数名是指针
5.5.2函数声明与函数表达式
function func(){}
var func=function(){};
5.5.4函数内部属性
arguments和this
callee 指针指向拥有arguments对象的函数
this 函数执行环境对象 全局window
caller 调用当前函数的函数引用 arg.callee.caller
5.5.5函数属性和方法
函数属性
length 参数个数
prototype 不可枚举
函数方法
apply(作用域，参数数组)
call(作用域，参数1，参数2，.. )
es5 bind() 创建函数实例，this绑定到函数
toLocaleString()和toString() 返回函数代码
valueOf() 返回函数代码
5.6基本包装类型
Boolean/Number/String
基本类型实例为object
5.6.3Number()类型
Number()类型
转化字符串
toFixed(num) 数值变指定几位小数符串 0-20位
toExponential(num) 几位小数指数表示法
toPrecision(num) 最合适返回固定位数，所有位数 1-21位
5.6.3String类型
1.字符方法
charAt(num)和charCodeAt(num) 所在位置字符或编码
es5 string[num]
2.字符串操作方法
concat() 拼接返回新字符串，可接受多个参数
substring(开始，结束) 返回新值，负数转为0
slice(开始，结束) 返回新值，负数加字符串长度
substr(开始，个数) 返回新值，第二个负数为0
3.字符传位置方法
indexOf() 和 lastIndexOf() 查找字符，没有返回-1，第二参数开始位置
4.trim() 方法
es5 trim() 删除前后空格，返回新字符串
trimLeft()和trimRight() 删除前后空格
5.字符串大小写转换方法
toUpperCase()和toLowerCase()
toLocaleUpperCase()和toLocaleLowerCase()
6.字符串的模式匹配方法
match() 与RegExp的exec() 相同
search() 返回字符串第一个匹配项索引
replace() RegExp对象或字符串（不会转为正则）
第二个函数传入，匹配项、位置、原始字符串
split() 分隔符或RegExp对象，数组大小，以制定分隔符分割，返回数组
7.localeCompare()方法
匹配字符前返回-1，相等0，之后1
8.fromCharCode()方法
与charCodeAt() 相反
5.7单体内置对象
Global 和 Math
5.7.1Global对象
1.URI编码对象
encodeURI() 和 encodeURIComponent() 1编码所有，2参数
decodeURI() 和 decodeURIComponent() 解码
2.eval()方法
参数字符串，解释器与函数执行环境相同
3.Global对象的属性
undefined/NaN以及Infinity都是Global对象的属性，原生引用类型构造函数
4.window对象
代替Global
5.7.2Math对象
1.Math对象的属性
Math.E 自然对数的底数，e值
Math.LN10 10的自然对数
Math.LN2 2的自然对数
Math.LOG2E 以2为底的对数
Math.LOG10E 以10为底e的对数
Math.PI pi的值
Math.SQRT1_2 1/2的平方根
Math.SQRT2 2的平方根
2.min()和max()方法
var max=Math.max.apply(Math,values);
3.舍入方法
Math.ceil() 向上舍入整数
Math.floor() 向下舍入整数
Math.round() 标准舍入整数
4.random() 方法
介于0和1之间的随机数
function selectFrom(lowerValue,upperValue){
var choices=upperValue- lowerValue+1;
return Math.floor(Math.random()*choices+lowerValue);
}
5.其他方法
Math.abs(num) 绝对值
Math.exp(num) Math.E的num次幂
Math.log(num) num的自然对数
Math.pow(num,power) num的power次幂
Math.sqrt(num) num的平方根
Math.acos(x) x反余弦值
Math.asin(x) x反正弦值
Math.atan(x) x反正切值
Math.atan2(y,x) y/x的反正切值
Math.cos(x) x余弦值
Math.sin(x) x正弦值
Math.tan(x) x正切值
第9章 JavaScript设计模式
- Constructor（构造器）模式
- Module（模块）模式
- Revealing Module（揭示模块）模式
- Singleton（单例）模式
- Observer（观察者）模式
- Mediator（中介者）模式
- Prototype（原型）模式
- Command（命令）模式
- Facade（外观）模式
- Factory（工厂）模式
- Mixin（混入）模式
- Decorator（装饰者）模式
- Flyweight（享元）模式
9.1 Constructor（构造器）模式
Constructor 在内存已分配给该对象的情况下，用于初始化新创建对象的特殊方法
Object构造器用于创建特定类型对象，同时接收狗在其可以使用的参数，设置成员属性和方法的值
键值对赋给对象
1、obj.someKey = ‘123’
2、obj[someKey] = ‘123’
3、Object.defineProperty
4、Object.defineProperties
JavaScript中有一个名为prototype的属性
调用JavaScript构造器创建对象后，新对象就会具有构造器原型的所有属性
9.2 Module（模块）模式
JavaScript 实现模块的方法 - 对象字面量表示法
- Module模式
- AMD模块
- CommonJS模块
- ECMAScript Harmony模块
对象字面量
var myObjectLiteral = {
varKey: varValue
funcKey: function() {}
}
9.2.2 Module（模块）模式
仍然使用对象字面量，只是作为一个作用域函数的返回值
使一个单独的对象拥有共有/私有方法和变量，屏蔽全局作用域
Module模式使用闭包封装“私有”状态和组织
提供了一种包装混合共有/私有方法和变量的方式，只返回一个共有API，其他一切都维持在私有闭包里
var testModule = (function () {
// 私有计数器变量
var myPrivateVar = 0
return {
myPublicVar: ‘foo'
incrementCounter: function () {
return ++counter
},
resetCounter: funciton () {
counter = 0
}
}
})
上述方法进行了有效的命名空间设置，调用需要加上前缀（testModule）
9.2.3 Modlue模式变化
引入混入
优点：
支持私有数据
缺点：
1、访问共有和私有成员方式不同，想改变可见性需要修改每个使用过该成员的地方
2、无法访问之后在方法里添加的私有成员
3、无法为私有方法打补丁
9.3 Revealing Module（揭示模块）模式
在私有方位内简单定义所有函数和变量，返回一个匿名对象，拥有指向私有函数的指针
var myRevealingModule = function() {
var privateCounter = 0
function privateFunction () {
privateCounter++
}
function pubulicFunciton () {
publicIncrement()
}
funciton pubulicIncrement () {
privateFunciton()
}
function publicGetCount () {
return privateCounter
}
// 将暴露的公有指针指向到私有函数和属性上
return {
start: publickFunciton,
increment: publickIncrement,
count: publicGetCount
}
}
优点：
容易指出哪些函数和变量可以被公开
缺点：
私有函数引用共有函数，打补丁时不能被覆盖
私有变量的共有对象成员也遵守无不定规则
9.4 Singleton（单例）模式
实例不存在的情况下，可以通过一个方法创建一个类来实现创建一个类来实现创建类的新实例；如果实例已经存在，他会简单返回该对象的引用
var mySingleton = (function () {
var instance
function init () {
function privateMethod () {
console.log(“I am private")
}
var privateVariable = “Im also private”
var privateRandomNumber = Math.random()
return {
publicMetchod: function () {
console.log(“the public can see me")
},
publicProperty: “I am also public”,
getRandomNumber: function () {
return privateRandomNumber
}
}
}
return {
getInstance: function () {
if (!instance) {
instance = init ()
}
return instance
}
}
})
Singleton 负责隔绝动态初始化顺序的不可预知性，将控制权归还给程序猿
9.5 Observer（观察者）模式
一个对象（称为 subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给他们
Subject（目标）
维护一系列的观察者，方便添加或删除观察者
Observer（观察者）
为那些在目标状态发生改变时所获得通知的对象提供一个更新接口
ConcreteSubject（具体目标）
状态发生改变时，向Observer发出通知，储存ConcreteObserver的状态
ConcreteObserver（具体观察者）
存储一个指向ConcreteSubject的引用，实现Observer的更新接口，使自身状态与目标的状态保持一致
Observer（观察者）模式和Publish/Subscribe（发布/订阅）模式
Observer 模式要求希望接受到主题通知的观察者（或对象）必须订阅内容改变的事件
Publish/Subscribe 模式使用了一个主题/事件通道，这个通道介于希望接受到通知（订阅者）的对象和激活事件的对象（发布者）之间。
有点：识别关系层，将应用程序解耦
缺点：订阅者错误
9.5.4.1 Publish/Subscribe 实现
Var pubsub = {}
(Function (q) {
Var topics = {},
subUid = -1;
// 发布或广播事件，包含特定的topic名称和参数（比如传递的数据）
q.publish = function (topic, args) {
If (!topics[topic]) {
Return false;
}
Var subscribers = topics[topic],
Len = subscribers ? Subscribers.length : 0;
While (len—) {
subscribers[len].func(topic, args)
}
Return this
};
// 通过特定的名称和回调函数订阅事件，topic/event触发时执行事件
q.subscribe = funciton (topic, func) {
If (topics[topic]) {
Topics[topic] = [];
}
Var token = (++subUid).toString();
Topics[topic].push({
Token: token,
Func: func
})
Return token;
}
// 基于订阅上的标记引用，通过特定topic取消订阅
q.unsubscribe = function (token) {
For (var m in topics) {
If (topics[m]) {
For (var I = 0, j = topics[m].length; I < j; I++ ) {
If (topics[m][I].token === token) {
Topics[m].splice(I,1);
Return token
}
}
}
}
Return this;
}
}(pubsub))
9.6 Mediator（中间者）模式
Var mediator = (function () {
// 存储可被广播或监听的topic
var topics = {};
// 订阅一个topic，提供一个回调函数，一旦topic被广播就执行该回调
var subscribe = function (topic, fn) {
If (!topics[topic]) {
Topics[topic] = [];
}
Topics[topic].push({context: this, callback: fn});
Return this
}
// 发布/广播事件到程序的剩余部分
Var publish = function (topic) {
Var args;
If (!topics[topic]) {
Return false;
}
Args = Array.prototype.slice.call(arguments, 1);
For (var I = 0, l = topics[topic].lenght; I < 1, I++) {
Var subscription = topics[topic][I];
Subscription.callback.apply(subscription.context, args);
}
Return this;
}
Return {
Publis: publish,
Subscribe: subscribe,
installTo: function (obj) {
Obj.pubscribe = subscribe;
Obj.publis = publish;
}
}
})
mediator
优点：将系统中对象或组件之间 需要的通信渠道从多对多减少到多对一
缺点：引入单一故障点
中介者（Mediator）与观察者（Observer）区别：
Mediator模式通过限制对象严格通过Mediaor进行通信
Observer创建观察者对象，通过观察者对象向订阅他们的对象发布其感兴趣的事件
9.7 Prototype（原型）模式
Prototype 基于现有对象模板，通过克隆方式创建对象的模式
Object.create(prototype, optionalDescriptorObjects)
Var createobj = (function() {
Function F() {}
Return function (proto) {
F.prototype = proto;
Return new F()
};
})();
9.8 Command （命令）模式
Command 模式将方法调用、请求或操作封装到单一对象中，根据我们不同的请求对客户进行参数化和传递可供执行的方法调用
CarManager.excute = function (name) {
Return CarManager[name] && CarManager[name].apply(CarManager, [].slice.call(arguments, 1));
}
9.9 Facade（外观）模式
创建外观时，向外加展示的外表可能掩盖了一个非常不同的现实，一种简单的公用接口
Facade 是一种结构性模式，在jQuery等js库中经常看到，尽管一个实现可能支持具有广泛行为的方法，却只有一个“外观”或这些方法的有限抽象能提供给公众使用
9.10 Factory（工厂）模式
Factrory 模式是另一种创见型模式，涉及创建对象的概念。可提供一个通用接口来创建对象，可指定我们希望创建的工厂对象的类型
使用场景：
- 对象或组件设置涉及高负责性
- 根据不同环境轻松生成对象的不同实例
- 处理很多共享相同属性的小型对象或组件
- 编写只需要满足一个API契约（亦称样子类型）的其他对象的实例对象
9.11 Mixin模式
子类化：指针对一个新对象，从一个基础或超类对象汇总继承相关的属性
类B从另外一个类A扩展得来。A是一个超类，B是A的一个子类
Mixin 有助于减少系统中的重复功能以及增加函数复用。
9.12 Decorator （装饰者）模式
Decorator 是一种结构型设计模式，与Mixin相类似，可以被认为是另一种可行的对象子类化的替代方案
Decorator 模式并不严重依赖创建对象的方式，关注扩展其额外功能
向基本对象添加（装饰）属性或方法，而不是进行子类化
优点：使用透明，相当灵活
确定：命名空间引入了很多小型但类似的对象
9.13 Flyweight（享元）模式
Flyweight模式是一种经典的结构型解决方案，用于优化重复、缓慢以及数据共享效率较低的代码
Flyweight 数据共享会涉及获取多个对象使用的若干相似对象或数据结构，以及将这些数据放到一个单一的对象中。可以将该对象传递给依赖这些数据的对象，而不是在每个对象都存储相同的数据
应用在
一、数据层，处理内存中保存的大量相似对象的共享数据
二、DOM层，Flyweight可作为**事件管理器，避免将事件处理程序附加到父容器中的每个子元素上，而是将事件处理程序附加到这个父容器上
第7章 数组
数组最大（2的32-2）
数组直接量允许有可选的逗号结尾[,,]为两个
new Array()和[,,]都是稀疏数组
7.5数组的添加和删除
Array.unshift()在首部插入元素
Array.shift()删除队首元素
Array.push()压入元素
Array .pop()删除队尾元素
7.6数组遍历
Array.forEach()按照索引顺序按个传递给定义的函数
7.8数组方法
Array.join()将数组转化字符串连接 使用,连接
Array.split()分割成若干块来创建数组
Array.reverse()颠倒顺序
Array.sort()按字母表顺序 传递函数<0返回第一个参数 >0返回第二个参数
Array.concat()连接数组元素
Array.slice(a,b)a开始不到b 负数表示从结尾倒数-1表示最后一个
Array.splice(a,b,c)a开始位置 b删除个数 从开始位置要插入的c 操作原字符串
Array.push().pop()栈尾添加和删除 返回长度
Array.unshitf().shift()栈头添加和删除 返回长度
Array.toString().toLocaleString()转化为字符串
7.9ECMAScriipt5数组方法
遍历、映射、过滤、检测、简化和搜索
第一个参数是函数 对每个元素使用 三个参数值 索引 数组本身
Array.forEach()遍历 跳出需要try 异常foreach.break
Array.map()映射 返回新数组 不压缩
Array.filter()过滤 判断true 压缩
Array.every().some()检测所有或存在 所有都true返回true
Array.reduce().reduceRight()简化为一个值 第一个为简化值 2-4为三个参数
Array.indeOf().lastIndexOf()搜索
7.10数组类型
Array.isArray()
7.11类数组对象
拥有length和非负整数属性
function isArrayLike(o){
if(o&&
typeof o==='object'&&
isFinite(o.length)&&
o.length>=0&&
o.length===Math.floor(o.length)&&
o.length<4294967296)
return true;
else
reurn false;
}
第14章 window对象
14.1计时器
setTimeout()指定毫秒数后运行，返回值用于clearTimeout()
setInterval()指定毫秒数间隔重复调用，返回值用于clearInterval()
//定时器应用函数
function invoke(f,start,interval,end){
if(!start) start=0;
if(arguments.length<=2)
setTimeout(f,start);
else{
setTimeout(repeat,start);
function repeat(){
var h=setInterval(f,interval);
if(end) setTimeout(function(){clearInterval(h);},end);
}
}
}
第一个参数为字符串，时间间隔后求值eval()
HTML5可额外提供参数
时间为0进入队列中
14.2浏览器定位和导航
Window对象的location属性引用Location对象，表示当前显示的URL
window.location===document.location//返回true
Location更新文档中片段标识符（#table-of-contents）
document.URL属性不变
14.2.1解析URL
Location对象的href属性是字符串，包含URL完整文本
其他属性有protocol/host/hostname/post/pathname/search/hash
成为“URL分解”，被Link对象支持，元素创建
hash属性返回URL中“片段标识符”
search属性返回问号后URL
//提取URL中搜索字符串中的参数
var args=urlArgs();
var q=args.q||'';
var n=args.n?parseInt(args.n):10;
function urlArgs(){
var args={};
var query=location.search.substring(1);//去掉？
var pairs=query.slipt('&');
for(var i=0;i<pairs.length;i++){
var pos=pairs[i].indexOf('=');
if(pos==-1) continue;
var name=pairs[i].substring(0,pos);
var value=pairs[i].substring(pos+1);
value=decodeURIComponent(value);
args[name]=value;
}
return args;
}
14.2.2载入新的文档
Location对象的assign()方法使窗口载入制定URL文档
replace()会把历史中文档删除
if(!XMLHttpRequest) location.replace('...');
reload()方法重新载入当前文档
14.3浏览历史
Window对象的history属性引用History对象
length属性表示数量
back()和forward()方法可后退和前进
go(数字)跳多少次
如果包含多个子窗口，子窗口浏览历史按时间顺序穿插在主窗口历史中
14.4浏览器和屏幕信息
Window对象的navigator和screen属性引用Navigator和Screen对象
14.4.1Navigator对象
navigator属性包含浏览器厂商和版本信息
-appName Web浏览器全称
-appVersion 数字开始，包含浏览器厂商和版本信息
-userAgent USER-AGENT HTTP头部发送的字符串 包含appVersion
-platform 操作系统
-onLine 是否连接网络
-geolocation 确定用户地理位置信息接口
-javaEnabled() 可运行Java小程序
-cookieEnable() 是否可保存cookie
14.4.2Screen对象
包含窗口大小和可用颜色数量
width和height指定像素为单位的窗口大小
availWith和availHeight实际可用大小 排除任务栏空间
colorDepth显示BRP(bits-per-pixel)值，有16/24/32
14.5对话框
Window下的
alert()显示消息等待关闭
confirm()显示消息，单击确定或取消，返回布尔值
prompt()等待输入字符串，返回字符串
showModaDialog()模态对话框，显示出来不可点选其他对话框
第一个参数 指定对话框HTML内容的URL
第二个参数 任意值（数组和对象均可）通过window.dialogArguments访问
第三个参数 非标准队列，分号隔开的name=value对
dialogwidth和dialogheight设置对话框大小
resizalbe=yes允许改变窗口大小
window.returnValue返回方法值
14.6错误处理
Window对象onerror属性事件处理程序，未捕获异常传播到调用栈调用它，把错误输出到控制台上
三个字符串参数
第一个参数 表述错误
第二个参数 存放引发错误JavaScript代码所在URL
第三个参数 发生错误的行数
14.8.1打开和关闭窗口
Window对象的open()方法
第一个参数 显示文档的URL，省略空页面的URL about:blank
第二个参数 新打开窗口名字，省略使用‘_blank’打开新的、未命名窗口
target属性可设置为“_blank”“_parent”“_top”
有name属性，用它保存名字
第三个参数 逗号分隔的列表，大小和各种属性
第四个参数 在第二个参数name存在使用，替换历史当前条目true，默认为false
返回新Window对象
opener为打开他的脚本的Window对象
.close()关闭
14.8.2窗体之间的关系
.contentWindow引用该窗体的Window对象
.frameElement获取窗体<iframe>元素
frames属性是Window对象类数组
14.8.3交互窗口中的JavaScript
函数在定义它的作用域执行
内置类在所有窗口中自动预定义，每个Window对象有自己的原型
第17章 事件处理
事件类型 event type/事件名字 event name
时间目标 event target
事件处理程序 event handler/事件监听程序 event listener/触发 fire/trigger 派发 dispath
事件对象 event object
事件传播 event propagation/冒泡 bubble
事件捕获 event capturing
17.1事件类型
事件分类
-依赖于设备输入事件 mousedown/mousemove/mouseup/keydown/keypress/keyup/touchmove/gesturechange
-独立于设备的输入事件 click/textinput
-用户界面事件 focus/change/submit
-状态变化事件 load/DOMContentLoaded/popstate/online/offline/readystatechange/loadstart/progress/loadend
-特定API事件 dragstart/dragenter/dragover/drop/waiting/playing/seeking/volumechange
-计时器和错误处理程序 timer/error handler
17.1.1传统事件类型
1表单事件
focus和blur 事件不会冒泡
2Window事件
load 事件、DOMContentLoaded和readystatechange是替代方案
unload和load 相对，用户离开当前文档触发，保存用户状态
beforeunload 事件和unload类似，是否确定离开当前页面的机会
onerror 处理事件
abort 用户停止加载进程
resize和scroll 调整大小和滚动
3鼠标事件 会冒泡
clientX和clientY 窗口坐标
button和which 制定了按下了哪个鼠标
altKey/ctrKey/metaKey/shiftKey 设置为true
click事件里，detail指定单击、双击或三击
mousemove 鼠标移动
mousedown和mouseup 按下或释放鼠标
dblclick 第二个click
contextmenu 上下文菜单
mouseover 鼠标悬停
mouseout 不再悬停
这些事件有relatedTarget属性指明过程涉及元素
mouseenter和mouseleave 不冒泡版本
mousewheel 鼠标滚=滚轮滚动
4键盘事件
keyCode 按下的键是哪个
altKey/ctrKey/metaKey/shiftKey 键盘辅助键
keydown和keyup 低级键盘事件
keypress 按下产生的字符
17.1.2DOM事件
focusin和focusout取代focus和blur事件
wheel事件包含deltaX/deltaY/deltaZ三个不同的鼠标滚轴
textinput 通过键盘、剪切和粘贴、拖放等
17.1.3HTML5事件
用于
<style type="text/css">
#clock{
font:bold 24pt sans;background: #ddf;padding: 10px;border:solid black 2px;border-radius: 10px;
}
</style>
<h1>从时钟拖出时间</h1>
<span id="clock"></span>
<textarea cols="60" rows="20"></textarea>
进入文档元素，触发dragenter事件
dataTransfer.types 拖放对象是可理解格式
dataTransfer.effectAllowed 同意使用移动、复制或链接操作的一个
17.8文本事件
textinput/textInput/keypress输入事件
keyCode大多数浏览器，charCode Firefox使用
17.9键盘事件
keyCode 指定按下哪个键
字母键总是大写
定义Keymap类
bind()和unbind()方法添加和移除绑定
install()方法在HTML元素上配置Keymap
注册keydown事件配置KeyMap
第4章 表达式和运算符
4.1原始表达式
原始表达式包含常量或直接量、关键字和变量
4.4属性访问表达式
'.'和'['前的表达式先计算，转化为对象（包装对象）
属性名包含保留字、空格、标点符号、数字使用'[]'
未设置返回值为undefined
属性访问表达式叫做“方法调用“，执行使用this指向，可以调用宿主对象
访问属性名是保留字、空格和标点符号、数字、运算的的值用[]
4.6对象创建表达式
创建对象并调用函数（构造函数）初始化新对象属性
构造函数（）可省略
4.7运算符概述
~/按位求反
void/返回undefined
instanceof/测试对象类
in/测试属性是否存在
^/按位异或
++、--、-、+~、!、delete、typeof、void
、/、%
+、-
<<、>>、>>>
<、<=、>、>=、instanceof、in
==、！=、===、！==
&
^
|
&&
||
？：
=、=、/=、
4.7.6运算符的结合性
一元操作符、赋值和三元条件运算符都具有从右至左结合性
4.8.2一元算数运算符
字符串+数字//字符串
++转化为数字
4.8.3位运算符
位运算将NaN/Infinity和-Infinity转换为0
负数取反加1
4.9.1相等和不等运算符
null!===undefined
x!==x判断NaN
0和-0相等
null==undefined
==先转化为数字再比较
4.9.2比较运算符
大写字母<小写字母
String.toLowerCase()变大写
String.toUpperCase()变小写
String.localCompare()
4.9.3in运算符
0 in []//true
4.12.1eval()
字符串编译，不是的话抛出SyntaxError异常，语法错误
4.12.2全局eval()
eval()别名抛出EvalError异常
第23章 离线应用与客户端存储
23.1离线监测
navigator.onLine true 上网
online offline 事件
23.2应用缓存
appcache
描述文件
CACHE MANIFEST
#Comment
applicationCache对象
status
0 无缓存
1 闲置
2 检查中
3 下载中
4 更新完成
5 废弃
事件
checking 查找更新
error
noupdate 文件无变化
downloading 开始下载
progress 下载中
updateready 下载完毕
cached 缓存完成
swapCache() 触发
23.3数据存储
登陆信息、偏好设置或其他数据
23.3.1Cookie
1.限制
绑定域名
Safari和Chrome没限制
4kb限制
2.cookie的构成
名称 唯一确定名称
值 URL编码
域 设置的域
路径 制定域
失效时间 GMT格式 Wdy，DD-Mon-YYYY HH:MM:SS GMT
安全标志 secure 唯一单词
3.JavaScript中的cookie
document.cookie
decodeURIComponent() 解码
name=value;exprires=expiration_time;path=domain_path;domain=domian_name;secure
4.子cookie
23.3.3Web存储机制
window.sessionStorage和globalStorage
1.Storage类型
clear() 清除
getItem(name) 获得值
key(index) 获得index的值
removeItem(name) 删除
setItem(name,value)
2.sessionStorage()对象
保存到浏览器关闭
3.globalStorage对象
全局可访问
globalStorage[location.host]
4.localStrage()对象
取代globalStorage
5.storage事件
event 对象
domain 域名
key 键名
newValue 新值
oldValue 之前的值
6.限制
localStorage 2.5MB
第3章 基本概念
3.1.2标识符
第一个字母、下划线_、美元符号$
其他可以是字母、下划线、美元符号、数字
3.1.3注释
//单行注释
/*
*多行注释
*/
3.1.4严格模型
"use strict"编译指示pragma
3.2关键字和保留字
3.4数据类型
简单数据类型 Undefined、Null、Boolean、Number、String
3.4.1typeof操作符
typeof 操作符不是函数
'undefined' 未定义
'boolean' 布尔值
'string' 字符串
'number' 数值
'object' 对象或null
'function' 函数
3.4.2Undefined类型
未声明变量 typeof undefined
未声明产生错误
3.4.3 Null类型
null表示空对象指针
接下来用于保存对象
undefined派生自null
Undefined==null
3.4.4Boolean类型
Boolean()函数转化
区分大小写
数据类型 true false
Boolean true fasle
String 非空 ''
Number 非零无穷大 0和NaN
Object 任何对象 null
Undefined n/a undefined
3.4.5Number类型
八进制首位0 严格模式失效导致抛错
十六进制首位0x 后字母可大写可小写
1.浮点数值 是保存整数空间两倍
e科学计数法，大小写均可
默认将小数点后6个零以上浮点数转化为e表示法
浮点最高精读17位
不要测试浮点数值 0.1+0.2!==0.3
2. 数值范围
Number.MIN_VALUE 5e-324
Number.MAX_VALUE 1.7976931348623157e+308
Infinity 正无穷，不能参与计算
isFinite()函数 是否在最大和最小间 尝试转化数值
Number.NEGATIVE_INFINITY和Number.POSITYIVE_INFINITY
3.NaN
返回数值操作数未返回数值，不抛出错误
任何数值除以0返回NaN
涉及NaN操作 返回NaN
NaN和任何值不相等，包括NaN
isNaN()函数 尝试转化为数值
ECMAScript 内置函数和操作符一般执行流程，valueOf()方法 toString()方法
4.数值转换
转型函数Number()任何类型
-Boolean true1 false0
-数值 简单传入
-null 返回0
-undefined 返回NaN
-字符串 忽略前导0数字转换为十进制数 空的0 字符串NaN
-对象valueOf() 返回NaN 调用toString()
/parseInt()/parseFloat()字符串换数值
parseInt() 空字符串返回NaN
识别各种整数格式，不能识别八进制，可设置第二个参数解析10
parseFloat()只识别十进制格式
十六进制转化为0 忽略前导0
3.4.6String类型
1.字符字面量
\n 换行
\t 制表
\b 空格
\r 回车
\f 进纸
\ 斜杠
' '
" "
\xnn 十六进制字符
\unnn 十六进制Unicode字符
length属性 长度
2.字符串的特点
不能改变
3.转换为字符串
数值、布尔值、对象和字符串值都有toString()方法
null和undefined没有
加入参数可转化为二进制、八进制、十六进制
函数String 不知道是不是null或undefined
使用toString null undefined
3.4.7Object类型
Constructor 构造函数
hasOwnProperty('propertyName') 属性在对象实例中，不在原型中
isPrototypeOf(object) 传入对象是另一个对象的原型
propertyIsEnumerable('propertyName') 是否用for-in枚举
toLocaleString() 返回字符串
toString() 返回字符串
valueOf() 返回字符串、数值或布尔值
3.5操作符
3.5.1一元操作符
1.递增和递减操作符-赋值前后
-有效数字先转化数字
-不包含有效数字，设置为NaN
-布尔值变01
2.一元加和减操作符
转化数字
3.5.2位操作符
符号位正数0 负数1
负数
绝对值二进制，反码，加一
数值位操作64转化32位，再转回64位
NaN和Infinity当做0处理
非数值，使用Number()转化
1.按位非（NOT）
~ 取反码 操作数赋值减1
2.按位与（AND）
& 按位对齐，位执行AND
3.按位或（OR）
| 按位对齐，位执行OR
4.按位异或（XOR）
^ 不同1，相同0
5.左移
<< 位左移
6.有符号右移
>> 位右移
7.无符号右移
>>> 位右移
3.5.3布尔操作符
1.逻辑非
！自动转化布尔值
！！与Boolean() 相同
2.逻辑与
&& 短路操作符
一对象，返回二
一true，返回二对象
一对象，二对象，返回二
有null 返回null
有NaN 返回NaN
有undefined 返回undefined
3.逻辑或
||
一对象 返回一
一false 返回二
一对象，二对象，返回一
都是null 返回null
都是NaN 返回NaN
都是undefined 返回undefined
3.5.4乘性操作符
使用Number() 转化为数值
1.乘法
Infinity0==NaN
Infinity非零 Infinity或-Infinity
Infinity*Infinity==Infinity
2.除法
/
有一个操作数NaN 返回NaN
Infinity/Infinity==NaN
0/0==NaN
非零/0==Infinity或-Infinity
Infinity/非零==Infinity或-Infinity
3.求模（余数）
%
Infinity%有限大==NaN
有限大%0==NaN
Infinity%Infinity==NaN
有限大%Infinity==有限大
0%任何数==0
3.5.5 加性操作符
1.加法
任何数+NaN==NaN
Infinity-Infinity==NaN
(+0)+(-0)==(+0)
字符串 拼接
对象、数值或布尔值，先调用toString()，再调用String()
2.减法
Infinity-Infinity==NaN
-Infinity-(-Infinity)==NaN
Infitnity-(-Infinity)==Infinity
(+0)-(+0)==(+0)
(+0)-(-0)==(-0)
(-0)-(-0)==(+0)
字符串、布尔值、null或undefined，先调用Number()
对象调用valueOf() 取得数值
3.5.6关系操作符
-数值相比较
-字符串，比较编码值
-有数值，转变成数值比较
-一个是数值，另一个转化数值比较
-一个是对象，调用valueOf()，调用toString()
和NaN比较返回false
3.5.7相等操作符
1.相等和不相等
-布尔转化为数值
-字符串，数值 先转化为数值
-对象，valueOf()
类型相同比较
类型不同 先转化为0
2.全等和不全等
3.5.8条件操作符
variable=boolean_expression?true_value:false_value
3.5.9赋值操作符
3.6语句
3.6.5for-in语句
检验值是否为null或undefined
3.6.8with语句
变量作为局部变量，搜索with对象
不建议使用
3.6.9switch语句
使用全等操作符
3.7函数
3.7.1理解参数
arguments 修改命名产出不改变arguments对应值
严格模式出错
3.7.2没有重载
第8章 BOM
8.1window对象
浏览器实例
window也是Global对象
8.1.1全局作用域
window对象上全局变量可以使用delete操作符删除
通过查询Window对象，可以知道某个未声明变量是否存在
8.1.2窗口关系及框架
框架有自己的window对象，保存在frames集合中
top 对象指向最高层框架，也就是浏览器窗口
parent 当前框架直接上层框架
self 指向window
8.1.3窗口位置
window.screenLeft/window.screenX //IE/Safari/Opera/Chrome
window.screenTop/window.screenY //Firefox
moveTo() 移动到
moveBy() 移动像素
8.1.4窗口大小
innerWith/innerHeight/outerWidth/outerHeight/
document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth
document.body.clientHeight
resizeTo()和resizeBy() 调整大小
8.1.5导航和打开窗口
window.open(URL，窗口目标，特性字符串，是否新窗口)
_self/_parent/_top_blank
1.弹出窗口
fullscreen/height/left/location/menubar/resizable/scrollbare/status/toolbar/top/width
close() 关闭窗口
opener 属性，打开它的原始窗口对象，为null在独立进程运行
2.安全限制
3.弹出窗口屏蔽程序
8.1.6间歇调用和超时调用
timeoutId=window.setTimeout(代码，毫秒) 超时调用，不建议字符串，返回超时调用Id
clearTimeout(timeoutId)
timeoutId=window.setInterval(代码，毫秒) 尽量使用超时调用
clearInterval(timeoutId)
8.1.7系统对话框
alert() 确定
confirm() 确定、取消，返回值判断按钮
prompt(文本提示、默认值) Cancel或没有单击返回null
window.print() 打印对话框
window.find() 查找对话框
8.2location对象
既是window对象属性，也是location对象属性
hash #后多字符
host 服务器名称和端口号
hostname 服务器名称
href 完整URL，同location.toString()
pathname 目录或文件名
port 端口
protocol 协议
search ?查询字符串
8.2.2位置操作
location.assign('URL') 打开新纪录
window.location='';location.href='' 相同
location.replace(参数) 导航新地址，不产生记录
location.reload() true服务器重新载入
8.3navigator对象
appCodeName 浏览器名称
appMinorVersion 次版本信息
appName 完成浏览器信息
appVersion 浏览器版本
buildId 编译版本
cookieEnabled cookie是否可用
spuClass CPU类型
javaEnabled() 食肉启用java
language 主语言
mimeTypes 浏览器中MIME类型数组
onLine 是否连接英特网
opsProfile
oscpu 使用cpu
platform 操作系统
plugins 插件信息数组
preference() 用户首选项
product 产品名称
productSub 次要信息
register-ContentHandler() 特定MIME类型注册处理程序
register-ProtocolHandler() 特定协议注册处理程序
securityPolicy
sysemLanguage 操作系统语言
taintEnabled()
userAgent 用户代理字符串
userLanguage 操作系统默认语言
userProfile 访问用户信息对象
vendor 浏览器品牌
vendorSub 供应商次要信息
8.3.1检测插件
plugins 插件数组
name 插件名字
description 描述
filename 文件名
length 处理的MIME类型数量
8.4screen对象
8.5history对象
history.go() 负数向后，正数向前
history.back() 后退
history.forward() 前进
history.length() 数量
第9章 类和模块
类的实例对象从一个原型对象继承属性
工厂方法
9.2类和构造函数
new调用构造函数创建新对象
构造函数prototype属性用作新对象原型
//范围类
function Range(from,to){
this.from=function(){return from;};
this.to=function(){return to;};
}
Range.prototype={
constructor:Range,
//是否范围内
includes:function(x){return this.form()<=x&&x<=this.to();},
//范围内调用f
foreach:function(f){for(var x=Math.ceil(this.from());x<=this.to();x++) f(x);},
//返回字符串
toString:function(){return '('+this.from()+'...'+this.to()+')';};
};
//重写constructor
Range.prototype.constructor=Range;
//端点相等才相等
Range.prototype.equals=function(that){
if(that==null) return false;
if(that.constructor!==Range) return false;
return this.from==that.from&&this.to==that.to;
};
//比较下边界
Range.prototype.compareTo=function(that){
if(!(that instanceof Range))
throw new Error("Can't compare a Range with "+that);
var diff=this.from-that.from;
if(diff==0) diff=this.to-that.to;
return diff;
};
9.2.1构造函数和类的标识
原型对象是类的唯一标识
r instanceof Range//r继承自Range.prototype
9.2.2constructor属性
每个函数自动拥有prototype属性 是个对象
prototype包含不可枚举属性constructor 是个函数对象
var F=function(){};
F.prototype.constructor==F
继承constructor指代构造函数
构造函数是类的‘公共标识’
var o=new F();
o.constructor===F;
显示设置构造函数反向引用
使用预定义原型添加方法
9.3JavaScript中Java式的类继承
构造函数、实例字段、实例方法、类字段、类方法
9.4类的扩充
多次调用函数f
Number.prototype.times=function(f,context){
var n=Number(this);
for(var i=0;i<n;i++) f.call(context,i);
}
去除开头结尾空格
String.prototype.trim=String.prototype.trim||function(){
if(!this) return this;
return this.replace(/^\s+|\s+&/g,'');
}
提取函数名称
Function.prototype.getName=function(){
return this.name||this.toString().match(/function\s*\([^()*]\)/)[1];
}
9.5.1instanceof运算符
左侧待检测其类的对象，右侧定义类的构造函数
.isPrototypeof()
9.5.3构造函数的名称
//判断值得类型
function type(o){
var t,c,n;//type,class,name
if(o===null) return 'null';
if(o!==o) return 'nan';
if((t=typeof o)!=='Object') return t;
if((c=classof(o))!='Object') return c;
if(o.constructor && typeof o.constructor==='function'&&(n=o.constructor.getName())) return n;
return 'Object';
}
9.5.4鸭式辩型
//实现第一个参数外方法
function quacks(o/*,...*/){
for(var i=1;i<arguments.length;i++){
var arg=arguments[i];
switch(typeof arg){
case 'string':
if(typeof o[arg]!=='function') return false;
continue;
case 'function':
arg=arg.prototype;
case 'object':
for(var m in arg){
if(typeof arg[m]!=='function') continue;
if(typeof o[m]!=='function') return false;
}
}
}
return true;
}
9.6.1一个例子：集合类
//值的集合
function Set(){
this.values={};
this.n=0;
if(arguments.length==1&&isArrayLike(arguments[0]))
this.add.apply(this,arguments[0]);
else if(arguments.length>0)
this.add.apply(this,arguments);
}
//元素加入集合
Set.prototype.add=function(){
for(var i=0;i<arguments.length;i++){
var val=arguments[i];
var str=Set._v2s(val);
if(!this.values.hasOwnProperty(str)){
this.values[str]=val;
this.n++;
}
}
return this;
}
//删除元素
Set.prototype.remove=function(){
for(var i=0;i<arguments.length;i++){
var str=Set._v2s(arguments[i]);
if(this.values.hasOwnProperty(str)){
delete this.values[str];
this.n--;
}
}
return this;
}
//检验是否包含
Set.prototype.contains=function(value){
return this.values.hasOwnProperty(Set._v2s(value));
}
//返回集合大小
Set.prototype.size=function(){
return this.n;
}
//遍历元素，调用f
Set.prototype.foreach=function(f,context){
for(var s in this.values){
if(this.values.hasOwnProperty(s))
f.call(context,this.values[s]);
}
}
//集合转为字符串
Set.prototype.toString=function(){
var s='{',i=0;
this.foreach(function(v){s+=((i++>0)?',':'')+v;});
return s+'}';
}
//调用toLocaleString()
Set.prototype.toLocaleString=function(){
var s='{',i=0;
this.foreach(function(v){
if(i++>0) s+=',';
if(v==null) s+=v;
else s+=v.toLocaleString();
});
return s+'}';
}
//转化为值数组
Set.prototype.toArray=function(){
var a=[];
this.foreach(function(v){a.push(v)});
return a;
}
//JSON转化为字符串集合当做数组对待
Set.prototype.toJSON=Set.prototype.toArray;
//比较
Set.prototype.equals=function(that){
if(this===that) return true;
if(!(that instanceof Set)) return false;
if(this.size()!=that.size()) return false;
try{
this.foreach(function(v){if(!that.contains(v)) throw false;});
return true;
}catch(x){
if(x===false) return false;
throw x;
}
};
//内部函数
Set._v2s=function(val){
switch(val){
case undefined:return 'u';
case null:return 'n';
case true:return 't';
case false:return 'f';
default:switch(typeof val){
case 'number':return '#'+val;
case 'string':return '"'+val;
default:return '@'+objectId(val);
}
}
function objectId(o){
var prop='|**objectid**|';
if(!o.hasOwnProperty(prop))
o[prop]=Set._v2s.next++;
return o[prop];
}
}
Set._v2s.next=100;
9.6.2一个例子：枚举类型
工厂方法 每次调用返回新的类
//枚举类型
function enumeration(namesToValues){
//虚拟构造函数作为返回值
var enumeration=function(){throw "Can't Istantiate Enumeration";};
//枚举值继承这个对象
var proto=enumeration.prototype={
constuctor:enumeration,
toString:function(){return this.name;},
valueOf:function(){return this.value;},
toJSON:function(){return this.name;}
};
enumeration.values=[];
for(name in namesToValues){
var e=inherit(proto);
e.name=name;
e.value=namesToValues[name];
enumeration[name]=e;
enumeration.values.push(e);
}
enumeration.foreach=function(f,c){
for(var i=0;i<this.values.length;i++) f.call(c,this.values[i]);
};
return enumeration;
}
function inherit(p){
if(p==null) throw TypeError();
if(Object.create) return Object.create(p);
var t=typeof p;
if(t!='object'&&t!='function') throw TypeError();
function f(){};
f.prototype=p;
return new f();
}
//玩牌的类
function Card(suit,rank){
this.suit=suit;//花色
this.rank=rank;//点数
}
//花色和点数
Card.Suit=enumeration({Club:1,Diamonds:2,Hearts:3,Spades:4});
Card.Rank=enumeration({Two:2,Three:3,Four:4,Five:5,Six:6,Seven:7,Eight:8,Nine:9,Ten:10,Jack:11,Queen:12,King:13,Ace:14});
//牌面文本
Card.prototype.toString=function(){
return this.rank.toString()+'of'+this.suit.toString();
};
//比较大小
Card.prototype.compareTo=function(that){
if(this.rank<that.rank) return -1;
if(this.rank>that.rank) return 1;
return 0;
};
//玩法规则排序函数
Card.orderByRank=function(a,b){return a.compareTo(b);};
//桥牌方法排序
Card.orderBySuit=function(a,b){
if(a.suit<b.suit) return -1;
if(a.suit>b.suit) return 1;
if(a.rank<b.rank) return -1;
if(a.rank>b.rank) return 1;
return 0;
}
//定义标准扑克
function Deck(){
var cards=this.cards=[];
Card.Suit.foreach(function(s){
Card.Rank.foreach(function(r){
cards.push(new Card(s,r));
});
});
}
//洗牌
Deck.prototype.shuffle=function(){
var deck=this.cards,len=deck.length;
for(var i=len-1;i>0;i--){
var r=Math.floor(Math.random()*(i+1)),temp;
temp=deck[i],deck[i]=deck[r],deck[r]=temp;
}
return this;
};
//发牌
Deck.prototype.deal=function(n){
if(this.cards.length<n) throw 'Out of cards';
return this.cards.splice(this.cards.length-n,n);
};
//创建扑克牌，洗牌发牌
var deck=(new Deck()).shuffle();
var hand=deck.deal(2).sort(Card.orderBySuit);
9.6.5方法借用
//方法的泛型实现
var generic={
//返回字符串包含构造函数名字
//非继承来的、非函数属性的名字和值
toString:function(){
var s='[';
//属性名字非标准，并不全可用
if(this.constructor&&this.constructor.name)
s+=this.constructor.name+':';
//枚举非继承和非函数的属性
var n=0;
for(var name in this){
if(!this.hasOwnProperty(name)) continue;
var value=this[name];
if(typeof value==='function') continue;
if(n++) s+=',';
s+=name+'='+value;
}
return s+']';
},
//比较原始值
equals:function(){
if(that==null) return false;
if(this.constructor!==that.constructor) return false;
for(var name in this){
if(name==='|objectid|') continue; //跳过特殊属性
if(!this.hasOwnProperty(name)) continue;
if(this[name]!=that[name]) return false;
}
return true;
}
};
9.6.7构造函数的重载和工厂方法
//类方法返回类的实例
//极坐标初始化
Complex.polar=function(r,theta){
return new Complex(r*Math.cos(theta),r*Math.sin(theta));
};
//数组初始化Set
Set.fromArray=function(a){
s=new Set();
s.add.apply(s,a);
return s;
};
9.7.1定义子类
//定义子类
function defineSubclass(superclass,//父类构造函数
constructor,//子类构造函数
methods,//实例方法，复制到原型中
statics)//类属性，复制到构造函数
{
//建立子类原型
constructor.prototype=inherit(superclass.prototype);
constructor.prototype.constructor=constructor;
if(methods) extend(constructor.prototype,methods);
if(statics) extend(constructor,statics);
return constructor;
}
Function.prototype.extend=function(constructor,methods,statics){
return defineSubclass(this,constructor,methods,statics);
};
//简单的子类
function SingletonSet(member){
this.member=member;
}
SingletonSet.prototype=inherit(Set.prototype);
extend(SingletonSet.prototype,{
constructor:SingletonSet,
add:function(){throw 'read-only set';},
remove:function(){throw 'read-only set';},
size:function(){return 1;},
foreach:function(f,context){f.call(context,this.menber);},
contains:function(x){return x===this.member;} ,
equals:function(that){return that instanceof Set&&that.size()==1&&that.contains(this.member)}
});
9.7.2构造函数和方法链
//NonNullSet是Set子类，成员不是null和undefined
function NonNullSet(){
Set.apply(this,arguments);
}
NonNullSet.prototype=inherit(Set.prototype);
NonNullSet.prototype.constructor=NonNullSet;
//重写add,检查null和undefined
NonNullSet.prototype.add-function(){
for(var i=0;i<arguments.length;i++)
if(arguments[i]==null)
throw new Error("Can't add null or undefined to a NonNullSet");
//调用父类add执行插入
return Set.prototype.add.apply(this,arguments);
};
//类工厂和方法链
function filteredSetSubclass(superclass,filter){
//子类构造函数
var constructor=function(){
superclass.apply(this,arguments);
};
var proto=constructor.prototype=inherit(superclass.prototype);
proto.constructor=constructor;
proto.add=function(){
for(var i=0;i<arguments.length;i++){
var v=arguments[i];
if(!filter(v)) throw ('value'+'rejected by filter');
}
superclass.prototype.add.apply(this,arguments);
};
return constructor;
}
9.7.4类的层次机构和抽象类
//函数用于抽象方法
function abstractmethod(){throw new Error('abstract method');}
//AbstractSet类定义抽象方法contains()
function AbstractSet(){throw new Error("Can't instantiate abstract classes");}
AbstractSet.prototype.contains=abstractmethod;
//NotSet是AbstractSet非抽象子类
var NotSet=AbstractSet.extend(
function NotSet(set){this.set=set},
{
contains:function(x){return !this.set.contains(x);},
toString:function(x){return '~'+this.set.toString();},
equals:function(that){
return that instanceof NotSet&&this.set.equals(that.set);
}
}
);
//AbstractEnumerableSet是AbstractSet抽象子类
var AbstractEnumerableSet=AbstractSet.extend(
function(){throw new Error("Can't instantiate abstract classes");},
{
size:abstractmethod,
foreach:abstractmethod,
isEmpty:function(){return this.size()==0;},
toString:function(){
var s='{',i=0;
this.foreach(function(v){
if(i++>0) s+=',';
s+=v;
});
return s+'}';
},
toLocaleString:function(){
var s='{',i=0;
this.foreach(function(v){
if(i++>0) s+=',';
if(v==null) s+=v;
else s+=v.toLocaleString();
});
return s+='}';
},
toArray:function(){
var a=[];
this.foreach(function(v){a.push(v);});
return a;
},
equals:function(that){
if(!(that instanceof AbstractEnumerableSet)) return false;
if(this.size()!=that.size()) return false;
try{
this.foreach(function(v){if(!that.contains(v)) throw false;});
return true;
}catch(x){
if(x===false) return false;
throw x;
}
}
});
//SingletonSet是AbstractEnumerableSet非抽象子类
var SingletonSet=AbstractEnumerableSet.extend(
function SingletonSet(member){this.member=member;},
{
contains:function(x){return x===this.member;},
size:function(){return 1;},
foreach:function(f,ctx){f.call(ctx,this.member);}
}
);
//AbstractWirtableSet是AbstractEnumerableSet抽象子类
var AbstractWritableSet=AbstractEnumerableSet.extend(
function(){throw new Error("Can't instantiate abstract classes");},
{
add:abstractmethod,
remove:abstractmethod,
union:function(that){
var self=this;
that.foreach(function(v){self.add(v);});
return this;
},
intersection:function(that){
var self=this;
this.foreach(function(v){if(!that.contains(v)) self.remove(v);});
return this;
},
defference:function(that){
var self=this;
that.foreach(function(v){self.remove(v);});
return this;
}
}
);
//ArraySet是AbstractWritableSet的非抽象子类
var ArraySet=AbstractWritableSet.extend(
function ArraySet(){
this.values=[];
this.add.apply(this,arguments);
},
{
contains:function(v){return this.values.indexOf(v)!=-1;},
size:function(){return this.values.length;},
foreach:function(f,c){this.values.forEach(f,c);},
add:function(){
for(var i=0;i<arguments.length;i++){
var arg=arguments[i];
if(!this.contains(arg) this.values.push(arg));
}
return this;
},
remove:function(){
for(var i=0;i<arguments.length;i++){
var p=this.values.indexOf(arguments[i]);
if(p==-1) continue;
this.values.splice(p,1);
}
return this;
}
}
);
9.8.1让属性不可枚举
(funtion(){
Object.defineProperty(Object.prototype,'objectId',{
get:idGetter,
enumerable:false;
configurable:false;
});
function idGetter(){
if(!(idprop in this)){
if(!Object.isExtensible(this))
throw Error("Can't define id for nonextensible objects");
Object.defineProperty(this,idprop,{
value:nextid++,
writable:false,
enumerable:false,
configurable:false
});
}
return this[idprop];
};
var idprop="|**objectId**|";
var nextid=1;
}());
9.8.2定义不可变的类
Object.defineProperty()和Object.defineProperties()创建属性默认false
9.8.4防止类的扩展
Object.preventExtensions()设置为不可扩展（不能添加新属性）
Object.seal()不可扩展、原有属性不可配置（不可以删除属性）
Object.freeze()不可扩展、原有属性不可配置、属性设为只读
9.8.5子类和ECMAScript5
in遍历对象成员，包括原型中的非内置成员
第6章 对象
6.1.3原型
通过关键字new和构造函数调用构造函数的prototype的值
Object.prototpye没有原型
Object.prototype 获得原型对象的引用
Object.create(对象原型)
6.1.4Object.create()
function inherit(p){
if(p==null) throw TypeError();
if(Object.create) return Object.create(p);
var t=typeof p;
if(t!='object'&&t!='function') throw TypeError();
function f(){};
f.prototype=p;
return new f();
}
6.2.3属性访问错误
不存在属性undefined
不存在对象属性报错
6.3删除属性
删除自有属性
删除父对象属性，子对象属性依然存在
删除成功或没有副作用返回true
6.4检测属性
in运算符：检查属性
hasOwnProperty()：检查自有属性
propertyIsEnumerable()：自有且可数
！==undefined 可区分undefined和null
6.5枚举属性
//跳过继承属性
for(p in o){
if(!o.hasOwnProperty(p)) continue;
}
//跳过方法
for(p in o){
if(typeof o[p]==='function') continue;
}
extend(o,p)复制
function extend(o,p){
for(pro in p){
o[pro]=p[pro];
}
return o;
}
merge(o,p)过滤存在属性复制 hasOwnProperty()
restrict(o,p)p中没有删除o属性
subtract(o,p)o删除同名属性
union(o,p)合并op
intersection(o,p)求交集
keys(o)包含可枚举自有属性
Object.keys()返回数组，自有属性组成
Object.getOwnPropertyNames()所有自有属性名称
6.6属性getter和setter
存取器属性
$是私有属性
get和set
6.7属性的特性
属性包含1个名字和4个特性
值value、可写性writable、可枚举性enumerable、可配置性configurable
属性描述符
Object.getOwnPropertyDescriptor(对象,属性)获得属性描述符
Object.defineProperty(空对象,属性,属性描述符)
Object.defineProperties(对象,映射表)
不可扩展 可编辑已有属性，不可添加
不可配置 不能修改可配置和可枚举
不可配置 不能修改getter()和setter() 不能做数据和存取器属性转换
不可配置 可写可变true不能变false
不可配置不可写 不能我修改值
可配置不可写 可修改
lookupGetter()和__lookupSetter__()获取getter和setter
defineGetter()和__defineSetter__(属性名,方法)设置
6.8.1原型属性
对象直接量 使用Object.prototype()做原型
new 使用构造函数的prototype()做原型
Object.create() 使用第一个参数或是null做原型
包含constructor属性
isPrototypeof()是否是原型链上
instanceof是否是对象实例
6.8.2类属性
classof()函数返回传递给它的任意对象的类
function classof(){
if(o===null) return 'Null';
if(o===undefined) return 'Undefined';
return Object.prorotype.toString.call(o).slice(8,-1);
}
6.8.3可扩展性
Object.esExtensible()判断独享是否可扩展
Object.preventExtensions()设置对象不可扩展
Object.seal()设置对象不可扩展
Object.isSealed()判断是否封闭
Object.freeze()冻结对象
Object.isFrozen()判断是否冻结
6.9序列化对象
JSON.stringify()序列化，转化为字符串
JSON.parse()还原对象
函数、RegExp、Error对象和undefined不能序列化
第10章 JavaScript MV* 模式
MVC（模型-视图-控制器）
MVP（模型-视图-表示器）
MVVM（模型-视图-视图模型）
10 MVC
业务数据（Model）与用户界面（View）隔离，（Controller）仍然管理逻辑和用户输入
模板
jsx、handlebars.js、Mustache、underscore
View位于架构智商，与Controller相邻。Model位于Controller之下，View直接访问Model，带来安全性和性能成本
10.5 MVP
是MVC的一种衍生模式，专注于改进表示逻辑
P表示器，是一个包含用于View（视图）的用户界面业务逻辑的组件
命令式
Controller作用被Presenter替代，表示器和View位于同一位置，监听View和Model的事件，并调节他们之间的行动。
与MVVM不同，没有将View绑定至ViewModel的机制，依赖每个View实现用于让Presenter与View进行交互的接口
10.6 MVVM
优点
- 使得UI和为UI提供驱动的行为模块的并行开发变得更容易
- View抽象化，减少代码背后所需的业务逻辑量
- 声明式更难调试
缺点： - 需要ViewModel与View之间进行解释，带来性能成本
允许我们创建Model的特定于View的子集，包含状态和逻辑信息，无需向View暴露整个Model
与MVP不同，引用View不需要ViewModel，View绑定到ViewModel上的属性，View抽象后背后的代码所需要逻辑更少
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.