利用原生css实现hash哈希定位跳转偏移量处理
前言最近在写目录树跳转功能的时候,还是遇到之前的那个老大难的问题,就是因为header顶部是fixed浮动的,导致hash跳转的时候会被挡住。因为hash定位会将元素的顶部与视图顶部对齐,但是也因为如此,导致被浮动元素挡住了内容。以前我是拦截默认的click事件,然后使用新的定位方法scrollIntoView来实现,通过配置它为居中展示,从而避免这个问题。最近重构主题的时候,发现这种方式并不优雅,而且很麻烦,有没有办法不依赖js实现呢?于是我想起以前看过的一篇文章,有一个css属性可以做的,于是找了很久,终于找到了,它就是scroll-padding!官方定义为:滚动端口的最佳查看区域...

ts实战:给没有类型声明的第三方库编写一个类型声明文件
前情提要在github找了一个原生代码写的Toast库,安装后发现没有ts类型声明,通过安装@types/库名 也没有现成的对应的类型声明库,于是想着自己写一份声明文件用,也是第一次,所以找了好些教程,这里做个笔记。npm仓库: Toastify说实话这个库不太行,不支持多个toast,权当练手了。类型声明文件在项目中,比如我是在src目录下创建一个types目录,专门存放这些类型声明文件,创建一个名为Toastify.d.ts的文件。内容如下:declare module "toastify" { /** toast定位 */ export type Toa...

利用发布订阅模式封装一个IntersectionObserver
前言用于判断当前元素是否出现在视口区域,以此来实现懒加载已经是日常业务必须的东西了,但是如何去判断这个元素是否出现在视口中,是一个非常头疼的地方。很久以前,我们通过dom.offsetTop的方式,不断的累加自身和父级元素的offsetTop值,得到元素具体文档顶部的距离,然后判断这个距离是否小于等于当前视窗的高度+滚动条scrollTop,如果是的话,说明用户已经滚动到了,或者滚过去了,这个时候就得触发图片懒加载。但是这种方式十分痛苦,需要递归计算offsetTop的值,而且性能不是很好。后来浏览器又提供了getBoundClientRect的方法,这个方法会返回当前元素距离视窗的四个...
typecho 自定义分类和分类高亮处理
前言目前个人认为最合适的一个判定了,但是我的做法只支持二级分类,如果你有多级分类,就需要自行调整了。先上个实际html渲染图:可以看到,我进入的是HTML子分类,那么对应的子分类class上已经有active类名了,而它的父级分类前端,在类名上也存在了active。教程不多说,直接上源码[hide]<div class="nav-list"> <?php $this->widget('Widget_Metas_Category_List')->to($category);?> <?php while ($categor...

ts封装一个localStorage和sessionStorage的类
前言希望存储一个对象的时候能自动JSON转成字符串,存储一个string类型的值时,不需要再JSON化了,不然又多两引号,和原生存储使用会有出入,我的宗旨就是能和原生效果保持一致的情况下增加一些方便的处理。拿取的时候就会有一些顾虑了,因为拿到的值就是字符串类型,所以我加了一个额外的参数来判断是否需要JSON解析,默认是需要的,这个配置用于这个值我可能自己手动转成字符串存的,它的源值是一个对象,我不希望取值的时候被解析出来,我就要它原样给我,应对这种情况加了一个配置判定。在拿取的时候返回的值类型是any,显然这不是我想要的,我希望能准确判定这个类型,于是通过泛型的方式进行约束。另一个考量是...
利用typescript实现原生css变量的主题切换功能类
前言主题的切换研究过好久了,个人认为目前最好的两种实现:原生css变量实现,性能好,但是不太兼容旧设备利用预处理scss这种做一个主题类名,通过最上层类名变化从而改变嵌套的子类名的颜色,兼容性好,但是需要把所有的类都抽出来单独设置。本着简单+性能的目标,我采用了第一种方案,这种方案也是大佬张鑫旭提供了,文章是:《link rel=alternate网站换肤功能最佳实现》有兴趣弄的话可以先看看大佬的文章了解原理。封装主题的链接引入采用如下格式:<!-- theme --> <link href="<?php $this->options->th...
typecho主题开发:基于webpack5的多页面打包项目
前言一直想把基于webpack5的多页面打包整理一下,做成一个通用的typecho主题开发架子,之前在JJ主题上虽然以及由部分实现了,但是不是很理想,因为是第一次弄,所以还是有些粗糙。现在离职后得了空闲,于是把这个架子给搭起来了,基于这个架子做前端开发还是很方便的,起码各种框架都能通过按照包的方式使用,能用上先进的打包机还是很棒的!仓库地址github地址:webpack-multiple-entry觉得有用的话麻烦点个Star吧。如果有什么问题可以提交Issues或者在该文章下面留言

MVC、MVP、MVVM
MVCmvc其实是从后端mvc架构模式中演变而来的,在2005年之前,也就是ajax还没有出现在前端世界中的时候,页面的处理其实都是由后端一人完成,全栈大师,那会前端技术还是很简单的,后端一个人就能实现从数据库拿数据然后渲染成一个完整html页面返回给浏览器。但是就是这个过程耦合度很高,以至于不太好维护代码,于是采用了一种分层模式,将不同的代码分为不同的部分,也就是解耦处理,总共分为三层:模型层(Model)、视图层(View)、控制器层(Controller)。模型层就是数据库的模型,如果使用过面向对象的数据库框架,比如sequelize,他们将每一个数据库的表转换成一个对象,通过操作...
windows+alist搭建一个web版局域网共享站点
前言最近发现一个有意思的项目 alist,官方定义是一个支持多种存储的文件列表程序,而且它使用的新的框架 SolidJS;没有虚拟dom,直接操作原生dom,性能和 Vanilla 相同,于是拿来用了一下,发现解决了我的一个痛点。当我电脑下载完视频后,这些视频文件往往会很多或者文件很大,但是这些文件属于待确认文件,我可能简单略了一遍后就会将它们删除,所以,我不想移动到手机上去查看,但是电脑上看又不是很便捷,特别上晚上想躺床上的时候,操作电脑就不是很方便了。之前我是利用windows自带的文件共享功能Samba来远程查看的,通过手机的文件管理器SMB连接到电脑,然后查看文件,但是这种方式非...

Event Loop事件队列和宏任务微任务
Event Loop我们知道JavaScript是一门单线程的语言,他只能一行一行的执行代码,于是我们的代码应该都是同步的,这里我们暂时忘掉所有的异步,看一下这么做会有什么问题。用户进入了我们的网页,点击了一个按钮,触发加载更多功能,此时浏览器发起ajax请求,如果我们的代码都是同步的,那么页面会在这个请求完成之前是卡主状态的,因为需要等待该代码的完成,此时用户什么都做不了,既不能滚动页面,也无法点击其他内容,如果这个请求需要60s的时间,用户肯定会觉得,这是什么狗屎页面。这显然是不行的,因为代码阻塞导致体验特别的差,解决这个问题的办法就是加入异步功能,我们将请求的回调作为异步处理,不需...

封装一个dialog弹窗组件
需求看了半天uniapp官方提供的插件,发现就是没有dialog弹窗的封装,有点难受,这个弹窗其实用的地方还挺多的, 但是uni-popup组件的用法实在是有点粗暴啊,需要通过ref获取popup组件实例,操作组件实例的open和close方法实现开关,和我们日常的v-model绑定差了好多,于是自己想着造一个。在网页端我们watch监听props的变量,然后在nextTick会调中使用popup组件实例是没有问题的,但是在微信小程序中发现这个方法有一个问题?如果我这个弹窗默认就是true打开的状态,那么在watch中即便使用了nextTick我们也无法获取到组件的实例,这个不知道是不是...
类型守卫:判断某个key是某个对象的合法key值
/** 类型守卫:key是否是指定对象的属性 */ function isLanguageKey(key: string, object: Object): key is keyof typeof object { return Object.prototype.hasOwnProperty.call(object, key); }这个一般用于对象object是其他人提供的,但是我们知道它一定会有某个key值,但是由于这个object它被类型推断为已知key的类型,比如:{ title: "xxx", age: "xxx" }当我们使用...
封装uni.request api为类似axios的用法
前言uniapp的请求都是通过uni.request的api实现的,但是这个api和前端常用的axios库用法上有着太多的不同了,移植起来非常痛苦,所以萌生了自己造一个轮子的想法,由于本人技术菜鸡,只能浅浅的仿照一个了。实际上本人喜欢axios的config的方式调用请求,如下:axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });所以大体上都是围绕这种用法展开工作的。首先说下使用上...
卷轴地图
雷电这种飞机游戏,他的地图是一个无限滚动的背景,最直白的一个办法就是做两张图,然后y轴移动,当一张图已经移动到最底的时候,也就是这个图的高度已经到0的坐标位置时,将其移动到顶部,以此类推,这样通过两张图来回位置控制,实现一个无限滚动的地图。理论上最简单,但是代码上会复杂一些。本次使用的方法是通过3d的四边形挂上一个材质,控制材质的位移实现,这样只需要一个资源对象就实现了卷轴地图。这种方式可以理解为前端的背景,背景是一个无限repeat的图片,控制他的postion定位实现背景移动,不过unity这个内部实现上可能是不一样的,但是可以这么去理解。教程首先我们需要一张背景图,我们将其丢入 T...

