qq_44222205的博客

原创 webpack中常见loader配置

一、如果想要打包CSS文件，需要安装两个插件style-loader 和css-loadercnpm install style-loader css-loader -D二、配置webpack.config.json文件在该文件module.export下有一个配置节点对象，module，该节点有一个rules属性，该属性是一个数组，存放了所有第三方文件的匹配和处理规则。rules数组中每一个对象都有两个属性test属性用于指定需要匹配文件的正则，use属性用于指定对应文件需要处理的插件名称

原创 html-webpack-plugin使用

1、安装cnpm i webpack-plugin -D2、在webpack.config.json中引用const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin') //第一步module.exports = { entry: path.join(__dirname, './src/main.js'), output: { path: path.join(

原创 2020最新webpack-dev-server使用

一、不使用webpack-dev-server时1、在没有配置webpack.config.js 文件时，需要使用webpack --mode development -o 被打包文件 目的文件(-o表示目的文件不存在，则创建)2、当配置webpack.config.js时const path = require('path')module.exports = { entry: path.join(__dirname, './src/main.js'), output: {

原创 display:none和visiblity:hidden的区别

相同：1、两者都能隐藏元素。不同：1、display:none 不占页面空间，visiblity:hidden 占据原先页面空间。这里必须说明的是，元素不占页面空间后，取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值，那就得用visiblity:hidden。2、display:none 的子元素也一定无法显示，visiblity:hidden 的子元素可以设置显示。display:none元素及其子元素都将隐藏，而visiblity:hidden元素的子元素却可以设置vis.

原创 计算机网络数据传输的三种交换模式

![\

原创 JS异步之generator介绍

了解细节可以访问阮一峰大神的ES6入门https://es6.ruanyifeng.com/#docs/generator，下面是我自己总结的一些介绍。一、GeneratorGenerator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。二、

原创 JS异步之Promise解决信任问题(一)

文章目录promise对于不信任问题的解决。1调用过早、调用过晚2回调未调用3调用次数过多4未能传递参数/环境值5吞掉错误或者异常promise也没有摆脱回调promise对于不信任问题的解决。1调用过早、调用过晚以为promise的then是异步的，所以不论你调用早或者晚，状态改变的早或者晚，都要等这一轮宏任务完成后才能去执行微任务，去执行then。2回调未调用1、首先，没有任何东西（包括错误）能阻止promise决议，如果你对promise注册了一个完成回调和一个拒绝回调，那么promise总

原创 JS异步之回调的缺陷

文章目录一、什么是回调函数二、回调地狱三、信任问题四、总结一、什么是回调函数回调函数，也被称为高阶函数，是一个被作为参数传递给另一个函数（在这里我们把另一个函数叫做“otherFunction”）的函数，回调函数在otherFunction中被调用。当使用一些异步的函数来实现的回调我们称为异步回调。二、回调地狱由多层嵌套的回调函数组成的代码称为回调地狱，多数在写阻塞执行代码的时候会产生。回调地狱的代码可读性差，很难让人弄清楚业务逻辑。下面便是回调地狱的代码例子`listen('click',fu

原创 JS异步之事件循环机制

一、单线程为什么会有异步说到js的单线程（single threaded）和异步（asynchronous），这不是自相矛盾么？其实，单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言，所以它本身不可能是异步的，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性，虽然有webworker酱紫的多线程出现，但也是在主线程的控制下。webworker仅仅能进行计算任务，不能操作DOM，所以本质上还是单线程。简单的来说就是

原创 JS数组方法的原生实现

文章目录一、push方法二、pop方法三、shift方法四、unshift方法五、concat方法六、slice方法七、splice方法八、reverse方法九、indexOf方法九、lastindexOf方法注，实现时没有采取在原生数组的原型上实现，所以每个方法的第一个参数都为数组，阅读时说的第一第二个参数读者可以忽略数组这个参数计算，可以忽略这个参数。一、push方法该方法接受任意个参数，然后添加到数组的末尾function push(arr, ...arg)//push 接受任意个参数，按

原创 JS数据结构之堆

堆一、堆的简介二、堆的实现1、结点数据结构2、插入元素3、删除元素4、判断堆是否为空5、创建堆6、堆排序一、堆的简介堆（英语：heap)是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵树的数组对象。堆总是满足下列性质：堆中某个节点的值总是不大于或不小于其父节点的值；堆总是一棵完全二叉树。大顶堆：每个节点的值都大于或者等于它的左右子节点的值。小顶堆：每个节点的值都小于或者等于它的左右子节点的值。堆的定义如下：n个元素的序列{k1,k2,ki,…,kn}当且

原创 JS数据结构之平衡二叉树（AVL树）

AV树的旋转AVL树概念不平衡概况四种平衡旋转方式RL平衡旋转(先右后左双旋转)LR平衡旋转(先左后右单旋转)AVL树概念前面学习二叉查找树和二叉树的各种遍历，但是其查找效率不稳定(斜树)，而二叉平衡树的用途更多。查找相比稳定很多。(欢迎关注数据结构专栏)AVL树是带有平衡条件的二叉查找树。这个平衡条件必须要容易保持。而且要保证它的深度是O(logN).AVL的条件是左右树的高度差（平衡因子）不大于1；并且它的每个子树也都是平衡二叉树。对于平衡二叉树的最小个数，n0=0;n1=1;nk=n

原创 JS数据结构之二叉排序树

二叉排序树一、什么是二叉排序树二、二叉排序树的一些操作1、查找元素1.1递归查找1.1非递归查找2、查找最大节点2.1递归查找最大节点2.2非递归查找最大节点3、查找最小节点3.1递归查找最小节点3.2非递归查找最小节点3、插入节点3.1递归法插入节点3.2非递归插入节点4、删除节点一、什么是二叉排序树二叉排序树也叫二叉查找树，二叉排序树或者是一棵空树，或者是具有下列性质的二叉树：（1）若它的左子树不空，则左子树的所有节点的值均小于它的根结点的值。（2）若它的右子树不空，则右子树的所有节点的值

原创 JS数据结构之二叉树的基础知识

一、树的基础知识1.树的定义：（1）有且只有一个称为根的节点。（2）有若干个互不相交的子树，这些子树本身也是一棵树。2.通俗的定义：（1）树由节点和边组成。（2）每个节点只有一个父节点但可以有多个子节点。（3）根节点没有父节点。3.树的一些名词：（1）节点：树的节点包含一个数据元素和若干指向其子树的分支（2）深度（高度）：从根节点到最低层节点的层数称之为深度，根节点是第一层。（3）孩子与双亲：节点的子树的根称为该节点的孩子，相应的该节点称为孩子的双亲。 （4

原创 JS数据结构之二叉树的遍历（递归、非递归）

二叉树的四种遍历方式：二叉树的遍历（traversing binary tree）是指从根结点出发，按照某种次序依次访问二叉树中所有的结点，使得每个结点被访问依次且仅被访问一次。四种遍历方式分别为：先序遍历、中序遍历、后序遍历、层序遍历。...

原创 HTML5

一、语义化标签常用新增语义化标签 :header、nav、main、article、aside、section、footer。二、表单type属性1、 邮箱验证功能2、 在移动端获取焦点时弹出数字键盘3、 网址验证功能，必须包含http4、 限制输入数字，包含小数点，有上下箭头调数字可以用max、min属性设置最大最小值5、 有一个单机删除框6、 设置范围，可以设置max 、min属性。一个滑动条7、 颜色选择器8、 时分秒9、年月日10、年月日时分秒表单其他属性1、pla

原创 JS类型判断的四种方法

1.typeoftypeof是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括number,string,boolean,undefined,object,function,symbol等。复制代码typeof “”; //stringtypeof 1; //numbertypeof false; //booleantypeof undefined; //undefinedtypeof function(){}; //

原创 超详细的DOM迭代思维图

原创 CSS Text（文本）思维图

原创 ES6类继承的原理

原创 JavaScript访问CSS样式（style）的思维图

原创 CSS-background(背景)思维导图

原创 超清晰的DOM思维图

原创 JS浅拷贝与深拷贝

浅拷贝：JS语法: var obj={ name:"barack", age:18, goods:{ apple:5 } } var o={} for(var each in obj) { o[each]=obj[each]; }ES6方法：Object.assign(new_obj,old_obj);只是拷贝外面一层，遇到对象拷贝前后是同一个对象，在堆空

原创 严格模式的改变

补充：非严格模式下代码块里面的函数声明同var相似。

原创 CSS居中方法总结（伪元素，弹性盒，定位法，动画法）

一、使用定位加margin的方式：将子元素开启定位，然后top,left设置为50%，然后margin-top和margin-left设置为负数，大小分别为该元素高和宽的一般，当然，也可以直接设置top为（50%父元素-子元素height/2），left为（50%父元素-子元素width/2）二、使用弹性盒为父元素开启弹性盒，然后设置justify-content和align-item为center；三、用table和table-cell将父元素设置为display：table子元素为table

原创 详解JS六大继承

一、 原型链继承方法：通过将子类型的显示原型prototype的值作为超类型（父类型）的实例，然后通过原型链去访问function Supertype()//超类型{ /..../}function Subtype()//子类型{/../}Subtype.prototype=new Supertype();//继承Supertype.prototype.constructor=Subtype;//将constructor指回如图优点：大家可以共用超类型原型中的方法，不会

原创 JS Array的方法与鉴别

一、鉴别数组typeof Array ：Object （不可取）array instanof（Array） ：true （可取）二、转换方法array.toString（）返回字符串array.valueOf（） 返回数组本身三、栈方法pop（）从尾部删除最后一个数据，并返回该值push（）在尾部加入新值，并返回加入后的数组长度四、队列方法push（）+shift（）从头部删除一个数据并返回该数据unshift（）从头部加入多个数据并返回新的数组长度五、重排序方法re

原创 CSS背景与边框

一、CSS的背景颜色默认渗透到border下面可以用虚线边框验证.box{margin:100px auto;height: 100px;width: 100px;background-color: antiquewhite;border: aqua 10px dashed; }二、多重边框1、box-shadow的第四个参数box-shadow：0 0 0 10px color；缺点是只能构造出实现边框.box{height: 100px;width: 100px;

原创 JS垃圾收集的两种方法

JS的垃圾收集一、标志清除思想，当一个变量无法（或者说没有途径被访问时）则回收二、引用计数当一个变量引用被声明时，计数为1，当另一个变量保存这个值时，则加1，当指向该引用的变量改变指向时，减1，当为0时，垃圾回收，但是当循环引用时，会出现无法回收，所以不常用。...

原创 JS今天又巩固了一点

1、undefined和nullundefined三种情况三种情况声明而未赋值声明而赋值为undefined未声明而typeofnull表示声明了，赋值，值为null特殊的是null==undefined

原创 JS中this关键字

1、函数直接声明调用，this是window|undefined2、挂载一个对象上，成为对象的方法，this是这个对象3、对于构造函数，使用new()关键字创造新对象，this就是这个新的对象实例4、使用工具函数如call方法可以强制指定this，让它是什么就是什么。5、用于定时器setTimeout,是window。...

原创 HTML/CSS的一些小细节（第一周）

前言：本文档是我个人在学完基础知识后，关于一些细节或者不清楚的地方的初步进阶（不是总体知识点，只是一些可能不被注意小细节）。一、BFCFormatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。只要元素满足下面任一条件

原创 CSS选择器优先级概括

一、简述在CSS中，我们使用选择器选择特定的元素然后对元素中内容添加样式，但是有时候多个选择器可能同时选择一个元素，比如一个元素同时被类选择器和元素选择器同时选择，这时我们就需要依靠元素选择器来判断应该使用哪一个选择器。二、优先级排行内联选择器>id选择器>类选择器>元素选择器>通用选择器三、优先级对于复合选择器（1）最高：在元素样式后面加上 !important如color:red !i,mportant;（2）第二高：使用内联选择器（3）其他选择器复合问题假设优

原创 CSS常用选择器（方便初学者快速学习CSS）

一、四个基本选择器1、元素选择器格式：<元素>{}；2、类选择器格式：.class{};3、id选择器格式：#id{};4、通用选择器格式 :*{};二、复合选择器1、交集选择器（1）元素选择器和类选择器组合语法：元素选择器.类选择器{}意义：需要同时满足元素选择器和类选择器的内容。（2）类选择器组合语法：.class1.class2.class3…{}意义：需要同时满足多个类选择器的内容。而通用选择题和id选择器一般不和其他嵌套，因为前者相当于全集和一