-
alpinejs框架使用简介
Alpine.js是一个轻量级的JavaScript框架，设计灵感来源于Tailwind Css和Vue.js，就是一个借鉴Vue语法的JS版的TailwindAlpine.js的官方github网址：github.com/alpinejs/alpineAlpine.js无需安装，不依赖虚拟 DOM，模板通过遍历 DOM 来解析Alpine.js的一些主要特点： 1. 无需安装：同时支持npm方式和传统的script标签引入方式 2. 轻量级：核心库非常小，非常适合快速加载的网页 3. 声明式语法：使用声明式的语法，通过HTML属性来定义行为和状态 4. 响应式：提供响应式数据绑定，轻松...
2024-10-09 -
Node版本控制工具volta
nvm是一个全局级别的Node版本切换工具，可以通过命令来切换当前全局的Node版本volta是在nvm的全局Node版本切换功能基础上拓展了更为精细的项目级别Node版本切换，将项目与其所需Node版本绑定，确保每个项目都能使用正确的Node版本volta不仅可以控制Node版本，也可用于控制npm、pnpm、npx、yarn等常用的cil工具volta的实现原理就是在下载特定版本的软件并存放在工作目录中，然后由一个在Path环境变量中的同名“中转程序”去运行已经存在在工具目录的特定版本的软件 1、“中转程序”会首先在当前目录中查找package.json配置文件 2、如果有该配置文件...
2024-08-26 -
ES6的代理对象Proxy
Proxy用于修改某些对象操作的默认行为，可以理解成在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，可以对外界的访问进行过滤和改写Proxy(target,handlers)：创建代理对象target 要拦截的目标对象 handlers 处理器对象，用来定制拦截行为Proxy支持的拦截操作一共13种以下函数中propKey为键名，receiver为代理对象本身，可以省略该参数get(target, propKey, receiver)：拦截对象属性的读取set(target, propKey, value, receiver)：拦截对象属性的设置，返回一...
2023-09-16 -
svelte中的动画
动画是交互设计中重要的视觉元素，页面如果缺少了动画，会显得俨乎其然而变得生硬无趣，少了许多生机页面上的动画并非越是花俏夺目就越好，主要都是一些偏线性的过渡效果，在操作与操作之间缓和过渡，避免生硬svelte为我们内置了常见动画的简单实现运动（motion）：元素的某个属性不同值的补间 过渡（transition）：元素离开和进入运动效果运动效果由svelte/motion模块支持，该模块导出两个函数tweened和spring这两个函数都是创建一个writable（可写）的store其中tweened函数主要用于补间动画，spring主要用于弹性动画tweened补间动画import {...
2023-09-13 -
svelte中的状态管理
props可以由父组件传递给子组件，但是一个应用程序是由很多组件通过复杂的组合而成的，并不单单仅存在父子关系的组件两个非父子组件之间想要传递数据时，就需要用到svelte内置的状态管理store，类似于vue中的Vuex当期望脱离组件的层级（父-子）关系且能够在任意位置都能访问某个状态（变量）时，状态管理是非常有用的状态分为可写状态(writable)和只读状态(readable)两种类型，需要从"svelte/store"中引入已经为我们创建好的工厂函数一般我们会将创建的状态数据单独放置于一个js文件中，以便所有需要此数据的组件引用可写状态(writable)创建可写状态：writab...
2023-09-03