简介prisma是一款ORM库，用于处理数据库相关内容，它通过一份Prisma Schema文件来描述数据库的结构，除了我们日常能看到的字段之外，还能看到一些链表，外键这些平时可视化看不到的内容。prisma还提供了vscode的插件用于语法提示，以及cli相关的一些便捷功能，比如将每次字段改动记录成一个sql操作，使用reset操作都会运行之前记录的sql操作。而且cli操作是入侵很小的操作，他会在当前项目创建一个单独的prisma目录用于处理相关事宜，并不会影响已写的代码。所以在使用之前我们先处理下一些依赖：vscode安装插件：Prisma格式化.prisma文件使用该插件项目安装...
前言这是一个 Typecho 博客邮件回复提醒插件 CommentNotifier 的一个模板主题，由于 Typecho 更新到 1.2 版本了，之前很多插件都失效了，包括之前我制作的美化版插件也是一样的。于是找泽泽要了一份它最近用的邮件回复提醒插件，经过我的搬运，把之前的那个仿猎聘网的邮件搬运过来了。预览下载Github：Typecho_CommentNotifier_Theme_LP喜欢就点个 Star 吧使用下载 Releases 最新版即可。解压到 CommentNotifier 插件的template目录下，解压的时候要注意不要嵌套目录了，正确的结构是解压完点开文件夹就能看到具...
前言对于数组的reduce方法一直用的比较少，大多数情况下forEach\filter\map就可以满足需求，但是对于reduce一直没找到合适的使用场景，就很可惜，想用但是没用上。最近在nest的教程中看到这么一种有趣的用法，特此分享！代码在一些使用场景中，可能会使用扁平化的对象key来获取对象中的值，比如在后端中可以看到一些这样的用法：this.config.get("database.host")意思是我需要从config配置对象中获取数据库的host字段，但是config本身是存在很多配置项的，他可能会是这样的结构：{ app: { p...
前言之前了解过一些，但是因为没有做专门的笔记，最近学习nest.js的时候，到处都是装饰器，不得已重温了一下ts的装饰器，并弄个笔记记录一下。typescript提供了几种装饰器：类装饰器方法装饰器属性装饰器访问器装饰器参数装饰器在使用装饰器之前，我们还需要配置一下tsconfig.json，开启两个配置：{ "compilerOptions": { "target": "ESNext", "emitDecoratorMetadata": true, "experimen...
前言经过半个月的努力，主题更新到2.0版本了，增加了Typecho 1.2的支持，以及众多改动，基本上是重构了一遍，采用了热门的Typescript来做类型约束，模块化的设计使得维护更加轻松了。更新日志2023-03-18webpack5 + typescript 重构主题支持 Typecho 1.2模块化结构兼容到 320px 分辨率修复 1.0 版本备案信息无法展示 bug新增表情文章与独立页支持切换主题支持更多的代码类型高亮文章内容支持 iframe 了优化了灯箱逻辑更加准确的分类菜单高亮更好的定位跳转更新了 UI有彩蛋哦还有很多变化需细细品味主题预览Github地址《Typech...
前言最近在写目录树跳转功能的时候，还是遇到之前的那个老大难的问题，就是因为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...
前言希望存储一个对象的时候能自动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" }当我们使用...
雷电这种飞机游戏，他的地图是一个无限滚动的背景，最直白的一个办法就是做两张图，然后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); // 显式强制类型转换隐式转换带来的副作用其实都是相对而言的，如果你足够了解，其实它就没有副作用，只是我们在编...
最近评论