- 博客(191)
- 收藏
- 关注
RSS订阅
原创 服务端推送技术
服务端推送技术文章目录服务端推送技术@[toc]可行方案一、短轮询二、长轮询三、websocket四、server-sent events(SSE)4.1 客户端API4.1.1 EventSource对象4.1.2 基本用法五、对比及结论环境声明平台: windows 10浏览器: chrome 95.0.4638.54node: v10.16.0npm: 6.9.0node依赖:express: 4.17.1axios: v0.21.1ws: 8.3.0注意: express
2021-12-19 11:52:06
1519
转载 elementUI实现数组（需要验证的数据是以数组的形式呈现）表单验证
elementUI实现数组表单验证<el-form :model="couponForm" ref="couponForm" label-width="200px"> <el-form-item v-for="(item,idx) in couponForm.actIdList" :label="'活动期间第' + (idx + 1) + '次下单得'" :prop="'actIdList['+idx+']'" :rules="{ required: true, message:
2020-09-13 14:51:34
6512
转载 npm全局安装和局部文件安装区别
全局安装安装位置全局安装方式是键入命令：npm install webpack -g 或 npm install webpack --global，包安装在Node安装目录下的node_modules文件夹中，一般在 \Users\用户名\AppData\Roaming\ 目录下，可以使用npm root -g查看全局安装目录。调用方式全局安装后可以供命令行(command line)使用，用户可以在命令行中直接运行该组件包支持的命令。本地安装安装位置本地安装方式是键入命令：npm insta
2020-06-29 20:36:59
597
原创 npm init
1、为什么要使用npm init初始化项目在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以
2020-06-29 12:18:28
20945
转载 移动端前端适配方案（总结）
from:链接移动端前端适配方案1.Media Queries优点缺点2.Flex弹性布局3.rem + viewport 缩放实现原理4、rem实现1.Media Queriesmeida queries 的方式可以说是最早期的移动端布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/}优
2020-06-10 10:19:56
1003
原创 SASS用法指南
以下内容转载于阮一峰大佬的博客，有改动和增加的部分SASS用法指南一、什么是SASS二、安装和使用2.1 安装2.2使用三、基本用法3.1 变量3.2 计算功能3.3 嵌套3.4 注释四、代码的重用4.1 继承4.2 Mixin4.3 颜色函数4.4 插入文件4.5 占位符4.6 混合宏、继承、占位符 比较五、高级用法5.1 条件语句5.2 循环语句5.3 自定义函数5.4 值列表5.5 除法需要注意的地方一、什么是SASSSASS是一种css的预处理器，帮助开发者节约编写css样式的时间。二、.
2020-05-27 14:43:42
250
原创 Sass中文乱码
./scss文件编译后的.css文件很明显，出现了中文乱码，那么如何解决呢？解决方案首先找到下图的文件，打开进行修改如下图，设置编码方式即可解决
2020-05-27 12:03:01
318
原创 Sass与WebStorm搭配使用
sass的编译方式有大体两种，第一种是用图形化界面，也就是下一些软件进行编译，网上一查一大堆，第二种就是命令行方式，但每次自己手动去编译就很麻烦，虽然可以使用命令sass --watch sass/:css/来监听文件修改并实时更改输出的css文件，但每次去设置也很麻烦，所以webstorm提供的自动编译就很舒服了。Sass安装因为sass是依赖于ruby的，所以想要安装sass，需要先安装ruby。安装地址，windows安装方法就一直next完事。安装好ruby以后，打开cmd，输入gem ins
2020-05-26 19:01:29
431
原创 Sass 4种输出方式
.scss文件内容nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 1.嵌套输出 nested:nav ul { m
2020-05-26 18:45:56
709
转载 从前序与中序遍历序列构造二叉树&&从中序与后序遍历序列构造二叉树
注:题目源自leetcode105&106，题目说明中元素是不重复的，所以采取map保存元素与索引的映射，便于寻找元素，如果需要构造有重复元素的树，请自行寻找相应元素的索引(无非就是遍历，所以我懒得写了，下面的内容呢，整理于这里)从前序与中序遍历序列构造二叉树题目根据一棵树的前序遍历与中序遍历构造二叉树。注意:你可以假设树中没有重复的元素。例如，给出前序遍历 preorder = [3,9,20,15,7]中序遍历 inorder = [9,3,15,20,7]返回如下的二叉树：.
2020-05-22 14:37:50
244
转载 HTML 去掉table表单里面td之间的间距
1.首先为大家展示一下最原始的代码和效果。直接在table中用td划分的表格会默认隐藏边框。2.接下来我们用css来增加样式，为table增加边框。table {border: 1px solid #804040;}修改后的效果是整个table增加了外边框，table内还是没有边框。3.然后我们用css来为td增加边框。table td {border: 1px solid #804040;}修改后的效果是每个td都增加了边框，显示效果为table全部显示单边框。4. 接下
2020-05-18 16:33:48
6999
1
转载 HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
1.新语义元素：HTML5提供了新的语义元素来明确一个Web页面的不同部分。<header>：描述了文档的头部区域，于定义内容的介绍展示区域<nav>：定义导航链接的部分。<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。<article>：定义独立的内容。<aside>：定义页面主区域内容之外的内容（比如侧边栏）。<figure&g
2020-05-18 14:53:17
518
转载 标准盒模型和怪异盒模型
盒子模型众所周知，这里先简单介绍一下。可以看到，在标准盒模型(box-sizing:content-box)下，width和height是内容区域即content的width和height。而盒子总宽度为在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)而IE盒模型(box-sizing:border-box)或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。
2020-05-18 13:02:49
254
原创 栈与队列的相互模拟(leetcode225&&leetcode232)
一、用队列实现栈1.1 Question使用队列实现栈的下列操作：push(x) – 元素 x 入栈pop() – 移除栈顶元素top() – 获取栈顶元素empty() – 返回栈是否为空注意:你只能使用队列的基本操作-- 也就是 push to back, peek/pop from front, size, 和 is empty这些操作是合法的。 你所使用的语言也许不支持队列。 你可以使用 list 或者 deque（双端队列）来模拟一个队列 ,只要是标准的队列操作即可。 你可以
2020-05-11 21:16:39
164
转载 Promise.all手动实现
前言假设一下Promise其他所有函数都正常工作，但Promise.all功能失效了，我们现在就要为程序重写一个Promise.all。Promise.all正常使用下面为Promise.all的功能展示。正常情况下我们应该输出数组对象[1, 2, 3]。let promise1 = new Promise(function(resolve) { resolve(1);});let...
2020-04-23 22:23:44
946
2
转载 什么是A*寻路算法？
转载于：https://www.sohu.com/a/191037466_478315比如像这样子：第一步：把起点放入OpenList第二步：找出OpenList中F值最小的方格，即唯一的方格Node(1,2)作为当前方格，并把当前格移出OpenList，放入CloseList。代表这个格子已到达并检查过了。第三步：找出当前格上下左右所有可到达的格子，...
2020-04-23 14:19:19
141
原创 部分常用排序的js实现
var arr = [5,1,4,8,2,3,0,8]; //冒泡排序 //冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 functio...
2020-04-21 08:56:45
111
转载 观察者模式和发布订阅模式的区别
之前一直对观察者模式和发布订阅模式的区别理解不深，正好这段时间在看vue源码的分析，vue数据双向绑定也用到了发布订阅模式，于是又把这两者探究了一番，今天做个笔记加强印象。观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。从图中可以看出，观察者模式中观察者和目标直接进行交互，而发布订阅模式中统一由调度中心进行处理，订阅者和发布者互不干扰。这样一方面实现了解耦，还有就是可以实...
2020-04-19 21:28:36
539
转载 媒体查询的两种方式
第一种：link的方式：<link rel="stylesheet" media="screen and (max-width:600px)" href="./css/blue.css"><link rel="stylesheet" media="screen and (min-width:900px)" href="./css/red.css"><link r...
2020-04-16 22:30:51
394
转载 关于==和equals的区别和联系
长篇大论的话，我这里就不多写了，相信大家入门java 的时候就知道个大概了，这里想表述的是，如果面试官问你《关于==和equals的区别》，该怎么回答完美呢？可以这样说总结的来说：1）对于==，比较的是值是否相等如果作用于基本数据类型的变量，则直接比较其存储的 “值”是否相等；如果作用于引用类型的变量，则比较的是所指向的对象的地址2）对于equals方法，注意：equals方...
2020-04-10 21:22:04
99
转载 defer和async
<script src="path/to/myModule.js" defer></script><script src="path/to/myModule.js" async></script>上面代码中，<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它...
2020-04-09 09:08:17
118
转载 css面试点-BFC（块级格式化上下文）与常见布局方案
定位方案常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (flo...
2020-04-07 22:51:13
160
原创 宏任务与微任务
首先我们来看一段代码： console.log("script start!") setTimeout(function () { console.log("setTimeout"); },0); new Promise(function (resolve) { console.log("promi...
2020-04-07 19:10:11
251
原创 inline元素与inline-block元素的margin与padding测试
目录测试paddinginline元素padding测试部分inline-block元素的padding测试部分测试margininline元素的margin测试inline-block元素的margin测试总结测试paddinginline元素padding测试部分先上代码(注意以下所有代码只要为特殊声明，均给 * 的css选择器添加了margin:0与padding:0)：<sp...
2020-04-06 14:24:07
494
原创 实现Vue双向绑定
先用v-bind:value将msg数据的更新绑定到input上，然后给input添加input事件，每次监听输出并更新msg的值，以此达到双向绑定。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义双向绑定</titl...
2020-04-05 19:23:28
120
转载 js防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖(一段时间内连续事件只处理最后一次)函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，...
2020-04-05 16:20:10
86
原创 Vue 计算属性VS侦听VS方法
先来看一个应用场景，一个人名字由firstName以及LastName构成，我需要知道fullName，我们采用三种方式实现并进行对比。第一种：方法<body> <!--挂载点 模板 示例区别--> <div id="root"> {{fullName() + " " + age}} </div> ...
2020-04-04 17:55:59
216
原创 Vue生命周期
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。beforeCreate类型：Fu...
2020-04-04 09:26:38
143
转载 五大主流浏览器及四大内核
任何上过网的用户对浏览器是再熟悉不过了。只是用户看到仅仅只是浏览器本身，却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww（Library WorldWideWeb）浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨...
2020-03-31 22:31:36
170
原创 货币格式化 前端
function moneyFormat(num) { num = num.toString().replace(new RegExp("\\$|￥|,",'g'),''); //符号位 sign=(num==(num=Math.abs(num))); num=Math.round(num*100...
2020-03-31 21:03:29
201
原创 documnet.onload与$(document).ready等执行顺序测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .circle{ width: 0; hei...
2020-03-31 21:03:20
172
转载 动态规划经典例题——最长公共子序列和最长公共子串
1. 最长公共子序列（LCS）1.1 问题描述1.2 思路利用动态规划。下一步就要找到状态之间的转换方程。因此可以根据这个方程来进行填表，以"helloworld"和“loop”为例：1.4 找到具体的子序列如果有两个字符串如下：S1 = “123456778”S2 = “357486782”其最终的动态规划填表结果为：其中S1和S2的LCS并不是只有1个。我们根...
2020-03-31 21:03:09
755
转载 HashMap
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNDcyODk5NQ==&mid=2647598226&idx=1&sn=a31576ea0f6e4d5169b3b7acba15b557&chksm=831cf55eb46b7c48a5956dde2930a97fc079ee1c8c14f142c80f1029fb61ae562...
2020-03-30 11:21:25
114
原创 快排
package TestCode;public class QuickSort { public void quickSort(int[] arr, int low, int high) { if (low < high) { int index = getIndex(arr, low, high); quickSort(arr, low, index); qu...
2020-03-29 14:20:04
350
转载 图解排序算法(四)之归并排序
基本思想归并排序（MERGE-SORT）是利用归并的思想实现的排序方法，该算法采用经典的分治（divide-and-conquer）策略（分治法将问题分(divide)成一些小的问题然后递归求解，而治(conquer)的阶段则将分的阶段得到的各答案"修补"在一起，即分而治之)。分而治之可以看到这种结构很像一棵完全二叉树，本文的归并排序我们采用递归去实现（也可采用迭代的方式去实现）。分阶段可...
2020-03-29 13:47:28
185
转载 JavaScript数组去重（12种方法，史上最全）
数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能回被问到。一、利用ES6 Set去重（ES6中最常用）function unique (a...
2020-03-27 18:31:32
234
转载 js的基本数据类型有哪些？
js的基本数据类型有哪些？ECMAScript中有5中简单数据类型（也称为基本数据类型）: Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型，St...
2020-03-27 15:18:46
530
转载 Set 和 Map 数据结构(ES6)
原链接：Set 和 Map 数据结构原作者：阮一峰目录1、Set基本用法Set 实例的属性和方法（1）keys()，values()，entries()（2）forEach()（3）遍历的应用2、WeakSet含义语法3、Map含义和基本用法实例的属性和操作方法（1）size 属性（2）Map.prototype.set(key, value)（3）Map.prototype.get(key)...
2020-03-27 13:38:08
98
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人