本文用于复习JS相关知识点，相当于知识简单的梳理. So, It's not be Detailed introduction
BOM
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
此处只复习2点
- windows对象
BOM 的核心是window对象，它表示浏览器的一个实例。在浏览器中，即是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这就意味着在网页中定义的任意变量、函数、对象都是以window作为Global对象。
所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法
var age = 24;
function printName(){
console.log(age);
}
console.log(window.age);
window.printName();
- window属性-navigator
Window对象的navigator属性，指向一个包含浏览器相关信息的对象。
navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"
浏览器存储（简介）
- cookie
-
Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。
-
浏览器需要保存这段数据，不得轻易删除。
-
此后每次浏览器访问该服务器，都必须带上这段数据。
Cookie 就是这么简单，这就是 Web 开发里 Cookie 的含义。
- 如何使用 Cookie
Cookie 一般有两个作用。
第一个作用是识别用户身份。
比如用户 A 用浏览器访问了 http://a.com，那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」（这就是 Cookie）。当 A 再次访问 http://a.com 的其他页面时，就会附带上「uid=1」这段数据。
同理，用户 B 用浏览器访问 http://a.com 时，http://a.com 发现 B 没有附带 uid 数据，就给 B 分配了一个新的 uid，为2，然后返回给 B 一段数据「uid=2」。B 之后访问 http://a.com 的时候，就会一直带上「uid=2」这段数据。
借此，http://a.com 的服务器就能区分 A 和 B 两个用户了。
第二个作用是记录历史。
假设 http://a.com 是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「uid=1; cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。
这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie。
借此，就达到里记录用户操作历史的目的了。
- session
当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就使用了session保存状态。用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。
创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。 二者不是同一维度的东西。
- localStorage
- localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
- 不参与网络传输。
- 一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。
ajax
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互
- 如何与后端交互
- form表单提交
- ajax
- websocket
- 实现方法
- ajax
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://api.jirengu.com/weather.php', true)
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
console.log(xhr.responseText)
} else {
console.log('服务器异常')
}
}
xhr.onerror = function(){
console.log('服务器异常')
}
xhr.send()
- fetch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h2>
天气 <span class="weather"></span>
</h2>
<script>
var url = 'http://api.jirengu.com/weather.php?city=北京'
fetch(url).then(function(response){
return response.json()
}).then(function(weather){
document.querySelector('.weather').innerText = weather.results[0].weather_data[0].weather
}).catch((err)=>{
console.log('err')
})
</script>
</body>
</html>
搭建服务器
- http-server
使用 http-server node工具启动一个静态服务器 - server-mock
使用 server-mock node工具启动一个能处理静态文件和动态路由的服务器 - 手写服务器
var http = require('http')
var path = require('path')
var fs = require('fs')
var url = require('url')
function staticRoot(staticPath, req, res) {
console.log(staticPath)
console.log(req.url)
var pathObj = url.parse(req.url, true)
console.log(pathObj)
if(pathObj.pathname === '/') {
pathObj.pathname += 'index.html'
}
var filePath = path.join(staticPath,pathObj.pathname)
var fileContent = fs.readFileSync(filePath,'binary')
fs.readFile(filePath, 'binary', function(err, fileContent){
if(err) {
console.log('404')
res.writeHead('404', 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
console.log('ok')
res.writeHead(200, 'OK')
res.write(fileContent, 'binary')
res.end()
}
})
}
console.log(path.join(__dirname, 'sample'))
var server = http.createServer(function(req,res){
staticRoot(path.join(__dirname, 'sample'),req,res)
})
server.listen(8080)
console.log('visit http://localhost:8080')
跨域
闭包
函数连同它作用域链上的要找的这个变量，共同构成闭包
具体详情查看链接
闭包介绍
网友评论