html/css/js
文章平均质量分 86
html/css/js/ts
醉逍遥neo
少而精,胜于多而劣。
展开
-
es6模块循环引用的问题
起因是开发时的一个报错信息:Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization。由于报错信息不明确,网上也搜不到明确的原因解释和解决方法,所以自行排查了很久才逐渐找到原因。要说怎么排查,就是最笨的也是最有效的“代码删除法”,即从入口文件开始一行行删代码,直到定位到具体出错位置,然后凭借自身知识和经验判断出问题原因。原因就是import的循环引用导致webpack无法正确解析。一、循环引用简介最简单的 a 引用了 b,b 又原创 2022-02-11 11:47:44 · 7937 阅读 · 2 评论 -
js实现深拷贝(深克隆)
关于深拷贝和浅拷贝的概念和区别在这里就不再赘述了,而常规的JSON.parse(JSON.stringfy(data)方式存在很多缺陷,例如无法处理undefined、function、特殊引用类型、循环引用等。最近尝试手写一下深拷贝的实现,分享一下思路和代码。(完整代码见文章末尾)一、整体思路深拷贝要考虑的点还是挺复杂的,数据类型太多需要一一处理,具体我是怎么一步步手写以及修改填坑的过程就不多说了,就大概说一下我的代码流程吧。(定义源数据为target,克隆后的数据为result)1、数据类型原创 2021-09-03 16:36:28 · 5510 阅读 · 0 评论 -
generator函数 以及 async、await
generator函数,通过在函数名前加一个*号来定义生成器函数,返回一个迭代器对象,然后通过函数内部的 yield标识 和 迭代器对象调用 next方法 来使函数分段执行。一、generator函数1、基础用法function *test () { yield 11 yield 12}const iterator = test()const next1 = iterator.next()const next2 = iterator.next()const next3 = ite原创 2021-04-07 18:20:15 · 689 阅读 · 1 评论 -
script脚本阻塞的探究、异步属性async和defer的区别
本文主要讨论html中script标签的一些特性,其中,script的阻塞是讨论的核心点,主要围绕script的阻塞探讨其现象及解决方式。一、阻塞dom的解析渲染1、描述由于js的执行可能会有操作dom的情况导致dom结构发生变化,所以在html解析最初设计的时候就让js执行时暂停dom的解析渲染,这就造成了对dom的阻塞。2、常规解决方式一般就是把js放在body标签的最底部,这样既保证dom解析完后才执行js,也保证js里能获取到dom元素。另外不建议把script代码放在body闭合标签(原创 2020-12-01 16:17:16 · 1754 阅读 · 0 评论 -
h5前端兼容性问题及解决方法集合
整理归纳一些之前记录的h5兼容性问题以及相应的解决方法,大多都是移动端的,持续更新…1、iOS滑动卡慢ios里父元素设置overflow:auto或scroll时,子元素滚动时没有滚动惯性,手指离开屏幕就立即停止滚动,所以会有一种卡和慢的感觉。目前发现ios13及以上系统没有这个问题,但低版本的还会出现,需要解决。解决方法:css里给滚动父元素设置:-webkit-overflow-scrolling: touch;注意:这个css属性有很多坑,谨慎使用,例如会导致绝对定位元素会被父元原创 2020-05-20 15:04:16 · 3086 阅读 · 1 评论 -
1px像素问题(二):解决方法
上一篇博文分析了1px像素问题的产生原因,那这次就探讨一下解决方法。解决方法有很多,根据项目环境和使用场景选择最合适的就行,下面整理了几种解决方式:1、通过设置meta标签viewport分析1px像素产生原因时,有说到meta标签设置的width=device-width,其实这也是产生1px像素问题的前提条件之一,无论你是rem适配方式还是媒体查询的响应式布局,你最终在375px的总宽...原创 2019-04-01 21:14:21 · 1680 阅读 · 2 评论 -
h5页面运行环境判断
判断h5页面所处的运行环境,以便针对不同的环境做兼容性或差异化处理;由于很多时候需要一进页面就第一时间做处理,所以异步的判断方法都不予考虑,必须是能实时获取的;那么自然的,判断UA是最好、最方便的方式。一、先上代码:js封装platform.js:const ua = window.navigator.userAgent.toLowerCase()// android平台const isAndroid = (() => { return /Android|Adr/i.test(.原创 2020-11-06 11:09:19 · 3053 阅读 · 0 评论 -
h5移动端css开发进阶
记录一些开发小技巧~1、 字体大小小于12pxchrome核浏览器不支持中文字体小于12px,但ui图很多时候会有小于12px的设计需求。解决方法:使用css的 transform: scale(); 特性来缩小内容。例如设置字体大小10px:font-size: 12px;transform: scale(10/12);需要注意这个方式虽然缩小了字体,但该文字元素所占据的原宽高大小并不会跟着缩小,所以很多时候还需要考虑文字位置和间距的问题。一般文字位置需要结合 transform-原创 2020-06-08 15:49:39 · 640 阅读 · 0 评论 -
1px像素问题(一):真正原因
关于,前端1px像素的问题,网上已经有很多相关的文章了,但是,关于这个问题的原因网上没有几个说的是正确的,甚至还大谈dpr。。。其实,原因很简单:因为UI给设计图的时候基本上都是给的二倍图甚至三倍图,以iphoneX为例,屏幕宽度375px,假设设计图是750px的二倍图,在750px上设计了1px的边框,要拿到375px宽度的手机来显示,就相当于缩小了一倍,所以1px的边框得以0.5px来...原创 2019-04-01 17:58:58 · 5312 阅读 · 3 评论 -
h5前端IE浏览器低版本判断及升级提示
需求:由于公司项目对于ie浏览器只支持ie10及以上版本,为了更好的用户体验及人性化提示,想在代码里判断下ie浏览器低版本加个提示。解决方案:先贴代码:<!--[if lte IE 9]> <script> alert("您正在使用的浏览器版本过低,为了您的最佳体验,请先升级浏览器。"); window.location.href="http:/...原创 2019-03-30 17:29:39 · 1578 阅读 · 0 评论 -
函数节流和防抖
函数节流和函数防抖算是性能优化的范畴,说起来是可用可不用的东西,但是,作为一个有追求的前端,当然是容忍不了的~~。一、函数节流函数节流,就是一定周期内只执行一次。形象点说,就像公交车行驶,以车子行驶作为触发事件,以乘客上车作为执行事件,公交会分成很多个站点,控制乘客只能在各个站点上车,不能中途上。1、封装(函数节流的封装其实网上各种版本都有,有些版本明显是有问题的,所以建议各位还是花时间去理解一下封装的原理和细节,这样才能知其然并知其所以然。)/** * 函数节流 * @param {fun原创 2020-06-17 17:37:19 · 3879 阅读 · 1 评论 -
js给浏览器添加历史记录
需求描述:从页面A跳转到页面B,现在要给A和B之间添加一个历史记录C,也就是A-C-B。可是并没有那么一个方法来直接添加历史记录,那就只能使用移花接木大法了!思路就是利用pushState和replaceState方法来实现:// 先保存当前页地址, 假设当前在B页面let urlB = window.location.href// 替换当前页地址为C页面,地址urlCwindow...原创 2019-04-01 17:29:29 · 5327 阅读 · 1 评论 -
使用promise封装jquery的ajax来实现async和await方式
promise是es6里用来解决回调地狱的方案,本质上只是让代码换了个书写形式,由异步形式换成可读性更好的“同步”形式。使用jquery的ajax时,有时会遇到要在响应结果里做复杂操作的场景,这时候代码写起来就比较繁琐,可维护性不好,而如果使用es7的async、await方法就能大大提高代码质量,但是async和await也是要基于promise才能实现,所以就要对jquery的ajax做一个...原创 2019-03-30 17:32:01 · 4833 阅读 · 0 评论