邓占勇的博客

如果让你实现下面的这种动画效果你会怎么做？​ 可能很多人第一想法就是使用绝对定位进行布局，当顺序发生变化后，计算出变化后的位置，然后通过动画过渡到指定位置。这是一种很常见的实现方式，但存在几个问题：需要维护每个节点的位置信息顺序变化后，需要计算每个DOM的目标位置使用绝对定位的方式，每行显示的小方块个数是固定的，不能自适应容器的变化。过程分析无论多么复杂的动画，都可以拆解成多个动画的组合。对于上面的效果，就可以看成是每个小方块的变化，这里只涉及到了位置的变化，当然还可能存在大小、颜色等变

脚手架的基本原理点击查看脚手架系列文章总览【正在更新】个人网站：www.dengzhanyong.com关注公众号【前端筱园】，不错过每一篇文章什么是脚手架可以理解为是用来提高项目整个流程的工具，从初始化到开发，再到构建部署等。在整个过程中会帮我们完成一些比较复杂，且与实际业务并不太相关的工作。脚手架的作用或必要性自动化：创建项目，运行，构建，部署；这些事情都可以用过一句简单的命令完成。标准化：模板标准化；开发规范标准化；发布流程标准化；数据化：安装原理以 vue-cli 为例

JavaScript的运行机制运行栈JavaScript的执行环境是 单线程 的，所谓单线程，就是每次都只能做一件事，后面的事必须等前面的执行完才可以进行。console.log(1);console.log(2);console.log(3);console.log(4);// 1， 2， 3， 4但是这有一个弊端，如果中途遇到某个操作长时间无法执行完成，那么后面的任务就必须排队等待，这严重影响了整个执行过程，会导致浏览器无响应。为了解决这个问题，JavaScript将任务分为了 .

准备前提 服务器（以阿里云的轻量应用服务器为列） 已经开发好的网站 服务器简介 内存：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...

在开发中图标跟我们是形影不离的，在开始之前先聊一些题外话，图标有什么作用？通用图标可以代替文字说明，能更简洁地表达某个设计的意图，让用户看到图标就知道它代表什么？有什么用途？LOGO类图标可以起到品牌宣传，同时因图标更醒目，占据更大的位置，用户更容易点击。看图片更符合人的视觉需求，简洁的图片能降低人的信息焦虑。试想我们如果看到一个满满的文字的页面，是不是常常有信息恐惧，可能就会选择退出。但是大多数情况下只有图标是不行的，还需要配上文字说明，如果用户看到一个图标，花很多时间都不能理解它

什么是故障艺术顾名思义，Glitch art 就是“故障艺术”。这个词的意思就是“失灵；短时脉冲波干扰”，可以理解成一种自动或人为的bug。但是Glitch art不一定是只限制于数码环境中的，在analog art里出现的机械、或人为干扰产生的故障都可以被归为“故障艺术”；但重要的一点是，这不止是一种故障的呈现和表现，还应该是一种基于“故障”的审美创作，所以Glitch art也可以是看做是“美化故障”，或者通过“故障”完成审美活动的创作手段。身边的故障艺术–抖音LOGO抖音的logo就是一种

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。它有以下属性值：normal：正常multiply：正片叠底screen：滤色overlay：叠加darken：变暗lighten：变亮color-dodge：颜色减淡color-burn：颜色加深hard-light：强光soft-light：柔光difference：差值exclusion：排除hue：色相saturation：饱和度color：颜色luminos

从现在开始，告别copy正则表达式！​ 在我们编码过程中，正则表达式是我们常来顾客，尤其是表单字段的校验。为了图方便，常常的做法就是去网上进货，然后作为中间商卖给表单。这种做法虽然方便，但是只能满足普通客户（表单）的需求，如果遇到一个大客户需要定制产品（特性的校验规则），到时我们再去学习如何制作就来不及了，客户不等人，失去了客户不说（项目延期），有可能还有扣你尾款（挨上级批斗）；基础知识基本语法/pattern/[modifiers];pattern：模式modifiers：修饰符修饰

