Vue、js底层深入理解笔记(二)

news2024/11/17 0:24:45

1.跨域

跨域原因 => 浏览器的同源策略 属于一种保护机制

如果没有同源策略的保护
一般用来处理登录cookie、服务端验证通过后会在响应头加入Set-Cookie字段、下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中、也就是说跳转到其他网站你也是携带Cookie过去的、就相当于你的账号被别人登录了、对方还能使用iframe获取dom节点进而获取你的账号密码

我们如何解决跨域

  1. JSONP 只支持get请求

前后端协商名称

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type='text/javascript'>
      // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。
      window.jsonpCb = function (res) {
        console.log(res)
      }
    </script>
    <script src='http://localhost:xxxx/api/jsonp?msg=helloJsonp&cb=jsonpCb' type='text/javascript'></script>
  </body>
</html>


/**
 * JSONP请求工具
 * @param url 请求的地址
 * @param data 请求的参数
 * @returns {Promise<any>}
 */
const request = ({url, data}) => {
  return new Promise((resolve, reject) => {
    // 处理传参成xx=yy&aa=bb的形式
    const handleData = (data) => {
      const keys = Object.keys(data)
      const keysLen = keys.length
      return keys.reduce((pre, cur, index) => {
        const value = data[cur]
        const flag = index !== keysLen - 1 ? '&' : ''
        return `${pre}${cur}=${value}${flag}`
      }, '')
    }
    // 动态创建script标签
    const script = document.createElement('script')
    // 接口返回的数据获取
    window.jsonpCb = (res) => {
      document.body.removeChild(script)
      delete window.jsonpCb
      resolve(res)
    }
    script.src = `${url}?${handleData(data)}&cb=jsonpCb`
    document.body.appendChild(script)
  })
}
// 使用方式
request({
  url: 'http://localhost:xxxx/api/jsonp',
  data: {
    // 传参
    msg: 'helloJsonp'
  }
}).then(res => {
  console.log(res)
})
  1. 空iframe加form
const requestPost = ({url, data}) => {
  // 首先创建一个用来发送数据的iframe.
  const iframe = document.createElement('iframe')
  iframe.name = 'iframePost'
  iframe.style.display = 'none'
  document.body.appendChild(iframe)
  const form = document.createElement('form')
  const node = document.createElement('input')
  // 注册iframe的load事件处理程序,如果你需要在响应返回时执行一些操作的话.
  iframe.addEventListener('load', function () {
    console.log('post success')
  })

  form.action = url
  // 在指定的iframe中执行form
  form.target = iframe.name
  form.method = 'post'
  for (let name in data) {
    node.name = name
    node.value = data[name].toString()
    form.appendChild(node.cloneNode())
  }
  // 表单元素需要添加到主文档中.
  form.style.display = 'none'
  document.body.appendChild(form)
  form.submit()

  // 表单提交后,就可以删除这个表单,不影响下次的数据发送.
  document.body.removeChild(form)
}
// 使用方式
requestPost({
  url: 'http://localhost:xxxx/api/iframePost',
  data: {
    msg: 'helloIframePost'
  }
})

3.CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。
在这里插入图片描述

参考文章地址

4.代理
Nginx conf配置

server{
    # 监听9099端口
    listen 9099;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;
    }    
}

参考链接地址

2. 继承

  1. 继承首先想到的是原型链继承
 //例
 // 原型链继承
  function Super(){
    this.color=['red','yellow','black']
  }

  function Sub(){
  }
  //继承了color属性 Sub.prototype.color=['red','yellow','black']
  Sub.prototype=new Super()

  //创建实例 instance1.__proto__.color
  const instance1=new Sub()
  const instance2=new Sub()
  console.log(instance1.__proto__.color===instance2.__proto__.color) //true


# new XXX()就相当于创建一个函数data XXX()里的代码指向这个data并执行一遍

例如 
  function AAA(){
    this.color=['red','yellow','black']
  }
 let a=new AAA()  ==>  let a={},  a.color=['red','yellow','black']
 
==由此得出结论原型链继承缺点 实例之间共用一个值、而且无法向构造函数Super传递值==
  1. 构造函数继承
  function Super(name,age){
    this.name=name
    this.age=age
    this.color=['red','yellow','black']
    this.sayHi=function(){
      console.log('hi',this)
    }
  }
  function Sub(){
    Super.apply(this,arguments)
    this.height=180
    //这里的apply就相当new了一下Super
    //this.name=name
    //this.age=age
    //this.color=['red','yellow','black']
    //this.sayHi=function(){
    //  console.log('hi',this)
    //}
  }
  //创建实例 
  var instance1=new Sub('xiaobai',18)
  var instance2=new Sub('xiaohei',20)
  instance1.sayHi()
  
  ==方法只能定义在构造函数中，函数无法复用==
  1. 组合继承
