【前端面试3+1】01闭包、跨域、路由模式

一、对闭包的理解

定义

闭包是指在一个函数内部定义的函数,并且该内部函数可以访问外部函数的变量。闭包使得函数内部的变量在函数执行完后仍然可以被访问和操作。

特点:

闭包可以访问外部函数的变量,即使外部函数已经执行完毕。闭包可以保持外部函数的作用域不被销毁,从而延长变量的生命周期。

 应用:

闭包在 JavaScript 中被广泛应用,例如用于模块化开发、事件处理、异步编程等场景。闭包可以帮助我们隐藏变量,保护数据,以及实现高阶函数等功能。

作用:

  1. 封装变量:闭包可以帮助我们封装变量,避免全局变量污染。
  2. 保持作用域:闭包可以保持外部函数的作用域,延长变量的生命周期。
  3. 实现模块化:通过闭包可以实现模块化开发,将代码组织成独立的模块。
  4. 实现高阶函数:闭包可以作为参数传递给其他函数,实现高阶函数的功能。
  5. 实现私有变量:通过闭包可以实现私有变量和方法,保护数据安全。

优点:

  1. 封装性:闭包可以帮助我们封装变量和实现数据隐藏,提高代码的安全性和可维护性。
  2. 灵活性:闭包可以让函数拥有记忆功能,保持状态,实现更灵活的编程方式。
  3. 模块化:闭包可以帮助我们实现模块化开发,将代码组织成独立的模块,提高代码的可复用性。

缺点:

  1. 内存泄漏:如果闭包中引用了大量的外部变量,可能导致内存泄漏问题,需要注意内存管理。
  2. 性能问题:闭包会增加函数的作用域链长度,可能影响函数的执行效率,需要谨慎使用。
  3. 理解难度:闭包的概念相对抽象,可能增加代码的理解难度,需要深入理解才能正确应用。
