Three.js 基础知识，Three.js 学习笔记

Three.js 相关教程：http://www.webgl3d.cn/ Three.js 是一个基于 WebGL 的 JavaScript 库，它允许你在浏览器中创建和显示3D图形。 在Three.js中通常涉及以下几个基本组件： 场景（Scene）：场景是所有对象、灯光和相机的容器。它是3D世界中所有可见元素的集合。 相机（Camera）：相机定义了观察场景的视角。Three.js中最常用的相
Three.js 基础知识，Three.js 学习笔记

WordPress用户行为回放插件，精准捕捉用户行为的每一步

在数字营销的世界里，了解用户行为是提升用户体验和转化率的关键。nicen-replay 插件，它能够让您轻松回放用户在网站上的每一步操作，从点击到滚动，再到表单填写，每一个细节都清晰可见。 nicen-replay，是一款可以监控并回放用户行为的插件，支持如下功能： 数据收集：在不影响站点速度的情况下，收集用户在站点上的操作， 实时回放：插件后台可以回放用户的所有行为，通过视频的方式来帮助你分析用
WordPress用户行为回放插件，精准捕捉用户行为的每一步

DIY.JS 开发文档， 一款专用于DIY定制的Canvas图形库

DIY.JS是一款专用于DIY定制的Canvas图形库，兼容h5、微信小程序、抖音小程序、淘宝小程序 DIY的可操作区域由两部分组成（两个层叠的Canvas对象）： 背景图层：用于物品模型绘制，比如衣服、手机壳 DIY图层：用于素材绘制，以及定义对应物品的可DIY区域 DIY区域指的是在指定物品上，用户可以进行个性化定制的区域。 DIY区域由Canvas的destination-in的混合模式进行
DIY.JS 开发文档， 一款专用于DIY定制的Canvas图形库

如何在Vue中实现单个组件的动态重新加载？

单个组件动态重新加载，指的是让某个已经渲染的组件，自动销毁然后开始一个新的生命周期。 大部分情况下，一个需求会很多种实现方法，而接下来要说明的方法，也是众多解决方法之一。 到目前为止，遇到过两个需要实现这种功能的需求： 1. 后台管理系统中，对页面的功能区域（导航栏、侧边栏之外的区域）进行局部刷新 简单一点的功能页面，或许只需要重新加载接口，触发一下数据更新就够了，但是某些复杂的页面通过更新数据来
如何在Vue中实现单个组件的动态重新加载？

Fabric.js 学习笔记，快速上手

Fabric.js官网：http://fabricjs.com/ Fabric.js自定义构建：http://fabricjs.com/build/ Fabric.js 是一个强大的、灵活的 HTML5 画布库。 在 Fabric.js 中，preserveObjectStacking 属性是一个布尔值，用于控制当对象被修改（例如移动、旋转、缩放等）时，它们在堆栈中的位置是否保持不变。 设置 pr
Fabric.js 学习笔记，快速上手

Vite如何自动导入指定目录内的静态资源文件，并生成导出模块？

上一次详细学习Vite的文档的时候还是Vite2.x，现在Vite已经到了Vite5，在此期间已经有了很多新的变化和特性，刚好今天抽空重新学习一下。 Vite 不再支持 Node.js 14 / 16 / 17 / 19，因为它们已经到了 EOL。现在需要 Node.js 18 / 20+。 查看Vite预设的各种开发模板：https://github.com/vitejs/vite/tree/m
Vite如何自动导入指定目录内的静态资源文件，并生成导出模块？

一款基于UNIAPP开发的手机壳DIY小程序（前端示例代码）

一款基于UNIAPP开发的手机壳DIY小程序（前端示例代码），兼容抖音和微信小程序，在线案例： Github：https://github.com/friend-nicen/DIY Gitee：https://gitee.com/friend-nicen/DIY 下载HBuilderX，导入项目 修改中的为你的小程序的 安装依赖 "" 运行到微信或抖音小程序（无后端代码，需要模拟接口） ├─.hb
一款基于UNIAPP开发的手机壳DIY小程序（前端示例代码）

拼多多服务商应用开发，相关笔记

开发文档：https://open.pinduoduo.com/application/document/browse?idStr=04DD98845AD2977D 拼多多服务商应用发布要求必须使用多多云的云服务器、数据库、Redis等 拼多多提供了一些可选的自带运行环境的容器。 购买的云实例操作起来，限制比较多。可以上传源代码、通过特定的方式修改配置文件以及连接web shell。 每次容器重启
拼多多服务商应用开发，相关笔记

通过PM2来管理Node、PHP CLI等脚本应用进程，什么是PM2进程管理器？

PM2官网：https://pm2.keymetrics.io/docs PM2.js是一个Node.js应用程序的进程管理器，可以帮助开发人员在生产环境中管理和监控Node.js应用程序或其他程序的进程。它可以自动重启应用程序，监控应用程序的资源使用情况，以及提供实时日志记录和错误处理等功能。此外，PM2.js还可以通过集成的API和CLI工具来管理和监控多个Node.js应用程序。 对于nod
通过PM2来管理Node、PHP CLI等脚本应用进程，什么是PM2进程管理器？

前端Server-Sent Events、EventSource接口相关知识点总结，什么是EventSource？

转自：http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html 严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。 也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来
前端Server-Sent Events、EventSource接口相关知识点总结，什么是EventSource？

前端事件总线（Event Bus）是什么？前端事件总线的简单介绍

