Day35 JQuery的跨域+深浅拷贝

一、jQuery的跨域

1.js的跨域方法

1.cors 后端技术 和前端无关

2. 服务器代理proxy

配置服务器配置文件 设定 代理的跨域地址 使用服务器代理名称 完成跨域

3.jsonp 定义一个函数

设定一个script标签 script 标签src属性 是跨域的url地址

2、jQuery的跨域方法

proxy 服务器代理 只要你配置好 服务器代理

jQuery 直接使用代理名称 就可以完成跨域请求

也就是 只要配置好服务器代理

jQuery的proxy 和原生的js的proxy是一样的程序过程

jsonp 原生js的jsonp

1.定义一个 函数设定的函数名称

这个函数是传参后端程序 后端调用的函数

2.设定一个 script 标签以及src属性

src属性 是跨域请求的url地址

       携带 参数数据  其中 cb=函数名称  是携带传参  调用函数的函数名称

3.jQuery的jsonp

     1.不用专门的定义一个函数

     jQuery使用success定义的函数      作为后端 程序调用的函数

     2.  不用定义 script标签

     设定好相关参数  jQUery来执行  定义script标签

      dateType ：'jsonp'

      jQuery 知道你要使用jsonp完成跨域

      jQuery 会执行相关的jsonp请求需要执行的设定

      定义script标签

      定义script标签 src属性

      写入script标签前

      删除script标签

     

     3.data设定 携带参数

     data中设定携带的参数   必须要删除cb=函数名称

      不是在data中定义  传参函数名称 键值对

      通过专门的属性来设定  春蚕函数名称  键值对

      4.  通过dataType 和jsonp两个属性来设定    传参函数名称  键值对

      dataType：‘jsonp’，

      告诉  jQuery程序   我们要使用Jsonp方式完成跨域

      jQuery 会执行相关的jsonp请求需要执行的设定

      定义script 标签

      定义script标签src属性

      写入script标签

      删除script标签  

      还会给sccess定义的匿名函数 定义一个函数名称，也就是 传参函数名称键值对的键值

      jsonp：‘告诉jQuery程序  后端程序 定义的 传参函数名称键值对的 键名’

      也就是  告诉jQuery程序  使用cb键名传参 jQUery定义的函数名称

二、深浅拷贝

1.含义：在引用数据类型(数组  对象)复制过程中 产生的问题

2.区别：

浅拷贝

                直接复制拷贝的是 数组/对象 的内存地址

                本质上是有一个引用数据类型

                所有的变量存储的是相同的内存地址  操作的是同一个存储空间

                任意一个变量的操作   其他变量都会受影响

               

               深拷贝

               复制拷贝的是 数组/对象 存储的数值数据

               本质上  执行几次深拷贝  就有几个独立的引用数据类型

               存储的是不同的内存地址  操作的是不同的存储空间

               一个变量 操作引用数据类型 对其他变量没有影响

               原生js  应该使用递归函数  完成  数组/对象 的深拷贝

// 变量arr1中  存储的是数组的内存地址
          const arr1 = ['北京', '天津', '上海', '武汉'];

          // 浅拷贝
          // 将变量arr1中存储的数组的内存地址 赋值给变量arr2 存储
          // 也就是 变量2 中存储的是和变量1 中存储的相同的内存地址
          // 通过其中一个变量操作数组  另一个变量也受影响
          const arr2 = arr1;

          // 深拷贝
          // 创建一个新的引用数据类型
          const arr3 = [];
          // 循环遍历arr1 将arr1中的存储获取之后  存储到arr3中
          arr1.forEach(item => {
               arr3.push(item);
          })


          // 通过arr1操作数组
          arr1[2] = '内蒙';
          // arr1 和arr2指向的是相同的存储空间
          // arr1操作之后arr1和 arr2都受影响
          console.log(arr1);
          console.log(arr2);
          // arr3是新的内存地址  知识存储的数据数值和arr1相同
          // arr1的操作是arr1 内存地址对应的存储空间
          // 和arr3的存储空间 没有关系  没有影响
          console.log(arr3);

3.jQuery的深浅拷贝比较特殊

    1，jquery中没有封装传统意义上的浅拷贝的函数

    2jQuery中封装的$.extend()默认执行的就是 传统意义上的深拷贝

    3.jQuery中的所谓的浅拷贝

    指得是  一维数据 深拷贝   二维数据浅拷贝

    4，jQUery中 深浅拷贝的语法形式

    const变量=数组/对象；

    $.extend(变量，原始数组/对象)；

    浅拷贝   一维数据深拷贝   二维数据浅拷贝

    $.extend(true,变量， 原始数组/对象)；

    深拷贝   一维数据    多唯数据都是深拷贝

    // 原始数组
          const arr1 = ['北京' , '上海' , '广州' , '重庆' , '天津' , [100,200,300,400] , {name:'张三' , age:18 , sex:'男'} ];
          //  jQuery的浅拷贝
          // 创建一个数组2
          const arr2=[];
          // 将arr中的数