前言今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： 1234567891011121314 div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000;}img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;} HTML代码： 123<div> <img src="avatar.jpg"></div> 效果图： 方法二：flex弹性盒子法利用flex，align-items:center是控制垂直方向居中，justify-content:center是控制水 ...

前言前一段日子学了个石头剪刀布游戏，自己在本地进行了实现，想挂在自己服务器上让他形成一个外网可访问的游戏的时候，出了问题，是接口请求路径不对的问题，现在还不知道什么原因，等解决之后我还会更一下。 所需要准备的 Node.js环境（没有的可以去官网下一下，傻瓜式安装就好） 基础的html、css、js能力 入门级的Node.js就好（因为我也是这个级别） 一个你熟悉的代码编写工具 开始上手操作首先我们需要一个html页面来作游戏结果的返回以及玩家操作。 需求分析： 我们需要一个地方来做游戏结果的返回 还需要三个按钮来给用户做操作交互 下面来看index.html文件 1234<div id="output" style="height: 400px; width: 600px; background: #eee"></div><button id="rock" style="height: 40px; width: 80px">石头</button>& ...

前言这应该是一个很常见的问题了，既然是常见的，那我们就更应该来学习一下！ 开始研究原始数组去重，最开始我的思路是这样：定义一个新数组，完后两层for循环，如果数据第一次出现，就push到新数组里，如果重复就break掉，利用j的值与res长度相等这一点来判断数据唯一，最后返回新数组就行了。 12345678910111213141516171819var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ var res = [] for(var i = 0; i < arr.length; i++){ for(var j = 0; j < res.length; j ++){ if(arr[i] === res[j]){ break } } // 如果数据第一次出现，那么执行完上面for语句后，j的值 ...

前言昨天发了有关防抖的文章，很多人都问为啥节流不一起写了呢？这当然是因为昨天那个是上实验课摸鱼写的，节流不没摸出来嘛，嘿嘿。 不过不要慌，节流，它来了！ 个人理解：节流的作用与防抖相似，都是为了限制事件的频繁触发。 如何实现节流实现节流，就要先了解节流的原理。 节流就是，在一定的时间内，只执行一次事件。 或者说是，每隔一段时间，只执行一次事件。 要与防抖做一下区分哦~ 防抖是，不管你触发了几次，我只看你最后触发的那一次，并且在若干时间后去执行此次事件。 我了解到的节流，有两种方式，分别是时间戳与定时器。 那么我们来实现一下看看吧~ 时间戳使用时间戳，当触发事件的时候，我们记录当前的时间戳，然后减去之前记录的时间戳(最一开始值一定不要忘了设为 0 )，如果大于设置的时间周期(也就是那个间隔的时间段)，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。 看完是不是觉得很简单？那我们来写一下。 具体的例子还是使用防抖的那个，懒得再写一个啦，嘿嘿~ 将防抖函数换成节流就可 防抖文章链接：都2021年了，不会还有人不知道防抖吧？ 1234567891011functi ...

前言在我们写项目遇到不听话的用户的时候，例如一个登录按钮，他就偏偏要反复点好几次，调用了/login接口好多次，是不是很烦？ 因为涉及到ajax请求，就会有这样的情况，假设 1 秒触发了 60 次，每个回调就必须在 1000 / 60 = 16.67ms 内完成，否则就会有卡顿出现。 那么只有请求需要写防抖吗？ 当然不是，凡是（可能）涉及到频繁事件触发的地方，都需要写防抖。 window 的 resize、scroll mousedown、mousemove keyup、keydown click事件 …… 我们简单的写一个小demo，看一下没有防抖跟有防抖的效果。 代码： 123456789101112// html<button id="btn" onclick="shake()"> <span id="container">点击我</span></button>// jsvar count = 1;var container = document.getEle ...

前言在之前的JavaScript中是没有模块化概念的，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。如果要进行模块化操作，就需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化，于是才有了ES6模块化的诞生。 为什么要有模块化，或者模块化的好处是什么呢？ 大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块间的相互调用，利人利己。 可以将一段复杂的程序拆解开来，方便维护可拓展。 前端模块化规范在ES6模块化诞生之前，JavaScript社区尝试并提出了AMD、CMD、commonJS等模块化规范。 但是，这些模块化规范，存在一定的差异性与局限性，并不能通用。 例如： AMD和CMD适用于浏览器端的JavaScript模块化 commonJS适用于服务器端的JavaScript模块化 Node.js 就是遵循的这个规范 导入其它模块使用require() 导出使用module.exports对象 太多的模块化规范给开发者增加了学习的难度与开发的成本。所以，ES6模块化规范诞生了！ 什么是ES6模块化规范E ...

前言ES6引入了一种新的原始数据类型Symbol表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。 Symbol的特点 Symbol的值是唯一的，用来解决命名冲突的问题 Symbol值不能与其他数据进行运算 Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名 创建Symbol的两种方式创建Symbol123// 创建Symbollet s = Symbol();console.log(s, typeof s); // Symbol() 'symbol' 打印出来的数据跟想象中是不是不一样？是不是觉得s应该是一个很长的东西？这是因为它的唯一性在这里是不可见的，所以我们才看不见。 不要慌，继续往下看，我们继续创建Symbol。 123let s2 = Symbol('Ned');let s3 = Symbol('Ned');console.log(s2 === s3); // false 我们现在传入了两个字符 ...

前言二刷JavaScript高级了，上一次是刷的黑马pink老师的课程，这次刷的是尚硅谷的课程，都是B站的课程，对课程进行了些许总结。 可能是课程有些老的原因，例如视频中仅有5个基本类型，但是目前好像是有7种。 所以结合之前所学的一些知识，对内容进行了补充。 如有错误，还望指正。 分类基本（值）类型 String：任意字符串 Number：任意的数字 boolean：true / false undefined：undefined null：null bigInt：可以用任意精度表示整数 symbol：符号类型是唯一的并且是不可修改的，通常用来作为object的key 引用（对象）类型 Object：任意对象 Function：一种特别的对象（可以执行） Array：一种特别的对象（数值下标，内部数据是有序的） 如何判断数据类型三种方法： typeof typeof返回数据类型的字符串表达 注：可以判断undefined、数值、boolean、字符串，不能判断null与object object与array instanceof 判断对象的具体类型 === ...

前言webpack在框架中多半被脚手架所集成，例如vue中的vue-cli，但是在面试中，还是会被问到，所以我们还是要了解一些必要知识，能让我们对此类技术有一个更深的认识。 不得不说，在学习过程中，我了解到了许多我之前仅仅知道那是配置文件的东西，但是经过学习了解之后，已经可以知道哪些配置是为了什么目的的了。 古人云：学吧，学会了都是你的~ 古人又云：学吧，学不死就往死里学！ 注：本文为摘录笔记，供学习使用。 什么是webpack可能大家了解的，百度搜到的，webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 还有另一种说法：webpack是前端项目工程化的具体解决方案 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。 代码压缩混淆是为了缩减文件体积，让网页打开更迅速 程序员可以放心大胆写js高级语法，webpack在具体浏览器运行的时候会有转换过程，将高级的转换成低级，没有兼容问题的代码，去浏览器里跑。 css3动画，浏览器不兼容是不 ...

前言在大一下，第一次尝试饿了么团队的element-ui的时候，我就有想过在未来自己尝试参与开发一款属于自己的组件库，但是由于种种原因，就一直没能开始啃这块饼，终于这次开学，开始尝试着自己去做一个组件库，目的有二，一是实现自己当初的梦想，二是能够进一步锻炼自己的能力。 那么，组件库计划，正式起航！ 在开始之前，去网上找了许多资料，要么是不太详细，要么是讲的太高深导致我看不大懂，挑选了很久，在掘金找到了篇自己觉得对小白很友好的博客，会在文中放给大家，本文是对我开发的组件库的一个简介。 建立项目组件库选定为基于Vue开发的组件库，所以我们要建立一个vue项目。 这里我参考了：从零到一教你基于vue开发一个组件库 我是参考这位大佬的博客来进行构建项目目录，并做出了一些修改，修改后我的目录如下： 建立一个style目录，存放所有的样式文件，包括目前的主题样式，单个组件样式，跟以后可能会有的icon样式等，早些抽离出来以方便后期维护。 建立一个utils目录，存放用到的自己封装的一些工具函数，例如日期，随机数，遍历数组等。 关于组件我们做组件库同平时自己封装项目中的组件是不一样的，做组 ...