前端
文章平均质量分 58
曲径通幽~
专注,自制
展开
-
Promise {<rejected>: DOMException: play() failed because the user didn‘t int
工作中在使用video时候遇到了如下报错:大体意思是说,不能再没有互动的清华下来使用play方法。官方说的是为了移动端的带宽和仿扰民阻止了自动播放,只要用户在页面上有交互动作后,就可以自动播放了;经研究发现,该报错只会针对于会播放声音的媒体数据,我们只要在标签上加上 muted 属性,即可不报错<video muted autoPlay > 您的浏览器不支持 video 标签。</video>其他问题:使用vido时候,如何自定义进度条?首先不适用vi原创 2022-03-18 17:56:16 · 652 阅读 · 0 评论 -
双指缩放和双指移动
最近负责将项目适配到pad上,自己实现了一套双指缩放和双指移动代码。记录一下方便以后用到。双指缩放和移动的判定是基于角度实现的,感兴趣的小伙伴可以看一下。const doubleTouchEvent = () => { let startTouchesInfo = []; let isTouch = false; const _this = this; let zoom原创 2021-10-27 19:26:59 · 744 阅读 · 0 评论 -
前端神器——Charles(花瓶)的下载配置使用流程【MAC版本】
1、前言你是在跨终端跨浏览器开发中是否遇到过如下困难呢:某个bug只能在某种机型的某个浏览器上复现,想debug无从下手。只能在dev环境打上console后推到开发环境,在用vscosole去查看!这样每次想console一次就得推一版上去,及其浪费时间,及其痛苦!接下来介绍的这款工具就可以一次配置,终身爽翻~Charles的作用实现请求拦截,抓包分析(可以跨终端,下面会提到)将本地域名代理出去,可以供局域网的其他终端访问。2、下载支持正版!!!正版下载地址:https://www.原创 2021-09-16 11:14:54 · 2437 阅读 · 0 评论 -
defineProperty介绍
MDN传送们在vue2中经常会听到这个属性,我也是联系了很多遍,奈何在工作中很少能用到,所以看了忘,忘了看,索性自己写下来记录一下,方便以后随时翻阅。Object.defineProperty(obj, prop, descriptor)Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。这是mdn的描述,嗯,看了和没看一样。来看一下它的三个参数:obj 要定义属性的对象。prop 要定义或修改的属性的名称或 S原创 2021-09-14 15:42:26 · 404 阅读 · 0 评论 -
PC端适配到移动端记录
一、前言最近遇到了将PC端的编辑器(在线设计编辑器)兼容到pad端,为什么不是手机端呢,因为我们手机端已经有一套专门的编辑器,但是在pad上无法直接用移动端的编辑器。之前做过的兼容基本上都是视觉上的适配,但是在编辑器中,需要各种手势的兼容,所以下面从两个方面进行分析这里推荐一下我们的稿定编辑器哈,功能很全,性能也还ok。 稿定设计二、适配过程2.1 收集当前编辑器在pad端存在的问题选中元素后后无法通过手势移动。文本元素调起键盘特别困难,canva的交互为当元素处于选中状态并为文本元素原创 2021-09-14 14:55:32 · 445 阅读 · 0 评论 -
史诗级浏览器环境判断
最近遇到了pad端适配的需求,将浏览器浏览器所处环境的代码整理了一下,供以后使用~ const ua = navigator.userAgent; const isWindowsPhone = /(?:Windows Phone)/.test(ua); const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone; const isAndroid = /(?:Android).原创 2021-09-14 11:21:30 · 243 阅读 · 0 评论 -
js的各类错误捕获
一、前言我们在开发中经常用到try catch来捕获接口错误,并上报到监控平台。这是你是否产生过疑问,这些错误在前端都是如何捕获到的?二、常见错误类型解析时候发生语法错误值不是所期待类型引用为声明变量资源加载错误Http请求错误三、捕获错误try catch能够捕获常规运行时错误,语法错误或异步错误不行// 常规运行时错误,可以捕获 ✅try { console.log(notdefined);} catch(e) { console.log( 捕获到异常: , e原创 2021-08-31 11:14:00 · 3292 阅读 · 1 评论 -
JS 继承详解
ES5继承ES5中没有class,所以es5的继承都是通过this指向改变和原型链去模拟继承。• 构造函数式继承• 原型式链式继承• 组合式继承1、首先有一个构造函数Animal如下。function Animal(name,age){ this.name = name; this.age = age; } Animal.prototype.run = function(name){ cons原创 2021-05-12 15:58:26 · 117 阅读 · 0 评论 -
热更新功能的实现
前言:live server 是一个vs code的热更新插件。可以帮你在修改代码保存后,自动刷新页面,大大提升了我们开发的效率。分析:首先,我们要实现一个功能,页面如何知道我们的代码更改了?也就是如何实现我们的代码与浏览器页面通讯。我们很容易就能想到,使用websocket。 下面是具体的实现。实现思路:1、服务器使用node创建一个websocket服务2、浏览器使用websocket与服务器进行通讯3、双方通过对应api来进行数据交换。实现:1、开启一个http服务器const原创 2021-05-12 15:54:58 · 967 阅读 · 0 评论 -
for in 和 for of
for in1.index索引为字符串型数字,不能直接进行几何运算2.遍历顺序有可能不是按照实际数组的内部顺序3.for in会便利出数组上的的所有可枚举对象,包括原型上的方法和属性所以for in更适合遍历对象,不要使用for in遍历数组。for of• for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是,它可以正确响应break、continue和return语句• for-of循环不支持普通原创 2021-05-12 15:49:38 · 129 阅读 · 0 评论 -
Nodejs 中使用 import / export
使用的是node10版本,但目前为止nodejs对es6的 import / export语法还是无法直接使用,需要借助babel工具编译。1.安装babel-cli和babel-preset-envnpm install babel-cli -Dnpm install babel-preset-env -D2.使用方式正常使用ES6中的 import / export语法//test.jsexport const num = 0;export function foo() { }e.转载 2021-05-12 15:46:57 · 2913 阅读 · 0 评论 -
排查页面的内存泄漏
前言总所周知,js是有垃圾回收机制的,大致分为标记清除和引用计数,目前主流浏览器都用的是标记清除。定义标记清除:垃圾回收器每个一段时候会扫描一次内存,这个时间很短。在扫描过程中,垃圾回收器会把内存中所有的变量加上标记,然后如果有你需要用到的内存,垃圾回收器就会把对应内存的标记删掉,之后将有标记的内存全部回收删除。这套机制就是垃圾回收机制,这个清理工作是高频操作。(通常全局变量是不会被自动回收的)内存泄漏就是指由于疏忽或程序的某些错误造成未能释放的已经不再使用的内存的情况。简单来说就是一个变量已经不原创 2021-04-27 16:09:39 · 953 阅读 · 2 评论 -
手动实现redux
前言我们在学习react时候,最难啃下来的一块就是redux了。可能现在也有很多伙伴都是停留在只会用的阶段~我们应该去深入了解一下redux是如何实现的,从而达到灵活运用。今天,我们就手动实现一个简单的redux。在实现redux之前,我们需要知道一下几点。redux和react没有关系,redux可以用于任何框架中connect不属于redux,而属于react-reduxredux是一个状态管理器。先忘记相关名词 reducer,store,dispatch,middleware等等原创 2021-01-14 17:16:51 · 201 阅读 · 0 评论 -
浏览器原理-持续汇总
#浏览器的底层原理。###1、 主流浏览器内核市面上主要五大主流浏览器,分别问IE、火狐Firefox,谷歌Chrome,苹果safari,欧朋Opera。浏览器内核IE浏览器Trident内核,也是俗称的IE内核Chrome浏览器之前是webkit内核,现在是BlinkFirefox浏览器Gecko内核Safari浏览器webkit内核Opera浏览器最初是自己的Presto内核,后来加入谷歌,从webkit变成了Blink内核360,猎豹原创 2020-11-05 15:15:57 · 364 阅读 · 0 评论 -
前端模块化
我们在项目中,模块化是绕不开的一个话题。但平常只是局限于会用的阶段,今天我来好好整理一下模块化的相关知识。模块化是什么?模块就是一个具有特定功能的函数/对象。每个模块的内部数据是私有的,只向外部暴露一些方法进行通信。将一个复杂的程序,依据一定的规则封装成不同的块,并且组合到一起,这样的过程就是模块化。为什么要进行模块化?js发展初期只是为了实现一些简单的页面交互,很少的代码就可以实现功能。随之电脑性能的提升,js各种库的壮大,js已经不再局限于只是一个小小的 嵌入式脚本语言 了。 一些大型的项原创 2020-10-12 16:00:44 · 156 阅读 · 0 评论 -
基于React框架实现的微信——持续开发中
123123原创 2020-04-01 09:57:41 · 634 阅读 · 0 评论 -
跨域科普以及JSONP跨域方法
首先科普一下域,这里只说前端的域。前端的域是指服务器在网络上占据的地址。跨域指的是浏览器请求了服务器A的某个页面,在操作该页面时,发送了一个请求B服务器的资源,这种现象就叫做跨域。如何更详细的判定是否跨域呢?当协议(http/https),端口或域名中有任何一个不同时,就视为跨域了。为什么要进行跨域?浏览器针对跨域设置了一个策略叫同源策略:原则上只允许请求同一个服务器的资源。注意,静态...原创 2019-12-20 10:16:30 · 109 阅读 · 0 评论 -
H5+CSS3写的旋转立方体
用CSS3的动画写出来的,代码很少,技能锻炼代码能力,也能提高思维能力,有兴趣的小伙伴可以试一试哈!CSS代码<style> *{padding:0;margin:0;} ul{ /*background: 150px;*/ /*posi...原创 2019-12-10 09:03:40 · 234 阅读 · 0 评论 -
JS实现的淘宝购物车
主要功能为,动态计算价格,移除内容和订单排序功能,先贴一张图!画风比较简陋~用的是JS原生代码写的,所以脚本会比较长!下面是html结构代码。 <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr > ...原创 2019-12-10 08:58:33 · 949 阅读 · 0 评论 -
纯JS写的轮播图!(有自动轮播,手动左右点击,点击小点切换图片)
图片宽为340px,高为490px,,,当时写的时候把代码写死了,只支持这个的大小的图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-12-05 10:47:12 · 1393 阅读 · 0 评论 -
JS兼容性问题汇总(主要针对IE)
今天来总结一下JS的兼容问题和相关的解决方法。这里老规矩,吐槽一下万恶之源IE!!1、事件绑定的兼容问题。这里先回顾一下事件绑定的方式,有DOM0级和DOM2级,DOM0级没有兼容性问题,但是缺点也很多,比如不可以在多次绑定同一个事件,后绑定的时间会将先绑定的事件覆盖!!DOM2级绑定方式支持大多数高级浏览器。但是IE8及以下浏览器不支持DOM2级绑定方式,它有自己的绑定方法:attachEve...原创 2019-12-05 10:37:20 · 1417 阅读 · 0 评论 -
纯JS写的贪吃蛇小游戏(前端初学者看,面向过程代码)
贪吃蛇代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-12-02 10:08:39 · 1191 阅读 · 1 评论