JS
菜鸭子
我回来了!!!
展开
-
当执行代码var obj = new Object();时new运算符所做的工作
333原创 2020-04-09 16:09:07 · 1313 阅读 · 0 评论 -
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 · 370 阅读 · 0 评论 -
javascript连等赋值问题
关于javascript连等赋值问题可以看一道题:下面代码执行后,foo.x的值是 ?( )var foo = {n: 1};var bar = foo;foo.x = foo = {n: 2};相信大多数人思考过后给出的答案foo.x的值为{n: 2},但事实上foo.x的值为undefined.首先我们要知道一个概念就是:. 属性运算优先高于=赋值运算,且赋值从右到左,于...原创 2020-04-05 22:24:54 · 265 阅读 · 0 评论 -
JavaScript常见代理模式之图片预加载
在WEB开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会是一片空白。常见的作法是先用一张loading图片作为占位符,然后用异步的方式来家在加载图片,等到图片加载完毕,我们再把它填充到img的节点里。这种场景很适合使用虚拟代理。首先创建一个普通的本体对象,这个对象负责往页面中创建一个img标签,并且提供一个对外的s...原创 2019-12-15 12:12:14 · 326 阅读 · 0 评论 -
详解JavaScript中的发布-订阅模式
什么是发布-订阅模式?发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。现实生活中的发布-订阅模式小梁、小花、小红都喜欢上同一家淘宝店铺的同一件衣服,当她们正要下单的之后被店家通知这件衣服没货了。小梁问店家什么时候有货,店家表示得看加工厂的工作进度,具体的上架日期还不确定,但表示可以加入他们家的粉丝群,等到衣服有货了...原创 2019-12-14 23:55:04 · 489 阅读 · 0 评论 -
JavaScript创建对象的7大模式
在JavaScript中,创建对象有7大模式,分别是工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式。下面针对这7种模式展开讲解。工厂模式工厂模式抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节。函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象。可以无数次地调用这个函数...原创 2019-12-10 23:42:10 · 246 阅读 · 0 评论 -
XMLHttpRequest通用属性和方法
属性 / 方法介绍readyState表示请求状态的整数onreadystatechangereadyState 改变时调用的函数status服务器返回的HTTP状态码(如:200、404)statusText服务器返回的HTTP状态信息(如:OK、No Content)responseText作为字符串形式的来自服务器的完整响应resp...原创 2019-12-04 23:16:55 · 373 阅读 · 0 评论 -
对象浅拷贝和深拷贝有什么区别与实现方法
在JS中,除了基本数据类型,还存在对象、数组这种引用类型。基本数据类型,拷贝是直接拷贝变量的值,而引用类型拷贝的其实是变量的地址。在这种情况下,如果改变o1或o2其中一个值的话,另一个也会变,因为它们都指向同一个地址。...原创 2019-12-02 17:11:25 · 661 阅读 · 0 评论 -
JS防抖、节流的实现以及应用场景
先来看一下没有做防抖节流处理的情况。可以发现,只要按下键盘就会触发函数调用,这样在某些情况下会造成资源的浪费,在这些情况下,可能只需要在输入完成后做请求,比如身份验证等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...原创 2019-11-24 20:50:44 · 379 阅读 · 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 · 857 阅读 · 0 评论 -
javascript中的innerWidth、innerHeight、clientWidth、clientHeight、offsetWidth、offsetHeight等属性
Window 对象属性属性描述innerWidth返回窗口的文档显示区的宽度。(不包括浏览器控制台、菜单栏、工具栏)innerHeight返回窗口的文档显示区的高度。(不包括浏览器控制台、菜单栏、工具栏)获取的是可视区的宽高Document 对象属性属性描述document.documentElement.clientWidth浏览器...原创 2019-10-11 20:24:18 · 537 阅读 · 0 评论 -
js利用定时器使当前页面缓慢移动到指定位置
需求是点击当前页面某一元素,结合定时器使页面缓慢移动到指定位置。说明一下,我这里用的是vue框架。 <div class="footer"> <a class="a-button" @click="scrollTo">start</a> </div>js代码注意:vue在同一个组件内,methods中的一个方法调用me...原创 2019-10-11 17:44:38 · 1105 阅读 · 0 评论 -
【Vue学习】Vue-cli3构建项目之TodoList效果vue组件化实现
我这里用到是Vue-cli3来构建项目。components文件夹用来存放vue组件,新建的vue组件 todolist.vue文件就是放在这里,根目录下的App.vue是根组件。App.vue<template> <div id="app" > <h1>TodoList</h1> <todolist></...原创 2019-10-02 21:49:09 · 373 阅读 · 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 · 907 阅读 · 0 评论 -
【Vue笔记】事件修饰符
Vue中事件修饰符:.stop 阻止冒泡.prevent 阻止默认事件.capture 使用事件捕获机制.self只有当事件在该元素本身(比如不是在子元素)触发时触发回调.once 事件只触发一次css代码如下:.outer{ padding:20px; background:blue;}.inner{ width:250px; height:...原创 2019-08-02 09:25:52 · 296 阅读 · 0 评论 -
ES6精练笔记
一、变量var可以重复声明无法限制修改没有块级作用域let 不能重复声明,变量 --可以修改 ,块级作用域const 不能重复声明,常量 --不可以修改 ,块级作用域二、箭头函数箭头函数//普通函数写法function(){}//箭头函数相当于把function省略,()后加=>()=>{}let show=function(a,b){alert(a+...原创 2019-07-31 09:33:42 · 145 阅读 · 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 · 11255 阅读 · 6 评论 -
浅谈js基本数据类型与引用数据类型的引用
ES变量有两种不同的数据类型:基本数据类型和引用数据类型。基本数据类型基本数据类型有:undefined,boolean,number,string,null。基本数据类型的访问是按值访问的,换句话讲就是可以操作保存在变量中的实际的值。基本数据类型的变量是存放在栈内存的。/** 2. 基本数据类型 */var a=100;var b=a; //此时a、b值都为100,但两者...原创 2019-07-13 21:55:22 · 168 阅读 · 0 评论 -
【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 · 186 阅读 · 0 评论 -
事件冒泡与事件捕获
事件冒泡与事件捕获是JS学习中必须掌握的。下面是有关事件冒泡与事件捕获的概念。什么是事件冒泡?IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。譬如:<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-06-22 11:56:05 · 194 阅读 · 0 评论 -
【ES6入门】let和const命令
let命令基本用法let命令用于声明变量,类似于var,但是声明的变量只在let命令所在的代码块内有效。不存在变量提升var命令存在变量提升,即变量可以在声明之前使用,值为undefined。但在let命令中不存在变量提升,它所声明的变量一定要在声明后使用,否则报错。暂时性死区ES6规定,如果区块中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭...原创 2019-06-16 23:12:26 · 303 阅读 · 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 · 1210 阅读 · 3 评论 -
关于JavaScript 作用域与执行上下文的简易理解
简单来说,JavaScript里的作用域好比一块“地盘”,即代码段所在的区域。同时它是静态的。下面直接上图来理解吧原创 2019-04-23 17:08:26 · 227 阅读 · 0 评论 -
浅谈JSON
JSON(JavaScript Object Notation, JS 对象简谱) 采用完全独立于编程语言的文本格式来存储和表示数据。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。JSON 语法规则在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型:对象表示为键值...原创 2019-04-27 18:21:14 · 280 阅读 · 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 · 3167 阅读 · 1 评论 -
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 · 161 阅读 · 0 评论 -
JavaScript全局函数汇总
在JavaScript中,全局函数如下:函数描述decodeURL()解码某个编码的URLdecodeURLComponent()解码一个编码的URL组件encodeURL()把字符串编码为URLencodeURLComponent()把字符串编码为URL组件escape()对字符串进行编码unescape()对escape()编码的...原创 2019-04-21 18:59:01 · 338 阅读 · 0 评论 -
js中this理解(浏览器环境下)
在学习js时,this的指向理解无疑是一大难点。最近,本人阅读了一些书籍跟知识点,知识点具体出处已不大记清。对this有了更深入的理解。下面是this的几大用法:一、全局执行console.log(this);//window全局作用域中的this指向当前的全局对象window二、函数中执行1.非严格模式中//1.非严格模式function func(){ consol...原创 2019-04-21 12:07:19 · 235 阅读 · 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 · 288 阅读 · 0 评论 -
this四大绑定规则
谈到this绑定规则要先找到函数执行过程中的调用位置。调用位置就是函数在代码中被调用的位置。这就涉及分析调用栈(就是为了到达当前执行位置所调用的所有函数)。调用位置就在当前正在执行的函数的前一个调用中。那什么是调用栈和调用位置呢?在这里插入代码片...原创 2019-04-28 23:03:23 · 338 阅读 · 0 评论 -
JS数组的迭代方法总结
JS数组的迭代方法有5种,分别是every()、some()、filter()、map()和forEach()。这5种迭代方法我有时候会混淆,于是借这个机会来好好总结一下。说明:ES5为数组定义了5种迭代方法,每个方法接收2个参数,一个是每一项运行的函数,一个事实运行该函数的作用域对象。传入的函数会接收3个参数:数组项的值、该项下标、数组对象本身。every()作用:对数组中每一项运行给定...原创 2019-05-04 23:52:47 · 556 阅读 · 0 评论 -
常见的正则表达式
相信很多小伙伴在需要用到正则校验的时候,都会遇到写不出来的尴尬情况,只能在网上寻找,这样一来花费不少时间。下面是一些常见的正则表达式:校验数字的表达式数字:n位的数字:至少n位的数字:m-n位的数字:零和非零开头的数字:非零开头的最多带两位小数的数字:带1-2位小数的正数或负数:正数、负数、和小数:有两位小数的正实数:有1-3位小数的正实数:非零的正整数:非零的负整数:...原创 2019-05-18 15:05:27 · 483 阅读 · 0 评论 -
正则表达式基本语法
正则表达式是很多前端小伙伴必学的,在遇到需要用正则校验数据时,往往是在网上去找很久,这样一来浪费了不少时间,下面先来看一下正则表达式的一些基本语法(转)吧字符描述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“n”匹配字符“n”。“\n”匹配一个换行符。串行“\”匹配“\”而“(”则匹配“(”。^匹配输入字符串的开始位置...原创 2019-05-18 11:30:36 · 210 阅读 · 0 评论 -
浅谈JavaScript中的Number类型
Number类型最基本的数值字面量格式是十进制整数,十进制整数可以向下面那样直接在代码中输入var intNum=55;除了十进制表示外,还可以通过八进制和十六进制来表示。其中,八进制字面值得第一位必须是0,然后是八进制数字序列(0~7)。如果后接的字面值超出范围,则前面的导零失效,后面的值将被当做十进制数值解析。var a=065; //八进制的53var b=085; //8...原创 2019-05-12 00:18:21 · 237 阅读 · 0 评论 -
浅谈JavaScript中的String类型
String类型用于表示由零或多个16位Unicode字符组成的字符序列,即字符串。字符串可以有双引号或单引号表示。console.log("Febby");console.log('Febby');console.log('Febby"); //报错字符字面量(转义序列)字面量含义\n换行\t制表\b退格\r回车\f进纸...原创 2019-05-12 00:14:15 · 191 阅读 · 0 评论 -
Javascript的5种基本数据类型总结
ECMAScript中有5种基本数据类型,分别是:Undefined, Null, Boolean, Number和String,还有一种复杂数据类型Object,Object本质上是由一组无序的名值对组成的。(这里就不细细讲述了)typeof操作符typeof操作符是负责检测给定变量的数据类型,下面是几个使用typeof操作符的例子这说明typeof操作符可以是变量,可以是数值字面量。...原创 2019-05-12 00:19:02 · 951 阅读 · 0 评论 -
js 中call()与apply()区别与常见用途
在JS中Function原型定义了两个方法,分别是Function.prototype.call和Function.prototype.apply。call与apply的区别Function.prototype.call和Function.prototype.apply的作用是一样的,区别在于传入参数形式的不同。apply接受两个参数,第一个参数指定了函数体内this对象的指向,第二个参数...原创 2019-05-24 23:20:03 · 402 阅读 · 0 评论 -
JS 显式原型与隐式原型图解
每个函数function都有一个prototype,即显式原型(属性),默认指向一个空的object对象。每个实例对象都有一个__ptoro__,称为隐式原型。对象的隐式原型的值为其对应构造函数显式原型的值。请看下面代码: function Fn(){ // 每个函数function都有一个prototype,即显式原型(属性),默认指向一个空的obj...原创 2019-04-29 23:53:52 · 887 阅读 · 1 评论 -
setTimeout()与setInterval()区别
定义和用法setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。提示: 1000 毫秒= 1 秒。提示: 如果你只想重复执行可以使用 setInterval() 方法。提示: 使用 clearTimeout() 方法来阻止函数的执行。...原创 2019-04-29 23:04:45 · 196 阅读 · 0 评论 -
利用Javascript实现当前系统时间显示
相信大家都在不少的网页上看到过时间显示的效果,那么如何用JS来实现呢通常的办法是利用JS创建一个Date对象,通过对象来调用Date类的方法代码如下:&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content=&qu原创 2018-09-27 18:11:07 · 5193 阅读 · 0 评论