html5 web相关

同域下跨窗口

1.iframe

父窗口通过contentWindow得到子窗口对象

Var myframe = doucment.getElementById(“myframe”);

myframe.contentWindow

子窗口通过parent属性获取父窗口对象

Window,parent,top三个都是窗口对象

Window：当前窗口

Parent：父级窗口

如果当前页是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象

Top：顶层窗口

2.Open方法

父窗口通过open方法的返回子窗口对象

子窗口通过opener属性得到打开当前页的窗口对象（window.opener）

跨域窗口访问

postMessage对象

接受消息的窗口对象.postMessage()

myframe.contentWindow.postMessage(‘123’,’http://www.b.com’)

一参：发送的数据，二参：接收的域

接收事件

window.addEventListener(‘message’,function(ev){

var ev = ev||window.event;

alert(ev.data);

},false);

-message

-ev.origin:发送数据来源的域

-ev.data:发送的数据

XMLHttpRequest Level 2

XMLHttpRequest改进

-请求页面与服务器页面必须属于不同的域

-服务器要设置相应头信息

-IE:XDomainRequest

-新的事件：onload等

-https://xhr.spec.whatwg.org/

进度事件

-upload.onprogress：上传

-FormData对象

-ev.total(发送的总量)、ev.loaded(待发送的总量)

WebSocket协议

基于TCP的双向的、全双工的数据链接

-双向的：客户端、服务端

-双全工：数据的发送与接收，两者同步

http协议

采用请求、响应模式，单向通讯

短链接，响应完成就断开

Nodejs服务器

Nodejs基于googleV8引擎创建的一套用来编写高性能网络服务器的ECMAScript工具包。

构建nodejs过程中遇到的两个问题

1.模块进行全局安装 require不到, 使用nmp link 模块名，也可以把全局模块的目录添加到NODE_PATH 里。当然不进行全局安装是没问题的。

2.为什么req被执行了两次，favicon.ico也被当做是一次请求，故被执行了两次,我们可以通过request.url来查看地址信息。

var http = require(“http”);

http.createServer(function(request, response) {

if(request.url !== ‘/favicon.ico’)

{

console.log(‘request received’);

response.writeHeader(200, {“Content-Type”: “text/plain”});

response.write(“Hello World”);

console.log(i++);

console.log(request.url);

response.end();

}

}).listen(8888);

console.log(‘server started’);

文件模块访问方式通过require(‘/文件名.后缀’) require(‘./文件名.后缀’) requrie(‘../文件名.后缀’) 去访问，文件后缀可以省略；以”/”开头是以绝对路径去加载，以”./”开头和以”../”开头表示以相对路径加载，而以”./”开头表示同级目录下文件，

自定义模块时exports和module.exports 区别

Note that exports is a reference to module.exports making it suitable for augmentation only. If you are exporting a single item such as a constructor you will want to use module.exports directly instead

exports仅仅是module.exports的一个地址引用。nodejs只会导出module.exports的指向，如果exports指向变了，那就仅仅是exports不在指向module.exports，于是不会再被导出。

NPM常用的命令有

1) 安装Node模块

npm install moduleNames

2) 查看当前目录下已安装的node包

npm list

3) 查看node模块的package.json文件夹

npm view moduleNames

4) 查看包的依赖关系

npm view moduleName repository.url

5) 查看包所依赖的Node的版本

npm view moduleName engines

6) 更新node模块

npm update moduleName

7) 卸载node模块

npm uninstall moudleName

Workers

普通页面js单线程执行，worker可以让web应用程序具备后台处理能力，对多线程的支持非常好。

New Worker(‘后台处理的js地址’)

利用postMessage传输数据

importScripts(‘导入其他js文件’)

var worker = new Worker('worker.js');
worker.postMessage('hello');
worker.onmessage = function(ev)
{
alert(ev.data);
}

worker.js文件

self.onmessage = function(ev){

self.postMessage(ev.data+’ world’);

}

Worker运行环境（不是所有的js语法在worker里面受到支持）

Navgator:appName、appVersion、userAgent、platform

Location:所有属性都是只读的

Self: 指向全局worker对象

所有的ECMA对象：Object、Array、Date等

XMLHttpRequest构造器

setTimeout和setInterval方法

Close()方法，立刻停止worker运行

importScripts方法

applicationCache

离线存储的好处

没网的时候，可以正常访问

快速响应页面，不必用多个http占用资源带宽

可以缓存任何文件

三个步骤

1.服务器设置头信息

–AddType text/cache-manifest.manifest（apache）

2.html标签加

–manifest=”xxx.manifest”

3.写mnifest文件：离线的清单文件

–先写：CACHE MANIFEST

–FALLBACK：第一个网络地址没获取到，就走第二个缓存的

–NETWORK：无论缓存中存在与否，均从网络获取