![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
菜鸭子
我回来了!!!
展开
-
当执行代码var obj = new Object();时new运算符所做的工作
333原创 2020-04-09 16:09:07 · 1280 阅读 · 0 评论 -
websocket中的心跳重连机制
11111原创 2020-04-09 15:45:05 · 723 阅读 · 1 评论 -
node.js搭建简易版本的聊天室
首先要先安装node,node的安装教程可以百度安装完成node之后新建一个文件夹,里面新建一个server.js文件和index.html文件。server.js负责服务器方面的内容,index.html负责网页渲染方面的内容。如图所示:下面打开cmd安装依赖:由于npm是国外的库安装速度可能有点慢,可以安装cnpm淘宝镜像,执行下面命令npm install -g cnpm --re...原创 2020-04-08 09:58:36 · 340 阅读 · 0 评论 -
JavaScript常见代理模式之图片预加载
在WEB开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会是一片空白。常见的作法是先用一张loading图片作为占位符,然后用异步的方式来家在加载图片,等到图片加载完毕,我们再把它填充到img的节点里。这种场景很适合使用虚拟代理。首先创建一个普通的本体对象,这个对象负责往页面中创建一个img标签,并且提供一个对外的s...原创 2019-12-15 12:12:14 · 265 阅读 · 0 评论 -
详解JavaScript中的发布-订阅模式
什么是发布-订阅模式?发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。现实生活中的发布-订阅模式小梁、小花、小红都喜欢上同一家淘宝店铺的同一件衣服,当她们正要下单的之后被店家通知这件衣服没货了。小梁问店家什么时候有货,店家表示得看加工厂的工作进度,具体的上架日期还不确定,但表示可以加入他们家的粉丝群,等到衣服有货了...原创 2019-12-14 23:55:04 · 450 阅读 · 0 评论 -
详解TCP连接释放四次挥手过程
TCP连接释放的过程叫做挥手,挥手需要在客户和服务器之间交换四个TCP报文段。下图是四报文挥手释放TCP连接的过程:数据传输结束后,通信的双方都可释放连接。现在A和B都处于ESTABLISHED状态。结合情侣分手来演示一下四报文挥手(A是男方,B是女方):A的应用进程先向其TCP发出释放报文段,并停止再发送数据,主动关闭TCP连接。A把连接释放报文段首部的终止控制位FIN置1,其序号s...原创 2019-12-13 11:26:08 · 1316 阅读 · 0 评论 -
详解TCP建立连接三次握手过程
TCP建立连接的过程叫做握手,握手需要在客户和服务器之间交换三个TCP报文段。下图是三报文握手建立TCP连接的过程:在这个例子中,A作为客户端主动打开连接,B作为服务端被动打开连接。一开始,B的TCP服务器进程先创建传输控制块TCB,准备接受客户进程的连接请求。然后服务器进程就处于LISTEN(收听)状态,等待客户的连接请求。如有,即做出响应。A的TCP客户进程也是首先创建传输模块TC...原创 2019-12-12 22:27:03 · 1621 阅读 · 0 评论 -
从浏览器地址输入url到显示页面的步骤(以HTTP为例)
在浏览器地址输入url浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤如果资源未缓存,发起新请求;如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证;检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control:(HTTP1.0提供 Expires,值为一个绝对时间表示缓存新鲜日期;HTTP1.0 增加了Cac...原创 2019-12-12 12:00:31 · 438 阅读 · 0 评论 -
JavaScript创建对象的7大模式
在JavaScript中,创建对象有7大模式,分别是工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式。下面针对这7种模式展开讲解。工厂模式工厂模式抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节。函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象。可以无数次地调用这个函数...原创 2019-12-10 23:42:10 · 205 阅读 · 0 评论 -
XMLHttpRequest通用属性和方法
属性 / 方法介绍readyState表示请求状态的整数onreadystatechangereadyState 改变时调用的函数status服务器返回的HTTP状态码(如:200、404)statusText服务器返回的HTTP状态信息(如:OK、No Content)responseText作为字符串形式的来自服务器的完整响应resp...原创 2019-12-04 23:16:55 · 337 阅读 · 0 评论 -
javascript前端导出csv文件
JS前端利用a标签直接导出导出的原理如下:a标签的datasource功能直接下载文件 a标签的download属性,用以声明下载的文件名csv文件的BOM头,data:text/csv;charset=utf-8,\ufeff,特别指出\ufeff是BOM头,可以让excel等识别出csv文件的编码。注意:每一个表格中的数据用逗号相连,行与行之间需要添加换行符进行换行结合代码...原创 2019-11-19 17:24:51 · 788 阅读 · 0 评论 -
【学习HTML5】 网页存储Web Storage技术
Web Storage组成Web Storage实际上由两部分组成:sessionStorage与localStorage 。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。localStorage用于持久化的...原创 2019-10-16 19:46:29 · 372 阅读 · 0 评论 -
【Node.js】npm命令与cnpm
什么是NPM?NPM的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。Nodejs自身提供了基本的模块,但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是,Nodejs库和框架为我们提供了帮助,让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦,有了NPM,可以很快的找到特定服务...原创 2019-07-13 20:53:59 · 197 阅读 · 0 评论 -
VSCode中调试Node.js
最近在学习Node.js,虽然在命令行窗口cmd可以运行node程序,但对于平时开发调试感觉不是特别方便,加之本人习惯使用VSCode开发前端,于是在VSCode中调试Node变得就方便多了。首先到Node.js官网下载并安装好Node.js,具体步骤省略。这是我安装好的Node.js接着在本机安装好VSCode,这一步可以自行百度解决,这里不多说。打开VSCode,点击这个像昆虫的按钮,...原创 2019-07-13 20:26:46 · 650 阅读 · 0 评论 -
浅谈js基本数据类型与引用数据类型的引用
ES变量有两种不同的数据类型:基本数据类型和引用数据类型。基本数据类型基本数据类型有:undefined,boolean,number,string,null。基本数据类型的访问是按值访问的,换句话讲就是可以操作保存在变量中的实际的值。基本数据类型的变量是存放在栈内存的。/** 2. 基本数据类型 */var a=100;var b=a; //此时a、b值都为100,但两者...原创 2019-07-13 21:55:22 · 160 阅读 · 0 评论 -
在for循环中运行setTimeout的三种情况
在for循环中运行setTimeout是前端开发很常见的一种模式。最近被考了一道相关的题目觉得很有意思也很容易犯错,于是记录下来当做学习笔记。下面先来看一段代码: for(var i=0;i<10;i++){ setTimeout(console.log(i),0); }看完这段代码思考一下结果输出是什么呢?是不是第一时间想到的是连续的10个10呢?啊哈哈这样就...原创 2019-07-05 21:41:39 · 11160 阅读 · 6 评论 -
【less笔记】css预处理器
今天抽空看了有关less的学习视频,学到了很多~下面是观看视频抄写的笔记大纲,也当做是我之后复习的内容吧什么是less?less 是一种动态样式语言,属于css预处理器的范畴,它扩展了css语言,增加了变量、Mixin、函数等特性,使css更易维护和扩展;less既可以在客户端运行,也可以借助Node.js在服务端运行。less中的注释以 // 开头的注释,不会被编译到css文件中...原创 2019-07-11 20:09:35 · 165 阅读 · 0 评论 -
VsCode相对路径读取问题
最近在学习Node.js,使用VsCode作为开发工具,结果遇到一堆bug啊啊啊啊启动服务器后一直无法找到对应请求文件,可是看了一下代码没问题啊~~~~真的找bug找到怀疑人生,找了很久最后发现是VsCode相对路径读取问题!!!真的哭了嘤嘤嘤这是我要读取的文件相对路径,可是在VsCode下的相对路径读取就直接变成从 “02/public/lib/bootstrap/dist/css/b...原创 2019-07-16 10:51:26 · 8514 阅读 · 12 评论 -
【Vue笔记】Vue生命周期函数详细图解
Vue生命周期函数详细图解如下:原创 2019-08-03 16:17:16 · 262 阅读 · 0 评论 -
ES6精练笔记
一、变量var可以重复声明无法限制修改没有块级作用域let 不能重复声明,变量 --可以修改 ,块级作用域const 不能重复声明,常量 --不可以修改 ,块级作用域二、箭头函数箭头函数//普通函数写法function(){}//箭头函数相当于把function省略,()后加=>()=>{}let show=function(a,b){alert(a+...原创 2019-07-31 09:33:42 · 133 阅读 · 0 评论 -
【Vue笔记】事件修饰符
Vue中事件修饰符:.stop 阻止冒泡.prevent 阻止默认事件.capture 使用事件捕获机制.self只有当事件在该元素本身(比如不是在子元素)触发时触发回调.once 事件只触发一次css代码如下:.outer{ padding:20px; background:blue;}.inner{ width:250px; height:...原创 2019-08-02 09:25:52 · 268 阅读 · 0 评论 -
【Vue笔记】 v-model指令与v-bind指令区别
v-bind 只能实现数据的单向绑定,从 M 绑定到 V ,无法实现数据的双向绑定。v-model 指令可以实现表单元素和 Model 中的数据的双向数据绑定。v-model 指令只能运用在表单元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...原创 2019-08-02 09:50:44 · 871 阅读 · 0 评论 -
牛客题目:要在10秒后调用checkState,下列哪个是正确的
最近在复习牛客错题,有一道题我觉得挺实用,也是很多人会犯错的一个知识点。原题是这样的:要在10秒后调用checkState,下列哪个是正确的()A.window.setTimeout(checkState,10);B.window.setTimeout(checkState,10000);C.window.setTimeout(checkState(),10);D.window.set...原创 2019-04-26 19:35:03 · 3126 阅读 · 1 评论 -
【Node.js笔记】模块化简介
本人最近在学习Node.js,看了一些学习视频,里面讲到了Node基础里的模块化,于是我根据视频讲解记录了相关笔记以作为日后复习的大纲。什么是模块化在Node中,一个js文件就是一个模块。我们首先定义两个js文件,一个01_moudle.js,一个02_moudle.js现在我们想要在02_moudle.js中访问01_moudle.js中的属性,可以吗?那么要先说一下在Node中如何引...原创 2019-07-12 21:57:56 · 159 阅读 · 0 评论 -
事件冒泡与事件捕获
事件冒泡与事件捕获是JS学习中必须掌握的。下面是有关事件冒泡与事件捕获的概念。什么是事件冒泡?IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。譬如:<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-06-22 11:56:05 · 165 阅读 · 0 评论 -
【ES6入门】let和const命令
let命令基本用法let命令用于声明变量,类似于var,但是声明的变量只在let命令所在的代码块内有效。不存在变量提升var命令存在变量提升,即变量可以在声明之前使用,值为undefined。但在let命令中不存在变量提升,它所声明的变量一定要在声明后使用,否则报错。暂时性死区ES6规定,如果区块中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭...原创 2019-06-16 23:12:26 · 274 阅读 · 0 评论 -
this四大绑定规则
谈到this绑定规则要先找到函数执行过程中的调用位置。调用位置就是函数在代码中被调用的位置。这就涉及分析调用栈(就是为了到达当前执行位置所调用的所有函数)。调用位置就在当前正在执行的函数的前一个调用中。那什么是调用栈和调用位置呢?在这里插入代码片...原创 2019-04-28 23:03:23 · 310 阅读 · 0 评论 -
JS数组中常用的方法总结
我经常会混淆JS数组中常用的方法,然后每次做题每次错(泪的教训啊呜呜呜),终于我下定决心来好好整理一下!下面是JS数组中常用的方法:push()、unshift()、pop()、shift()、reverse()、slice(startIndex,endIndex)、splice(index,num,item1,item2,…)、concat()、join(str)、indexOf(item)、...原创 2019-05-04 00:12:06 · 1150 阅读 · 3 评论 -
关于JavaScript 作用域与执行上下文的简易理解
简单来说,JavaScript里的作用域好比一块“地盘”,即代码段所在的区域。同时它是静态的。下面直接上图来理解吧原创 2019-04-23 17:08:26 · 196 阅读 · 0 评论 -
浅谈JSON
JSON(JavaScript Object Notation, JS 对象简谱) 采用完全独立于编程语言的文本格式来存储和表示数据。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。JSON 语法规则在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型:对象表示为键值...原创 2019-04-27 18:21:14 · 249 阅读 · 0 评论 -
JavaScript中的提升理解
一、先有蛋(声明)后有鸡(赋值)直觉上会认为JS代码在执行时是由上到下一行一行执行的。但实际上这并不完全正确。下面看一段代码: a=2; var a; console.log(a); //2很多人觉得a声明在后,所以应该输出undefined,但事实并非如此,真正的输出结果是2。再来看一段代码console.log(a);var a=2;//undefined这时控制台会输出...原创 2019-04-21 22:06:42 · 125 阅读 · 0 评论 -
JavaScript全局函数汇总
在JavaScript中,全局函数如下:函数描述decodeURL()解码某个编码的URLdecodeURLComponent()解码一个编码的URL组件encodeURL()把字符串编码为URLencodeURLComponent()把字符串编码为URL组件escape()对字符串进行编码unescape()对escape()编码的...原创 2019-04-21 18:59:01 · 316 阅读 · 0 评论 -
js中this理解(浏览器环境下)
在学习js时,this的指向理解无疑是一大难点。最近,本人阅读了一些书籍跟知识点,知识点具体出处已不大记清。对this有了更深入的理解。下面是this的几大用法:一、全局执行console.log(this);//window全局作用域中的this指向当前的全局对象window二、函数中执行1.非严格模式中//1.非严格模式function func(){ consol...原创 2019-04-21 12:07:19 · 223 阅读 · 0 评论 -
(笔记+个人理解)立即执行函数表达式IIFE
IIFE(Immediately Invoked Function Expression)代表立即执行函数表达式。下面看一段代码var a=2;(function foo(){ var a=3; console.log(a); //3})();console.log(2); //2由于函数被包含在一对()括号内部,成为了一个表达式,通过在末尾加上另外一个()可以立即...原创 2019-04-20 23:28:08 · 277 阅读 · 0 评论 -
css3属性 -webkit-filter用法
说明CSS滤镜属性,可以在元素呈现之前,为元素的渲染提供一些效果,如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。语法-webkit-filter:none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | saturate() | s...原创 2019-01-13 22:58:11 · 1286 阅读 · 0 评论 -
JS数组的迭代方法总结
JS数组的迭代方法有5种,分别是every()、some()、filter()、map()和forEach()。这5种迭代方法我有时候会混淆,于是借这个机会来好好总结一下。说明:ES5为数组定义了5种迭代方法,每个方法接收2个参数,一个是每一项运行的函数,一个事实运行该函数的作用域对象。传入的函数会接收3个参数:数组项的值、该项下标、数组对象本身。every()作用:对数组中每一项运行给定...原创 2019-05-04 23:52:47 · 526 阅读 · 0 评论 -
setTimeout()与setInterval()区别
定义和用法setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。提示: 1000 毫秒= 1 秒。提示: 如果你只想重复执行可以使用 setInterval() 方法。提示: 使用 clearTimeout() 方法来阻止函数的执行。...原创 2019-04-29 23:04:45 · 166 阅读 · 0 评论 -
JS 显式原型与隐式原型图解
每个函数function都有一个prototype,即显式原型(属性),默认指向一个空的object对象。每个实例对象都有一个__ptoro__,称为隐式原型。对象的隐式原型的值为其对应构造函数显式原型的值。请看下面代码: function Fn(){ // 每个函数function都有一个prototype,即显式原型(属性),默认指向一个空的obj...原创 2019-04-29 23:53:52 · 856 阅读 · 1 评论 -
常见的正则表达式
相信很多小伙伴在需要用到正则校验的时候,都会遇到写不出来的尴尬情况,只能在网上寻找,这样一来花费不少时间。下面是一些常见的正则表达式:校验数字的表达式数字:n位的数字:至少n位的数字:m-n位的数字:零和非零开头的数字:非零开头的最多带两位小数的数字:带1-2位小数的正数或负数:正数、负数、和小数:有两位小数的正实数:有1-3位小数的正实数:非零的正整数:非零的负整数:...原创 2019-05-18 15:05:27 · 467 阅读 · 0 评论 -
正则表达式基本语法
正则表达式是很多前端小伙伴必学的,在遇到需要用正则校验数据时,往往是在网上去找很久,这样一来浪费了不少时间,下面先来看一下正则表达式的一些基本语法(转)吧字符描述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“n”匹配字符“n”。“\n”匹配一个换行符。串行“\”匹配“\”而“(”则匹配“(”。^匹配输入字符串的开始位置...原创 2019-05-18 11:30:36 · 197 阅读 · 0 评论