zthtt的博客

原创 品控H5-离线数据存/取/流转有效解决方案设计

原创 水杯波浪效果

用CSS实现水杯波浪效果

原创 CSS SASS 外部引入的scss文件中，不能用嵌套写法

引入外部scss文件，无法正常使用sass语法

原创 使用fiddler实现苹果ios手机抓包--的补充

Fiddler配置

原创 H5 van-popup全屏弹窗，模拟页面回退效果，支持左上角返回按钮，适用物理返回，侧滑与底部返回键

H5 van-popup全屏弹窗，模拟页面回退效果，支持左上角返回按钮，适用物理返回，侧滑与底部返回键

原创 登录流程与前端RSA非对称加密解密

原创 Vue中父子组件的六种通信方式

Vue中父子组件的通信方式一、Props + $emitProps：父传子父组件Parent.vue：<Child :message="message" @changeMessage="message = $event" />$emit：子传父子组件Child.vue：this.$emit('changeMessage','Bye')在子组件里用$emit自定义一个事件并传参，父组件里监听事件二、回调函数（callBack）父传子：将父组件里定义的method作为prop

原创 Get和Post的区别

Get请求和Post的区别GET请求，主要是从服务器端请求数据POST请求，主要是将数据发送到服务器端一、主要区别：GET请求POST请求刷新可以刷新刷新会被重新提交收藏可以在书签里收藏POST不能收藏缓存可以被缓存不能被缓存长度限制有，因为放在URL里面，由浏览器设定，谷歌浏览器限制为2Mb，2048个字符没有（准确来说是够用）安全性较差，在URL内可以被看到比get好二、常见误区1.（错）POST请求时数据加密的enco

原创 如何解决跨域问题

如何解决跨域问题一、什么是跨域？跨域，全称是跨域资源共享（Cross-Origin Resources Sharing ,CORS）,是浏览器的保护机制，只允许浏览器请求同一域名下的服务，同一域名的要求是协议、域名、 端口都要保持一致，只要有一项不同，都是跨域请求简单来说，在baidu网站不能请求taobao服务器的资源，一个域到另一个域发送请求，这就造成了跨域的资源共享的问题，这个问题就是cors二、解决方法：配置后端、配置前端、配置服务器1.配置后端浏览器是否开启跨域保护机制是根据后端的响应

原创 使用原生JS Drag&Drop API实现可视化拖拽和文件拖放操作

一、知识储备1.可拖拽元素<div id="draggable" class="draggable" draggable="true" ondrag="handleDrag"></div>1.draggable="true"2.ondrag 开始拖拽事件，可存放拖拽数据，例如元素ID2.可放置区域<div id="droppable" class="droppable" ondragover="handleDragOver" ondrop="handleDrop"

原创 CSS中常用的属性

1.aspect-ratio 设置纵横比aspect-ratio:16/9aspect-ratio:auto（默认值）aspect-ratio:4 === aspect-ratio:4/1 “/1”可省略2.pointer-events 设置是否响应点击事件pointer-events:auto 默认pointer-events:none 不响应点击事件，由下层元素响应...

原创 JavaScript Event Loop

​ JavaScript是一门单线程的语言，他的多线程和异步是通过eventloop循环机制实现，大体有三个部分组成，调用栈（call stack）、消息队列(Message Queue)、微任务队列（Microtask Queue）​ EventLoop开始时会从全局栈一行一行执行，遇到函数调用，会把他压入调用栈中，被压入的函数叫做帧（Frame）,当函数返回后会从调用栈中弹出Javascript中的异步操作，比如Fetch事件回调，setTimeout和setInterval中的回调函数，会入队到消

原创 Cookie、LocalStorage与SessionStorage

Cookie、LocalStorage与SessionStorageCookieLocalStorageSessionStorage大小4Kb10Mb5Mb兼容H4/H5H5H5访问任何窗口任何窗口同一窗口有效期手动设置无到窗口关闭存储位置浏览器和服务器浏览器浏览器与请求一起发送是否否语法复杂简易简易...

原创 从输入URL到页面加载发生了什么？

从输入URL到页面加在发生了什么？1.DNS解析（网址->IP地址）：DNS缓存（从DNS缓存里查找浏览器之前是否访问过这个网址，如果有直接返回IP地址，如果没有则查找操作系统），分级查找：本地DNS服务器，根域名服务器，COM顶级域名服务器，Google.com域名服务器2.建立TCP链接（三次握手）->为什么两次不可以？3.客户端发送HTTP请求4.服务端处理HTTP请求，并且返回HTTP报文5.浏览器解析和渲染页面6.连接结束（4次挥手）->为什么三次不可以一、HT

