前端
Calla_Lj
这个作者很懒,什么都没留下…
展开
-
浏览器强缓存和协商缓存详解
浏览器缓存浏览器缓存分为强缓存和协商缓存—强缓存协商缓存共同点如果命中缓存服务器都不会返回资源同不同点不发送请求到服务器发送请求,通过请求进行Http再验证刷新ctrl+F5:强制刷新 ,将跳过强缓存和协商缓存;F5:只跳过墙缓存,但是会检查协商缓存。强缓存Expires:值为绝对时间的GMT格式的时间字符串,代表缓存资源的过期时间;Cache-Control:max-age 强缓存利用它判断强缓存的最大生命周期,单位为秒。协商缓存Las原创 2021-09-06 22:21:09 · 496 阅读 · 0 评论 -
深入浅出Vue3.0
Vue3.0vue3.0新特性简介数据响应式重新实现:ES6的proxy代替ES5的Object.defineProperty源码使用typescript进行重新编写,更严谨,更好的类型推导虚拟DOM新算法,更快更小提供了composition api,比option api更好的路基复用和代码组织自定义渲染器,克根据需求自定义各种各样的渲染器fragment,模板可以有多个根元素生命周期函数vue3 的生命周期钩子函数智能在setup里面使用vue3的生命周期函数与vue2对比原创 2021-09-02 22:49:26 · 274 阅读 · 0 评论 -
解决IE11使用xlsx.full.js解析excel为Json格式兼容问题
最近做了一个需求,就是excel附件上传,然后要将excel的文件内容解析为json格式的数据,然后再发送到后台进行处理。解析excel内容选用的插件是xlsx.full.min.js,其中有FileReader对象以及方法可以帮助我们实现解析:FileReader共有4种读取方法:1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。2.readAsBinaryString(file):将文件读取为二进制字符串3.readAsDataURL(file...原创 2020-08-24 22:48:35 · 1198 阅读 · 1 评论 -
Electron学习--主进程和渲染进程
主进程和渲染进程1. 主进程:在Electron中运行package.json和main脚本的进程称为主进程。例如,main.js文件属于主进程,同时在main.js文件中直接引入的js文件也属于主进程(如:require(’./mainProcess/menu.js’))2. 渲染进程:electron使用Chromium的多进程机制来渲染页面,每个页面拥有一个自己的进程,该进程称为渲...原创 2020-02-12 16:42:57 · 987 阅读 · 0 评论 -
VUE异步更新DOM - 用$nextTick解决DOM视图
VUE异步更新队列首先,Vue 在更新 DOM 时是异步执行的!所以只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对...原创 2020-02-10 13:33:23 · 729 阅读 · 0 评论 -
单选框的小圆点不圆问题
单选框的小圆点不圆问题当我们有时候会做移动端的项目,使用到单选框的话,单选框的小圆点样式代码如下:.circle { display: inline-block; width:16px; height:16px; border: 1px solid #e0e0e0; border-radius:50%;}这样写其实是没有问题的,但是如果项目需要将px等单位整体进行转换...原创 2020-02-03 14:33:11 · 715 阅读 · 1 评论 -
Vue项目中的is属性
Vue项目中的is属性is: 可以直接传递一个组件:is: 查找父组件中的一个赋值,然后找到相应的组件<div id="app"> <span>这是is=“show"的demo</span> <component is="show"></component> <span>这是:is=“show"的demo<...原创 2020-02-03 14:09:56 · 419 阅读 · 0 评论 -
px, em,rem,VW,VH,VM的不同点
px, em,rem,VW,VH,VM的不同点px: 固定的单位,像素em:继承父元素的字体大小rem:相对根元素,即html元素字体大小,需设置html的font-size=625%所以rem=16px*625%=100pxVW&VH: viewpoint width&viewpoint height1VW = 1/100视口宽度 1VH = 1/100视口...原创 2019-12-18 11:08:08 · 361 阅读 · 0 评论 -
hash和history的区别
hash和history的区别一、从用户的角度看路由需实现以下两个功能记录当前页的状态保存或分享当前页面的URL,再次打开该URL时,网页还是保存的分享时的状态可使用浏览器的前进后退功能(如点击后退按钮,可以使页面回到ajax更新页面之前的状态,url也回到之前的状态)二、作为开发者,要实现这两个功能,我们需要改变url且不让浏览器向服务器发出请求;监测url的变化;截...原创 2019-11-02 14:48:40 · 604 阅读 · 0 评论 -
Vue中Mixin的用法
基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: f...转载 2019-11-01 10:45:39 · 370 阅读 · 0 评论 -
利用json-server工具在本地开启json数据格式的服务器
利用json-server工具在本地开启json数据格式的服务器安装npm install json-server -g准备数据文件db.json:{ "in_theaters": [ { "id": 1, "title": "黄金兄弟", "rating": 5.3, "genres": ["原创 2019-01-23 14:17:53 · 1049 阅读 · 0 评论 -
Object.assign()用法讲解
Object.assign()用法讲解语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTar...原创 2019-04-23 18:54:32 · 40332 阅读 · 3 评论 -
关于input type='number'去掉箭头 且不能输入e和标点符号
关于去掉箭头 且不能输入e和标点符号1.input数字框去掉箭头由图所示:数字框空间本来就很小,然后还被箭头占用;由图所示:数字框虽然css样式设置居中对齐,但是由于被箭头占用,所以不能居中对齐显示,不美观;由图所示:数字框空间本来就很小,由于箭头占用,导致两位数不能完全显示.结构代码如下:<input type="number" v-model="item5.OU...原创 2019-04-08 16:21:48 · 1938 阅读 · 0 评论 -
vue-cli -y搭建项目后eslint报错"Expected linebreaks to be 'LF' but found 'CRLF'"
eslint报错"Expected linebreaks to be ‘LF’ but found ‘CRLF’"问题描述:vue-cli -y搭建项目后,运行项目eslint报错"Expected linebreaks to be ‘LF’ but found ‘CRLF’"问题分析:出现原因是eslint语法检测linebreaks格式统一解决方法:在.es...原创 2019-03-28 17:57:08 · 753 阅读 · 0 评论 -
观察者模式与发布/订阅者模式区别
发布/订阅者模式什么叫发布-订阅者模式?发布-订阅者模式: 也叫观察者模式;它定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖于它的对象都会通知并更新,解决了主体对象与观察者之间功能的耦合.例如: 微信公众号订阅者: 只需要订阅(关注)微信公众号发布者(公众号): 发布新文章的时候,推送给所有的订阅者发布-订阅者模式的优势:解耦合订阅者不用每...原创 2019-03-29 18:12:12 · 957 阅读 · 0 评论 -
node.js 运行时报错"Command failed with exit code 1."
node.js 运行时报错"Command failed with exit code 1."问题描述今天运行本地项目,出现以下界面:由上可知,好像是webpack-cli的模块从webpack-dev-server里面分离出来了,所以需要安装webpack-cli然后就根据提示,使用"yarn add -D webpack-cli"安装webpack-cli包之后,再次运行...原创 2019-03-25 18:31:01 · 62498 阅读 · 0 评论 -
Vue如何实现数据双向绑定?
Vue如何实现数据双向绑定?Vue实现思路:说明:1. 实现一个Compiler模板解析器,能够对模板中的指令和插值表达式进行解析,并且赋予不同的操作2. 实现一个Observer数据监听器,能够对数据对象的所有属性进行监听3. 实现一个Watcher观察者,将Compiler的解析结果,与Observer所观察的对象连接起来,建立关系,在Observer观察到对象数据变化...原创 2019-02-02 17:55:06 · 1635 阅读 · 0 评论 -
Object.defineProperty()--数据劫持原理
数据劫持原理01.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <script> let obj = { name: 'zs原创 2019-01-29 18:44:53 · 4115 阅读 · 0 评论 -
在服务器端使用Socket实现群聊原理
在服务器端使用Socket准备server.js和clients.js两个文件,分别代表说服务端可客户端,代码如下:server.js:const net = require ('net') // 引入net模块const server = net.createServer() // 创建server服务端const clients = [] // 创建一个数组,用来存储客户端...原创 2019-01-23 16:00:26 · 1023 阅读 · 1 评论 -
HTML常见浏览器兼容汇总
HTML常见兼容汇总1.标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的;2.在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动 ;3.在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动4.IE6下,最小高度为19px;解决办法:overflow:hidden;5.IE 6下,1px dotted #000不支持,解决办法:切背景平铺;...原创 2019-04-24 11:15:08 · 1534 阅读 · 0 评论 -
CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总一、从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类:1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题。2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性,也属于这一类。3. 其他类别:除以上两类问题外的功能性问题,一般是浏览器自身提供的功能,在内核层之上的。二、浏览器兼容性相关...原创 2019-04-25 11:03:19 · 1779 阅读 · 0 评论 -
VUE项目在IE下报错“ReferenceError: Promise未定义”的解决办法
VUE项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法VUE项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法...原创 2018-11-25 14:22:30 · 6334 阅读 · 0 评论 -
服务端渲染
服务端渲染什么是服务端渲染?前端渲染:html页面作为静态文件存在,前端请求时后端不对该文件做任何内容上的修改,直接以资源的方式返回给前端,前端拿到页面后,根据写在html上的js代码,对该html内容进行修改。服务端渲染:前端发出请求后,后端在将html页面返回给前端之前,先把html页面中的特定区域,用数字填充好,再将完整的html返回给前端。在SPA场景下,服务端渲染都是针对第一次g...原创 2019-10-09 22:47:44 · 194 阅读 · 0 评论 -
Next.js服务端渲染知识点汇总
Next.jsNext.js是一个基于React的服务端渲染框架。它使用react语法,可以很好的实现代码的模块化,有利于代码的开发和维护。Next.js的特性:默认服务端渲染模式,以文件系统为基础的客户端的路由代码自动分割使页面加载更快以webpack的热更新HMR为基础的开发环境使用React的JSX和ES6的module,模块化和维护更方便可以运行在express和其他Nod...原创 2019-10-09 21:50:04 · 608 阅读 · 0 评论 -
http协议1.0和1.1的区别
http协议1.0和1.1的区别一个WEB站点每天可能要接收到上百万的用户请求,为了提高系统的效率,HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个TCP连接,服务器完成请求处理后立即断开TCP连接,服务器不跟踪每个客户也不记录过去的请求。但是,这也造成了一些性能上的缺陷,例如,一个包含有许多图像的网页文件中并没有包含真正的图像数据内容,而只是指明了这些...转载 2019-09-05 17:48:23 · 493 阅读 · 0 评论 -
你要的 React 面试知识点,都在这了
你要的 React 面试知识点,都在这了https://juejin.im/post/5cf0733de51d4510803ce34e转载 2019-06-14 12:45:47 · 474 阅读 · 0 评论 -
Jsonp,CORS,http proxy反向代理解决跨域问题
http反向代理解决跨域问题原创 2019-05-27 19:07:24 · 711 阅读 · 0 评论 -
鼠标的screen,client和page三个重要坐标系列
鼠标的screen,client和page三个重要坐标系列作为一名前端开发人员,我们有时候需要获取鼠标在页面上的点击位置,我们都知道鼠标的点击事件中有screen,client和page三个系列的坐标,那马我们下面就来具体分析一下:三个重要坐标.js:document.onclick = function (event) { var event = event || window.even...原创 2019-05-17 14:12:03 · 913 阅读 · 0 评论 -
Offset,Scroll和Client三大系列总结
Offset,Scroll和Client三大系列总结offset系列scroll系列client系列offsetWidthscrollWidthclientWidthoffsetHeightscrollHeightclientHeightoffsetLeftscrollLeftclientLeftoffsetTopscrollTopclie...原创 2019-05-16 19:06:20 · 1042 阅读 · 0 评论 -
JS常见的兼容性问题汇总
JS常见的兼容性问题1) 滚动条:document.documentElement.scrollTop||document.body.scrollTop获取样式兼容function getStyle(dom, styleName){return dom.currentStyle?dom.currentStyle[styleName]getComputedStyle(dom)[st...原创 2019-04-26 10:38:27 · 3087 阅读 · 0 评论 -
微信小程序中封装wepy.request请求方法
微信小程序中封装wepy.request请求方法/** * 定制封装 wepy.request 请求方法 * 定制基础路径,公共的请求头 */import wepy from 'wepy'const baseUrl = 'http://localhost:8888/api/public/v1/'export default function (params) para...原创 2019-02-01 15:20:36 · 3636 阅读 · 1 评论 -
函数节流原理
函数节流function scrollFn(){ console.log(1)}function throttle(method,delay,duration){ var timer=null; var begin=new Date(); return function(){ var context=th...原创 2019-02-01 10:44:57 · 649 阅读 · 0 评论 -
React组件通过函数的方式创建与类的方式创建的异同
函数的方式创建组件与类的方式创建组件的异同通过函数的方式创建组件:// 定义显示时间的组件function Clock(props){ // props.time必须手动转换为字符串,否则会被作为对象进行解析,会报错 return ( &lt;div&gt; &lt;div&gt;定时刷新&lt;/div&gt; &lt;div&gt;原创 2018-12-12 14:48:23 · 902 阅读 · 0 评论 -
VUE的生命周期解析
VUE的生命周期解析生命钩子意义就是在描述这个 Vue 实例的过程其实钩子就是在 不同时期执行的回调函数本意就是在 Vue 中给我们提供一个写代码的地方VUE的生命周期beforeCreate在实例创建之前执行在代码执行创建 new Vue 的时候,最先执行的代码所以这里什么都拿不到因为在这里的时候,什么都没有做,刚刚开始准备要进行实例化基本不用create...原创 2018-11-27 19:04:22 · 711 阅读 · 0 评论 -
MVVM与MVC原理图解
MVVM(数据驱动视图)原理执行原理:视图(view):视图负责界面和显示。它通过DataContext(数据上下文)和ViewModel进行数据绑定,不直接与Model交互。 可以绑定Behavior/Comand来调用ViewModel的方法,Command是View到ViewModel的单向通行,通过实现Silverlight提供的IComand接口来实现绑定,让View触发事件,Vi...原创 2018-11-27 18:55:16 · 2097 阅读 · 0 评论 -
垂直居中对齐四种样式
垂直居中对齐传统的:(需要设置盒子的宽高)div { position: absolute; top:50%; left:50%; margin-left: -50%; // 元素的自身宽的一半 margin-top: -50%; // 元素的自身高的一半 }特殊的:div { position: absolute...原创 2018-11-27 18:44:59 · 1371 阅读 · 0 评论 -
关于sessionStorage,localStorage和cookie三者之间相同点与不同点
关于sessionStorage,localStorage和cookie三者之间相同点与不同点类别sesstionStoragelocalstoragecookie存储量5M(具体看浏览器版本)5M(具体看浏览器版本)4KB存放地点浏览器浏览器浏览器发送http请求时不会带上不会带上会带上生命周期浏览器关闭后不存在永久保留(*)过...原创 2018-11-27 18:30:44 · 925 阅读 · 0 评论 -
时间戳转换
时间戳转换首先要在js文件里面写个方法,如下:// 时间戳转换 formatDate(row, column) { // 13位时间戳 let date = new Date(parseInt(row.CREATE_TIME)); // 如果是10位数时间戳 // let date = new Date(parseInt(row.CREATE_TIME)*100...原创 2018-11-26 17:59:28 · 1404 阅读 · 0 评论 -
主流浏览器内核汇总
主流浏览器内核汇总1、IE:Trident内核,也是俗称的IE内核;2、Chrome:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;3、Firefox:Gecko内核,俗称Firefox内核;4、Safari:Webkit内核;5、Opera:最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核;6、360浏览...原创 2018-11-23 14:37:08 · 866 阅读 · 0 评论 -
移动端兼容Meta&Link标签
移动端兼容 &amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width,initial-scale=1.0&amp;quot;&amp;amp;gt; &amp;amp;lt;meta http-equiv=&amp;quot;Content-Type&am原创 2018-11-25 15:24:24 · 909 阅读 · 0 评论