javascript
javascript
晚风吹心事
来点干货吧,直面问题答案
展开
-
节流防抖简化版
节流function throttle(fn, delay) { let last = 0 // 上次触发时间 return (...args) => { const now = Date.now() if (now - last > delay) { last = now fn.apply(this, args) } }}// 测试function task() { console.log('run task')}转载 2022-01-29 14:13:40 · 102 阅读 · 0 评论 -
javascript实战笔记
1.flat() - 数组扁平化flat()会按照指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并,返回新数组let arrayOne = [0, 1, 2, [3]]arrayOne.flat() // [0, 1, 2, 3] let arrayTwo = [0, 1, 2, [[[3]]]];arrayTwo.flat(2) // [0, 1, 2, [3]]arrayTwo.flat(3) // [0, 1, 2, 3, 4] //使用 Infinity原创 2022-01-28 14:42:49 · 1154 阅读 · 10 评论 -
props接收参数定义
props: { dzpImgList: { //字符串 type: String, default: '' }, dzpImgList: { //数值 type: Number, default: 0 }, dzpImgList: { //布尔值 type: Boolean, default: true }, dzpImgList: { //数组 t...原创 2021-10-13 15:31:54 · 626 阅读 · 2 评论 -
CSS样式书写顺序以及规范
顺序1.位置属性 position, top, right, z-index, display, float 等2.大小 width, height, padding, margin3.文字系列 font, line-height, letter-spacing, color- text-align 等4.背景 background, border 等5.其他 animation, transition 等规范CSS缩写属性CSS有些属性是可以缩写的,比如padding,.原创 2021-09-15 19:49:18 · 363 阅读 · 1 评论 -
javascript短路运算
普通写法 我们根据另一个值来设置一个值不是falsy值,一般会使用if-else语句,就像这样: getList(Frazier){ let lcStr; if(Frazier){ lcStr = Frazier }else{ lcStr = 'Tom' } return lcStr }, console.log(this.getList('Frazier'));//Fr...原创 2021-08-26 14:48:57 · 1128 阅读 · 6 评论 -
TS中的数据类型
typescript中为了使写的代码更加规范,更有利于维护,增加了类型校验,ts中提供了以下类型布尔类型(boolean) true false var flag:boolean = true //必须指定类型flag = 'str' //错误写法flag = flase //正确写法 只能复制布尔型数字类型 (number) var a:number = 123 //必须指定类型a ...原创 2021-07-25 10:49:14 · 674 阅读 · 0 评论 -
window.location.href打开新窗口
window.location.href="URL"; 表示重新定向到新页面,同时刷新打开的这个页面;例子:window.location.href="http://www.baidu.com"//也可以直接放接口window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面;...原创 2021-07-24 22:05:59 · 29980 阅读 · 2 评论 -
vue 强制更新视图(视图不跟新的解决方案)
方案一:this.$set(this.obj,'key','value') //把数据放进去方案二:利用Object.assign({},this.obj)创建新对象方案三:this.$forceUpdate(); //可以直接使用**这个是强制更新 但不推荐使用调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。...原创 2021-07-24 16:29:23 · 1189 阅读 · 0 评论 -
一个项目,同时要适配移动端和pc端,你会怎么做
一般情况下:1.首先使用flex布局,把页面元素都转换成弹性盒子,2.然后通过rem去做页面细节适配.3.接着根据用户在浏览器端和手机端的屏幕大小不同使用媒体查询.根据不同的屏幕宽度做不同的样式布局展示...原创 2021-05-28 10:45:03 · 2426 阅读 · 1 评论 -
javascript文档碎片
概念:JavaScript中,文档碎片独立于DOM树之外,存在于内存中,在创建之初为一个空白的文档片段,我们可以使用createDocumentFragment来创建作用:将需要添加的大量元素 先添加到文档碎片 中,再将文档碎片添加到需要插入的位置,大大减少dom操作,提高性能。简单示例://创建100个li,只操作一次dom<body> <ul id="ul"></ul> <script type="text/javascri原创 2021-05-26 09:26:20 · 202 阅读 · 1 评论 -
十道必须要理解的javascript面试题
this关键字(指向)1.谁调用指向谁2.自己调用指向window3.当函数作为构造函数的时候 this指向构造函数实例4.call/apply/bind 强制改变this指向事件模型:事件委托、代理?如何让事件先冒泡后捕获又叫事件代理,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 先冒泡后捕获 给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为tr...原创 2021-05-20 20:33:06 · 220 阅读 · 3 评论 -
let const var 三者之间的区别
var声明变量可以重复声明,不受限于块级,可以在声明的上面访问变量,存在变量提升let变量不可以重复声明,受限于块级,有暂存死区,在声明的上面访问变量会报错const声明之后必须赋值否则会报错,定义不可变的量改变了就会报错,受限于块级,在声明的上面访问变量会报错...原创 2021-05-09 21:25:15 · 185 阅读 · 0 评论 -
面向对象
面向对象是一种编程思想(万物皆对象)与之对应的是面向过程面向对象的特点 ,也就是 封装 继承 多态封装: 低耦合高内聚多态: 重载和重写 (重写console.log = function () {})(重载,方法名相同 形参的个数或者数据类型不同 导致方法内部处理逻辑不同)继承: 子类继承父类方法和属性通过研究一些实例的属性和方法, 确定一些问题的分类 根据类的不同 而产生不同类问题的解决方案 ===> 面向对象像 js vue JQ等等本身就是基于面向对象构建出来的...原创 2021-05-09 21:24:39 · 193 阅读 · 0 评论 -
箭头函数与普通函数的区别
普通函数this指向1.谁调用指向谁2.自己调用指向window3.当函数作为构造函数的时候 this指向构造函数实例4.call/apply/bind 强制改变this指向箭头函数原理1.箭头函数的this,始终指向父级上下文2.箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向3.箭头函数内没有arguments,可以用展开运算符...解决4.箭头函数是匿名函数,不能作为构造函数,不能使用new5.箭头函数没有原型属性.原创 2021-05-09 21:23:32 · 189 阅读 · 1 评论 -
什么是跨域以及处理跨域的方案?
跨域的概念:协议、域名、端口都相同才同域,否则都是跨域目前有三种主流解决方案:1. JSONP原理: 借助了script标签 src 请求资源时, 不受同源策略的限制 优点: jsonp没有兼容性问题 缺点: jsonp只能用于get请求2 . nginx代理前后端通常通过 nginx 实现反向代理优点就是轻量级、启动快、高并发。3.CORSCORS 全称叫跨域资源共享,主要是后台工程师设置后端代码来达到前端跨域请求的优点: 功能强大支持各种 H原创 2021-05-09 21:14:21 · 243 阅读 · 0 评论 -
2021前端面试题总结(精简版)
vuev-if和v-show的区别 v-if和v-for的优先级微信小程序微信小程序生命周期 / 页面的生命周期 小程序开发与网页开发的区别 微信小程序优化原创 2021-05-08 14:07:40 · 1283 阅读 · 10 评论 -
es6 有哪些拓展
1. 新增了块级作用域(let,const)2. 提供了定义类的语法糖(class)3. 新增了一种基本数据类型(Symbol)4. 新增了变量的解构赋值5. 函数参数允许设置默认值,引入了 rest 参数,新增了箭头函数6. 数组新增了一些 API,如 isArray / from / of 方法;数组实例新增了entries(),keys() 和 values() 等方法7. 对象和数组新增了扩展运算符8. ES6 新增了模块化(import/export)9. ES6原创 2021-05-09 21:18:13 · 222 阅读 · 0 评论 -
js继承
Es5中的继承有: 原型链继承:(易于实现,创建子类实例时不能向父类构造函数传参) 父类的实例作为子类的原型,子类可以重写父类上方法 父类中私有的或者公有的属性和方法, 最后都会变成子类公有的属性和方法 call继承:(可以实现多继承,可以传参,无法复用,不能继承原型属性/方法) 复制父类的实例属性给子类,只能继承父类私有的属性和方法 组合继承 通过call继承对实例属性的继承, 原型链对原型方法的继承, 调用多次父类构造函数 Es6有class继承 .原创 2021-05-07 21:37:40 · 209 阅读 · 1 评论 -
sessionStorage localStorage cookie 的区别
localStorage 生命周期是永久,这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息,否则这些信息将永远存在。存放数据大小为一般为5MB,不参与和服务器的通信。 sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 ..原创 2021-05-07 21:31:54 · 168 阅读 · 0 评论 -
for...in 和 for...of 有什么区别
1、推荐在循环对象属性的时候,使用 for...in,在遍历数组的时候的时候使用for...of。2、for...in 循环出的是 key,for...of 循环出的是 value3、for...of 不能循环普通的对象,需要通过和 Object.keys()搭配使用...原创 2021-05-07 21:29:15 · 260 阅读 · 0 评论 -
异步和单线程
异步和单线程是相辅相成的,js是一门单线程脚本语言,所以需要异步来辅助异步和同步的区别: 异步不会阻塞程序的执行, 同步会阻塞程序的执行, 前端使用异步的场景: 定时任务:setTimeout,setInverval 网络请求:ajax请求,动态``加载 事件绑定 ...原创 2021-05-07 21:18:08 · 286 阅读 · 1 评论 -
作用域和作用域链
作用域分为 全局作用域 ,局部作用域,块级作用域js中首先有一个最外层的作用域,全局作用域; js中可以通过函数来创建一个独立作用域称为函数作用域,函数可以嵌套,所以作用域也可以嵌套; es6中新增了块级作用域(let const)1.作用域链作用域链:内部函数访问外部函数的变量,采取的是链式查找的方式来决定取哪个值,这种结构我们称作作用域链,采取就近原则...原创 2021-05-07 21:10:48 · 163 阅读 · 0 评论 -
闭包
闭包:当一个函数用到了另外一个函数的变量,那么这个变量和这个函数的环境就是闭包环境, 主要体现是通过函数嵌套或者通过作用域链的方式来实现的。优点:不会造成变量污染缺点:容易造成内存泄漏 (不再用到的内存,没有及时释放,就叫做内存泄漏)...原创 2021-05-07 21:06:33 · 207 阅读 · 0 评论 -
原型与原型链(javascript)
javascript原型与原型链 每个函数都有一个prototype属性,被称为显示原型 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 每个prototype原型都有一个constructor属性,指向它关联的构造函数。 原型链获取对象属性时,如果对象本身没有这个属性,那就会去他的原型__proto__上去找,如果还查不到,就去找原型的原型,一直找原创 2021-05-07 21:04:08 · 220 阅读 · 1 评论 -
web前端商城项目总结(下)
接下来就是组件化的开发了,还有用到的一些小的技巧!四 布局+开发首页 ==》页面的布局+基本数据的渲染 ,这里页面的头部和底部是贯穿全文的,主要就是用过头部的导航进行页面切换的,内容商品上就是用过router.push去跳转了,还有一些css3动画登陆注册 ==》这里用到的正则匹配商品分类 ==》导航数据和商品数据的获取渲染 ,稍微难一点的就是导航数据跟商品数据的同步切换,是用变量下边同步切换的形式去解决的订单列表,我的收藏页面等等.. ==》这里就是从接...原创 2021-05-02 20:56:30 · 1041 阅读 · 0 评论 -
web前端商城项目总结(上)
项目架构(确定使用框架)首先是用的Vue框架进行组件化开发,Element框架支撑,js,css,html的代码逻辑通过ajax进行接口的请求调用,达到获取服务器数据的目的。再完美的渲染的页面。项目前(定制开发规范) 团队协作/开发 规范/统一 开发规范 命名规范 (方法名,变量名 。。) 封装规范 (功能,参数,返回值,如何使用 。。。) 项目规范(主要模块,功能模块 ,...原创 2021-05-02 19:56:54 · 2165 阅读 · 2 评论 -
DocumentFragment文档碎片
<ul id="ulBox"> <li>嘿嘿嘿</li> <li>嘿嘿嘿</li> <li>嘿嘿嘿</li> <li>嘿嘿嘿</li> </ul> let ul = document.getElementById("ulBox"); //获取ul元素 console.log(ul.childNodes); //查看u...原创 2021-04-26 07:28:26 · 394 阅读 · 0 评论 -
断点调试(学会如何去读前端代码)
四步四张图让你上手断点调试!!!!1.去哪进行断点调试2 .如何打断点3.如何操作断点进行查看4.查看元素的意义原创 2021-04-23 11:55:58 · 446 阅读 · 0 评论 -
Node.nodeType节点
常用的节点类型文档节点document9元素节点element1属性节点Attr2文本节点text3注释节点comment8示例:获取一行注释节点<body> <input id="ipt" type="text" placeholder="请输入你的用户名"> <!--这是一行注释,请勿删除--></body></html><s...原创 2021-04-22 11:38:26 · 775 阅读 · 3 评论 -
如何判断字符串中是否有数字
这是一个真实的前端面试题,点进来的可以仔细的看一下! //字符串特别长如何判断字符串中有数字 var arr = "qwd3kRnn2rasdtry5gdb7"; //方法一 var arr = /\d/.test(arr); console.log(arr); //true //方法二 for (var i = 0; i < arr.length; i++) { var num = Number(arr[i]); // var num.原创 2021-04-16 17:35:51 · 894 阅读 · 0 评论 -
事件委托(详解)
事件委托就是利用事件冒泡。指定一个事件的处理程序,就可以管理某一类型所有的时间。在绑定大量事件的时候往往选择事件委托。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume原创 2021-04-11 18:19:27 · 653 阅读 · 2 评论 -
javascript事件类型大全
键盘事件onkeydown:按下某个键就会触发onkeyup:释放某个按键时触发onkeypress:某个键按下或者按住时触发鼠标事件onclick:鼠标单击时触发ondbclick:鼠标左击时触发ondblclick:鼠标双击事件onmousedown:单击任意一个鼠标按键时触发onmouseout:鼠标指针移出一个元素时触发onmousemove:鼠标指针在某个元素上移动时触发onmouseup:松开鼠标任意一个按键时触发onmouseover:鼠标指针移动到一个元素时触发原创 2021-04-09 11:37:47 · 784 阅读 · 4 评论 -
如何使用正则判断状态码
判断状态码是否为2xxif(/^2\d{2}$/.test(xhr.status)){ //成功后执行的时间}4xx或5xx 直接抛出错误if(/^(4|5)\d{2}$/.test(xhr.status)){ //抛出错误}原创 2021-04-08 15:29:24 · 935 阅读 · 3 评论 -
什么是地狱回调?解决回调地狱的两种方法
地狱回调概念:回调函数套回调函数的情况就叫做回调地狱, //地狱回调 setTimeout(function () { //第一层 console.log('武林要以和为贵'); setTimeout(function () { //第二程 console.log('要讲武德'); setTimeout(function () { //第三层 console.log('原创 2021-04-08 11:41:16 · 9171 阅读 · 7 评论 -
利用惰性思想进行浏览器兼容处理
首先要学会如何获取当前浏览器信息window.navigator.userAgent每次都判断兼容: 利用惰性思想进行浏览器兼容处理function getXhr() { let arr = [ function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, function () { return new ActiveX..原创 2021-04-06 17:05:50 · 123 阅读 · 1 评论 -
CSS实现元素垂直水平居中的三种方式
第一种方式已知宽高:div{ width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; background: #f00;}第二种方式未知宽高:div{ width: 200px; height: 200px; position: abso原创 2021-04-05 14:38:24 · 115 阅读 · 0 评论 -
Vue中通过sort方法实现快速排序
技术:通过sort方法可以实现id ,价格 等等想要的快速排序方法。<template> <div> <div> <input type="text" placeholder="商品名称" v-model="queryInfor.name" /> </div> <table> <tr> <th>编号 //v-if 就是当变原创 2021-03-31 19:04:47 · 15519 阅读 · 4 评论 -
Vue.js模糊搜索
技术:主要利用数组filter过滤方法,和ES6中的includes实现模糊搜索。```javascript<template> <div> <div> <input type="text" placeholder="商品名称" v-model="queryInfor.name" />//首先绑定数据 </div> <!--数据区域--> <table> &l原创 2021-03-31 18:18:11 · 194 阅读 · 0 评论 -
什么是变量提升?
首先javascript引擎的工作方式,是先解析代码,获取所有被声明的变量,然后在一行一行的运行。这造成的结果就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。console.log(a) //undefinedvar a = 1;function b(){ console.log(a) }b() //1//执行代码顺序://第一步:将var a = 1; 拆分为 var a = undefined 和 a = 1//第二步:将var a = undefine.原创 2021-03-30 11:34:51 · 2365 阅读 · 2 评论 -
什么是伪数组?以及伪数组转数组的方法
概念:伪数组是一个 Object,而真实的数组是一个 Array,具体的来说:伪数组是一个对象、具有length属性、按照索引方式存储数据、不具有数组的push,pop等方法…经典伪数组arguments 是一个类数组对象,代表传给一个function的参数列表,是参数的集合,扩展操作符可以将 arguments 展开成独立的参数。常用的伪数组转数组的方法1.Array.prototype.slice.call( 数据 ) //将伪数组obj转换成newarr数组 var obj ={原创 2021-03-26 11:27:05 · 1491 阅读 · 0 评论