ms持续更新

news/2024/7/19 13:22:08 标签: js

一、import 与 require 有哪些区别?

require/exports 是野生规范 - CommonJS
import/export 是官方规范 - ES6
使用方法:导出和引入的形式不一样
参考知乎链接

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。

参考阮一峰 ES6-模块与-CommonJS-模块的差异

个人理解
一、首先是规范不一样,一个是社区规范,一个是官方规范
二、是输出的值不一样,

  1. require/exports 输出的是个拷贝的 “ 常量 ”,外界无论怎样变,都只能拿到最初始的值( 除非导出 export 的时候使用函数的返回值 return )。
  2. import/export 输出的是引用的值,会与外界的改变的值同步更改。

三、加载时机不一样

  1. require/exports 是同步加载;
  2. import/export 是异步加载,不会造成程序阻塞;

二、说一说三次握手和四次挥手

三次握手
目的:是建立TCP连接,判断客户端和服务端的接收能力和发送能力;
原因:是为了防止因为网络等外部原因,导致多次触发请求,造成资源的浪费;
过程:

假设:【客户端:C端】 【服务端:S端】
第一次C端发送,S端接收;S端可以感知客户端的发送和服务端的接收没问题;
第二次S端发送,C端接收;C端可以感知C端的发送和接收,S端的发送没问题;但是S端不能感知C端接收是否可以;
第三次所以为了C端和S端都能感知对方的发送和接收,需要C端最后再发送一次包;【第三次的包可以携带参数】
【前两次发送包携带数据的话,容易被攻击】

四次挥手
目的:断开TCP连接
为什么要四次挥手:这是因为 tcp 的半关闭状态,服务器必须吧所有的报文发送完毕之后才可以去断开连接。

过程
第一次挥手:客户端发送一个 FIN 报文,报文中会指定一个序列号。【客户端停止再发送数据,主动关闭TCP连接】
第二次挥手:服务端收到 FIN 之后,会发送 ACK 报文,且把客户端的序列号值 +1 作为 ACK 报文的序列号值。【TCP处于半关闭状态,客户端到服务端的连接释放。】
第三次挥手:服务端发送一个 FIN 报文。【等待客户端的确认】
第四次挥手:客户端收到 FIN 之后,一样发送一个 ACK 报文作为应答。【TCP未释放掉,等待计时器设置的时间2MSL后,客户端进入closed状态。】

js_44">三、说一下js闭包

  1. 产生的原因:因为作用域的存在,函数能读取外部变量。但是外部不能读取函数内部变量。
  1. 闭包定义:闭包就是能够读取其他函数内部变量的【函数】。
  1. 场景:常用的比如说微信小程序中定义的方法函数,内部需要依赖另一个函数 通过this.setData() 来改变data,但是内部的函数this并不指向当前外部的实例。比如说setTimeout。
    解决办法:这是需要在外层的函数中定义一个 that=this; 通过调用that.setData()来进行改变data值。
  1. 优点:1. 可以读取函数内部变量。 2. 可以避免全局变量的污染
  1. 缺点一、由于被暴露出来的变量不会被垃圾回收机制回收,可能会造成页面的性能问题,ie会造成内存泄漏。(函数引用了外函数的某个变量,那么这个变量就会享受成全局变量 不会被销毁。)
    缺点二、被暴露的变量并不是函数内部的引用,外部可以直接修改内部变量。

理解参考 https://www.cnblogs.com/yujihaia/p/7459437.html
容易理解的 https://blog.csdn.net/coder_vader/article/details/78839686

Vue —— Vue —— Vue —— Vue —— Vue —— Vue —— Vue

一、vue的响应式、definePrototype、proxy

vue2 使用 object.definePrototype() 中的set和get来进行数据劫持和监听。
vue3 使用 es6 proxy() 中的代理来对数据对象进行代理。

object.definePrototype() 每次执行操作都会对熟悉进行遍历,甚至是深层遍历。
proxy 是直接对 数据对象进行代理。
所以说性能上 proxy 对更快一点。

优点:是不需要用户去操作dom 就可以完成ui制作。
缺点:object.definePrototype() 这个api是有缺陷的,不会监听新增的属性。新增的属性不能做成响应式。
缺点解决办法: Vue3 通过proxy 解决了无法监听新增属性的这个问题。

二、Vue 和 React 区别

Vue 是【数据响应式】的ui框架、它的核心思想是将所有数据放入一个对象当中、用户操作这个对象,它就会改变数据,同时监听改变,从而去更改视图

React 同样是UI框架、它的核心思想是【All in Js】 框架本身提供了Jsx语法,使用函数表示组件、向函数中传入数据,这个函数就会把对应的数据渲染到组件;但是传入的数据必须是单向数据流、如果需要更新视图,需要传入新的数据,组件会根据新的数据生成新的UI,通过dom diff来判断需要更新的视图。


Vue 的特点是【数据响应式】object.definePrototype Proxy; (vue1 是 mvvm,vue2 已经弱化 局限于v-modal,)

