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

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

前言用于判断当前元素是否出现在视口区域，以此来实现懒加载已经是日常业务必须的东西了，但是如何去判断这个元素是否出现在视口中，是一个非常头疼的地方。很久以前，我们通过dom.offsetTop的方式，不断的累加自身和父级元素的offsetTop值，得到元素具体文档顶部的距离，然后判断这个距离是否小于等于当前视窗的高度+滚动条scrollTop，如果是的话，说明用户已经滚动到了，或者滚过去了，这个时候就得触发图片懒加载。但是这种方式十分痛苦，需要递归计算offsetTop的值，而且性能不是很好。后来浏览器又提供了getBoundClientRect的方法，这个方法会返回当前元素距离视窗的四个...

前言目前个人认为最合适的一个判定了，但是我的做法只支持二级分类，如果你有多级分类，就需要自行调整了。先上个实际html渲染图：可以看到，我进入的是HTML子分类，那么对应的子分类class上已经有active类名了，而它的父级分类前端，在类名上也存在了active。教程不多说，直接上源码[hide]<div class="nav-list"> <?php $this->widget('Widget_Metas_Category_List')->to($category);?> <?php while ($categor...

前言希望存储一个对象的时候能自动JSON转成字符串，存储一个string类型的值时，不需要再JSON化了，不然又多两引号，和原生存储使用会有出入，我的宗旨就是能和原生效果保持一致的情况下增加一些方便的处理。拿取的时候就会有一些顾虑了，因为拿到的值就是字符串类型，所以我加了一个额外的参数来判断是否需要JSON解析，默认是需要的，这个配置用于这个值我可能自己手动转成字符串存的，它的源值是一个对象，我不希望取值的时候被解析出来，我就要它原样给我，应对这种情况加了一个配置判定。在拿取的时候返回的值类型是any，显然这不是我想要的，我希望能准确判定这个类型，于是通过泛型的方式进行约束。另一个考量是...

前言主题的切换研究过好久了，个人认为目前最好的两种实现：原生css变量实现，性能好，但是不太兼容旧设备利用预处理scss这种做一个主题类名，通过最上层类名变化从而改变嵌套的子类名的颜色，兼容性好，但是需要把所有的类都抽出来单独设置。本着简单+性能的目标，我采用了第一种方案，这种方案也是大佬张鑫旭提供了，文章是：《link rel=alternate网站换肤功能最佳实现》有兴趣弄的话可以先看看大佬的文章了解原理。封装主题的链接引入采用如下格式：<!-- theme --> <link href="<?php $this->options->th...

前言一直想把基于webpack5的多页面打包整理一下，做成一个通用的typecho主题开发架子，之前在JJ主题上虽然以及由部分实现了，但是不是很理想，因为是第一次弄，所以还是有些粗糙。现在离职后得了空闲，于是把这个架子给搭起来了，基于这个架子做前端开发还是很方便的，起码各种框架都能通过按照包的方式使用，能用上先进的打包机还是很棒的！仓库地址github地址：webpack-multiple-entry觉得有用的话麻烦点个Star吧。如果有什么问题可以提交Issues或者在该文章下面留言

MVCmvc其实是从后端mvc架构模式中演变而来的，在2005年之前，也就是ajax还没有出现在前端世界中的时候，页面的处理其实都是由后端一人完成，全栈大师，那会前端技术还是很简单的，后端一个人就能实现从数据库拿数据然后渲染成一个完整html页面返回给浏览器。但是就是这个过程耦合度很高，以至于不太好维护代码，于是采用了一种分层模式，将不同的代码分为不同的部分，也就是解耦处理，总共分为三层：模型层（Model）、视图层（View）、控制器层（Controller）。模型层就是数据库的模型，如果使用过面向对象的数据库框架，比如sequelize，他们将每一个数据库的表转换成一个对象，通过操作...

前言最近发现一个有意思的项目 alist，官方定义是一个支持多种存储的文件列表程序，而且它使用的新的框架 SolidJS；没有虚拟dom，直接操作原生dom，性能和 Vanilla 相同，于是拿来用了一下，发现解决了我的一个痛点。当我电脑下载完视频后，这些视频文件往往会很多或者文件很大，但是这些文件属于待确认文件，我可能简单略了一遍后就会将它们删除，所以，我不想移动到手机上去查看，但是电脑上看又不是很便捷，特别上晚上想躺床上的时候，操作电脑就不是很方便了。之前我是利用windows自带的文件共享功能Samba来远程查看的，通过手机的文件管理器SMB连接到电脑，然后查看文件，但是这种方式非...

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

需求看了半天uniapp官方提供的插件，发现就是没有dialog弹窗的封装，有点难受，这个弹窗其实用的地方还挺多的， 但是uni-popup组件的用法实在是有点粗暴啊，需要通过ref获取popup组件实例，操作组件实例的open和close方法实现开关，和我们日常的v-model绑定差了好多，于是自己想着造一个。在网页端我们watch监听props的变量，然后在nextTick会调中使用popup组件实例是没有问题的，但是在微信小程序中发现这个方法有一个问题？如果我这个弹窗默认就是true打开的状态，那么在watch中即便使用了nextTick我们也无法获取到组件的实例，这个不知道是不是...

/** 类型守卫：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" }当我们使用...

前言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引擎这个时候有没有受到什么影响...

简介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); // 显式强制类型转换隐式转换带来的副作用其实都是相对而言的，如果你足够了解，其实它就没有副作用，只是我们在编...

原生函数常用的原生函数有：String()Number()Boolean()Array()Object()Function()RegExp()Date()Error()Symbol()——ES6 中新加入的！实际上，它们就是内建函数。原生函数可以被当作构造函数来使用，但是你得到的就不是常量了，而是对象。var a = new String("abc"); typeof a; // 是"object"，不是"String" a instanceof String; // true Object.prototype.toStr...

类型JavaScript 有七种内置类型：空值（null）未定义（undefined）布尔值（ boolean）数字（number）字符串（string）对象（object）符号（symbol，ES6 中新增）除对象之外，其他统称为“基本类型”。其中数组Array和函数Function都是object的子类型，像Date这些也是同理。其中需要特殊记忆的就是null了，typeof对它的处理是有问题的：typeof null === "object"; // true正确的结果应该返回字符串类型的"null"，这个bug是出自历史遗留，起因是因为Ja...

前言对于js的原型链继承，大部分都是知道的，但是对于以下内容，很多人可能并不清楚或者理解不完整，那就是屏蔽属性。什么是屏蔽属性，其实这个功能来源于面向对象语言中的多态，表示父级定义的属性，在子级可以自己扩展，虽然属性名相同，但是功能却可以不同。由于js的继承，它不像强类型语言是完全的复制，js对于继承是通过原型链的方式，当子级没有的情况下会通过在原型链上查找。那么子级如果需要覆写某一个属性，显然它是绝对不能直接修改原型链上的内容，这回导致所有继承的子类产生问题，这显然是不合适的。于是就有了屏蔽属性，当子级去覆写一个原型上存在的属性时，其实并不会去修改原型链的属性，而是给子级自己添加一个对...

看了下vant的tab组件源码，当开启swipeable功能后，其实会对容器监听touch事件，这就导致我们在内容部分存在横向的滚动的时候，会导致同时触发touch事件，从而产生了冲突。解决办法就是二选一，要不在这个横向scroll的时候不触发swipeable，要不放弃swipeable。如果是第一种方案，我们需要对存在横向scroll的容器元素，做一个事件冒泡阻断，问题就解决了。<div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>

服务器返的时间是一个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 (中...

规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器：* {}选择符：+、>、~、空格、||逻辑组合伪类：:not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器：.foo {}属性选择器：[foo] {}伪类：:hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...