<html>
<head>
<!-- 告知浏览器此页面属于什么字符编码格式 -->
<meta charset='utf-8' />
</head>
<body>
<!-- 声明模板,保留页面加载时隐藏的内容 -->
<template>
<input type="text" b-model="target.name" />
<input type="text" b-model="target.age" />
</template>
<script>
var template = document.getElementsByTagName("template")[0]
var cloneNode = template.content.cloneNode(true)
document.body.appendChild(cloneNode)
/**
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)
一个 Proxy 对象由两个部分组成:target、 handler
*/
let target = {
name: null,
age: 0
}
let handler = {
get: function(target, key){
console.log('getting ' + key)
return target[key]
},
set: function(target, key, value){
console.log('setting ' + key)
document
.querySelectorAll(`[b-model="target.${key}"]`)
.forEach((item) => {
item.value = value
})
target[key] = value
}
}
let proxy = new Proxy(target, handler)
// proxy.name // 实际执行 handler.get
proxy.name = 'bear' // 实际执行 handler.set
proxy.age = 25
/**
Location 对象用于获得当前页面的地址
例:127.0.0.1:8080/index.html?id=666#home
*/
console.log(location.hostname) // 127.0.0.1:8080 主机名
console.log(location.pathname) // /index.html 路径名称
console.log(location.search) // ?id=666 搜索
console.log(location.hash) // #home 锚
// 监听 location.hash 变化
window.onhashchange = function(event){
console.log(event);
}
/**
Storage 用于在浏览器中存储和检索数据
localStorage(当浏览器被关闭时数据不会被删除)、sessionStorage(当关闭浏览器标签页时数据会丢失)
*/
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOiIyMDIyLTAxLTAxIDAwOjAwOjAwIiwidXNlcm5hbWUiOiJiZWFyIn0.i7HQ9kmPGKK2lVslgbhnPJ6_ltftNAykM9QgT0yL3HY'
localStorage.setItem('token', token)
console.log(localStorage.getItem('token'))
// localStorage.removeItem("token");
/**
Promise 对象代表了未来将要发生的事件
*/
const promise = new Promise((resolve, reject) => {
const req = new XMLHttpRequest()
req.open('GET', '/index.json', true); // 请求方法、请求地址、异步执行
req.withCredentials = true
req.setRequestHeader('Authorization', localStorage.getItem('token'))
req.setRequestHeader('Cache-Control', 'no-cache')
req.onload = function () {
if (req.status === 200) {
resolve(req.responseText)
} else {
reject(new Error(req.statusText))
}
};
req.onerror = function () {
reject(new Error(req.statusText))
}
req.send()
})
promise.then(function(val) {
console.log(val) // 异步操作成功的处理
}, function(val) {
console.log(val) // 异步操作失败的处理
})
/**
Fetch 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求
fetch使用了Promise
*/
fetch('/index.json', {
method: 'GET', // GET、POST、PUT、DELETE
credentials: 'include',
headers: {
'Authorization': localStorage.getItem('token')
},
cache: 'no-cache' // Cache-Control: max-age=0
}).then(function(response){
return response.json() // 把接收到的内容转换为JSON并返回Promise
}).then(function(result){
console.log(result)
})
/** History 对象包含浏览器历史 */
/** WebScoket 全双工协议 */
</script>
</body>
</html>
【无标题】
最新推荐文章于 2024-08-30 11:49:51 发布