【无标题】4.27

最新推荐文章于 2024-10-15 15:24:52 发布

「已注销」

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量117

点赞数

分类专栏：笔记文章标签：前端

原文链接：https://shelleyhlx.blog.csdn.net/article/details/118381886?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7E

版权

笔记专栏收录该内容

68 篇文章 0 订阅

订阅专栏

vue的响应式原理

1.通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法）实现数据劫持

2.观察者模式（发布者-订阅者）
观察者(订阅者) – Watcher：
update()：当事件发生时，具体要做的事情

目标(发布者) – Dep:
①subs 数组：存储所有的观察者
②addSub()：添加观察者
③notify()：当事件发生，调用所有观察者的 update() 方法

3.当数据发生改变通过发布者订阅者模式来进行通知进行界面刷新

因此我们可以执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

vue的mvvm模

1、M：模型（Model）：对应data中的数据；
2、V：视图（View）：模板；
3、VM：视图模型（ViewModel）：Vue实例对象；

圣杯布局的几种实现方式

实现圣杯布局的5种方法 - 老oo - 博客园

浮动float

绝对定位

flex布局

表格布局table-cell

网格布局grid

清除浮动的几种方法

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

清除浮动的五种方法详解_忆弥的博客-CSDN博客_清除浮动的方法

方法一：额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

方法三：使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

css样式

方法四：使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

方法五：为父元素设置高度

缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

优点: 简单粗暴直接有效，清除了浮动带来的影响。

es6的新特性

ES6新特性-前端面试问题_粉色水杯的博客-CSDN博客_es6新特性面试题
（1）变量声明

（2）lES6 引入块级作用域，块级作用域在如下情况被创建：

（3）ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

（4）解构赋值

（5）扩展运算符

（6）rest 运算符

（7）模板字符串（template string）

（8）ES6 提供了新的语法规则来定义函数 —— 箭头函数

（9）对象简洁表示法

（10）数据结构Set

（11）数据结构 Map

（12）for...of 循环

（13）Promise对象

（14）async/await

let const 和var的区别

ES5 中作用域有：全局作用域、函数作用域。没有块作用域的概念。

ES6 中新增了块级作用域。块作用域由 { } 包括，if语句和 for语句里面的{ }也属于块作用域。

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

js判断类型的方法

1、使用 typeof

2、使用 instanceof

3、使用Object.prototype.toString.call

4、使用constructor

js的防抖节流函数
JavaScript基础 - 手写节流和防抖函数_Cyanology的博客-CSDN博客

函数防抖是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时，是常见的优化，适用于

表单组件输入内容验证
防止多次点击导致表单多次提交

等情况，防止函数过于频繁的不必要的调用。

防抖 (debounce)

短时间大量触发同一事件，只执行一次函数，实现延迟执行。
具体实现：
每次触发一个事件（比如点击按钮），都重新开始计时（重新设置计时器），
直到xx毫秒内没有下一次操作，才执行这个事件的处理程序。

节流 (throttle)

节流即每隔一个时间间隔，执行一次任务。
按照上面的思路，给出两种写法：
写法1:
这个写法与防抖很相似，区别只在于定时器的处理。

js的数据类型

1.JavaScript（以下简称js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；

2.js常用的基本数据类型包括undefined - - (未定义)、null- - (空的)、number - - (数字)、boolean- - (布尔值)、string- - (字符串)、Symbol - - (符号)；

3.js的引用数据类型也就是对象类型Object- - (对象)，比如：array - - （数组）、function - - （函数）、data - - （时间）等；

js的作用域

js作用域 - 吴小明- - 博客园

讲一下自己的项目，在开发过程中遇到的难题

在开发过程中，项目上线的过程中遇到的跨域问题分别是如何解决

当下最流行的就是前后端分离开发，前端项目和后端接口并不在同一个域名下，那么必然会出现跨域问题，这种跨域问题是出现在开发的过程中的，而部署上线出现的跨域问题是生产环境中的，与前端开发无关系，由运维人员负责，可以使用Nginx反向代理，在此不做介绍。
关于开发环境中的跨域问题的几种解决方式如下：

jsonp（原理是动态添加一个script标签，src属性没有跨域限制，存在安全隐患，只支持get请求）
vue-cli代理(webpack反向代理配置devserver配置代理地址)
cors(后端小伙伴做跨域资源共享配置，前端设置允许携带cookie值
axios.defaults.withCredentials=true)

vue封装组件的方法

1.新建vue.js项目；2.使用Vue.extend()方法创建组件；3.使用Vue.component()方法注册组件；4.构建组件变量；5.使用组件名称标签调用组件；

vue 3.0 封装一个message提示组件

vue2.x中，可以使用 Vue.extends 来封装一个弹框，在vue 3.0中，该api已经被废除。

实现后使用方式： Message.info(‘提示’)； Message.error(‘错误’)；

vue 3.0 封装一个message提示组件_好巧.的博客-CSDN博客_vue3提示组件