function Super(name,age){
    this.name=name
    this.age=age
    this.color=['red','yellow','black']
  }
 Super.prototype.sayHi=function(){
    console.log('hi')
  }
 function Sub(name,age,height){
    //继承属性
    Super.apply(this,arguments)
    this.height=height
  }
  // 继承方法(重写子类原型对象)
  //1.通过原型链继承了方法：Sub.prototype.__proto__===Super.prototype
  //2.Sub.prototype：{name: undefined, age: undefined, color: Array(3)}
  //3.Sub原型对象已经被覆盖，现在只能从原型链上找constructor，指向Super
  Sub.prototype=new Super()
 //constructor重新指向Sub
  Sub.prototype.constructor=Sub
  console.log(Sub.prototype)//{name: undefined, age: undefined, color: Array(3), constructor: ƒ}
  // 定义属于子类的方法
  Sub.prototype.sayHello=function(){
    console.log('sayHello')
  }

  //创建实例 
  var instance1=new Sub('xiaobai',25,180)
  var instance2=new Sub('xiaohei',24,170)
 
  console.log(instance1)
  
== 通过构造函数让实例拥有属于自己的属性(name,age,color等)，不会相互影响、通过原型链继承了父类的方法，实现了函数复用==
  1. 原型式继承
 function object(o){
    function F(){}
    //F.prototype={name:'ccdida',friends:['shelly','Bob']}
    F.prototype=o
    // new F() 
    //F是个构造函数，返回F的实例：1.this此时用不上 2.将实例的__proto__指向F.prototype.
    //即返回了一个实例，其__proto__指向{name:'ccdida',friends:['shelly','Bob']}
    return new F()
  }
  var person={
    name:'ccdida',
    friends:['shelly','Bob']
  }
  var person1=object(person)
  var person2=object(person)
  //object函数相当于实现了Object.Create的功能
  console.log(person1.__proto__===person) //true 
  person2.friends.push('shlimy')
  console.log(person1.friends)// ["shelly", "Bob", "shlimy"]
  ==引用类型值会共享值类型不会共享，因为在改变值类型时，相当于给自己添加了属性==
  ==当去修改引用类型的某个值时，是在修改__proto__中的对象。但如果直接给引用类型赋值，那也和值类型一样，是给自己增加了属性==
  1. 寄生式继承
 var person={
    name:'ccdida',
    friends:['shelly','Bob']
  }
  function createAnother(original){
    //clone.__proto__===original
    var clone=Object.create(original)
    //增强对象，添加属于自己的方法
    clone.sayHi=function(){
      console.log('hi')
    }

    return clone

  }
  var person1=createAnother(person)
  var person2=createAnother(person)
  person1.friends.push('shmily')
  console.log(person2.friends)//["shelly", "Bob","shmily"]
  person1.sayHi() //hi
  ==不能做到函数复用，引用类型数据依然共享==
  1. 寄生组合式继承
通过借用构造函数来继承属性（apply），通过原型链的混成形式来继承方法（Object.create）

前面的组合继承有个缺点：每次创建实例时都会调用两次超类方法，一次是通过new设置原型的时候，另一次是用apply执行的时候
 // 寄生组合继承:这个过程既实现了继承，又没有去调用Super
  function inheritPrototype(Sub,Super){
    //subPrototype.__proto__=Super.prototype
    var subPrototype=Object.create(Super.prototype)
    //subPrototype.constructor=Sub
    subPrototype.constructor=Sub
    //相当于subPrototype有__proto__和constructor两个属性
    //即：
    //Sub.prototype.__proto__===Super.prototype
    //Sub.prototype.constructor=Sub
    Sub.prototype=subPrototype
    
  }
  function Super(name){
    this.name=name
  }
  Super.prototype.sayHi=function(){
    console.log(this.name)//ccdida
  }
  function Sub(name){
    Super.call(this,name)
  }
  inheritPrototype(Sub,Super)

  Sub.prototype.sayHello=function(){
    console.log('sayHello')
  }

  var instance1=new Sub('ccdida')
  // instance1.sayHi()
  console.log(instance1.__proto__)
  console.log(instance1.__proto__.__proto__)
  
==实例通过Super.call(this,name)拿到Super中的属性（这些属性属于实例本身，不会被共享）==

==子类通过Object.create，让子类的原型对象的隐式原型（proto）指向父类的原型对象，完成方法的继承（可复用）==

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1082783.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CubeMX+BabyOS 使用方法

CubeMX+BabyOS 使用方法

