|
每天分享看到的知识点！
（1）Web Socket介绍
要创建一个新的 Web Socket, 就要实例化一个WebSocket对象并传入提供连接的URL:
let socket = new WebSocket("ws://www.example.com/server.php")
WebSocket对象没有像xhr一样的readystatechange事件，可以监听状态的变化。而是有与不同状态对应的其他事件。readyState值从0开始
- WebSocket.OPENING (0): 连接正在建立
- WebSocket.OPEN (1) : 连接已经建立
- WebSocket.CLOSING (2) : 连接正在关闭
- WebSocket.CLOSE (3): 连接已经关闭
socket.close() 可以在任意时间调用，调用close()后，readyState 立即变为 2（连接正在关闭），并在关闭后变为 3 （连接已经关闭）
打开 Web Socket 之后，可以通过连接发送和接受数据。向服务器发送数据，使用 send()方法并传入一个字符串、ArrayBuffer 或 Blob:
let socket = new WebSocket("ws://www.example.com/server.php");
let stringData = "Hello world!";
let arrayBufferData = Unit8Array.from(['f', 'o', '0']);
let blobData = new Blob(['f', '0', '0']);
socket.send(stringData);
socket.send(arrayBufferData.buffer);
socket.send(blobData);
服务器向客户端发消息时，WebSocket会触发message事件
socket.onmessage = function (event) {
let data = event.data
// 对数据的一些操作
}
socket的事件监听函数：
- open: 在连接建立时触发
- error: 在连接错误时触发。连接无法存续
- close： 在连接关闭时触发
上面事件中，只有 close 事件的 event对象有额外信息。这个对象有3个额外属性： wasClean、 code、 reason
- wasClean是一个布尔值，表示连接是否干净的关闭
- code 是一个来自服务器的数值状态码
- reason是一个字符串，包含服务器发来的消息
注意： socket 现在还不支持 dom2级事件，所以只能使用dom0 级
（2）Cookie
通常，只要遵守以下大致限制，就不会在浏览器中碰到问题：
- 不超过300个cookie
- 每个cookie不超过4096字节
- 每个域不超过20个cookie
- 每个域不超过81920字节
每个域能设置的cookie总数也是受限的，但不同浏览器限制不同。例如：
- 最新版IE 和 Edge限制每个域不超过50 个cookie
- 最新版 Firefox限制每个域不超过150个cookie
- 最新版Opera 限制每个域不超过180个cookie
- Safari和Chrome对每个域的cookie数没有硬性限制
定义cookie管理类：
class CookieUtil {
static get(name) {
let cookieName = `${encodeURIComponent(name)}=`,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd > -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd))
}
return cookieValue
}
static set(name, value, expires, path, domain, secure) {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
if (expires instanceof Date) {
cookieText += `; expires=${expires.toGMTString()}`;
}
if (path) {
cookieText += `; path=${path}`;
}
if (domain) {
cookieText += `; domain=${domain}`
}
if (secure) {
cookieText += `; secure`
}
document.cookie = cookieText
}
static unset(name, path, domain, secure) {
CookieUtil.set(name, '', new Date(0), path, domain, secure)
}
}
// 设置cookie
CookieUtil.set("name", "zs");
// 读取cookie
CookieUtil.get("name"); // "zs"
// 删除cookie
Cookie.unset("name")
(3) Storage
Storage分sessionStorage 和 localStorage
- sessionStoragee为会话存储，关闭当前会话则消失
- localStorage 为本地存储，默认一直在， 需要主动去清除
这两种存储都有 setItem, getItem, removeItem方法
也可用对象方式进行赋值
sessionStorage.setitem("name", "zs");
let name = sessionStorage.getItem("name"); // "zs"
// storage 的value值会 默认转字符串
sessionStorage.age = 18
sessionStorage.age // "18"
遍历sessionStorage所有值
// 可以用for循环遍历
for (let i = 0, len = sessionStorage.length; i < len; i++) {
let key = sessionStorage.key(i)
let value = sessionStorage.getItem(key)
alert(`${key}=${value}`)
}
// 也可以for...in 遍历
for (let key in sessionStorage) {
// 不要去遍历原型属性
if (sessionStorage.hasOwnProperty(key)) {
let value = sessionStorage.getItem(key)
alert(`${key}=${value}`)
}
}
从sessionStorage中删除数据
// 使用 delete 删除值
delete SessionStorage.name
// 使用方法删除值
SessionStorage.removeItem("name")
每当Storage对象发生变化时，都会在文档中触发storage事件
- 使用属性或 setItem()设置值时
- 使用delete 或removeItem()删除值时
- 使用 clear() 时
以上三种都可触发storage事件
- domain : 存储变化对应的域
- key： 被设置或删除的键
- newValue: 键被设置的新值， 被删除为null
- oldValue: 键变化之前的值
当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发
window.addEventListener('storage', (event) => {
alert(`Storage changed for ${event.domain}`)
})
对于 sessionStorage 和 localStorage 上的任何更改都会触发 storage 事件，但 storage 事件不会区分这两者
(4) UMD 模块定义
下面是只包含一个依赖的 UMD 模块定义的示例（来源为 GitHub 上的 UMD 仓库）：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD。 注册为匿名模块
define(['moduleB'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node。 不支持严格 CommonJS
// 但可以在 Node 这样支持 module.exports 的
// 类 CommonJS 环境下使用
module.exports = factory(require('moduleB'))
} else {
// 浏览器全局上下文 （root 是 window）
root.returnExports = factory(root.moduleB)
}
})(this, function(moduleB) {
// 以某种方式使用 moduleB
// 将返回值作为模块的导出
// 这个例子返回了一个对象
// 但是模块也可以返回函数作为导出值
return {}
})
|