前端
关注
分享
扫一扫
文章平均质量分 63
Panda-6
super
展开
-
为什么data是一个函数
一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象Vue原创 2022-02-07 18:49:15 · 1229 阅读 · 0 评论 -
JS数组的方法（面试题）
js数组的方法文章目录join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf()forEachmapfilterevery()some()join()就是把数组转换成字符串，默认的是逗号( ，)书写格式：join(" ")，括号里面写字符串 (“要加引号”),var arr = [1,2,3];console.log(arr.join()); // 1原创 2022-01-20 21:14:20 · 254 阅读 · 0 评论 -
JS数据类型、栈堆存储、typeof、变量计算-类型转换
js数据类型有哪些基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object包含Object、Array、 function、Date、RegExp。备注： 基本数据类型，又称值类型。栈堆存储值类型栈存储： 主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入原创 2022-01-19 21:08:33 · 92 阅读 · 0 评论 -
js的异步与宏任务(marcroTask)和微任务(microTask)
咱们先看道面试题让写出console.log的打印顺序console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);})console.log(400);// 100 400 300 200 201// 为什么300比200先打印原创 2022-01-19 19:47:09 · 156 阅读 · 0 评论 -
JS》》一招让你明白什么是垃圾回收机制和内存泄露（面试）
垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变原创 2022-01-15 20:04:25 · 113 阅读 · 0 评论 -
this 指向 理论总结（面试常问）
this5大调用场景：1.普通函数2.对象方法3.call、apply、bind4.class5.箭头函数普通函数中的this function fn(){ console.log(this); } fn(); //相当于下面的window.fn(); window.fn();window调用了fn，所以this指向window对象方法中出现this let a={ name:'李四', run:function(){原创 2022-01-15 19:43:01 · 514 阅读 · 0 评论 -
闭包概念及面试题
如何产生闭包(closure)闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。//根据定义，包含变量的函数就是闭包也就是函数嵌套函数就可以称之为闭包.作用域应对的特殊情况，有两种表现：函数作为参数被传递函数作为返回值被带回函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系闭包的应用场景闭包应用场景1，封装对象的私有属性和方法隐藏数据做一个简单的缓存工具// 闭包隐藏数据，只提供 APIfunction creat原创 2022-01-15 14:57:34 · 1566 阅读 · 0 评论 -
JS作用域、作用域链、自由变量(面试题)
作用域作用域：就是一个变量可以使用的范围作用域分为全局作用域、函数作用域、块级作用域(es6)js中有一个最外层的作用域，全局作用域js中可以通过函数来创建一个独立作用域称为函数作用域es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）作用域链作用域链自由变量的向上级作用域一层一层查找，直到找到为止，直至找到全局作用域，就形成了作用域链变量提升(预解析)var声明的变量和function声明的函数都存在变量提升,而let const 不原创 2022-01-14 16:29:56 · 148 阅读 · 0 评论 -
JS原型与原型链（面试题）
原型原型分为两种prototype每一个函数都会有prototype属性,被称为显式原型。__proto__每一个实例对象都会有__proto__属性,其被称为隐式原型。constructor每一个prototype原型上都会有一个constructor属性,指向它关联的构造函数。原型链获取对象时，如果这个对象身上本身没有这个属性时，它就会去他的原型__proto__上去找,如果还找不到,就去原型的原型上去找…一直找到最顶层(Object.prototype)为止，Ob原创 2022-01-14 16:13:28 · 6025 阅读 · 0 评论 -
绝对好用的 vue-cli4项目打包优化（10MB变500KB）
一、项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。二、配置 alias 别名使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。//加载path模块const path = require('path')//定义resolve方法，把相对路径转换成绝对路径const resolve = dir => path.原创 2022-01-13 21:03:17 · 430 阅读 · 0 评论 -
前端常见的浏览器兼容性 问题完美解决方案
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容览器内核（渲染引擎）Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、 css 兼容1. 不同浏览器的标签默认的margi.原创 2022-01-12 20:57:24 · 825 阅读 · 0 评论 -
H5和C3新特性(完整版)
css3新特性选择器背景和边框文本效果2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)1.选择器:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */（fer斯特）:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled /* 选择原创 2022-01-11 16:48:33 · 2087 阅读 · 0 评论 -
CSS Hack
什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器比如说:1. 条件Hack<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style> .test{color:red;}<原创 2022-01-11 16:26:01 · 143 阅读 · 0 评论 -
代码中link与@import的区别
<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px;原创 2022-01-11 16:07:58 · 143 阅读 · 0 评论 -
src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...原创 2022-01-11 16:03:20 · 353 阅读 · 0 评论 -
常用的(块级元素、行内元素、空元素)
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strong块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素(没有内容) <br> <hr> <img&.原创 2022-01-11 15:51:55 · 244 阅读 · 0 评论 -
页面中常用到的布局 （两栏布局、圣杯布局、双飞翼布局 ）
1. 两栏布局,左边定宽，右边自适应左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响<!--html--><div id="left">左边定宽</div><div id="right">右边自适应</div>//css #left{ float: left; width: 200px; background: green;}#right{ overflow: h原创 2022-01-11 00:15:34 · 381 阅读 · 0 评论 -
flex布局
1、什么是flex布局flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思2、为什么我们需要 flex?解决元素居中问题自动弹性伸缩，合适适配不同大小的屏幕，和移动端3、flex 常用的属性都有哪些flex-direction 主轴方向 最常使用flex-wrap 主轴一行满了换行最常使用justify-content 主轴元素对齐方式最常使用align-items 交叉轴元素对齐方式//单行最常使用flex-flow原创 2022-01-09 20:55:14 · 1465 阅读 · 0 评论 -
让元素居中的三种方法
面试题如何让一个元素水平垂直居中?demo结构如下 <div id="box"> <div id="x"></div> </div>父相自绝后，子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%)最常用方法 #box{ width: 400px; height: 400px; background: red.原创 2022-01-07 20:54:49 · 619 阅读 · 2 评论 -
Position知识点总结
position的含义是指定位类型，值分别可以是：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。position: static(默认）static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.position:relative(相对定位)此处的相对并不是相对于哪个父div或子div，相对只是相对于自身原本的.原创 2022-01-07 20:50:06 · 137 阅读 · 0 评论 -
盒模型、BFC、清除浮动
文章目录一、盒模型什么是盒模型盒子模型有哪两种标准和怪异模型的转换JS盒模型二、BFC什么是BFC如何触发BFC？一、盒模型什么是盒模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。盒子模型有哪两种标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异原创 2022-01-06 00:02:31 · 356 阅读 · 1 评论