MCU&#xff1a;STM32G030F 编译器&#xff1a;MDK 托管工具&#xff1a;Sourcetree CubeMX创建工程 BabyOS克隆 添加子模块 git submodule add https://gitee.com/notrynohigh/BabyOS.git BabyOS 切换dev 分支 查看当前分支 git branch -a 切换本地分支到dev git che…
阅读更多...
NSIC2050JBT3G 车规级120V 50mA ±15% 用于LED照明的线性恒流调节器(CCR) 增强汽车安全

NSIC2050JBT3G 车规级120V 50mA ±15% 用于LED照明的线性恒流调节器(CCR) 增强汽车安全

随着汽车行业的巨大变革&#xff0c;高品质的汽车氛围灯效、仪表盘等LED指示灯效已成为汽车内饰设计中不可或缺的元素。深力科安森美LED驱动芯片系列赋能智能座舱灯效充满艺术感和科技感——NSIC2050JBT3G LED驱动芯片&#xff0c;实现对每路LED亮度和颜色进行细腻控制&#xf…
阅读更多...
HTML笔记

HTML笔记

注释标签&#xff1a;<!-- --> 标题标签&#xff1a;&#xff08;作用范围依次递减&#xff09; <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 段落标签&#xff1a;<p&g…
阅读更多...
Ubuntu上安装、使用MongoDB详细教程

Ubuntu上安装、使用MongoDB详细教程

MongoDB是所有非关系型数据库中最像关系型数据库的一种存储技术&#xff0c;MongoDB中的数据结构是类似于JSON的BSON&#xff08;Binary Json&#xff09;&#xff0c;这篇文章就详细介绍如何安装和使用MongoDB。 目录 一、下载MongoDB 二、启动MongoDB 准备工作 启动方式一…
阅读更多...
流程自动化如何帮助简化安全性

流程自动化如何帮助简化安全性

正如帮助开发 IT 安全最佳实践的政府机构 NIST 所说&#xff0c;人们越来越认识到网络安全是“每个人的工作”。换句话说&#xff0c;不仅仅是 IT 组织内的技术员工必须帮助预防和检测网络安全风险。组织中的每个人&#xff0c;包括没有技术或网络安全背景的员工&#xff0c;都…
阅读更多...
深度学习笔记之优化算法(七)总结与延伸：使用Nesterov动量的RMSProp算法

深度学习笔记之优化算法(七)总结与延伸：使用Nesterov动量的RMSProp算法

深度学习笔记之优化算法——总结与延伸&#xff1a;使用Nesterov动量的RMSProp算法 引言回顾&#xff1a;优化方式区别(2023/10/11) 关于指数加权移动平均法的补充算法过程描述基于Nesterov动量的RMSProp示例代码 引言 上一节介绍了 RMSProp \text{RMSProp} RMSProp算法&#…
阅读更多...
【方法】PDF不能转换成其它格式如何解决？

【方法】PDF不能转换成其它格式如何解决？

想把PDF文件转换成其他格式&#xff0c;比如Word、PPT&#xff0c;却发现无法操作&#xff0c;这是什么情况呢&#xff1f;又该如何解决&#xff1f;下面我们一起来看看吧。 原因1&#xff1a;没有使用PDF编辑器 如果是在线打开PDF&#xff0c;或者使用PDF阅读器打开PDF&…
阅读更多...
C++ opencv实现letterbox

C++ opencv实现letterbox

代码&#xff1a; #include <iostream> #include "string" #include "opencv2/opencv.hpp"cv::Mat preprocess_img(cv::Mat& img, int input_w,int input_h) {int w,h,x,y;float r_winput_w/(img.cols*1.0);float r_hinput_h/(img.rows*1.0);if…
阅读更多...
DC电源模块选用电容滤波器的注意事项

DC电源模块选用电容滤波器的注意事项

BOSHIDA DC电源模块选用电容滤波器的注意事项 DC电源模块是电子系统中的重要部件&#xff0c;常用于给各种电子设备供电。为了使输出的直流电压更加稳定&#xff0c;需要在电源模块中加入电容滤波器。电容滤波器的作用是平滑输出的直流电压&#xff0c;去除其中的纹波信号&…
阅读更多...
记录--`ElementUI` 中的奇技淫巧

记录--`ElementUI` 中的奇技淫巧

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 在ElementUI的世界中&#xff0c;不仅有基础的组件和功能&#xff0c;还有一些让你眼前一亮、*得不能再*的高级技巧和窍门。本文将揭示这些技巧&#xff0c;让你在前端开发的舞台上独领风骚。无论你是…
阅读更多...
geecg-uniapp 同源策略 数据请求 页面渲染 ui库安装（3）

geecg-uniapp 同源策略 数据请求 页面渲染 ui库安装（3）

