- 博客(125)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【惊人内幕！】断更一年，背后竟隐藏这样的秘密！重新归来，更精彩内容等你来揭秘！
本次更新后，将会继续更新内容，和大家一起共同交流，相互学习，共同进步。也希望大家可以给我提供一些好的建议和想法。欢迎大家访问我的个人网站也欢迎大家关注我的公众号，不错过我的每一篇推送。
2024-04-09 17:50:40
408
原创 10分钟掌握HTML拖放API！让你的网页元素瞬间拥有拖拽功能，轻松提升用户体验！
在日常开发中，拖拽功能无疑是一个常见的需求场景。为了更好地满足这一需求，HTML5提供了一套便捷的拖放API。这些API不仅能够帮助开发者轻松实现拖拽效果，还可以提高排查拖拽问题的效率，甚至可以让我们更加灵活地自定义拖拽场景和设计能力
2024-04-09 17:34:36
720
原创 FLIP动画实现思路
如果让你实现下面的这种动画效果你会怎么做？ 可能很多人第一想法就是使用绝对定位进行布局，当顺序发生变化后，计算出变化后的位置，然后通过动画过渡到指定位置。这是一种很常见的实现方式，但存在几个问题：需要维护每个节点的位置信息顺序变化后，需要计算每个DOM的目标位置使用绝对定位的方式，每行显示的小方块个数是固定的，不能自适应容器的变化。过程分析无论多么复杂的动画，都可以拆解成多个动画的组合。对于上面的效果，就可以看成是每个小方块的变化，这里只涉及到了位置的变化，当然还可能存在大小、颜色等变
2022-05-28 12:59:47
1423
原创 脚手架开发(3) - 执行阶段
点击查看脚手架系列文章总览【正在更新】个人网站：www.dengzhanyong.com关注公众号【前端筱园】，不错过每一篇文章脚手架的第三个阶段：执行阶段，本篇文章以脚手架初始化项目命令为例进行讲解。前言对于脚手架的每个命令的执行，都拆分成了独立的 npm 包来执行，执行相应的命令时，会将对应的 npm 命令包下载到本地缓存中，若缓存中已存在但非最新版本，也命令的注册阶段会帮我们完成自动更新。然后执行本地缓存中的文件即可。为了方便调试，支持传入本地路径，如果符合条件，则会执行本地代码，对.
2022-02-08 16:34:47
755
2
原创 脚手架开发（2）-注册阶段
点击查看脚手架系列文章总览【正在更新】个人网站：www.dengzhanyong.com关注公众号【前端筱园】，不错过每一篇文章在上篇文章，已经完成了第一个阶段：准备阶段，在准备阶段做了许多基础工作，目的为保证满足脚手架的运行环境。现在开始进入第二阶段：注册阶段，主要功能是完成命令的解析，以及命令的动态加载的实现。前期改造首先介绍两个常用的脚手架命令行交互工具包：yargs、commander他们给我们在开发脚手架提供了极大的方便，功能大致相同，本篇文章使用的是 commander 作为.
2022-01-04 21:10:07
1014
1
原创 脚手架开发（1）-准备阶段
脚手架的基本原理点击查看脚手架系列文章总览【正在更新】个人网站：www.dengzhanyong.com关注公众号【前端筱园】，不错过每一篇文章初始化项目1. 创建项目文件mkdir steamed-clicd steamed-cli2. 使用lerna初始化项目lerna init项目默认结构如下：C:.| .git│ lerna.json│ package.json│└─packages在此基础上需要进行一些改动：删除 packages 目录， p
2021-12-27 19:07:12
813
原创 脚手架的基本知识
脚手架的基本原理点击查看脚手架系列文章总览【正在更新】个人网站：www.dengzhanyong.com关注公众号【前端筱园】，不错过每一篇文章什么是脚手架可以理解为是用来提高项目整个流程的工具，从初始化到开发，再到构建部署等。在整个过程中会帮我们完成一些比较复杂，且与实际业务并不太相关的工作。脚手架的作用或必要性自动化：创建项目，运行，构建，部署；这些事情都可以用过一句简单的命令完成。标准化：模板标准化；开发规范标准化；发布流程标准化；数据化：安装原理以 vue-cli 为例
2021-12-13 21:43:26
1548
原创 使用 canvas 制作魔方墙
故事起因我是一个魔方爱好者（只是爱好，但技术并不强），在大学期间担任过魔方社社长，每到招新的时候，一般都会用上千个魔方拼出招新二维码，显得比较有逼格。二维码本身也是一个一个的小格子组成，并且只有两种颜色，把二维码下载下来，然后画一些辅助线用魔方照着拼出来就好了。有一年女朋友过生日，我想用魔方拼出他的照片人像，肯定比较有意义。但是有一个棘手的问题，如何将一张图片转换为6种颜色的小格子呢，当时在网上始终都没有找到符合的工具，于是这个想法也就破灭了。几年过去了，忽然又回想起这件事，想着是不是可以用JavaS
2021-10-28 09:11:05
2894
原创 nginx报错：nginx: [emerg] the “ssl“ parameter requires ngx_http_ssl_module in /project/api/nginx.conf:
报错原因：未安装 ngx_http_ssl_module 模块解决方法：查看nginx安装了哪些模块/usr/local/ngxin/sbin/nginx -Vnginx version: nginx/1.12.2built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) configure arguments:configure arguments 后面没有任何参数，表示没有安装任何模块安装 ngx_http_ssl_modu
2021-10-25 11:05:17
6337
5
原创 JavaScript同步与异步
JavaScript的运行机制运行栈JavaScript的执行环境是 单线程 的，所谓单线程，就是每次都只能做一件事，后面的事必须等前面的执行完才可以进行。console.log(1);console.log(2);console.log(3);console.log(4);// 1， 2， 3， 4但是这有一个弊端，如果中途遇到某个操作长时间无法执行完成，那么后面的任务就必须排队等待，这严重影响了整个执行过程，会导致浏览器无响应。为了解决这个问题，JavaScript将任务分为了 .
2021-08-09 19:54:28
965
2
原创 你用过Object.is() 方法吗？
方法说明Object.is() 方法用来判断两个值是否相等，它接收两个参数，分别是需要比较的两个值。返回一个 Boolean 值标示这两个值是否相等。Object.is(123, 123); // trueObject.is(123, '123'); // falseObject.is([], []); // falseObject.is(NaN, NaN); // true我们在开发中，基本上都是使用 == 与 === 来判断两个值是否相等，可能有的人会问了，他们与 Object.i
2021-07-21 09:01:10
3200
2
原创 公众号开发【消息自动回复】
申请测试号前期为了方便开发与调试，可以先申请一个测试号用户开发联调。地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login开始接入第一步：配置接口信息 登录微信公众平台官网后，在公众平台官网的开发-基本设置页面，勾选协议成为开发者，点击“修改配置”按钮，填写服务器地址（URL）、Token和EncodingAESKey，其中URL是开发者用来接收微信消息和事件的接口URL。Token可由开发者可以任意填写，用作生成签
2021-07-01 16:26:55
3223
3
原创 React + Koa 实现文件断点续传
断点续传什么是断点续传断点续传，指的是在上传/下载的过程中，由于网络或其他原因导致上传/下载终断。可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传/下载。用户可以节省时间，提高速度。整体思路流程1. 选择文件-解析文件先来一个选择文件的input和一个上传按钮<div> <input type="file" ref={InputRef}/> <Button type="primary" onClick={uploadFil
2021-06-22 13:32:49
801
原创 从零搭建个人网站服务器
准备前提 服务器（以阿里云的轻量应用服务器为列） 已经开发好的网站 服务器简介 内存：2G CPU：2核 系统盘：60G 系统镜像：CentOs 已经预安装了PHP 与 Mysql 环境安装1. node环境搭建如果后端使用的是node开发，那需要安装node的运行环境使用wget命令，下载文件$wget https://nodejs.org/dist/v8.11.3/node-v14.16.1-linux...
2021-05-26 19:53:30
1997
原创 用CSS也可以任意改变PNG图标颜色？
在开发中图标跟我们是形影不离的，在开始之前先聊一些题外话，图标有什么作用？通用图标可以代替文字说明，能更简洁地表达某个设计的意图，让用户看到图标就知道它代表什么？有什么用途？LOGO类图标可以起到品牌宣传，同时因图标更醒目，占据更大的位置，用户更容易点击。看图片更符合人的视觉需求，简洁的图片能降低人的信息焦虑。试想我们如果看到一个满满的文字的页面，是不是常常有信息恐惧，可能就会选择退出。但是大多数情况下只有图标是不行的，还需要配上文字说明，如果用户看到一个图标，花很多时间都不能理解它
2021-03-11 13:49:06
3549
原创 原来CSS的background还可以这么玩
身为一个前端开发者，背景是开发中的常客。大到整个网站的主题背景，小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到，绝大多数情况下我们都只会使用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣，通过本文让你用纯CSS也可以开发出炫酷的背景。开始之前在开始之前，先请你回答下面的问题，如果你能全部回答正确，说明你对 background 属性掌握的还不错哦！1.径向渐变默认形状是什么？A：原型 B：椭圆形2. background 属性的值为多个时
2021-03-09 11:00:05
1245
7
原创 奇思妙想CSS之“故障艺术”
什么是故障艺术顾名思义，Glitch art 就是“故障艺术”。这个词的意思就是“失灵；短时脉冲波干扰”，可以理解成一种自动或人为的bug。但是Glitch art不一定是只限制于数码环境中的，在analog art里出现的机械、或人为干扰产生的故障都可以被归为“故障艺术”；但重要的一点是，这不止是一种故障的呈现和表现，还应该是一种基于“故障”的审美创作，所以Glitch art也可以是看做是“美化故障”，或者通过“故障”完成审美活动的创作手段。身边的故障艺术–抖音LOGO抖音的logo就是一种
2021-02-19 16:40:19
462
原创 小程序“订阅消息”采坑记
我在小程序的【每日一题】中新增了订阅功能，这篇文章就来讲讲设计及开发过程中遇到的坑。什么是订阅消息消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。订阅消息推送位置：服务通知订阅消息下发条件：用户自主订阅订阅消息卡片跳转能力：点击查看详情可跳转至该小程序的页面订阅消息包括两种：一次性订阅消息一次性订阅消息用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可不限时间地下发一条对应的服务消息；每条消息可单独订阅或退订。
2021-02-06 11:27:23
955
原创 我终于也有自己的小程序啦
这是一篇非技术性文章，我想分享一下自己做一些自己的产品的体验与感想。作为一个程序员，也想拥有一些自己的东西。一年多前，开始建设自己的个人网站，当时也才毕业，什么都不懂，我从没有过使用博客构建平台的想法，那与拿别人的东西没什么区别。开始时，一篇空白，也不知道如何下手。从功能出发，自己担任其了产品经理、UI设计、前端开发、后端开发、测试、运维的角色，慢慢的有了一些小的基础，然后在上面一点一点的拓展与优化。又去学习如何建站、学习linux，只要涉及到自己的盲区就要去学习，也习惯了去体验这个过程。通过写博客进
2021-01-26 16:43:06
508
6
原创 博客中添加动漫妹子，总有一个适合你，嘿嘿嘿！
常喜欢逛博客的你，是不是会碰到一些有意思的东西，有很多博客网站都有一个卡通人物，它一直盯着你鼠标移动的地方，俗称看板娘。是不是好想拥有她？今天就来讲讲如何在自己的博客中添加类似的功能。如果你的数学知识和创造力比较好的话，可以自己手写一个简单的动画人物，当然这样的人比较少，毕竟这也是一个很耗时的过程，并且效果比较单一。手写不行就来用现成的，业界已有一些比较成熟的方案，比较受欢迎的就是 L2Dwidget。如何使用急速添加<script type="text/javascript" c.
2020-12-23 14:17:15
4345
5
原创 【你不知道的CSS】mix-blend-mode
mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。它有以下属性值：normal：正常multiply：正片叠底screen：滤色overlay：叠加darken：变暗lighten：变亮color-dodge：颜色减淡color-burn：颜色加深hard-light：强光soft-light：柔光difference：差值exclusion：排除hue：色相saturation：饱和度color：颜色luminos
2020-12-04 15:15:40
1634
2
原创 从现在开始，和copy正则say拜拜！
从现在开始，告别copy正则表达式！ 在我们编码过程中，正则表达式是我们常来顾客，尤其是表单字段的校验。为了图方便，常常的做法就是去网上进货，然后作为中间商卖给表单。这种做法虽然方便，但是只能满足普通客户（表单）的需求，如果遇到一个大客户需要定制产品（特性的校验规则），到时我们再去学习如何制作就来不及了，客户不等人，失去了客户不说（项目延期），有可能还有扣你尾款（挨上级批斗）；基础知识基本语法/pattern/[modifiers];pattern：模式modifiers：修饰符修饰
2020-11-27 14:26:17
237
原创 React & Render Props
话不多说，直接从一个例子开始，点击元素，为当前元素随机改变一种背景色import React, { useState } from 'react';const ChangeBgColor = (props) => { const [color, setColor] = useState('#fff'); const randomNumber = () => { return Math.floor(Math.random() * 255); };
2020-11-14 13:54:35
201
原创 教你如何3分钟把VUE项目打包成apk，真的只要3分钟
前提准备使用vue-cli3搭建的项目工具HBuilder X，他的图标长这个样子，点击下载做前端的大多数小伙伴们都应该知道，使用起来轻巧、急速，但是他主要是针对于VUE生态打造的，相对于 vscode 缺少了丰富的插件支持以及多语言编译的支持。但是它也有vscode无法满足的功能，比如说今天我们就要用它来把vue项目打包为 apk。打包步骤执行 npm run build 打包vue项目下载并安装HBuilder X依次点击文件》新建》项目，选择 5+APP(A) 选项，并填写好项目名
2020-11-03 16:18:28
9115
4
原创 vue3.0迁移指南（下）
VUE3.0最大的更新就是加入了compositionAPI，我相信你在阅读完这文章后，对3.0的用法会有更深入的认识。如果你想更好地过渡到3.0，建议看一下上篇文章【vue3.0迁移指南（上）】为什么要引入一个全新的API？在 V3.0 以前，我们开发一个组件都使用一个固定的模板结构，我相信大多数使用VScode开发的小伙伴们，已经把该模板配置到了vscode中。当然这个模板你可以自定义为你常用的内容和结构。<template> <div class="wrapper"&.
2020-10-22 11:13:46
728
原创 vue3.0详细迁移指南（上）
Vue3.0从一年前就开始预热，在前几天终于正式发布了。我相信很多小伙伴在很早前就开始关注了3.0的一些改变和新特性，喜欢尝鲜的小伙伴也肯定早就尝过了，在几个月前我也写过一篇关于vue3.0的文章，简单讲了一些新的特性【vue3.0有哪些改变】。虽然3.0已经正式发布了，你也可以开始尝试在新的项目中使用3.0进行开发，但是如果你想对之前的2.x项目升级到3.0的话，我不建议去做升级，我觉得这个没有太大的必要的。但是后面使用3.0开发必然是一个趋势，所以从现在开始去学习3.0的改变是很有必要的，由于内.
2020-09-24 10:01:53
1945
原创 关于JavaScript数据类型，你知道多少？
JavaScript的数据类型是每一个前端开发者必须要掌握的内容，也是最基础最重要的角色之一，关于JavaScript数据类型你知道多少？JavaScript一共有7种数据类型：String、Number、Null、Undefined、Boolean、Object、Symbol(ES6新增)。他们可以分为两大类：值类型和引用类型。在文章最后会讲解他们的区别。undefinedundefined未找到的意思，它的值只有一个，也就是undefined，我们可以通过以下几种方式得到undefined：.
2020-09-04 17:40:51
202
原创 JavaScript模块机制
commonJS规范模块引用你可以通过require来引入你所需要的模块，这个方法接收模块标识，以此引入一个模块的API到当前上下文中。const fs = require('fs');模块定义一个模块就是一个文件，文件中你可以定义或处理任何方法，但你必须要有一个出口， 用于导出你想要暴露的方法，上下文提供了exports对象就是用来导出的，它也是唯一的出口。在模块中，还存在一个module对象，它代表模块本身，而exports是module的属性。// common.jsfunction
2020-08-28 11:38:00
385
原创 如何灵活运用JavaScript中的this
JavaScript中的this面对对象的语言中，this表示当前对象的一个引用，但在JavaScript中，this不是固定不变的，它会随之执行环境的改变而改变。一般情况下this指向全局变量window作为对象方法调用时，this指向上级对象作为构造函数调用时，this指向new出的对象在函数中，非严格模式下this指向全局对象，但是在严格模式下this指向undefined[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LwMy7ONK-15946141
2020-07-13 13:31:28
316
原创 让你在不编写 class 的情况下使用 state 以及其他的 React 特性【React hook】
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。那么，什么是 Hook?Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。（不推荐把你已有的组件全部重写，但是你可以在新组件里开始使用 Hook。）什么时候使用 Hook?如果你在编写函数组件并意识到需要向其添加一些 stat
2020-07-04 15:16:26
622
原创 初学DvaJS，掌握核心概念后原来如此简单
dva是什么dva 首先是一个基于 redux和 redux-saga的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router和 fetch，所以也可以理解为一个轻量级的应用框架。dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。dva 是 react 和 redux 的最佳实践。最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装
2020-06-29 20:13:13
778
原创 浅谈react组件
组件化思想vue和react都是现在最火的两大前端框架之一，无论是vue，还是react，他们都采用的是组件化的思想。对于一个前端开发人员来说，组件这个词并不陌生，也可以感受到组件所带来的好处与快感。我就随性的讲讲我个人对组件化思想的看法，组件化并不是前端所特有的，在很多方面都会涉及到。我把它带来的好处分类两个大的方面：把复杂的问题进行拆分，简化问题提高公共内容的复用性，灵活性再通俗易懂的来说，就好比搭积木一样，假如我们需要做一个火车模型，我们会在众多的零散的积木零件中，找到所需要用到的零件，
2020-06-17 19:10:28
303
原创 个人小程序诞生记【第二周】积分排名、生成海报、积分抽奖
最近一段时间应该会很少更新发布技术性博客，重心还是放在尽快开发完成自己的小程序，不知道大家是否有这样的感觉，当你想开发一个自己的项目时，设计起码占了80%以上的时间，其实开发的过程很简单，主要耗时的还是设计的过程，包括功能设计、界面设计、数据库设计等等。对于界面设计来说，自己又不是专门做UI的，没有那么强的设计天赋，只有在网上多逛逛素材来寻找灵感。我的这个小程序从上周开始开发，我想以后每周记录一下它的成长过程，如果你对我现在所做的事很感兴趣，欢迎关注我的个人公众号，一起多多交流，相互学习。公众号我放在了文
2020-06-10 18:20:02
1123
4
原创 个人小程序『小馒居』筹备中
好长时间没有写博客了，最近10天只写了一篇。并不是我颓废了，而是在忙于开发新的内容，没有太多时间去写博客，写一篇博客满打满算起码都需要5个小时左右，还不算上前期的准备。那就来说一下最近这10天主要在做什么，之前说的会对我的网站加入订阅功能，到目前为止，已经完成了整个流程的拉通，初步的功能已经完成，但是考虑到还有很多权限等方面的问题没有测试，因此可能距离上线还有一段时间。这个功能并不是很急，所以目前并没有花很多时间去做这个。从最开始的网站1.0，到2.0，主要功能还是发布分享博客，但是网站存在的局限
2020-06-01 14:09:45
900
6
原创 学会对复杂度的计算与优化，提高程序执行效率
复杂度一词在程序的世界里经常听到，最常见的就是对于一个排序算法，我们都会去评估它的时间复杂度和空间复杂度。今天我们就来谈谈对复杂度的理解，这也是作为开发人员必备的技能之一。什么是复杂度复杂度是代码运行效率的重要度量因素，它直接影响了我们所开发出来的程序的运行效率，如果一个程序运行卡的要命，甚至出现死机的情况，我相信没有愿意去体验。所以说降低程序的复杂度是非常有必要的。复杂度的分类复杂度在程序中分为时间复杂度和空间复杂度两种。时间复杂度：顾名思义就是程序锁运行的时间。空间复杂度：程序运行所需.
2020-05-21 11:53:52
2282
原创 Webpack SourceMap快速定位错误位置
什么是Source Map我们在使用webpack时，运行时的打包后的代码，然而打包后的代码是经过转换压缩了的，如果我们在开发过程中代码出现了错误，在浏览器中只能定位到打包后的代码中出现错误的地方，而无法定位到打包前代码的错误位置，这使得我们在查找错误点时相当的麻烦。然而有了SourceMap，它可以对打包前后的文件进行映射。Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了这种映射关系后，出错时，可以在控制台直接显示源代码中出错的位
2020-05-15 09:35:48
3812
原创 我的个人网站新增【订阅】功能即将上线
我的网站V2.0版本上线也已经有一段时间，通过几个月的运营，得到了很多网友的支持与问题反馈，修复了多个bug，也在对一些样式进行了优化。由于最近一段时间比较忙，主要着重于博客内容的编写与发布，对网站本身没有怎么去在意。我的网站：www.dengzhanyong.com公众号：【前端筱园】共同学习，关注公众号，了解最新进展接下来近期的计划将着重于对网站功能的新增，也可能会对已有的内容进行一些调整。为了更加及时的向关注我的人推送内容，计划对我的网站新增【订阅】功能，每当我发布新的内容时会通过邮件的
2020-05-12 22:01:56
431
原创 使用webpack-dev-server提高webpack开发效率
这是webpack系列文章的 【第四期】，希望你在阅读前已经看过前几期的文章如何使用webpack实现模块化打包webpack的核心机制之loader的秘密彻底剖析webpack的plugin插件机制前言在前面几期介绍了webpack的基本概念，用法，流程，loader机制与plugin机制，其实看起来好像已经掌握webpack。但是我们只以这些认知去在实际中开发使用还是远远不够的。在...
2020-05-08 19:14:53
504
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人