三、javaScript 系列 ⭐⭐⭐⭐⭐
1、闭包?
闭包就是能够读取其他函数内部变量的函数,闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
闭包的特性:
- 函数内再嵌套函数
- 内部函数可以引用外层的参数和变量
- 参数和变量不会被垃圾回收机制回收
说说你对闭包的理解:
- 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念
- 闭包 的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中
- 闭包的另一个用处,是封装对象的私有属性和私有方法
好处:能够实现封装和缓存等;
坏处:就是消耗内存、不正当使用会造成内存溢出的问题
使用闭包的注意点:
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露
解决方法是,在退出函数之前,将不使用的局部变量全部删除
比如常见的防抖节流
// 防抖 function debounce(fn, delay = 300) { let timer; //闭包引用的外界变量 return function () { const args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }
使用闭包可以在 JavaScript 中模拟块级作用域
function outputNumbers(count) { (function () { for (var i = 0; i < count; i++) { alert(i); } })(); alert(i); //导致一个错误! }
闭包可以用于在对象中创建私有变量
var aaa = (function () { var a = 1; function bbb() { a++; console.log(a); } function ccc() { a++; console.log(a); } return { b: bbb, //json结构 c: ccc, }; })(); console.log(aaa.a); //undefined aaa.b(); //2 aaa.c(); //3
2、说说你对作用域链的理解?
- 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的
- 简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期
3、?
4、?
5、?
四、vue 系列 ⭐⭐⭐
1、?
2、?
3、?
4、?
5、?
五、react 系列 ⭐⭐⭐
1、React 事件机制?
<div onClick={this.handleClick.bind(this)}>点我</div>
React并不是将dlick事件绑定到了div的真实DOM上,而是在document外监听了所有的事件,当事件发生并目冒泡到document外的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。
除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件(SyntheticEvent)。因此如果不想要是事件冒泡的话应该调用event,preventDefault0方法,而不是调用event.stopProppagation0方法
2、?
3、?
4、?
5、?
六、webpack 系列 ⭐⭐⭐
1、webpack的构建流程以及属性?
Webpack是一个流行的前端打包工具,用于将多个JavaScript文件和其他资源合并成一个或多个生产环境中使用的bundle.js文件。下面是Webpack的构建流程以及常见的属性:
1.构建流程:
Webpack主要分为以下几个步骤:
- 解析配置文件:Webpack会读取用户提供的配置文件,根据配置信息进行后续操作。
- 解析模块依赖:Webpack会解析所有模块之间的依赖关系,并生成依赖关系图。
- 加载模块:Webpack会根据依赖关系图,加载各个模块。
- 转换代码:Webpack可以通过loader来对各个模块进行转换,比如将ES6代码转换为ES5代码。
- 生成代码块:Webpack会根据代码之间的依赖关系,生成一些代码块,每个代码块包含一个或多个模块的代码。
- 输出文件:Webpack会将所有生成的代码块合并成一个或多个输出文件。
2.属性:
Webpack的一些常见属性如下:
- entry:入口文件的路径,Webpack会从这个文件开始解析所有的依赖关系。
- output:打包生成文件的配置,其中包含文件名、输出路径等信息。
- module:配置各类模块的处理规则,通常使用不同类型的loader实现文件转换。
- resolve:配置Webpack在查找module时的优先级和缺省文件后缀名等信息。
- plugins:配置Webpack使用的插件,插件可以用于完成各种自动化工作,比如压缩文件、合并代码块等。
2、?
3、?
4、?
5、?
七、uniapp 系列 ⭐⭐
1、?
2、?
3、?
4、?
5、?
七、jquery 系列 ⭐⭐
1、jquery中 提交和.get()提交和 .get()提交和.post()提交有区别吗?
相同点:
都是异步请求的方式来获取服务端的数据;
异同点:
- 请求方式不同: 方法使用方法来进行异步请求的。.get()方法使用GET方法来进行异步请求的。 .get() 方法使用GET方法来进行异步请求的。.post() 方法使用POST方法来进行异步请求的。
- 参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
- 数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多
- 安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。
2、$(document).ready()方法和window.onload有什么区别?
- window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
- $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。
3、?
4、?
5、?
八、微信小程序 系列 ⭐⭐
1、简单描述下微信小程序的相关文件类型?
微信小程序项目结构主要有四个文件类型,如下:
- WXML可以构建出页面的结构
- WXSS 是一套样式语言,用于描述 WXML 的组件样式
- js逻辑处理,网络请求
- json小程序配置文件
- app.json作为配置文件入口,整个小程序的全局配置。
- app.js必须要有这个文件,没有会报错
- app.wxss全局页面样式设置,在app.wxss中设置的样式可以在小程序的所有页面生效
2、⼩程序怎么跟随事件传值?
在⻚⾯标签上绑定data-key = value, 然后绑定事件通过e.Target.dataset.key 来获取标签上绑定的值(他盖特)
3、⼩程序WXSS与CSS 的区别?
- wxss 背景图⽚只能引⼊外链,不能使⽤本地图⽚.
- ⼩程序可以使⽤ @import 引⼊ 外联样式⽂件,地址为相对路径.
- 尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应
4、⼩程序的双向绑定和Vue哪⾥不⼀样?
⼩程序直接使⽤this.data.key = value 是不能更新到视图当中的
必须使⽤ this.setData({ key :value }) 来更新值
5、请谈谈小程序的生命周期函数?
- onLoad(昂搂德):页面加载时触发
- onShow():页面显示/切入前台时触发
- onHide():页面隐藏/切入后台时触发
- onReady(昂芮滴):页面初次渲染完成时触发
- onUnload(昂 昂楼的):页面卸载时触发
- onPullDownRefresh(昂谱当 芮 fi屎):下拉刷新的钩子函数
- onReachBottom(昂瑞驰波特闷):上翻到底的钩子函数
6、⼩程序怎么实现下拉刷新?
⽅案 ⼀ :
在 app.json 中 将 enablePullDownRefresh【嗯a波 蒲当 芮 fi屎】设为true, 开启全局下拉刷新。
或者在 组件 json中 enablePullDownRefresh设为true, 开启单组件下拉刷新。
⽅案⼆:
scroll-view :使⽤该滚动组件 ⾃定义刷新,通过 bindscrolltoupper(版的死课肉吐破) 属性, 当滚动到顶部左边,会触发 scrolltoupper【死课肉吐破】事件,利⽤这个属性来实现下拉刷新功能。
7、bindtap和catchtap区别?
相同点:
都是小程序中的点击事件。
不同点:
bindtap 【办的泰普】不会阻⽌冒泡, catchtap 可以阻⽌冒泡。(开吃特泰普)。
8、⼩程序有哪些传递数据的⽅法?
方案一:使用全局变量
在 app.js 中的 this.globalData(阁楼博 怼特)中放⼊要存储的数据。在组件.js 头部中引⼊ const app(康搜爱普) = getApp(); 获取全局变量,然后使⽤ app.globalData.key 来进⾏获取和赋值。
方案二:使用路由
wx.navigateTo 和 wx.redirectTo(瑞迪 芮可图) 时,可以通过在 url 后拼接参数变量, 然后在⽬标⻚⾯的onLoad生命周期中,通过参数来获取传递过来的值。
方案三:使用本地存储
9、微信小程序中的路由及其区别?
wx.navigateTo(奶为 给特吐 ):保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo( 蕊德 瑞可特 吐):关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab(死维持 泰普):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.navigateBack()关闭当前页面,返回上一级页面或多级页面。wx.reLaunch():关闭所有页面,打开应用内的某个页面 (芮老吃)
10、简述一下wx:if和hidden的区别?
- wx:if 动态创建或销毁对应的UI结构
- wx:if 条件为 false,什么也不做;为true时,才开始局部渲染
- hidden 简单控制组件的显示与隐藏
- wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。频繁切换的情况下,用 hidden 更好,运行时条件不大可能改变则 wx:if较好
11、app.json全局配置⽂件描述
pages : ⽤于存放当前⼩程序的所有⻚⾯路径
window : ⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊配置
tabBar : ⼩程序底部的 Tab ,最多5个,最少2个
12、如何封装⼩程序请求
封装 wx.request 请求传递需要的参数,封装常⽤⽅法 POST , GET , 最后导出这些⽅法然后新建⼀个 api.js ⽂件,导⼊封装好的⽅法,然后调取相应的⽅法,传递数据。
总结:
在src目录中新建一个utils (噢 套死)目录,在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法,定义get和post等请求的方法,然后在get或者post请求的方法中设置wx.showToast(头斯特),然后通过wx.request来实现get或者post请求,在success(森克 赛斯)中,关闭loading (楼顶),然后通过回调的形式来返回获取的数据
最后调用的时候使用require来引入
13、简述微信小程序的运行机制?
热启动 :
假如⽤户已经打开了某个⼩程序,在⼀定时间内再次打开⼩程序的话,这个时候我们就不再需要重新启动了,这需要把我们的后台打开的⼩程序切换到前台来使⽤。
冷启动:
⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况,此时⼩程序需要重新加载启动。
14、⼩程序什么时候会主动销毁?
⼩程序在进⼊后台之后,客户端会帮我们在⼀定时间内维持我们的⼀个状态,超过五分钟会被微信主动销毁.官⽅没有明确说明什么时候销毁,不同机型表现也不⼀样,
2019年开发时:官⽅⽂档没有说明,但是经过询问⼀般指5分钟内2020年开发时:官⽅⽂档没有说明,测试安卓没有固定时间,内存⾜够的情况下,有时候⼀天了还在,有时候⼏分钟就没了
九、网络相关系列 ⭐
1、tcp为什么三次握手和四次挥手?
TCP作为一种可靠的传输协议,需要在建立连接和断开连接的过程中进行一些状态的确认和控制。因此,在TCP连接的建立和断开过程中,需要进行三次握手和四次挥手。
三次握手:
- 第一次握手:客户端向服务器端发送一个连接请求报文段(SYN)。
- 第二次握手:服务器收到请求后,向客户端回送一个收到确认报文段(ACK),并发送一个连接请求报文段(SYN)。
- 第三次握手:客户端接收到收到确认报文段后,向服务器端回送一个收到确认报文段(ACK)。
这样,双方完成了三次握手,
TCP连接建立成功。三次握手的目的是确保双方都能收到对方的消息,并且能够正确建立连接。
四次挥手:
- 第一次挥手:客户端向服务器端发送一个关闭连接的请求报文段(FIN)。
- 第二次挥手:服务器收到请求后,向客户端回送一个确认报文段(ACK)。
- 第三次挥手:服务器向客户端发送一个关闭连接的请求报文段(FIN)。
- 第四次挥手:客户端收到请求后,向服务器端回送一个确认报文段(ACK)。
完成四次挥手之后,TCP连接断开。
四次挥手的目的是确保双方都知道连接已经断开,并且释放所有的连接资源。
可以看出,TCP连接的建立和断开都需要进行一些状态的确认和控制,因此需要进行三次握手和四次挥手。这样可以保证连接的可靠性和正确性。
2、GET和POST的区别?
GET和POST是HTTP协议中常用的两种请求方法,它们有以下几点区别:
1.参数位置:
GET请求的参数是在URL中拼接,而POST请求的参数则是在请求体(body)中传递。
2.请求方式:
GET请求是通过URL向服务器请求数据,在URL中通过问号“?”传参。而POST请求是把数据放在HTTP请求体内提交给服务器。
3.请求长度:
GET请求没有请求体,因此请求长度有限制,目前大部分浏览器限制在2048个字符以内;而POST请求没有限制,但是实际情况一般由于服务器的限制而做出调整。
4.安全性:
GET请求会把参数暴露在URL上,容易受到劫持和攻击;而POST请求因为请求体的存在,相对于GET来说更加安全。
5.缓存:
GET请求可以被浏览器缓存,当下次请求相同的URL时,浏览器直接从缓存中取出数据;而POST请求不会被缓存,每次请求都需要重新传输数据。