一&#xff0c;同源策略 &#xff08;1&#xff09;要是没有env 需要创建一个替换成后端接口 &#xff08;2&#xff09;因为他封装了 先找到http请求位置 一级一级找 然后进行接口修改 都改完运行即可 &#xff08;3&#xff09;appUpdata 二&#xff0c;数据请求 &…
阅读更多...
如何在Ubuntu 20.04.6 LTS系统上运行Playwright自动化测试

如何在Ubuntu 20.04.6 LTS系统上运行Playwright自动化测试

写在前面 这里以 Ubuntu 20.04.6 LTS为例。示例代码&#xff1a;自动化测试代码。 如果过程中遇到其他非文本中提到的错误&#xff0c;可以使用搜索引擎搜索错误&#xff0c;找出解决方案&#xff0c;再逐步往下进行。 一、 环境准备 1.1 安装python3 1.1.1 使用APT安装Py…
阅读更多...
[GXYCTF2019]Ping Ping Ping - RCE(空格、关键字绕过[3种方式])

[GXYCTF2019]Ping Ping Ping - RCE(空格、关键字绕过[3种方式])

[GXYCTF2019]Ping Ping Ping 1 解题流程1.1 小试牛刀1.2 三种解法1.2.1 解法一：变量定义拼接绕过1.2.2 解法二：base64编码绕过1.2.3 解法三：内联执行绕过2 思考总结1 解题流程 1.1 小试牛刀 1、提示?ip，结合题目名称，我们直接输入?ip=127.0.0.1 PING 127.0.0.1 (127.…
阅读更多...
读书笔记-《ON JAVA 中文版》-摘要26[第二十三章 注解]

读书笔记-《ON JAVA 中文版》-摘要26[第二十三章 注解]

文章目录 第二十三章 注解1. 基本语法1.1 基本语法1.2 定义注解1.3 元注解 2. 编写注解处理器2.1 编写注解处理器2.2 注解元素2.3 默认值限制 3. 使用javac处理注解4. 基于注解的单元测试5. 本章小结 第二十三章 注解 注解&#xff08;也被称为元数据&#xff09;为我们在代码…
阅读更多...
unity URP 利用particle system制作简单的shader交互

unity URP 利用particle system制作简单的shader交互

首先这里制作了一个简单交互&#xff0c;使用shader grapgh&#xff0c;根据计算距离和变化数值的差实现交互后的扩散&#xff0c;同时计算消散遮罩让它逐渐谈去。 将他赋予材质物体&#xff0c;根据脚本传入位置和逐渐变化的大小后&#xff0c;呈现这样的效果。 但是&#xff…
阅读更多...
040：mapboxGL鼠标hover更换选中feature颜色

040：mapboxGL鼠标hover更换选中feature颜色

第040个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中通过鼠标hover的方式来更换选中feature颜色。这里面利用了mousemove和mouseleave的方法，通过选中图层的feature，来设置hover的true或者false，从而通过opacity的case状态来判断透明度用哪一个值。 直接复…
阅读更多...
6款流程图制作软件：一站式指南

6款流程图制作软件：一站式指南

流程图是一种常用的图示工具&#xff0c;可以帮助我们更清晰地表达和展示流程、流程图等内容。在今天已经变得非常普及和便捷&#xff0c;接下来本文将于大家分享6款好用的流程图软件&#xff0c;一起来看看吧&#xff01; 博思白板boardmix 博思白板boardmix是一款基于浏览器…
阅读更多...
【HTML】web worker

【HTML】web worker

Web Worker是HTML5中的一项技术&#xff0c;可以在后台运行JavaScript代码&#xff0c;以提高Web应用程序的性能并改善用户体验。它允许在独立的线程中执行耗时的操作&#xff0c;而不会阻塞主线程。 主线程是浏览器用来渲染页面、处理用户交互和执行JavaScript代码的线程。然…
阅读更多...
记录一次紧急的版本切换

记录一次紧急的版本切换

背景 由于一些特殊原因&#xff0c;需要前同事的代码。他并没有给我们后端一份他走时的src。因此这边需要拉到前同事的代码。 过程 查看版本信息 前同事和我们现在开发用的是一个gitee仓库。因此&#xff0c;我们可以看一下之前的开发线。 说白了&#xff0c;每一次提交&a…
阅读更多...
【数据结构】算法之道与实践指南：深入理解二叉树的遍历和分治思想(一)

【数据结构】算法之道与实践指南：深入理解二叉树的遍历和分治思想(一)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;数据结构 &#x1f525;该文章主要讲述二叉树的递归结构及分治算法的思想。 目录&#xff1a; &#x1f30d;前言&#xff1a;&#x1f30d;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023