原创 说说你对作用域链的理解

作用域链的作用是保证执行环境下对变量和函数的访问是有序的；作用域链的变量只能向上访问，当变量访问到window对象时即被终止；（注意：Javascript没有块级作用域。可以通过(function(){})()立即执行的形式实现块级作用域；当然ES6可以通过{}搭配let const形成块级作用域）；函数的作用域内的变量，如果在本作用域内没有找到定义，则会往一层一层上一级查找，知道找到全局作用域，如果都没有则返回undefiened,这种一层一层的类似锁链的关系，叫作用域链...

原创 JavaScript var let const的区别

重复定义修改值声明提升块级作用域定义循环变量var可以可以会严格来说不支持（function里可以）可以let不可以可以不会支持（用let 和{}创建作用域）可以const不可以不可以（除数组和对象）不会支持不可以...

原创 HTTP缓存

一、什么是HTTP缓存？​ 当浏览器访问某个网站，如果是第一次访问，需要加载这个网站的资源，html,css,js,img…服务需要返回这些资源。​ 利用缓存的策略，当第二次、第三次…访问这个网站的时候，以上的流程可不重复执行就可以获取到资源。以此提高网站的加载速度。二、为什么要HTTP缓存？​ 从输入网站地址，到加载出页面，包括三个主要过程，CPU计算、页面渲染、http请求，前两者速度很快，不确定因素较少，http请求受网络环境影响较大，快时快，慢时可达几百甚至一秒的时间，如果这时利用缓存的方式

原创 百度地图 标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式

一、问题公司的项目中在百度地图上生成了成千上万的点，所以使用了标记聚合器MarkerClusterer来处理海量点，但是每个点根据异常类型，分为正常（绿色）和异常（红色），这时如果用了聚合器，只有没被聚合的时候才能看得出来是否异常，因此处理逻辑是，一个聚合如果包含一个及以上的异常点，则显示红色。不包含任何异常点就显示绿色图片效果如下： 缩小后 二、解决方案：1、生成标记marker时，添加是否异常的属性值let marker = new BMap.Marker(new BMap

原创 百度地图采用MarkerClusterer生成聚合点，解决海量点造成地图卡顿的问题

一、问题最近在做公司的一个项目，需要在百度地图生成海量点，最开始只是把全部的marker一起显示到地图上，因为一次生成的点比较多，会发生地图卡顿等问题；二、解决方案：MarkerClusterer百度地图-JS API官方文档MarkerClusterer：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。步骤：1、在html文件中引入MarkerClusterer_min.js 、 TextIconOverlay_min.js 文件MarkerClustere

原创 JavaScript深浅拷贝

一、概念区分：赋值：obj2 = obj1 ，实际上是将Obj2变量指向和obj1变量同一个在栈中的地址，赋值后两个对象指向的是同一个存储空间。浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。深拷贝：重新在堆中创建内存，对象中的子元素进行递归拷贝，拷贝前后的两个对象进行修改值时互不影响。二、浅拷贝实现方式：Object.assign()lodash 里的 _.clone{ …obj } 展开运算符Array.pro

原创 JavaScript 预编译习题

JavaScript 预编译习题预编译的事件作用域的创建阶段，就是预编译的阶段AO对象我们都知道Js中有全局作用域和函数作用域，与之对应的叫’js的变量对象’，在函数作用域的创建阶段也叫AO对象， 这个对象供js引擎自己访问，我们无法访问预编译时做了什么1、创建ao对象------> 2、找形参和变量的声明 作为AO对象的属性名 值是undefined------> 3、实参和形参统一------> 4、找函数声明，如果函数名和之前变量名相同，将覆盖原有题目functi

原创 CSS.清除浮动

CSS.清除浮动浮动属性float，在CSS中应用广泛，写网页时可以用来水平布局，其中使用最频繁的两个属性值就是left和right；一个靠左浮动，一个靠右浮动。实际中写页面的时候呢，父盒子一般不给高度height，因为内容会把父盒子撑开。但是，如果此时给子盒子添加了浮动属性，会怎么样呢？首先来说一下浮动的特点：浮动的特点呢？1、“飘起来了”：浮动后的元素会脱离标准流，在标准流中不占位置，并且...