vue 是一个 ui框架

  1. 数据响应式为核心的ui框架、
  2. 他的核心思想就是把所有数据放到一个对象里。
  3. 你去操作这个对象,对象就会改变数据
  4. 然后监听这个改变,去改变UI;

React 的特点是【函数式】纯函数、无副作用、引用透明、数据不可变。

react 是 ui框架

  1. 一个函数表示一个组件
  2. 传入数据,它就会把数据渲染到组件
  3. 传入的数据必须不可更改单向数据流。就是说如果要更新视图,不是去像vue一样去修改它、而是向函数中传入重新生成的数据、函数会生成一套新的UI、并与之前的UI进行一个dom diff。然后把需要更新的地方重新渲染

React —— React —— React —— React —— React —— React

一、React Hooks 中 useMemo 和 useCallback

相同点:两者都是为了避免因组件刷新,导致浪费资源去处理不必要重新生成变量或者函数。
不同点:
useMemo 缓存了变量,依赖变量的变化。(个人理解类似于vue中的计算属性 返回新的变量)
useCallback 缓存了函数,同样依赖变量变化,如果发生改变,才会去重新缓存函数

三、Vue2 和 Vue3 的区别

  1. 核心响应式原理不同
    v2 使用的 object.defintPropety() 对进行数据监听和劫持、
    v3 使用的es6中新增的proxy 对数据进行代理。
    这其中的不同是因为 v2 中的原理是在vue实例生成之前利用 object.defintPropety 对属性进行监听。
    这样做的弊端是,无法对vue实例新增对象属性 以及操作数据 进行响应式监听。
    好处是需要监听的属性需要在生成实例之前设置\这样做的好处是方便后期维护,读代码。
  2. vue3 新增了component api、也就是函数组件,更像是react hooks。
    函数式组件功能区分更明显 代码简洁

四、React 17、16的不同

  1. 生命周期

17 【删除】
1加载前componentWillMount、
2props变化监听componentWillReceiveProps、
3更新前componentWillUpdate
【增加】
1将props映射到组件的state上
static getDerivedStateFromProps(props, state) { // 监听props更新 }
2监听更新
getSnapshotBeforeUpdate(prevProps, prevState) { // 监听更新 }

  1. 事件委托节点
    17之前是使用document.addEventListener 将事件绑定到HTML中,17将事件绑定到了root节点上。
    在这里插入图片啊啊啊啊
  2. 16.8 发布的hooks

五、自定义 Hooks 与普通函数的之间的联系?

本质是一样的,都是将功能抽离出来。
实现上 hooks 更加灵活,因为hooks提供了多个功能接口,方便开发者对功能进行开发。

TS相关问题

在这里插入代码片

http://www.niftyadmin.cn/n/909385.html

相关文章

win7的目录和vbox的共享,linux中没有权限打开

来自于 http://www.cnblogs.com/usegear/p/5120427.html win7的目录由vbox共享是个老话题。稳拿网上很多介绍。 在linux中通过文件夹不能打开,说没有权限。 解决权限: 1、sudo adduser "用户名" vboxsf 2、然后注销重新登陆即可搞定。转载于:…

前端自动化测试 jest 基础用法

一、基础使用 js文件 main.js function baojian1(money){return money>200? 至尊享受:基本按摩 }function baojian2(money){return money>1000? 双人服务:单人服务 } module.exports {baojian1,baojian2 }测试文件 main.test.js const dabaojian require(./daba…

Mac上怎样查看.git文件、隐藏文件

一、Mac需要查看隐藏文件.git文件 展示 打开命令行 Terminal 终端;defaults write com.apple.finder AppleShowAllFiles TRUE // 默认显示苹果所有文件 truekillall Finder // 这一步相当于确定 恢复 打开命令行 Terminal 终端;defaults write com.appl…

cocos2dx 利用CCOrbitCamera实现扑克牌翻牌效果

感谢点评与关注。欢迎转载与分享。勤奋努力。持之以恒! #include "HelloWorldScene.h" #include "SimpleAudioEngine.h"using namespace cocos2d; using namespace CocosDenshion;CCScene* HelloWorld::scene() {CCScene *scene CCScene::crea…

Mac 禁止生产git追踪的 .DS_Store

.DS_Store是Mac OS保存文件夹的自定义属性的隐藏文件,如文件的图标位置或背景色,相当于Windows的desktop.ini。 1、禁止.DS_store生成:打开 “终端” ,复制黏贴下面的命令,回车执行,重启Mac即可生效。 defa…

pace.js和NProgress.js两个加载进度插件的一点小总结

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的。今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧。 N…

配置SpringMVC返回JSON遇到的坑

配置SpringMVC返回JSON遇到的坑转载于:https://www.cnblogs.com/zhujiabin/p/5125963.html

npm 和 npx 的区别

npm:Node Package(包) Manager(管理器) npx :Node Package(包) eXecute(执行) 区别一、npm是下载安装包到本地,需要手动删除。npx是下载并安装,安装完成自动删除安装包。 参考知乎链接