function outerFunction() {let outerVar = 'I am outer';function innerFunction() {console.log(outerVar);}return innerFunction;
}let closure = outerFunction();
closure(); // 输出 'I am outer'
```

在这个例子中,`innerFunction` 是一个闭包,可以访问 `outerFunction` 中定义的 `outerVar` 变量。

二、跨域的理解

定义:

       跨域是指在浏览器中,当前页面的域名、协议、端口和请求的目标资源的域名、协议、端口不一致时,浏览器会限制页面对资源的访问,这就是跨域。跨域是浏览器出于安全考虑而设置的限制,用于防止恶意网站获取用户的隐私信息。

如何解决跨域问题?


1. JSONP:通过动态创建 `<script>` 标签,利用 `<script>` 标签的跨域特性来获取数据。
2. CORS:跨域资源共享(Cross-Origin Resource Sharing),在服务端设置响应头,允许跨域请求。
3. 代理:通过服务器端转发请求,实现跨域访问

### 代理的原理:


代理是通过服务器端转发请求的方式解决跨域问题

具体原理如下:
1. 前端发送请求:前端将请求发送给自己的服务器,由自己的服务器代为转发。
2. 服务器接收请求:服务器接收到请求后,再向目标服务器发送请求。
3. 目标服务器响应:目标服务器响应结果后,服务器再将结果返回给前端。

        通过代理,前端请求的是自己的服务器,避免了跨域问题,而服务器之间的请求不受同源策略限制,可以正常通信。代理可以在服务器端对请求进行处理,如添加请求头、修改请求参数等,更加灵活地控制请求和响应。

总的来说,代理是一种常见的解决跨域问题的方法,通过服务器端转发请求实现前端与目标服务器之间的通信,避免浏览器的跨域限制。

三、路由模式有哪些?

  1. 哈希模式:使用 URL 中的 # 符号来标记路由,通过监听 hashchange 事件来实现路由的切换。例如:http://example.com/#/home。

  2. History 模式:利用 HTML5 的 History API,可以在不刷新页面的情况下改变 URL,实现路由的切换。例如:http://example.com/home。

四、 【算法】两数之和

给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target  的那 两个 整数,并返回它们的数组下标。

你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。

你可以按任意顺序返回答案。

1.解法一

暴力法:

int* twoSum(int* nums, int numsSize, int target, int* returnSize) {for (int i = 0; i < numsSize; ++i) {for (int j = i + 1; j < numsSize; ++j) {if (nums[i] + nums[j] == target) {int* ret = malloc(sizeof(int) * 2);ret[0] = i, ret[1] = j;*returnSize = 2;return ret;}}}*returnSize = 0;return NULL;
}作者:力扣官方题解

        代码中通过两层循环遍历整数数组nums,找到两个数的索引ij,使得这两个数的和等于目标值target。如果找到了这样的两个数,则动态分配一个包含两个整数的数组ret,将这两个数的索引存入数组中,并将结果数组的大小设为2,最后返回这个数组ret。如果未找到满足条件的两个数,则将结果数组的大小设为0,并返回NULL

2.解法二

使用哈希表

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023最新版Android studio安装入门教程(非常详细)从零基础入门到精通,看完这一篇就够了

目录 JDK安装与配置 一、下载JDK 二、JDK安装 三、JDK的环境配置 四、JDK的配置验证 Android studio安装 Android studio连接手机真机调试&#xff08;以华为鸿蒙为例&#xff09; 一、新建一个android项目 二、进入项目面板 三、配置Android Studio 四、安装手机驱…

抽象类和接口(1)(抽象类部分)

抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类. 此外还有抽象方法这个概念 …

拿到今日现货白银价格 如何开始分析?

很多投资者看到近期现货白银的强劲涨势&#xff0c;并且开户入场。但入场之后&#xff0c;他们发现对如何找到机会还不甚了解。比方说我们拿到今日现货白银价格要如何开始分析呢&#xff0c;很多新入场的投资者根本没有头绪&#xff0c;下面我们就来讨论一下相关的方法。 我们可…

函数 GetMemoryType 的理解

从开始接触Vulkan&#xff0c;有个函数一直不解&#xff0c;今日做一个记录&#xff1a; /*** Get the index of a memory type that has all the requested property bits set** param typeBits Bit mask with bits set for each memory type supported by the resource to r…

2024年3月27号PMP每日三题含答案

2024年3月27号PMP每日三题含答案 1.首席信息官告知项目经理项目使用一个公共文件共享网站的行为违反了公司的安全要求。 项目经理应在下列哪一份文件中找到这项需求&#xff1f; A.项目安全计划 B.事业环境因素 C.组织过程资产 D.项目管理信息系统 1.解析&#xff1a;C 是参考…

Java入门之数据类型

一、数据类型 基本数据类型 &#xff08;1&#xff09;如果要定义“long类型的变量要在数值后面加一个L作为后缀” &#xff08;2&#xff09;如果要定义float类型的变量的时候数据值也要加一个作为后缀 小结&#xff1a; 练习 内容&#xff1a; 姓名&#xff1a;巴巴托斯 &…

【比特币】比特币的奥秘、禁令的深层逻辑与风云变幻

导语&#xff1a; 比特币(Bitcoin)&#xff0c;这个充满神秘色彩的数字货币&#xff0c;自诞生以来便成为各界瞩目的焦点。它背后所蕴含的Mining机制、禁令背后的深层逻辑以及市场的风云变幻&#xff0c;都让人欲罢不能。今天&#xff0c;我们将深入挖掘比特币的每一个角落&…

使用 nohup java - jar 不输出nohup日志

使用 nohup 命令来运行 Java 程序&#xff0c;并且不让输出写入 nohup.out 文件&#xff0c;可以使用重定向操作符 > 将标准输出重定向到 /dev/null 文件中。这样可以将输出丢弃&#xff0c;而不会写入日志文件。下面是具体的命令&#xff1a; nohup java -jar your_progra…

docker将本地镜像pull到阿里云和registry

目录 一、上次到阿里云服务器 1、制作一个带有vim功能的Ubuntu镜像 2、在阿里云上面创建镜像仓库 3、从阿里云仓库中上传和拉取镜像 二、上传镜像到本地私有库registry 1、下载镜像docker registry 2、运行私有库registry&#xff0c;相当于本地有个私有docker hub。 3…

Rust使用feature特性和条件编译,以及常用feature使用说明

Cargo Feature 是非常强大的机制&#xff0c;可以为大家提供条件编译和可选依赖的高级特性&#xff0c;可以为你省下不少的代码量来判断操作系统和条件编译等功能。rust官方条件编译文档&#xff1a;Conditional compilation - The Rust Reference features特性 Featuure 可以…

零基础学习挖掘PHP网站漏洞

教程介绍 本套课程&#xff0c;分为三个阶段&#xff1a;第一阶段&#xff1a;基础篇 学习PHP开发的基础知识&#xff0c;对PHP常见的漏洞进行分析&#xff0c;第二阶段&#xff1a;进阶篇 实战PHP漏洞靶场&#xff0c;了解市面上的PHP主流网站开发技术&#xff0c;并对市面上…

RocketMQ 流数据库解析:如何实现一体化流处理?

作者&#xff1a;林清山&#xff08;隆基&#xff09; 前言&#xff1a; 从初代开源消息队列崛起&#xff0c;到 PC 互联网、移动互联网爆发式发展&#xff0c;再到如今 IoT、云计算、云原生引领了新的技术趋势&#xff0c;消息中间件的发展已经走过了 30 多个年头。 目前&a…

AI+云平台|全闪云底座迎战

AI融万物之势席卷而来 人工智能&#xff08;Artificial Intelligence&#xff09;&#xff0c;英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 行业特点 AI场景中80%以上是小文件&#xff0c;以非结构化数据为…

python-自动化测试- 多接口动态参数设计

什么叫做多接口的动态参数处理&#xff1f; 测试数据都放在excel中管理&#xff0c;每个接口如果有提取的数据就直接放在excel里写好&#xff0c;到时候直接读取出来做响应的提取操作即可。 电商项目&#xff1a; 购物车 token proId skuID等 需要执行多个接口 获取返回值&…

vue 隐藏导航栏和菜单栏,已解决

初始效果&#xff1a; 效果&#xff1a; 出现问题&#xff1a; 解决方法&#xff1a;

Java解决幸运数字

Java解决幸运数字 01 题目 哈沙德数是指在某个固定的进位制当中&#xff0c;可以被各位数字之和整 除的正整数。 例如 126 是十进制下的一个哈沙德数&#xff0c;因为 (126)10 mod (1 2 6) 0; 126 也是8进制下的哈沙德 数&#xff0c;因为(126)10 (176)8&#xff0c;(126)10…

第十四届蓝桥杯省赛Python组真题(未完)

AcWing 4965. 三国游戏 - AcWing 法1&#xff1a;dfs的时间复杂度是2^n 对于每一个我们有选与不选两种 //法1&#xff1a;dfs #include <bits/stdc.h> using namespace std; #define int long long #define x first #define y second typedef pair<int, int> PI…

使用docker-compose搭建wordpress博客

1、从远程仓库拉取worldpress镜像到本地 2、新建一个项目&#xff0c;然后在新建的项目目录里面新建一个docker-compose.yml模版文件。 3、编写docker-compose.yml文件 4、docker-compose up 运行项目。 5、在浏览器测试 使用docker-compose搭建wordpress博客实验成功。

Rust 实战练习 - 1. 输入,输出,环境变量,字符,字符串

目标&#xff1a; 获取程序命令行参数标准输入输出获取环境变量字符串&#xff0c;字符初步学习 cargo传递参数&#xff0c;需要加上-- use std::{env, ffi::OsString, io, io::Write};fn main() {println!("OS Env: {:?} > {:?}", env::current_dir().unwra…

VUE3——watch函数

与Vue2.x中watch配置功能一致 两个小“坑”&#xff1a; 监视reactive定义的响应式数据时&#xff1a;oldValue无法正确获取、强制开启了深度监视&#xff08;deep配置失效&#xff09;。监视reactive定义的响应式数据中某个属性时&#xff1a;deep配置有效。 //情况一&#x…