关注
分享
千瞱
世界上没有完美的程序，但我们并不因此而沮丧，因为写程序本来就是一个不断追求完美的过程。
展开
-
three.js进阶之动画系统
一般情况下，我们很少会使用three.js的动画系统去手动创建动画——因为这真的很麻烦，更高效便捷的做法还是直接在建模软件如Blender中完成动画的制作，然后在three.js中进行播放。不过，学习了动画系统对我们还是会有帮助的，下面进入正文。创建动画涉及三个概念：关键帧Keyframes，关键帧轨迹和动画剪辑。原创 2023-04-29 17:36:01 · 2195 阅读 · 1 评论 -
React从入门到入土系列3-使用React构建你的应用
这是我自己系统整理的React系列博客，主要参考2023年3月开放的最新版本内容，欢迎你阅读本系列内容，希望能有所收货。原创 2023-04-09 22:57:17 · 410 阅读 · 0 评论 -
React从入门到入土系列1-快速上手
这是我自己系统整理的React系列博客，主要参考2023年3开放的最新版本内容，欢迎你阅读本系列内容，希望能有所收货。原创 2023-03-22 21:43:50 · 924 阅读 · 0 评论 -
React从入门到入土系列2-实战：井字游戏
这是我自己系统整理的React系列博客，主要参考2023年3开放的最新版本react官网内容，欢迎你阅读本系列内容，希望能有所收货。原创 2023-03-22 23:14:40 · 375 阅读 · 0 评论 -
Mock.js介绍及使用总结
Mock.js用于生成随机的模拟数据，拦截 Ajax 请求，返回伪造的数据。因此在前端开发阶段就可以通过这个工具进行沉浸式开发，实现数据自产自销，降低和后端的沟通成本，实现真正意义上的前后端开发解耦合。相信我，使用这个工具，一定能够提高你的工作效率。那么Mock.js有哪些特点呢？前后端分离：让前端攻城师独立于后端进行开发。增加单元测试的真实性：通过随机数据，模拟各种场景。开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。用法简单：符合直觉的接口。数据类型丰富。原创 2023-03-05 23:37:11 · 805 阅读 · 0 评论 -
Vue和React的对比
vue和React的区别对比原创 2023-03-01 15:35:29 · 2815 阅读 · 0 评论 -
React Router v6详解
React Router v6快速入门宝典，还不快来学？原创 2023-02-28 23:28:26 · 724 阅读 · 0 评论 -
React系列之Redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 和react没有必然关系，redux可以应用于各种框架，包括jquery，甚至js都可以使用redux，只不过redux和react更加搭配。redux也推出了专门应用于react的react-redux。原创 2023-02-20 22:12:19 · 439 阅读 · 0 评论 -
three.js进阶之实现3D模型粒子化效果
参考腾讯UP2017网站的效果：https://up.qq.com/act/a20170301pre/index.html。原创 2023-01-05 19:18:08 · 914 阅读 · 0 评论 -
three.js进阶之骨骼绑定
使用three.js实现骨骼绑定原创 2023-01-03 23:34:32 · 1310 阅读 · 1 评论 -
CSS高级篇之纯CSS绘制iPhone界面
https://www.zubach.com/blog/how-i-made-an-iphone-4-in-css原创 2022-10-31 16:24:38 · 358 阅读 · 0 评论 -
前端基础篇之Promise.all
js基础之Promise.all()的使用方法介绍原创 2022-09-23 19:50:15 · 529 阅读 · 0 评论 -
前端CSS篇之手写一个横向滚动的消息通知组件
如果让你自己写一个横向滚动的消息通知组件，你会怎么写呢？网上能找到很多相关的代码，不过大部分实现都不够完美——无法根据消息的长度自动计算滚动所需时间，因此每次改变通知后就得手动调整css动画的时间。我在这里提供一个用vue实现的横向滚动的消息通知组件，该组件能够根据消息长度自动计算单次消息滚动所需时间，并且可以自定义部分属性如：内容显示框的宽度、颜色、滚动速度等。.........原创 2022-06-06 00:02:50 · 1743 阅读 · 1 评论 -
前端CSS篇之手写一个正在加载中转圈动画
前端CSS篇之手写一个正在加载中转圈动画。提供一个Google风格的加载中动画，使用SVG+CSS实现，无需javascript。原创 2022-06-05 23:29:23 · 1192 阅读 · 0 评论 -
前端中级篇之给localStorage和sessionStorage设置失效时间
BOM提供了localStorage和sessionStorage用于在浏览器中保存页面数据，区别在于：使用localStorage存储的数据将会一一直存在（除非使用removeItem或者清除缓存），而sessionStorage的有效期是和存储数据脚本所在的最顶层的窗口或者是浏览器标签是一样的，一旦窗口或者标签页被永久关闭了，存储的数据也就失效了。并且，这两种web存储方式都不支持设置过期时间，那如果业务中有需求需要设置过期...原创 2022-06-02 23:06:43 · 5336 阅读 · 0 评论 -
前端提升篇之flex或grid布局实现多列均分布局
提供一个使用弹性盒布局的多列均分布局终极解决方案，能够实现下图的效果：其特点有：列数可控子元素的宽度相同列和列之间有空隙，左右两边对齐（没有空隙）子元素按照从左到右、从上到下的顺序排布父元素使用flex布局：.container { width: 100%; height: auto; border: solid 1px gray; /* 使用flex布局，设置gap*/ display: flex; flex-wrap: wrap;原创 2022-05-11 12:19:48 · 6045 阅读 · 0 评论 -
Typescript学习系列2-基础类型
本篇内容偏基础，参考自Typescript中文版handbook。Typescript学习系列2-基础类型Typescript支持与Javascript几乎相同的数据类型，此外还提供了枚举类型方便我们使用。1 布尔值只有两种取值true/false，在js和ts中都叫做boolean：let isFinished: boolean = false;2 数字和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面原创 2022-05-02 23:02:46 · 173 阅读 · 0 评论 -
Typescript学习系列1-快速上手
本文基于Typescript中文版handbook整理而成。Typescript学习系列1-快速上手1 安装Typescript有两种主要的方式安装Typescript：通过npm安装，或者通过Visual Studio的TypeScript插件，这里我使用npm安装的方式，对于前端开发人员来书更方便。使用npm安装typescript：npm install typescript -g2 编写第一个Typescript代码在编辑器中新建一个helloWorld.ts文件，在其中编写如下代码原创 2022-05-02 22:26:55 · 362 阅读 · 0 评论 -
设计模式学习之策略模式在前端的应用
策略模式是23种基本设计模式中的对象行为型模式，在我的设计模式学习之策略模式一文中已经对其进行了简单的介绍，不过使用的是Java语言编写示例代码。本文将介绍这一模式在前端中的应用，我将使用js代码进行举例说明。1 使用JS实现策略模式策略模式本身的思想比较简单，就是在我们有众多实现方法可以选择的时候，如何封装代码以符合优秀代码的基本原则如封闭原则等。在Java中需要很多个类来实现，有策略接口类、其多个实现类、上下文Context类和调用类等等，在Js中就没有这么复杂了，看下面的例子：假如现在你需要完成原创 2022-05-02 15:18:38 · 723 阅读 · 0 评论 -
form表单的action属性提交数据到指定URL
之前都是通过curl指令测试服务器是否正常，今天在测试编写的http服务器能否正常使用时，想自己写一个动态网页来测试一下效果。查找资料知道可以使用form表单的action属性来提交表单。 现将过程总结如下（按照我的尝试步骤记录）1.（相对路径）直接将URL和文件地址写到action里用这种所谓的”相对路径“方法得到的浏览器URL的结果为显然不对，这是基于本地根目录的地址的跳转。2...原创 2018-04-20 13:58:35 · 29949 阅读 · 1 评论 -
React组件的生命周期
React的生命周期包括以下三部分：装载过程（Mount）：把组件第一次在DOM树中渲染；更新过程（Update）：组件被重新渲染；卸载过程（Unmount）：把组件从DOM中删除；1.装载过程依次调用函数为：constructorgetInitialStategetDefaultPropscomponentWillMountrendercomponentDidMount1.1 construct...原创 2018-03-27 17:20:54 · 637 阅读 · 0 评论 -
纯CSS实现内容切换入门篇
如果不能使用js及其扩展库，你能实现一个带标签的可切换内容panel吗？仅仅使用CSS和HTML就可以做到哦~ 您可以先观看一下这个视频感受一下。其实主要是借助了单选框raido的CSS选择器:checked（:checked 选择器匹配每个选中的输入元素，仅适用于单选按钮或复选框）。效果实现代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title><原创 2022-04-24 21:14:49 · 750 阅读 · 2 评论 -
纯CSS实现内容切换进阶篇
使用纯CSS也能作出element-ui中的panel组件效果，而且经过精心设计还可以作出嵌套的panel效果，如下图所示：贴出源码，欢迎批评指正：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { widt原创 2022-04-24 19:57:34 · 532 阅读 · 0 评论 -
自己实现双向绑定机制（未完成）
前端双向绑定原理分析原创 2022-04-23 11:47:30 · 440 阅读 · 0 评论 -
前端基础之appendChild函数的细节
我们可以使用appendChild()函数给节点添加子节点，Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。要注意的是：如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。这意味着：一个节点不可能同时出现在文档的不同位置，所以如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被从原始父节点中移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 Node.原创 2022-04-02 23:48:55 · 1375 阅读 · 0 评论 -
前端基础篇之JS中的try-catch-finally
知识点1 javascript中的try-catch语句1.1 try-catch语句错误处理在程序设计中的重要性是勿庸置疑的，如果你的js代码在执行的过程中发生了错误，可能造成意想不到的结果（如没有反应、或者网页卡死等）。ECMA-262 第 3 版引入了 try-catch 语句，作为 JavaScript 中处理异常的一种标准方式，其基本的语法为：try{ // 可能会导致错误的代码} catch(error){ // 在错误发生时怎么处理}我们把可能会发生错误的代码放在try语原创 2022-04-02 23:36:58 · 3318 阅读 · 0 评论 -
Vue3使用Sass完全教程
sass是css的预处理器，扩展了css语言，提供了规则、变量、混入、选择器、继承、内置函数等特性，有助于减少CSS重复的代码，节省开发时间。为了在Vue中使用sass需要安装sass-loader和sass的依赖环境node-sass和sass。直接执行下面的语句安装就行了：npm install -D node-sass sass sass-loader如果发现报错了Syntax Error: TypeError: this.getOptions is not a function，是由于包的版本原创 2022-03-05 23:35:45 · 4364 阅读 · 0 评论 -
前端基础篇之防抖与节流
前端基础知识点系列——防抖与节流函数实现原创 2022-02-20 18:06:04 · 356 阅读 · 0 评论 -
CSS技巧：利用counter-reset和counter-increment实现标题自动编号
本文介绍仅仅使用CSS实现markdown中标题自动编号功能，使用到了CSS中的counter-increment、counter-reset和counter。counter-resetcounter-reset属性能够创建或重置一个或多个计数器，如：counter-reset: ticker-name 20;将会创建一个名为ticker-name的计数器，且设置其初始值为20，如果不设置初始值则默认为0。counter-incrementcounter-increment属性递增一个或多个计原创 2021-07-17 23:25:54 · 644 阅读 · 1 评论 -
Three.js入门教程——教不会算我输
在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情，因为在浏览器中就能够渲染出3D场景，非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。1 建立基本场景在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件，直接百度搜索Three.js到官网下载即可，下载完...原创 2019-06-09 17:56:27 · 89391 阅读 · 44 评论 -
使用stat.js给Three.js添加帧数监测
可以使用帧来测试程序的性能，帧数表示图形处理器每秒钟能够刷新的次数，通常使用fps（Frames Per Second）来表示。在Three.js中，性能由一个性能监视器来管理，它的介绍可以在https://github.com/mrdoob/stats.js 看到，效果展示：首先到github上下载js文件：https://github.com/mrdoob/stats.js在Thr...原创 2019-06-09 15:00:41 · 3859 阅读 · 0 评论 -
使用Three.js建立一个基本的3D动画场景
本文主要内容翻译自：https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/今天我们准备创建一个简单的飞机飞行的3D场景，使用的工具是Three.js。这是一个3D javascript，通过这个库我们可以更简单的通过WebGL编写3D程序。因为WebGL的复杂性和GLSL...原创 2018-08-30 23:08:29 · 10222 阅读 · 3 评论