JS基本知识点回顾（Ⅳ）

2018-06-26 本文已影响0人凛冬已至_123

本文用于复习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 就是这么简单，这就是 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')

跨域

闭包

函数连同它作用域链上的要找的这个变量，共同构成闭包
具体详情查看链接
闭包介绍

JS基本知识点回顾（Ⅳ）

BOM

浏览器存储（简介）

ajax

搭建服务器

跨域

闭包

猜你喜欢

热点阅读