笔记
文章平均质量分 66
牛牪犇0
这个作者很懒,什么都没留下…
展开
-
深入理解 JavaScript Promise
本文对JavaScript中的Promise进行了深入的介绍,包括基本概念、使用方法和进阶应用。Promise提供了一种优雅的方式来处理异步操作,使得代码更加清晰、可读和可维护。掌握Promise的使用方法和技巧,将帮助前端开发人员更好地处理异步代码,并提升代码质量和开发效率。原创 2023-06-14 09:56:16 · 5479 阅读 · 0 评论 -
深入理解JavaScript模块化开发
随着JavaScript应用程序的复杂性不断增加,模块化开发成为了一种必备的技术。通过将代码划分为模块,我们可以提高代码的可维护性、可重用性和可扩展性。在本文中,我们将深入探讨JavaScript模块化开发的概念、优势和不同的模块化方案。原创 2023-06-12 10:24:20 · 2854 阅读 · 0 评论 -
日常问题----如和解决跨域
跨域不是问题,是一种安全机制。同源策略是浏览器一个重要的安全策略,一个url由三部分组成:协议,域名(ip地址),端口。所谓的同源就是指两个域有相同的协议(protocol)、域名(host)、端口(port),这三者之间任何一个不同都会构成跨域的情况,比如说前后端分离之后,前后都在两个域之下,前端的浏览器请求后端服务器的数据的时候就需要做跨域处理。可能有些人有点疑问,非得同源吗?(勿喷)无法读取非同源网页的 Cooike、LocalStorage、IndexedDB无法接触非同源网页的DOM。原创 2023-05-10 10:57:24 · 2058 阅读 · 0 评论 -
性能优化之-更高效的数据渲染
中心思想还是让请求的资源得到更快响应的方法,比如压缩资源,减少数据量的大小,缓存数据以减少请求数量,http/2让网络传输变得更快这些,下面就让我们来看看浏览器是如何解析这些数据,最终又是如何将他们渲染在屏幕上的?在数据量不变的情况下还有哪些可以优化的点?原创 2023-04-21 10:02:10 · 2214 阅读 · 0 评论 -
JavaScript的三座大山
作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。原创 2023-04-19 11:34:22 · 2575 阅读 · 0 评论 -
性能优化之--- 项目打包优化(vue)
项目体积小也是优化性能的一个方向,这里以工程为例;原创 2023-04-07 10:45:54 · 3128 阅读 · 0 评论 -
前端性能优化的方向
目前大概整理为三个大方向:底层代码层面的书写优化、中层项目结构的优化,上层项目部署的优化。原创 2023-03-28 17:19:03 · 1608 阅读 · 0 评论 -
性能优化之-缓存篇
什么是缓存?在哪可以看到?为什么要做?本文简单说下,当做笔记在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色,是快速且有效地提升性能的手段。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。原创 2023-04-03 16:43:50 · 1559 阅读 · 0 评论 -
性能优化之-事件代理
那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。原创 2023-03-30 10:49:55 · 5856 阅读 · 6 评论 -
vuejs文件传参方式
vuejs传值,多个文件或者页面原创 2023-02-24 10:21:21 · 2252 阅读 · 0 评论 -
如何跳出map或者foreach循环
forEach()和map() 是Array 数组对象提供的循环数组的方法。不能像js循环表达式那样使用break 、‘continue’等结束循环语句。那么在forEach() 和 map()方法中如何终止循环和跳出本次循环呢?原创 2023-02-09 17:28:20 · 6265 阅读 · 0 评论 -
nodej.s 搭建一个socket服务(原生和sockjs)
原生socket服务 createServer()消息广播使用nodejs创建socket服务 原生以及http服务原创 2023-02-06 14:14:33 · 3127 阅读 · 0 评论 -
websocket与sockJS
websocket 双工通信原创 2022-09-21 17:07:00 · 4426 阅读 · 0 评论 -
TypeScript 简单介绍
是微软开发的JavaScript的超集,typescript兼容JavaScript,可以载入JavaScript代码然后运行,ts与js相比进步的地方 包括:加入注释,让编译器理解理解存储所支持的对象和函数,编译器会移出注释,不会增加开销;增加一个完整的类结构,使之更新使传统的面向对象语言。原创 2022-09-07 14:25:19 · 4677 阅读 · 0 评论 -
git 添加ssh秘钥最快的方式
git 关联仓库,添加秘钥原创 2022-08-26 09:55:36 · 466 阅读 · 0 评论 -
阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDafault(),return false的区别
1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,2.event.preventDefault()方法这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;3.return false ;这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以原创 2022-03-16 15:29:18 · 705 阅读 · 0 评论 -
可以跨域的在线视频地址(测试用)包括m3u8,rtsp,rtmp,flv,mp4直播流在线测试地址!!
在线小视频地址:可以跨域https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4 https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e5原创 2021-12-15 11:39:19 · 4270 阅读 · 0 评论 -
汇总onchange、onpropetrychange、和oninput事件的区别
1、 onchange事件与 onpropertychange 事件的区别:onchange事件在内容改变(两次内容有可能还是相同的)且失去焦点时触发。onpropertychange事件却是实时触发,即每增加一个字符或者减少一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有的。2、oninput 事件与onpropertychange 事件的区别:oninput事件是IE之外的大多浏览器支持的事件,在value改变时触发,实时的,即每增加一个或者删除一个字符就会触发,然原创 2021-10-13 14:59:24 · 324 阅读 · 0 评论 -
模糊查询(前端)
首先,模糊查询一般交由后台处理。(数组对象的)当然前端也可以实现,我这里的主要实现方式有两种,其一是使用fitler 过滤器:ilter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意: filter() 不会对空数组进行检测。注意: filter() 不会改变原始数组。话不多说,上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2021-09-16 17:53:54 · 7401 阅读 · 1 评论 -
纯css实现三角形、菱形、梯形、等效果
需求有这么一个小东西需要实现一下,但是不想直接放一个图片,就随便写了写,,首先实现一个三角形:1.首先,我创建了一个 class 名为 ‘box’ 的div,我们暂且亲切的称它为‘小盒子’html:<div class='box'></div>css:.box { width:20px; height:20px; background-color:blue; }原创 2021-09-10 17:21:37 · 2441 阅读 · 0 评论 -
call()、 apply()、 bind() 方法的作用、使用详解以及手写实现它
我们先举一些简单的例子:例1:var name = "阿牛",age = '18';var obj = { name: "臭宝", objAge: this.age, fun: function(){ condole.log(this.name,this.age); }}// 输出“臭宝” undefined例2var faq = "牛牛牛";fun: function(){ console.log(this.faq);}// 输出fun() // “牛牛牛原创 2021-08-18 17:57:22 · 320 阅读 · 0 评论 -
css缩放(不同屏幕适配) transform属性的scale()方法
在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。语法:transform: scaleX(x); / 沿x轴方向缩放/transform: scaleY(y); / 沿y轴方向缩放/transform: scale(); / 同时沿x轴和y轴缩放/说明:跟translate()方法类似,缩放也有3种情况:scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数原创 2021-08-09 17:26:40 · 9158 阅读 · 0 评论 -
Math.min() / Math.max() 使用方法
首先弄懂apply 和 call 都是js函数自带的方法。区别如下:apply和call的用法只有一个地方不一样,除此之外,其他地方基本一模一样a.call(b,arg1,arg2…)apply(b,[arg1,arg2]) //apply只有2个参数,它将call的参数(arg1,arg2…)放在一个数组中作为apply的第二参数有时需要直接拿一个数组中的最大值最小值:就可以拿如下的操作:Math.min.apply(null, [1, 2, 3]) 等价于 Math.min(1,原创 2021-07-30 15:22:53 · 1269 阅读 · 0 评论 -
css经典布局之三栏布局(双飞翼,圣杯)!!!
双飞翼布局和圣杯布局两者实现效果相同,都是为了实现一个两侧宽度固定而中间自适应的三栏布局如图:要实现一个三列布局的具体要求为:header和footer各自占领屏幕所有宽度,高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变,中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。主要实现思路为:Lleft、center、right三种都设置左浮动设置center宽度为100%设置负边距,left设置负边距为100%,right设置负边距为自身宽原创 2021-07-29 11:02:24 · 223 阅读 · 0 评论 -
页面嵌套iframe(window.postMessage()实现跨域通信)
项目中的需求 需要外接一个iframe与主页面之间需要通信 的情况在iframe 中:在主页面中:window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制,只要正确的使用,这种原创 2021-06-18 15:12:35 · 4525 阅读 · 0 评论 -
封装一个原始的Ajax()方法及5个步骤
原生js发送ajax请求的就是“XMLHttpRequest”,那么我们必须要弄清楚XMLHttpRequest实现ajax的步骤,只有搞清楚了它的工作流程,我们才可以自己来封装。1、建立XMLHttpRequest对象;2、设置回调函数;3、使用open方法与服务器建立链接;4、向服务器发送数据;5、在回调函数中针对不同的响应状态进行处理;总共分为五步,每一个步骤单独来看,都非常的清晰明了,基本上跟http的表面请求响应流程差不多,现在我们试着来手动实现一个。<!doctype htm原创 2021-05-17 16:58:33 · 715 阅读 · 0 评论 -
数组和链表的区别
数组和链表是两种基本的数据结构,但是在内存表现上不一样,所以也有各自的特点。具体区别如下:数组静态分配内存,链表动态分配内存;数组在内存中连续,链表不连续;数组元素在栈区,链表元素在堆区;数组利用下标定位,时间复杂度为O(1),链表利用引用定位元素时间复杂度O(n);数组插入或删除元素的时间复杂度O(n),链表的时间复杂度 O(1)。总结:如果是数据数量不发生变化,就使用数组;如果数据数量经常发生变化,就使用动态数组(ArrayList、vector)或双向链表LinkedList;如果原创 2021-05-13 11:44:24 · 153 阅读 · 0 评论 -
定时器(setTimeout()和setInterval())的清除问题
方法一:在每次重新设置定时器之前清除掉方法二:在销毁的钩子函数里销毁,防止污染都是clearInterval(定时器返回的值,即timer)settimeout与setinterval清除时使用方式一致,即clearsetTimeout()、clearInterval()...原创 2021-05-11 19:11:49 · 7104 阅读 · 0 评论 -
flex属性(阮一峰教程)
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2021-05-06 11:02:16 · 432 阅读 · 0 评论 -
死磕 36 个 JS 手写题(搞懂后,提升真的大)
死磕 36 个 JS 手写题(搞懂后,提升真的大)为什么要写这类文章作为一个程序员,代码能力毋庸置疑是非常非常重要的,就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要,那我们就必须掌握它,所以文章标题用了死磕,一点也不过分,也希望不被认为是标题党。作为一个普通前端,我是真的写不出 Promise A+ 规范,但是没关系,我们可以站在巨人的肩膀上,要相信我们现在要走的路,前人都走过,所以可以找找现在社区已经存在的那些优秀的文章,比如工业聚大佬写的 100 行代原创 2021-04-28 15:32:48 · 2874 阅读 · 0 评论 -
事件代理(事件委托)
- 基本概念事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子比如一个宿舍的同学同时快递到了,一种方法就是他们一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一 一分发给每个宿舍同学;在这里,取快递就是一个事转载 2021-04-27 15:32:28 · 734 阅读 · 0 评论 -
手写一个数组扁平化函数flatten
什么是数组扁平化?数组扁平化就是将一个多维数组转换为一个一维数组实现思想1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1,继续迭代。5、当数组遍历完成,返回这个新数组。实现代码Array.prototype.flatten = function () { var resultArr = []; var len = this.length; for (var i = 0; i < len; i ++) {原创 2021-04-08 10:05:43 · 368 阅读 · 0 评论 -
anime 一个简约方便的动画插件
官网链接anime.js 是一个简便的JS动画库,用法简单而且适用范围广,涵盖CSS,DOM,SVG还有JS的对象,各种带数值属性的东西都可以动起来。实际演示和代码,官网写得很详细清楚了,这里记录一下一些常用的东西方便翻看,不作具体演示了。用法:1,官网下载anime.js文件,直接引入2,npm install animejs 进行安装,然后在自己的项目JS中引入3. 语法为anime({}),把anime直接放进方法里执行就可以,里面可以配置各种参数,targers为必须项,其值为想要控制原创 2021-04-07 18:05:40 · 611 阅读 · 0 评论 -
echarts中渐变色的配置
全图默认背景色option = { backgroundColor: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{offset: 0, color: '#000'}, {offset: 0.5, color: '#888'}, {offset: 1, color: '#ddd'}] ),}原创 2020-12-21 14:24:59 · 599 阅读 · 0 评论 -
严格模式/ESlint 代码有哪些需要注意的地方
- 代码的规范 + 所有行尾不加分号 + 文件结尾有且只有一个空白行 + 对象属性后的冒号,后面有空格,前面没有 + 属性值必须是单引号,不可以是双引号 + 条件判断必须是===,不可以是== + 函数声明与参数的括号之间必须有空格,参数括号与函数体花括号之间必须有空格 + 分支和循环结构括号之间需要有空格,if后、括号后都需要空格 + 多个数据项逗号后必须有空格,包括参数和数组之类的数据 + 不允许多余空白行 + 所有的代码结原创 2020-12-14 09:41:52 · 279 阅读 · 1 评论 -
v-for和v-if不能一块使用的原因及解决方法/ for循环 of 和in 的区别
报错原因:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中所以,不推荐v-if和v-for同时使用推荐方法:<ul v-if="shouldShowUsers"><liv-for="user in users":key="user.id">{{ user.name }}</li></ul>放在外层元素上或者使用template标签进行包裹原创 2020-11-18 09:52:53 · 1120 阅读 · 0 评论 -
JavaScript当中map()和forEach()的区别(前端面试题)
如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的法:Array.prototype.map()和Array.prototype.forEach()。那么,它们到底有什么区别呢?定义我们首先来看一看MDN上对Map和ForEach的定义:forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。map(): 创建一个新的数组,其中每一个元素由调用数组中的每一个原创 2020-10-21 19:56:02 · 857 阅读 · 0 评论 -
js数组常用api(前端面试题)
静态方法:Array.of(…args): 使用指定的数组项创建一个新数组Array.from(arg): 通过给定的类数组 或 可迭代对象 创建一个新的数组。const arr = Array.of(5);//值为5,length为1const arr1 = new Array(10);//length为10的空数组console.log(arr);console.log(arr1);其他api按具体作用分为:一、添加1、push() 方法将一个或多个元素添加到数组的末尾,并返回数原创 2020-10-21 18:37:23 · 803 阅读 · 0 评论 -
js当中window对象的一些属性和方法(location,history,Navigator)
window对象:方法 Prompt():显示提示用户输入 Confirm():带有一段确定按钮与取消按钮的对话框,点击确认按钮返回true,点击取消返回false; setInterval();第一个参数是要调用的函数,第二个参数是隔多久时间调用函数一次(无限执行) Settimeout();第一个参数是要执行的函数,第二个参数是延时调用(只执行一次); Window.Close():关闭当前页面; Window.open(“页面地址”,”_self或..原创 2020-10-13 21:49:59 · 995 阅读 · 0 评论 -
vue组件中传参的问题(全局注册、局部注册)
一、父子组件的定义父子组件的定义有两种,我称为常规父子组件和特殊父子组件。 1.1、常规父子组件将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用<自定义标签></自定义标签>样子使用。当前组件为父组件,被引入的组件为子组件。引入子组件: 注册子组件:使用子组件:1.2、特殊父子组件 在路由中定义好组件,组件中含有children,页面上通过形式使用,也算是父子组件,当前组件为父组件,router-view路原创 2020-09-29 18:50:29 · 540 阅读 · 0 评论