参考文章：https://www.pipipi.net/questions/13598.html 事件总线是对发布-订阅模式的一种实现，它是一种集中式事件处理机制，允许不同的组件之间进行彼此通信而又不需要相互依赖，达到一种解耦的目的。 发布订阅模式定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并被自动更新。 发布订阅模式主要有两个角色： 发布方（Publ
前端事件总线（Event Bus）是什么？前端事件总线的简单介绍

【转】HTML5中手势原理分析与数学知识的实践

在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能降低用户的使用成本和流程，大大提高了用户的体验。 拖动: drag 双指缩放: pinch 双指旋转: rotate 单指缩放: singlePinch 单指旋转: singleRotate 长按: tap 滑动: swipe 所有的手势都是基
【转】HTML5中手势原理分析与数学知识的实践

记录一些在此之前不知道的Web API

首先回顾一下以前了解过的Web API（强确实强，但很少用到...） Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API  全屏 API 为使用用户的整个屏幕展
记录一些在此之前不知道的Web API

Canvas学习笔记，记录使用过程中遇到的一些问题

fill()，方法用于填充已有的闭合路径，假设有一个如下图的路径，默认情况下圆和方形都会被填充，最后的效果就是一个黑色的方形； 通过fillRule参数，可以指定填充的算法，决定点是在路径内还是在路径外。 允许的值： "nonzero": 非零环绕规则，默认的规则。 "evenodd": 奇偶环绕规则。 将填充规则设置为evenodd，绘制的结果会变为下面这样，通过这种方式可以实现反向裁剪。 通过
Canvas学习笔记，记录使用过程中遇到的一些问题

PHP和JS的条件判断和循环有哪些不同的地方？

在PHP的代码内，空数组等同于false，一直以为同样作为c家族系列的javascript也是这样。 某次程序怎么运行都不对，排查了之后，最后发现js的空数组等于true； 之后思考了一下，js中的数组本质是Array对象，空数组本质就是对象；只要是实例化的对象，那就是true； <?php if(){ echo "true"; }else{ echo "false"; } //最终输出
PHP和JS的条件判断和循环有哪些不同的地方？

Eslint该如何配置？Eslint使用以及相关配置说明

Eslint在过往接触过的很多开源项目内都有它的身影，习惯一个人写代码了，总觉得它可有可无，但是归根结底，好处还是很多的。 可强制规范团队编码规范，让新旧组员编码习惯得到一致提升 可灵活定制团队编码风格，让预设规则符合新旧组员心理预期 增加项目代码的可维护性和可接入性，让新组员能快速适应项目的架构与需求 保障项目整体质量，可减少无用代码、重复代码、错误代码和漏洞代码的产生几率 中文官网：https
Eslint该如何配置？Eslint使用以及相关配置说明

网页元素相交监测：Intersection Observer API

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发
网页元素相交监测：Intersection Observer API

重新理解：什么是页面生命周期API？

简而言之，在此之前，Web网页在浏览器内可以无限期地保持运行状态。随着大量网页的运行，内存、CPU、电池和网络等关键系统资源可能会被超额使用，然后就会出问题。 虽然 Web一直有和生命周期相关的事件（例如load、unload和visibilitychange），但这些事件只允许开发人员响应用户发起的生命周期状态变化。为了让Web页面能够更加稳定的运行，浏览器需要一种主动回收和重新分配系统资源的方
重新理解：什么是页面生命周期API？

Vue后台管理系统开发，相关代码的笔记。

从零开始开发后台管理系统，还是有很多值得记录的地方。构建工具Vite、使用Vue3。 /* * @author 友人a丶 * @date 2022-07-11 * @app Vue应用对象 * */ export default function (app) { /* * 指定要导入的文件目录 * 直接加载用{eager:true},懒加载用glob * */ const modules = im
Vue后台管理系统开发，相关代码的笔记。

Pinia状态管理器学习笔记，持续记录

足够轻量，Pinia 重约 1kb，甚至会忘记它的存在！ 去除 Mutation ，Actions 支持同步和异步（Actions一个顶俩，写起来简洁）； 无需手动注册 Store，Store 仅需要时才自动注册。如果从不使用，则永远不会“注册”（省心）； 没有模块嵌套，只有 Store 的概念，Store 之间可以自由使用，更好的代码分割； Vue2 和 Vue3 都能支持； 支持大型项目迁移期
Pinia状态管理器学习笔记，持续记录

Vue组件设计学习笔记，持续记录

组件化思想并不是前端独有的，但却是前端技术的延伸 任何软件开发过程，或多或少都有那么一些组件化的需求。 每个组件对应一个目录，组件所需的各种资源都在这个目录下就近维护；（最具软件工程价值） 页面上的每个独立的可视/可交互区域视为一个组件； 由于组件具有独立性，可以自由组合； 页面是组件的容器，负责组合组件形成功能完整的界面； 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换 分子是由原
Vue组件设计学习笔记，持续记录

Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录

修改.Env环境变量文件之后，需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量： .env # 在所有的环境中被载入 .local # 在所有的环境中被载入，但会被 git 忽略 .env. # 只在指定的模式中被载入 .env..local # 只在指定的模式中被载入，但会被 git 忽略 以 VUE_
Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录

JS实用函数收集，持续记录

function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = e
JS实用函数收集，持续记录

Node.js 初入门？持续记录

教程：https://www.runoob.com/nodejs/nodejs-tutorial.html 事件循环：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop 版本列表：https://nodejs.org/dist/，下载并解压： xz -d node-v17.2.0-linux-x64.tar.xz ta
Node.js 初入门？持续记录