![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
无声的code
指尖下的代码,头顶上的星空
展开
-
vue修饰符
默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。.delete (捕获“删除”和“退格”键)自动将用户的输入值转化为数值类型。自动过滤用户输入的首尾空格。2.model修饰符。原创 2023-03-23 23:58:26 · 65 阅读 · 0 评论 -
简谈promise和async、await的区别
1、pomise2、async,await原创 2023-03-22 00:19:54 · 236 阅读 · 0 评论 -
代码犯错日记(不断更新)
bug以及遇到的坑日记原创 2022-12-13 16:34:04 · 82 阅读 · 0 评论 -
在 Vue 里如何优雅的清除一个定时器?
前言清除定时器,相信有相当一部分人是这么写的:export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer)原创 2021-07-22 16:53:22 · 3549 阅读 · 1 评论 -
浏览器输入网址到加载页面的过程
1.浏览器查找域名的IP地址 => 2.在请求之前,需要浏览器与服务器建立连接 (与服务器建立连接时TCP属于安全的连接,需要三次握手,这里不在说明) => 3.浏览器给web服务器发送一个HTTP请求 => 4.服务器“处理”请求 => 5.服务器发回一个HTML响应. => 6.浏览器开始显示HTML =>7.浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。...原创 2021-07-07 14:47:29 · 269 阅读 · 0 评论 -
重绘与回流的理解
1、 重绘:元素样式的改变(但宽高、大小、位置等不变)2、回流:元素的大小或者位置发生改变(当页面布局和几何信息发生改变的时候),触发了重新布局导致渲染树重新计算布局和渲染如添加或删除可见的DOM元素;元素的位置发生变化;元素的尺寸发生变化、内容发生变化(如文本变化或图片被另一个不同尺寸的图片所代替);页面一开始渲染的时候(无法避免); 因为回流是根据视口大小来计算元素的位置和大小的,所以浏览器窗口尺寸变化也会引起回流...原创 2021-07-07 14:41:43 · 148 阅读 · 0 评论 -
promise的内部实现原理及常见问题
优点1.Promise 是一种封装和组合未来值得易于复用机制,实现关注点分离、异步流程控制、异常冒泡、串行/并行控制等2.Promise会做出正确延时或异步操作,会解决callback处理异步回调可能产生的调用过早,调用过晚、调用次数过多过少、吞掉可能出现的错误或异常问题等,只接受首次 resolve(…)或 reject(…) 决议,本身状态转变后不会再变,所有通过 then(…) 注册的回调总是依次异步调用,所有异常总会被捕获抛出then 回调异步执行1)Promise 实例化时传入的函数会立即原创 2021-06-16 13:52:20 · 251 阅读 · 0 评论 -
同步与异步的详细区别
简单介绍:同步(Synchronization):任务顺序执行,在上一个任务未执行完成之前下一个任务等待执行。异步(Asynchronous ): CUP暂时搁置当前任务,等到主线程任务执行完成,再来响应该任务。运行机制:所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。主线程之外,还存在一个“任务队列”(task queue),只要异步任务有了运行结果,就在“任务队列”中放置一个事件。一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任原创 2021-06-16 11:20:03 · 1381 阅读 · 0 评论 -
git设置.gitignore后不起作用的解决方法
git rm -r --cached .git add .git commit -m ‘update .gitignore’原创 2020-11-29 20:25:17 · 154 阅读 · 0 评论 -
常见功能:vue返回顶部操作
Vue实现返回顶部功能<template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <di原创 2020-10-27 15:20:12 · 811 阅读 · 0 评论 -
说说微信扫码登录背后的实现原理?
1)网页端与服务器的配合逻辑:接下来就是对于这个服务的详细实现。首先用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后,随机生成一个uuid,将这个id作为key值存入redis服务器,同时设置一个过期时间,再过期后,用户登录二维码需要进行刷新重新获取。同时,将这个key值和本公司的验证字符串合在一起,通过二维码生成接口,生成一个二维码的图片(二维码生成,网上有很多现成的接口和源码,这里不再介绍)。然后,将二维码图片和uuid一起返回给用户浏览器。浏览器拿到二.原创 2020-10-13 09:53:16 · 1301 阅读 · 0 评论 -
对事件总线(EventBus)的理解
通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案1.创建一个vue实例,导出这个实例import Vue from 'Vue'export default new Vue2.在两个需要通信的两个组件中分别引入这个bus.jsimport Bus from '这里是你引入bus.js的路径' // Bus可自由更换喜欢的名字3.传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据。Bus.$emit('click',data) /原创 2020-09-15 17:28:47 · 386 阅读 · 0 评论 -
通过 v-bind=“$props“ 以及v-bind=“$attrs“ 实现属性透传
很多时候,我们会写一些嵌套组件,比如A的子组件是B,B的子组件是C。这个时候如果A传递props给B,B又得传递props给C,我们经常在B传给C的时候这么写:<template> <child-component :someprop1="someprop1" :someprop2="someprop2" :someprop3="someprop3" :someprop4原创 2020-09-15 14:47:35 · 1993 阅读 · 2 评论 -
前端工程化webpack
loader模块加载器(处理文件的转换):1.编译转换类,转移成js代码,css-loader,babel-loader,url-loader,html-loader,style-loader2.文件操作类:file-loader3.代码检查类:eslint-loader2. plugin插件,处理文件3.opitimization生产环境的一些优化4.devServer开发服务器(热更新,代理,热拨插)5.devtool配置webpack的source-map...原创 2020-09-11 11:15:58 · 90 阅读 · 0 评论 -
git在错误的分支提交了代码,怎么处理
最近在开发项目的一个小需求的时候,发生了一件尴尬的事情。那就是当我把新功能开发完成的时候,忽然发现自己开发使用的分支是错误的分支。不过我记得之前学习git的时候有一个git stash的命令可以把当前没有提交的内容存档起来,然后可以在切换分支之后把当前的存档应用到目标分支。这里一般分为三种情况:1. 新功能还没有在本地进行commit(提交),也就是我这次遇到的情况2. 新功能已经在本地提交了,但是还没有push到远程仓库3. 新功能已经在本地提交了,且push到了远程仓库第一种情况:我们可原创 2020-09-09 15:22:48 · 892 阅读 · 0 评论 -
webpack打包优化
1、使用 HappyPack 来加速代码构建原理:(1)由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的事情只能一件一件地做,不能多件事一起做。(2)而 HappyPack 的处理思路是:将原有的 webpack 对 loader 的执行过程,从单一进程的形式扩展多进程模式,从而加速代码构建。2、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块优化原理(1)我们的项目依赖中通常会引用大量的 npm 包,而这些包原创 2020-08-18 11:19:15 · 533 阅读 · 0 评论 -
git使用心得 &常见问题整理(不断更新中,,,)
Git 流程图Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库配置Git# 查看系统配置$ git config --list# 查看用户配置$ cat ~/.gitconfig # 查看当前项目的 git 配置$ cat .git/config# 查看暂存区的文件$ git ls-files# 查看本地 git 命令历史$ git reflog# 查看所有 git 命令$ git --help原创 2020-06-18 10:38:49 · 118 阅读 · 0 评论 -
vue绝对干货,可以早点下班约会了
1.动态组件前两天产品经理来了新的需求了,告诉我,需要根据用户的权限不同,页面上要显示不同的内容,然后我就哼哧哼哧的将不同权限对应的组件写了出来,然后再通过v-if来判断要显示哪个组件,就有了下面的代码一般都会通过v-if,v-else-if去做判断,,我感觉我的代码洁癖症要犯了,不行,这样code review过不了关,我连自己这一关都过不了,这时候就改动态组件发挥作用了。<template> <div class="info"> <component :i原创 2020-06-18 10:17:04 · 263 阅读 · 0 评论 -
git子模块
背景:项目中经常使用别人维护的模块,在git中使用子模块的功能能够大大提高开发效率。使用子模块后,不必负责子模块的维护,只需要在必要的时候同步更新子模块即可子模块的添加命令:git submodule add 其中,url为子模块的路径,path为该子模块存储的目录路径。执行成功后,git status会看到项目中修改了.gitmodules,并增加了一个新文件(为刚刚添加的路径)git diff --cached 查看修改内容可以看到增加了子模块,并且新文件下为子模块的提交hash摘要原创 2020-05-22 11:13:02 · 229 阅读 · 0 评论 -
js中如何准确判断一个变量的类型?
JS基础变量类型在JS中,有6种基本数据类型和一种复杂数据类型,基本数据类型有:undefined,Null,Boolean,Number和String,es6中,还有Symbol;复杂数据类型有:Array,Function,date等等typeof判断变量类型typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回object。instanceof检查ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与原创 2020-05-20 11:23:20 · 1205 阅读 · 0 评论 -
你应该有的人生观念
觉得有收获的,我只有一个要求,点个赞呗?1.一个人一生只要把一件事做到最好,就可以获得巨大的财富和资源在学校的时候,老师经常叫我们“木桶原理”,告诉我们不要偏科,要把自己最差的一门提上来。直到进入社会,才知道这原理在社会上并不适用。不是觉得不行,当自己在某个职业深挖之后,很难有精力去把自己的短处变成长处;在这个社会上,是否“有特长”比“总分”的优势更明显,获得的财富更多,所以进入社会之后,尽情发展自己的长处,“扬长避短”更能体现你自己的价值。古今中外,那些科学家,医学家,作家等等,是无可挑剔的原创 2020-05-18 13:53:18 · 228 阅读 · 0 评论 -
debounce vs throttle
debounce vs throttledebounce假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯;如果在电梯门关闭之前,又有人来了,你会继续开门;这样一直进行下去,你可能需要等待几分钟,最终没人进电梯了,才会关闭电梯门,然后上楼。debounce作用,当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔。throttle假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开原创 2020-05-15 17:04:46 · 207 阅读 · 0 评论 -
简谈JSBridge
H5端jsBridge引入方式由h5端引用在我司移动端初期版本时采用的是该方式,采用本地引入 npm 包的方式进行调用。这种方式可以确定 JSBridge 是存在的,可直接调用 Native 方法。但是如果后期 Bridge 的实现方式改变,双方需要做更多的兼容,维护成本高由native注入这是当前我司移动端选用的方式。在考虑到后期业务需要的情况下,进行了重新设计,选用 Native 注入的方式来引用 JSBridge。这样有利于保持 API 与 Native 的一致性,但是缺点是在 Native原创 2020-05-14 15:29:57 · 578 阅读 · 0 评论 -
H5 如何去掉input控件的下拉箭头
在h5的开发中,input有些自带的表单控件会有下拉箭头,如下图所示,有的人觉得并不好看,想用自己的图片作为背景让控件更美化,于是就想去掉自带空间控件样式。我自己用到的时候用了好几个办法,就下边这个最好用。在需要更改的input的样式加下面这行代码就能实现:-webkit-appearance: none;这行代码会去掉当前控件的自带样式去掉,加上后代码如下图...原创 2020-04-30 16:43:56 · 774 阅读 · 0 评论 -
git回滚的正确姿势
Git回滚代码到某个commit先显示提交的记录git logcommit e499aac9257354c54ac2e1ff6a393ac7c8d2f342Author: xx <xxx@xx.com>...... 回退命令:git reset --hard HEAD^ 回退到上个版本git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退...原创 2020-04-29 16:51:45 · 218 阅读 · 0 评论 -
了解前端监控和埋点(持续更新中,,,)
基本概念:前端埋点主要是为了运营以及开发人员采集用户行为数据,以及页面性能等数进行后续的数据分析。埋点的目的:在现今用户就是上帝的年代,互联网竞争如此之大的时代,有针对性的对每个用户的喜好定制不同的内容,按照用户的喜好去决定产品迭代方向已经成为各个互联网公司必须要专注去做的事情,于是埋点便成为了获取信息必不可少的一种方式。性能监控有针对性的对每个用户的喜好定制不同的内容,按照用户的喜好去...原创 2020-04-18 13:48:14 · 922 阅读 · 0 评论 -
JavaScript之Array 中every,some,map,filter, reduce
1.every和someevery表示数组中的每一项都必须通过才会返回truesome表示只要数组元素某一项满足即可var arr = [1, 2, 3, 4, 5, 6, 7,8, 9];var a = arr.every(item=> item > 6);console.log(a); // falsevar b = arr.some(item=> item &...原创 2020-03-27 14:35:01 · 217 阅读 · 0 评论 -
vue-router里权限控制的方法
先在路由index.js文件里面初始化路由:最后在导出let vueRouter = new Router( { routes: [] }); //在此写动态加载路由的方法,也就是下面的方法 export default vueRouter;坑:1:使用vue 动态添加的路由,在页面刷新之后就会消失,所以得做本地存储,检查浏览器是否刷...原创 2020-03-17 10:21:58 · 724 阅读 · 0 评论 -
vue高频面试题
1.v-if 与v-showv-if初始渲染初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created,beforeMount,mounted 钩子。切换false => true依次执行 beforeCreate,created,beforeMount,mou...原创 2020-03-03 21:26:13 · 206 阅读 · 0 评论 -
一般vue的文件目录层
基础库: vue.js、vue-router、vuex、whatwg-fetch编译/打包工具:webpack、babel、node-sass单元测试工具:karma、mocha、sinon-chai本地服务器:express目录结构├── README.md 项目介绍├── index.html 入口页面├── build ...原创 2020-03-12 14:25:32 · 119 阅读 · 0 评论 -
js 数组常用知识
1.es5 es6数组去重排序方法一(es5):简单的循环套循环遍历对比 function way1(arr){ var arr1 = [arr[0]]; for(var i = 1;i<arr.length;i++){ var repeat = false; for(var j = 0;j<arr1...原创 2020-03-06 14:52:46 · 99 阅读 · 0 评论 -
前端基础(js,html,css)
1.闭包(1)闭包就是一个函数,两个函数彼此嵌套,内部函数就是闭包形成闭包条件是内部函数需要通过return给返回出来(2)①、闭包就是能够读取其他函数内部变量的函数。 ②、将函数内部和函数外部连接起来的桥梁2.localstorage,session,cookie的区别1.cookie始终在同源的http请求中携带,即使不需要,cookie在浏览器和服务器中来回传递。而localS...原创 2020-03-04 18:09:11 · 289 阅读 · 0 评论 -
前端跨域的解决方法
跨域解决方案1、 通过jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享(CORS)7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域一、 通过jsonp跨域通常为了减...转载 2020-02-28 12:42:43 · 107 阅读 · 0 评论 -
ES6 Promise 并行执行和顺序执行
1.Promise.all 并行执行promise(1)、getA和getB并行执行,然后输出结果。如果有一个错误,就抛出错误 /** * 每一个promise都必须返回resolve结果才正确 * 每一个promise都不处理错误 */const getA = new Promise((resolve, reject) => { //模拟异步任务 setTimeo...原创 2020-02-27 11:48:22 · 1421 阅读 · 0 评论 -
vue的组件传值方式
1、路由传参①定义路由时加上参数props: true,在定义路由路径时要留有参数占位符: name『用法: to="'路径/'+value"』②在跳转到的页面加上参数props:[‘name’]③在跳转到的页面就获取到了name『用法: js中直接this. name;html中直接插值{{ name}}』2、父组件向子组件传值①父组件内设置要传的数据『data(){ id: valu...原创 2020-02-27 11:34:06 · 119 阅读 · 0 评论 -
H5缓存
H5引入了应用程序缓存,意味着WEB应用可进行缓存,可在没有因特网时进行访问应用程序缓存的优势:离线缓存:用户可在离线时使用它们速度:加载速度更快减少服务器负载:浏览器只从服务器下载更新的或者更改过的资源实现缓存实现借助manifest文件HTML缓存1、每次的http请求头中,都会带有cookies——缺点;2、每个域名只能存储4K大小的cookies;3、主域名污染:如果...原创 2020-02-27 11:19:38 · 140 阅读 · 0 评论 -
Vue基础语法
1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile,对每个元素节点的指令进行...原创 2020-02-12 16:33:55 · 75 阅读 · 0 评论 -
创建和删除远程分支
1.删除远程分支(分支名:branch_name)git push origin --delete branch_name2.创建远程分支名git status 查看本地分支是否干净新建一个本地分支名:git checkout -b branch_namegit push origin branch_name:branch_name...原创 2020-01-16 11:02:04 · 83 阅读 · 0 评论 -
live-server启动一个本地服务器(手机访问)
开启本地服务器通常我们写一个项目时需要开启一个服务器移动设备访问测试,那么如何开启一个本地服务器并且手机可以放呢,那么就可以用live-server来开启一个服务器通过以下三步就可以啦1、首先安装live-servernpm i -g live-server2、安装完成以后安装完成之后,就可以在你项目根目录中开启命令行输入:(必须进入你项目的根目录)live-server3.改...原创 2020-01-16 10:33:05 · 1329 阅读 · 0 评论 -
vue,底层方法scroll.js
scroll 方法汇集// import { isServer } from './index'const isServer = false;// [debounce 和 throttle](https://www.cnblogs.com/wilber2013/p/5893426.html)// const docE = document.documentElement// con...原创 2020-01-07 17:08:00 · 723 阅读 · 0 评论