【无标题】

最新推荐文章于 2024-08-30 11:49:51 发布

bear_cab

最新推荐文章于 2024-08-30 11:49:51 发布

阅读量576

点赞数

分类专栏： 2022 文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/phone13144830339/article/details/122605082

版权

2022 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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>

bear_cab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

<html> <head>  <meta charset='utf-8' /> </head> <body>  <template> <input type="text" b-model="target.name" /> <input type="text.
复制链接

扫一扫

专栏目录