Halo 博客中 Pjax 实践的通用方案

一、问题分析 先分析下,全页面加载(Full Page Load)和 pjax(PushState + Ajax)请求方式中有哪些 js 引入和方法调用的行为,然后针对差异给出解决方案。 1.1 全页面加载下 js 的引入和方法调用 全页面加载情况下,我们通常会有以下的 js 引入行为: 各个页面公


2025-01-04
50
0

HTML 解析过程中 Script 标签、DomContentLoaded 事件的加载顺序

一、各类型 Script 标签的执行顺序 无属性的 <script> 标签: HTML 解析器遇到无属性的 <script> 标签时,会暂停解析 HTML,立即下载并执行该脚本,然后继续解析后续的 HTML 内容。 这种类型的脚本是同步执行的,会阻塞 HTML 的解析。 带有 defer 属性的 <


2024-12-29
12
0

如何在外部调用 Alpine Js 声明的变量与函数?

最近开发博客前端的时候,使用的 AlpineJs 来做一些元素事件、状态的管理,由于我之前只有 vue 的相关使用经验,并没有 Alpine 的开发经验,所以时常会陷入一个困惑中——如何在外部的普通 js 环境来调用元素的 Alpine 函数和变量。 需求场景 例如,我在博客左侧的文章目录树中,为了


2024-12-12
24
0

tailwindcss 中 ul ol 默认样式为 list-style: none 解决方法

最近在使用的 tailwind 手搓博客前端的时候,遇到的一个不可控的问题,让我产生放弃 tailwind 使用传统 css 样式开发的念头了。本身不是什么大问题,但这种不可控的感觉让人很没有安全感。 一、问题 我的博客文章是 Markdown 格式,所以我使用的 markdown-github-c


2024-12-05
46
0

flex item 在其内容超出宽度而被撑开时,shrink 不生效问题

问题 最近遇到一个奇怪的问题,我有一个父元素和两个子元素,其中: 父元素:定宽、flex; 子元素 a :也设置的定宽,flex-grow 0,flex-shrink 0,flex-basis 300px 子元素 b :flex-grow 1, flex-shrink 1; 原本的需求就是,元素 a


2024-11-30
21
0

响应式布局—— @media 媒体查询

思路 需要理解的几个概念: 大屏优先,小屏优先。 所谓大屏优先还是小屏优先,它的意思就是原本你的这套布局样式默认情况下是大屏样式还是小屏样式,即不使用 @media 媒体查询下的样式。 max-width,min-width。 屏幕值是变化的,这两个值就是用来设置查询断点的,当 min-width


2024-10-30
77
0

vue 基础

简介 概念 构建用户界面的前端框架 特性 数据驱动视图、双向数据绑定 核心原理 MVVM 指令 内容渲染 v-text、插值表达式 {{}}、v-html 属性绑定 v-bind:attribute 简写为 :attribute 事件绑定 v-b


2024-07-17
127
0

css: transform、transition、animation 区别

transform 定义:转换结果,表示一个进行相应转换效果后的一个状态/帧。 常用值: translate(x, y):平移元素,x 和 y 代表水平和垂直的移动距离。 rotate(angle):旋转元素,angle 代表旋转的角度。 scale(x, y):缩放元素,x 和 y 代表水平和垂直


2023-11-23
13
0