VUE3.0最大的更新就是加入了compositionAPI，我相信你在阅读完这文章后，对3.0的用法会有更深入的认识。如果你想更好地过渡到3.0，建议看一下上篇文章【vue3.0迁移指南（上）】为什么要引入一个全新的API？在 V3.0 以前，我们开发一个组件都使用一个固定的模板结构，我相信大多数使用VScode开发的小伙伴们，已经把该模板配置到了vscode中。当然这个模板你可以自定义为你常用的内容和结构。<template> <div class="wrapper"&.

在实现之前我们先了解下VUE的响应式是什么；它是Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。博主网站：www.dzyong.top微信公众号：《前端筱园》原理是什么VUE中实现响应式运用到了JavaScript中object的一个很重要的属性Object.defineProper...

1、引言扫码登录这个功能，最早应该是微信的PC端开始搞，虽然有点反人类的功能（不扫码也没别的方式登录），但不得不说还是很酷的。下面这张图，不管是IM开发者还是普通用户，应该很熟悉：于是，搞IM产品的老板和产品经理们，从此又多了一个要抛给程序员们的需求——“为什么微信有扫一扫登录，而我们的没有？”。好吧，每次只要是微信有的功能，IM程序员们想甩锅，难度就有点大了，必竟老板们都都...

单词sticky的中文意思是“粘性的”，当然他的特性也很符合他的名字。我们一般常用的position属性无非就是relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。relative：生成相对定位的元素，相对于其正常位置进行定位。 absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 fixed：生成绝对定位的元素，相对...

原文出自于本人个人博客网站：https://www.dzyong.com（欢迎访问）本文链接地址: https://www.dzyong.com/#/ViewArticle/89（转载请标注来源）设计模式系列博客：JavaScript设计模式系列目录（持续更新中）什么是继承继承是面向对象软件技术当中的一个概念。如果一个类别A“继承自”另一个类别B，就把这个A称为“B的子类别...