尾调用优化
什么是尾调用优化函数的调用会在内存中形成一个调用记录,被称为调用帧,调用帧会保留调用位置和内部变量等信息,一个个调用帧形成了调用栈。而尾部调用优化,意思是:如果一个函数的结尾调用了一个函数,且这个函数不需要依赖当前函数的调用帧,那么就会只保留尾部调用的这个函数调用帧,从而节省内存。es6要求引擎实现尾部调用优化(TCO),因为如果没有TCO会导致一些JavaScript算法因为害怕调用栈限制而降低了通过递归实现的效率。由于缺失TCO确实会导致一些程序无法实现,所以它变成了一个重要的语言特性而不是隐藏的实现细节。es6确保了JavaScript开发者从现在开始可以在所有符合es6+的浏览器...
性能测试
性能测试如果被问到如何测试某个运算的速度,绝多数JavaScript开发者都会使用类似下面的代码:var start = (new Date()).getTime(); // ईኁDate.now() //需要测试的代码 var end = (new Date()).getTime(); console.log("用时:", (end - start));相信大部分人都是这么想的吧!但是这种方案有很多错误,这里我们能知道的只有这次运算消耗了大概这么长的时间。而它是否总是以这样的速度运行,我们基本上一无所知,你不知道JavaScript引擎这个时候有没有受到什么影响...
生成器 Generator
简介Promise的出现,我们可以将回调进行反客为主,不在受回调调用者的限制(控制反转和信任问题),但是它并没有解决异步编程导致的代码顺序问题,有没有一种方式,可以让我们的代码虽然是异步的,但是书写顺序却是同步的,这样完全符合我们人类大脑理解方式?console.log("同步的1"); axios({ ... }).then(() => { console.log("异步的回调,如果需要等待结果处理,代码只能写在这个回调里") }); console.log("同步的2")很明显,如果我们希望"同步...
语法
上下文规则大括号常见的大括号使用就是对象常量定义var a = { foo: bar() };但是还有一种不是很常用的方式,就是标签{ foo: bar() }很多人以为这种写法是一种对象常量,只是没有赋值给变量,但是事实并不是这样。{ ... }在这里只是一个普通的代码块。从语法上说这段代码是完全合法的,这里涉及到JavaScript中一个不太为人知的特性:标签语句;foo是bar()的标签,这种标签一般用来配合continue 和 break 语句进行跳出处理。比如我们有一个三层的for循环,但是break和continue只能跳出一层循环,如果我们在第三层找到了需要...
强制类型转换
简介将值从一种类型转换为另一种类型通常被称为类型转换,这是显式的情况,而隐式的情况被称为强制类型转换。在JavaScript中通常将它们统称为强制类型转换,而显式和隐式的区分分界线其实并不明显,它很大程度上取决你是否了解这段代码是否转换了类型,如果你知道它转换了类型,那么这段代码对于你而言就是显式的,而隐式常常是那些不了解或者是比较隐晦的代码。var a = 42; var b = a + ""; // 隐式强制类型转换 var c = String(a); // 显式强制类型转换隐式转换带来的副作用其实都是相对而言的,如果你足够了解,其实它就没有副作用,只是我们在编...
屏蔽属性
前言对于js的原型链继承,大部分都是知道的,但是对于以下内容,很多人可能并不清楚或者理解不完整,那就是屏蔽属性。什么是屏蔽属性,其实这个功能来源于面向对象语言中的多态,表示父级定义的属性,在子级可以自己扩展,虽然属性名相同,但是功能却可以不同。由于js的继承,它不像强类型语言是完全的复制,js对于继承是通过原型链的方式,当子级没有的情况下会通过在原型链上查找。那么子级如果需要覆写某一个属性,显然它是绝对不能直接修改原型链上的内容,这回导致所有继承的子类产生问题,这显然是不合适的。于是就有了屏蔽属性,当子级去覆写一个原型上存在的属性时,其实并不会去修改原型链的属性,而是给子级自己添加一个对...
解决vant的tab组件swipeable功能与内部scroll冲突的问题
看了下vant的tab组件源码,当开启swipeable功能后,其实会对容器监听touch事件,这就导致我们在内容部分存在横向的滚动的时候,会导致同时触发touch事件,从而产生了冲突。解决办法就是二选一,要不在这个横向scroll的时候不触发swipeable,要不放弃swipeable。如果是第一种方案,我们需要对存在横向scroll的容器元素,做一个事件冒泡阻断,问题就解决了。<div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>
moment utc时间转本地时间
服务器返的时间是一个utc的时间字符串2022-12-01 03:00:30,我们需要将其转为我们本地时区,以东八区为准,正确的时间应该是2022-12-01 11:00:30。我当时这么写的:moment(new Date(time)).local();其实这是有问题的,首先我其实是为了防止time这个变量错误,所以使用了new Date,但其实是不对的,new Date会导致时间被转为本地时间且不会加上本地时区的8个小时。new Date("2022-12-01 03:00:30"); //Thu Dec 01 2022 03:00:30 GMT+0800 (中...
css选择器优先级计算规则
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器:* {}选择符:+、>、~、空格、||逻辑组合伪类::not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器:.foo {}属性选择器:[foo] {}伪类::hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
疯子
学习 学习
紫慕爱摸鱼
前来学习。
威力宝宝
学习!!
闹心
厉害
闹心
哇厉害
默哀
看看