前端
广东话的蛇皇
广东科技大学学生一枚,在前端的路上刚刚起步,并决定越走越远
展开
-
token到底存在哪比较适合?web storage和cookie的区别到底是什么?
首先我们要知道token是个什么东西?其实token就是信息加密后生成的登录凭证,tokens 是多用户下处理认证的最佳方式。因为无状态、可扩展(不需要把session存在本地)支持移动设备跨程序调用安全那接下来你要知道的是存储这一东西的选择方向:你可以存在cookie中,cookie 是一个非常具体的东西,指的就是浏览器里面能永久存储的一种数据。跟服务器没啥关系,仅仅是浏览器实现的一种数据存储功能。他的大小和数量都被相应限制。你可以存储在session中,se原创 2021-03-11 11:37:51 · 5048 阅读 · 0 评论 -
JS微任务和宏任务
任务执行如下: Promise.resolve().then(()=>{ console.log('1') setTimeout(()=>{ console.log('2') },0) }) setTimeout(()=>{ console.log('3') Promise.resolve().then(()=>{ console.log('4') }) },0)13421(红色):原创 2021-03-04 13:44:30 · 537 阅读 · 1 评论 -
浏览器解析资源
请求得到响应后将获取到相应的资源,此时浏览器开始解析资源原创 2021-03-03 23:48:16 · 547 阅读 · 1 评论 -
DNS解析
IP地址在请求网络上的资源是必不可少的,但是IP是一堆数字,DNS为了把这些不规则的数字变成易懂好记的文字即域名。而DNS系统(域名系统)是根据域名对服务器IP进行匹配查询的系统。他是分布式存储的。...原创 2021-03-03 16:10:27 · 147 阅读 · 1 评论 -
浏览器怎么解析url
浏览器怎么解析url协议现在的协议一般是http和https的协议HTTP即Hyper Text Transfer Protocol (超文本传输协议),,用于从万维网(WWW:World Wide Web)服务器传输超文本到本地浏览器的传送协议。它基于TCP/IP通信协议来传递数据 (HTML 文件,图片文件,查询结果等)。Http0.9——最初的Http只能GetHttp1.0——有现在的基本样子,但服务器发送完一个http响应后,会断开连接Http1.1——...原创 2021-03-02 23:28:39 · 232 阅读 · 0 评论 -
洞悉一切的web原理
web——最典型的一个代表动作就是你在地址栏输入网址然后通过浏览器去访问网站一切的一切都从这个根源开始:所以现在要明白的也就是从输入URL到页面展示到底发生了什么?大致分为以下几个步骤:解析url地址DNS解析TCP链接发送http请求服务器接收请求服务器响应TCP链接断开浏览器解析资源...原创 2021-03-02 23:27:47 · 127 阅读 · 0 评论 -
immer react
immer可持久化数据结构库背景js中的对象是可变的,因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象会影响到原始对象,所以如果想要脱离这种相互影响的矛盾关系,引用值的修改需要进行深复制,但是因为一个属性而进行全部二就是过多的深复制就会浪费内存,耗损性能。关键所以我们采用节点分支树的方法来管理一个数据结构就是最完美的方式我知道你可能不知道什么叫节点分支树的概念,你可以想想项目管理工具git的分支运作原理使用语法import produce from 'immer';cons原创 2021-02-01 12:48:54 · 309 阅读 · 0 评论 -
元素嵌套原则
块状元素与内联(行内)元素的嵌套规则1、块状元素可包含内联元素或某些块元素,但内联元素不可包含块元素,只能包含内联元素。<div><h1></h1><p></p></div> 正确<a href="#"><span></span></a> 正确<span><div></div></span> 错误2、块级元素不原创 2021-01-29 00:26:59 · 258 阅读 · 0 评论 -
react纯函数组件应用
Reactindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原创 2021-01-22 16:24:22 · 388 阅读 · 0 评论 -
回流重绘方向的性能优化
1.先从浏览器的渲染机制开始说起浏览器将获取的HTML文档并解析成DOM树。处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。将DOM和CSSOM合并为渲染树(rendering tree)将会被创建,代表一系列将被渲染的对象。渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次pass绘制操作就可以布局所有的元素。将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting.如果文档中有资源 重复以上原创 2021-01-20 02:20:10 · 128 阅读 · 0 评论 -
vue登录-路由守卫校验token
router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } // 通过url的token来注册 let token = sessionStorage.getItem('wxtoken') || '' // 如果session和query都没有token,需要去授权 if (token == '' && !to.query.tok原创 2021-01-18 20:49:45 · 899 阅读 · 0 评论 -
vue服务端渲染
vue-server-rendererconst Koa = require("koa");const Router = require("koa-router");const Vue = require("vue");const render = require("vue-server-renderer").createRenderer();const app = new Koa();const router = new Router();const vue = new Vue({原创 2021-01-16 16:53:25 · 109 阅读 · 0 评论 -
element ui table列表项合并
getSpanArr(data) { this.spanArr = [] for (var i = 0; i < data.length; i++) { if (i == 0) { this.spanArr.push(1); this.pos = 0 } else { if (this.formType == 1) { return } el.原创 2021-01-16 14:40:20 · 139 阅读 · 0 评论 -
附件上传与压缩
/** * base64转blob * @param {*} base64对象 */export function dataUrlToBlob(dataUrl) { let mimeString = dataUrl .split(',')[0] .split(':')[1] .split(';')[0] // mime类型 let byteString = atob(dataUrl.split(',')[1]) //base64 解码 let arrayBuffe原创 2021-01-16 14:38:37 · 208 阅读 · 0 评论 -
date获取相关日期
使用背景在一些erp表单系统中,表单的填写,为了给用户更好的体验,默认日期拾取器显示当天或者当月第一天、最后一天 setCalendar(){ //获取当前时间 let date=new Date(); //获取当前月的第一天 let monthStart = date.setDate(1); //获取当前月 let currentMonth=date.getMonth(); //获取到下一个月,++current原创 2021-01-16 13:45:43 · 156 阅读 · 0 评论 -
图片附件上传与展示
图片附件上传与展示使用vue-preview进行展示再使用其他的一些上传组件,例如nutui中的图片选择器原创 2021-01-16 04:06:44 · 720 阅读 · 0 评论 -
强制横屏
强制横屏其实强制横屏就是利用媒体查询中的一个来完成对屏幕的检测和两套css的转换<div id="screen"> <div id="main">强制横屏 <div class="top"></div> </div></div>#screen { position: fixed; width: 100%; height: 100%; padding: 0; margin: 0; background-col原创 2021-01-16 03:58:56 · 621 阅读 · 0 评论 -
深度选择器让你不在全局css修改子组件样式
使用背景当你不想写全局样式,想写scoped局部样式不污染全局,又想更改子组件内的样式,此时就可以用/deep/深度作用选择器.满足你所有想法就像使用element ui 的时候,改不掉样式不是因为权重问题,是因为没使用这个深度选择器使用//渲染前的源代码 #app button{ background-color: red; } #app /deep/ button{ background-color: yellow; }原理//不加/deep/的渲染效果原创 2021-01-16 03:56:24 · 456 阅读 · 0 评论 -
SEO优化来了
搜索引擎工作原理当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的,这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。原创 2021-01-16 02:43:35 · 845 阅读 · 0 评论 -
聊聊JS去重
使用场景在做项目的时候会遇到一些业务,需要每一项子业务都要选择一项对应的人或物进行配对,但是在输出总的人或物的表的时候却不能有重复,这种情况常常会出现,所以今天就来规整一下去重的JavaScript算法。首先登场的是高科技1号种子:借助ES6的扩展运算符进行解构赋值和Set本身的去重属性将需要去重的数组传入该方法,该方法将利用new Set的方式用数组构建一个Setfunction noRepeat(arr) { return [...new Set(arr)];}...原创 2021-01-14 01:11:21 · 126 阅读 · 0 评论 -
keep-alive
什麽是keep-alive用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态。<keep-alive :include="whiteList" :exclude="blackList" :ma原创 2021-01-08 15:47:15 · 84 阅读 · 1 评论 -
vue-router路由模式
vue-router路由模式实际上存在三种模式:Hash: 使用URL的hash值来作为路由。支持所有浏览器。 History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const ro原创 2021-01-08 14:38:54 · 176 阅读 · 0 评论 -
前端缓存
浏览器缓存处理机制浏览器第一次对某资源请求再次请求某资源![在这里插入图片描述](https://img-blog.csdnimg.cn/20201230001123594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjE4MTM2,size_16,color_FFFFFF,t_70前端缓存分为两部分:http 缓存强原创 2020-12-30 00:16:27 · 265 阅读 · 0 评论 -
cookie和session的区别
SessionSession 是存放在服务器端的,类似于Session结构来存放用户数据,当浏览器 第一次发送请求时,服务器自动生成了一个Session和一个Session ID用来唯一标识这个Session,并将其通过响应发送到浏览器。当浏览器第二次发送请求,会将前一次服务器响应中的Session ID放在请求中一并发送到服务器上,服务器从请求中提取出Session ID,并和保存的所有Session ID进行对比,找到这个用户对应的Session。由于Session存放在服务器端,所以随着时间的推移原创 2020-12-29 09:15:59 · 138 阅读 · 1 评论 -
跨域
一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略,所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域二、非同源限制【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB【2】无法接触非同源网页的 DOM【3】无法向非同源地址发送 AJAX 请求...原创 2020-12-25 20:33:59 · 173 阅读 · 0 评论 -
formdata
在提交上传文件时,formdata可以上传二进制文件,但是里面的东西并不会显示在控制台的formdata对象中原创 2020-12-25 20:09:15 · 130 阅读 · 0 评论 -
js设计模式
详情工厂模式(class)单体模式(操作单个dom之类)原创 2020-12-25 19:52:09 · 90 阅读 · 0 评论 -
浏览器常驻线程
1.js引擎线程,其作用解释执行js代码,用户输入,网络请求2.gui线程,其作用是绘制用户界面,与js主线程互斥3.http网络请求线程,其作用是处理用户的get,post请求,等返回结果后将回调函数推进任务队列当中4.定时触发器线程,其作用是setTimeout setInterval等待时间结束后把执行函数推入到任务队列之中5.浏览器事件处理线程,其作用是将click mouse等交互事件发生后将这些事件放入在事件队列之中...原创 2020-12-25 19:31:27 · 143 阅读 · 0 评论 -
微信小程序修改data值必须要用setData
微信小程序为了页面不会经常因为数据的改动而回流和重绘,直接把数据的绑定后的updater切断,最后用setdata统一调用,这就造成了如果直接赋值改动数据就会造成页面状态数据与系统存储数据不一样的后果。...原创 2020-12-25 15:18:21 · 723 阅读 · 0 评论 -
微信小程序函数定义
Page({ /** * 页面的初始数据 */ data: { foodList: [{ name: '半仙豆夫', img: '../../images/eat_icon01.jpg', describe: '瑟瑟发抖,坐在门口', place: '南方万科广场一楼华为商店对面', eated: [{ name:'黄糖豆腐花' }, { name:'爽爽豆乳'原创 2020-12-25 12:02:21 · 375 阅读 · 0 评论 -
小程序block双层遍历
wx:for-item<!--miniprogram/pages/eat/eat.wxml--><view> <block wx:for="{{foodList}}" wx:key="{{item.name}}"> <navigator class="card"> <image mode="aspectFit" class="display" src="{{item.img}}"></image>原创 2020-12-25 11:50:07 · 240 阅读 · 0 评论 -
小程序image标签的宽高自适应失效
小程序image标签并没有像在html一样能在设置宽度后自适应,小程序的image标签需要指定模式mode原创 2020-12-25 09:32:28 · 1007 阅读 · 0 评论 -
小程序block标签
<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。(所以不要给他设样式,无效)因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。 < block wx:if = "{{true}}" > < view > view1 </ view >原创 2020-12-23 17:07:18 · 222 阅读 · 0 评论 -
$nextTick
$nextTicknextTick是vue框架里面一个全局api。它是当前异步更新队列循环结束之后的回调函数。$nextTick的使用场景在前文里我们已经知道了什么是$nextTick。现在要进入主题。究竟哪里适合使用 $ nextTick。场景1在 created 和 mounted 阶段,如果需要操作渲染后的视图,可以使用 nextTick 方法。场景2在希望所有子组件加载完成时进行某些操作时,可以采用延展mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染原创 2020-12-23 09:24:17 · 87 阅读 · 0 评论 -
另一个双向绑定machine---状态机vuex
前言在对于一些要时常大量抓取适当已经请求过来的数据的系统,在路由的转换中我们不想连着路由一起把数据倒来倒去,这个时候我们就需要一个可以存取大量数据的静态存储数据库,这个东西就是我们要讲到的-------状态机Vuex 官方说法:Vuex 是专门为 Vue.js 设计的状态管理库,它采用集中式存储管理应用的所有组件的状态。原理其实在原理上仍然是Vue的双向响应式原理,根据这个框架本身对数据进行劫持和订阅观察,但是他的存取则是新的规则,有新的限制 核心还是 Object.definePropert原创 2020-12-17 17:57:16 · 173 阅读 · 0 评论 -
slot 插槽
什么是插槽?将 slot元素作为承载分发内容的出口。当子组件有一部分内容是根据父组件传递过来的dom进行显示时,可用slot。//子组件childvue.component('child',{template:'<div> <p>hello</p> <slot>**(可在此定义默认内容)**</slot> </div>' })//父组件<div原创 2020-12-11 21:56:42 · 114 阅读 · 0 评论 -
搞一搞前端性能优化
1.尽量减少请求2.图片懒加载LazyLoad Images:在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片3.CSS放在页面最上部,javascript放在页面最下面:让浏览器尽快下载CSS渲染页面4.js文档碎片,尽量减少dom操作...原创 2020-12-11 21:06:16 · 141 阅读 · 0 评论 -
axios和ajax区别
总的来说:axios是通过promise实现对ajax技术的一种封装就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axios。所以他支持Promise APIPromise#thenPromise.allvar p1 = Promise.resolve(1), p2 = Promise.resolve(2), p3 = Promise.resolve(3);Promise原创 2020-12-07 11:58:22 · 923 阅读 · 0 评论 -
Vue源码分析之Proxy代理data至this
this.proxydata(this.$data)proxyData(data){ for(const key in data){ Object.defineProperty(this,key,{ get(){ return data[key] }, set(newVal){ data[key] = newVal; } })}原创 2020-11-29 21:54:19 · 755 阅读 · 0 评论 -
Vue源码分析observer Dep 和 Watcher实现双向绑定
observer递归遍历$data然后用Object.defineProperty()设置数据的setter和getterif(data && typeof data === 'object'){ Object.keys(data).forEach(key => { this.defineReactive(data,key,data[key]) })}defineReactive(obj,key,value){ this.observe(value) Object原创 2020-11-29 18:03:22 · 322 阅读 · 0 评论