小程序中要想获取用户的位置，是需要用户授权的。本来以为位置授权和信息授权是一样的，使用button主动触发，设置button的open-type的值。然后去微信开放文档看了下，并没有相关的值。那怎么办呢，只有换一种方法，小程序提供了一个打开授权设置的API：wx.openSetting。wx.openSetting({ success: function(res) ...

最近在做自己的一个小程序项目时，想添加一些比较高大上的功能，我之前一直用的都是百度云的产品，发现百度云开放了很多免费的服务。具体方法和步骤请移步至本人个人博客：https://www.dzyong.com/#/ViewArticle/81...

最近在做小程序时想做一个APP的那种滑动tab效果，滑动内容可以使用小程序原生的swiper实现，标题滑动效果使用动态样式实现，直接上图。先看wxml部分的代码<!--Tab布局--> <view class='title'> <view class='titleSel' bindtap='titleClick' data-i...

在网页用我们经常需要用到爱心❤，比如说给文章点赞，或者给你喜欢的人比心心~~。在网页中显示一个爱心，有3中方式：    1.图片： 使用图片的方式有两个缺点，一是要请求资源并且图片放大后如果像素不够会显示的很模糊，第二点不可以任意改变颜色，当需要使用多种不同颜色的爱心的，需要不用的图片。    2.Canvas：Canvas可以绘制出个性的形状，但是实现起来相当的繁琐，每一个形状都需要...

       直接步入主题，3大前端框架我选择的是vue 3.0，使用element-ui作为主要开发组件，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，虽然官网上写的是基于Vue2.0，但是在Vue3.0中我使用时并没有发现有什么影响。element-ui中文网：http://element-cn.eleme.io/#/zh-CNVue-cli...

1.启动FlashFXP，可看到分为左右两个部分，一部分是服务器端（需要登录连接），另一部分是本地端，左右位置可以相互切换。2.点击上方的会话中的快速连接，会弹出如下窗口，连接类型选择FTP，URL、端口号、用户名和密码可以在你购买的云虚拟机配置信息中查看。3.连接成功后可看到有一个名为webroot的文件夹，该文件夹就是我们所要上传网页的根目录，在此目录下你可以创建任意数量的...

HTML部分要为header部分设置一个模糊的背景图片作为背景，HTML部分如下，把内容部分与背景部分都作为header的一级子元素&lt;div class="header"&gt; &lt;div class="text"&gt; 这里写要显示的内容 &lt;/div&gt; &lt;div class="background"&g

在说工厂方法模式之前先说一下安全模式类什么是安全模式类，安全模式类就是说可以屏蔽使用这对类的错误使用造成的错误，这听起来有点不容易理解，那下面举一个例子。现在我们创建了一个Dome类如下：var Dome = function(text){ this.text = text;}Dome.prototype = { show:function(){ ...

概述ES5的对象名都是字符串，这很容易造成命名冲突。ES6引入了一种原始的数据类型Symbol，表示独一无二的值。它是JavaScript语言的第7中数据类型。Symbol值通过Symbol函数生成。也就是说属性名可以有两种类型：一种是原有的字符串，另一种就是新增的Symbol类型。let s = Symbol();typeof s   //”symbol”注：Symbo...

扩展运算符（...）扩展运算符(spread)是三个点(...)，他如同rest参数的逆运算，将一个数组转为逗号分隔的参数序列console.log(...[1, 2, 3]) //1 2 3console.log(0, ...[1, 2, 3], 4) //0 1 2 3 4该运算主要用于函数调用function push(array. ...items){ ...

属性的简介表示法ES6允许在对象中只写属性名，不写属性值。这是，属性值等于属性名所代表的变量。function f(x, y){ return {x, y}};等价于 function f(x, y){ return {x: x, y: y}};·除了属性，方法也可以简写var o = {method() {.....}}  等价于 var o = {method: f...

Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案--回调函数和事件--更合理且更强大。Promise对象具有以下两个特点：对象的状态不受外界影响。Promise对象代表一个异步操作，有3中状态：Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。 一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise也有一些缺...

简介基本概念    Generator函数是ES6提供的一种异步变成解决方案，语法行为与传统函数完全不同。Generator在形式上是一个普通函数，但是有两个特征：一是function命令与函数名之间有一个星号；二是函数体内部使用yield语句定义不同的内部状态。function* helloGenerator() { yield ‘hello’; yield...

块级作用域let取代varES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而let没有副作用。 ‘use srict’if( true ) { console.log( x );   //ReferenceError let x = ‘hello’;}上面的代码如果用var代替let，那么consol...

一、CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(ani...

前面的Telnet的命令使用方法部分是我在网上搬过来的，后面的内容是我在自己初学实践时所遇到的一些问题及解决方法。Telnet使用介绍　　1、点击开始　→　运行　→　输入CMD，回车。　　2、在出来的DOS界面里，输入telnet测试端口命令： telnet IP 端口 或者 telnet 域名 端口，回车。　　如果端口关闭或者无法连接，则显示不能打开到主机的链接，链接失败；端口打开的...

之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下：安装路由npm install vue-router创建router.js与mian.js同级router.js中的内容为import Vue from 'vue'import Router from...

    大家好，首先很欢迎和感谢查看我的博客。我先简单的介绍一下我自己，我是一名应届生，进入前端行业差不多半年的时间，基本上算是自学过来的，肯定走过很多弯路，自己在网上学习，喜欢利用已有的只是来做一些东西，因此我做的项目对于那些大神来说肯定是小菜一碟，如果你对我的项目还感兴趣的话，那么请继续往下看，查漏补缺，相互学习。    这个项目前端主要用到的是非常流行的VUE作为框架，选用基于 Vue ...

很多才开始做前端的人，都希望自己所做的作品可以让其他人都可以搜索到，或者是想自己建设一个自己的个人网站。就像我们搜索www.baidu.com一样，首先我们要先有一个域名，域名是需要购买的，可以在阿里云，百度云，腾讯云等很多平台上购买，这个域名是全球唯一的，只能购买未被他人注册的域名。域名的后缀名也有很多，不同的后缀名价格不同，一般.com/.cn的比较常见。大多数价格都比较便宜，一年几块到几...