joyouscola的博客

懒加载与预加载的区别

joyouscola — Thu, 03 Jun 2021 20:25:28 +0800

懒加载：延迟加载图片，达到加载条件时再加载。原理：img的src属性初始不放置实际需要的链接，而是存在data-url属性中，达到某条件后再动态充值src属性值为data-url里的链接地址，实现懒加载。作用：减轻服务器压力，节约流量，页面加载速度快。预加载：提前加载图片，当用户需要查看时是直接从浏览器缓存里取的资源，用户操作体验速度快。原理：在浏览器加载页面时创建image对象并赋值src链接作用：让用户有快速的冲浪体验。缺点：增加服务器压力，首页加载渲染时间长。区别：懒加载与预加载都

实现继承的几种方法

joyouscola — Mon, 31 May 2021 22:01:25 +0800

1、继承第一种方式：对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){ //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承 //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象， /

ES6中的symbol的理解

joyouscola — Mon, 31 May 2021 00:00:23 +0800

symbol是什么 symbol 是一种基本数据类型（primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。使用方法 Symbol的使用方法

cookie、localStorage和sessionStorage的区别

joyouscola — Mon, 24 May 2021 00:20:30 +0800

首先介绍一下它们 SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。 Cookie是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。可以它用来确定两次请求是否来自于同一个浏览器，从而能够确认和保持用户的登录

module.exports和exports的一些理解

joyouscola — Sun, 23 May 2021 22:12:46 +0800

1、nodeJS采用commonJs规范，当前文件是一个模块(module)私有域，通过exports属性导出，通过require()引入模块，通过.xx去获取值，从而了解到加载某个模块，其实是加载该模块的exports属性。 2、exports是module.exports的别名，不要在同一个文件内同时使用两个，否则只能获取到module.exports的值. 简单来说如下： exports = module.exports = {}; module module是一个对象 {Object} consol

清除浮动的多种方法

joyouscola — Mon, 17 May 2021 20:40:11 +0800

为什么要清除浮动？为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动. 设置一个大的div，里面装两个小的div ，一般情况是子级的div撑起父级div的高度，所以呈现以下的样子如果说想要将里面两个小的div并排放的时候，则需要将两个div添加属性 float : left 结果是这样的两个小的div并排了，但是父级的div的高度则没有了，这就是子级浮动造成的影响。清除浮动的常用方法 ①结尾处加空div标签 clear：both (不推荐使用：如果页面浮动布局多

apply，call，bind三者的区别

joyouscola — Sun, 16 May 2021 23:54:16 +0800

apply方法 apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变thi指向一次。 var name="martin"; var obj={ name:"lucy", say:function(year,place){ console.log(this.name+" is "+year+" bo

AJAX工作原理及其优缺点

joyouscola — Tue, 11 May 2021 20:11:01 +0800

1、什么是AJAX？ AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。使用XHTML+CSS来标准化呈现；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信；使用Javascript操作Document Object Model进行动态显示及交互；使用JavaScript绑定和处理所有数据。这些能提供富用户体验。完全的 AJAX

ES6解构赋值

joyouscola — Mon, 10 May 2021 20:57:55 +0800

什么叫解构赋值？ ES6允许使用按照一定的模式从数组或者对象中进行取值对变量进行赋值这个过程叫做解构赋值。 1、数组类型解构 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 结构分为4类 ①完全结构 let [x, [y, z]] = [1, [2,[3]]]; console.log(x);//1 console.log(y);//2 console.log(z);//[3] ② 不完全解构的情况下

var和let、const的区别

joyouscola — Thu, 06 May 2021 00:15:28 +0800

1、在window上的区别 var a = 100;console.log(a,window.a); // 100 100 let b = 10;console.log(b,window.b); // 10 undefined const c = 1;console.log(c,window.c); // 1 undefined var可以挂载在window上，但let和const则不会挂载在window上面。 2、变量提升的区别 console.log(a); // undefine

深克隆与浅克隆的区别

joyouscola — Mon, 26 Apr 2021 00:43:53 +0800

浅克隆浅克隆是指在克隆对象时，对于基本数据类型的变量会重新复制一份，而对于引用类型的变量只是对引用进行克隆。就是将栈中的值复制一份给新的变量，但是两个对象指向都是同一个地址，一个发生改变另外一个也发生改变。看一下上面的例子，定义了一个arr数组，再将arr的值赋值给Arr，输出Arr，得出的值是arr的值，再通过Arr使用数组的方法添加进了一个数字，结果arr和Arr两个都输出是同一个数组。简单的来说，也就是定义一个Array数组名字叫arr，然后将arr的值复制一份给Arr，这里Arr和arr两个

JavaScript的防抖节流

joyouscola — Tue, 06 Apr 2021 23:02:36 +0800

函数防抖：是指一定时间内方法只跑一次。函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次两者都是优化高频率执行js代码的一种手段。防抖debounce代码： // 函数防抖 var timer = false; document.getElementById("debounce").onscroll = function(){ clearTimeout(timer); // 清除未执行的代码，重置回初始化状态 timer = setTimeout(function(){ cons

用canvas实现雨滴效果

joyouscola — Tue, 06 Apr 2021 00:40:28 +0800

先看效果看起来很炫酷，其实就是实现了雨滴ide掉落还有最后的圆还是看源码 Document

用JS实现飞机大战小游戏

joyouscola — Tue, 06 Apr 2021 00:20:39 +0800

小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running = 2; // 游戏阶段

JavaScript闭包的理解

joyouscola — Tue, 06 Apr 2021 00:03:15 +0800

1、什么是闭包和闭包的几种写法和用法闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点： ①作为一个函数变量的一个引用，当函数返回时，其处于激活状态。 ②一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在

canvas实现动态时钟

joyouscola — Thu, 01 Apr 2021 21:43:16 +0800

HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。 Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。 Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢

JS的作用域与作用域链

joyouscola — Sun, 14 Mar 2021 23:58:35 +0800

作用域链作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。作用域链的前端始终是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象。作用域链的下一个变量对象来自包含环境，而在下一个变量对象则来自下一个包含环境。这样一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。某个执行环境中所有的代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数

JavaScript中this关键字的总结

joyouscola — Sun, 07 Mar 2021 23:08:26 +0800

this 关键字 this无法进行赋值面向对象语言中 this 表示当前对象的一个引用。关键词指的是它所属的对象。在方法中，this 表示该方法所属的对象。单独使用，this 表示全局对象。在函数中，this 指的是全局对象。在函数中，在严格模式下，this 是未定义的(undefined)。在事件中，this 指的是接收事件的元素。方法中的 this 在对象方法中， this 指向调用它所在方法的对象。例如： var str = { name: "JavaScript", age

JS数组的总结

joyouscola — Sun, 07 Mar 2021 22:17:58 +0800

什么是数组? 数组对象是使用单独的变量名来存储一系列的值。是一种特殊的变量，它能够一次存放一个以上的值。接下来是创建数组，数组的创建有三种： ①常规方式 var arr=new Array(); //接下来是王数组里面添加 arr[0] = 1; arr[1] = 2; arr[2] = 3; ②简洁方式 var arr=new Array("1","2","3"); ③字面量创建 var arr = ["1","2","3"]; 访问数组通过指定数组名以及索引号码，你可以访问某个特定的元素。 /

canvas 实现代码雨

joyouscola — Mon, 25 Jan 2021 20:55:55 +0800

先看效果图这个效果图是不是像极了以前电影里面的黑客技术，看起来蛮难的，其实操作起来还是挺简单的。 canvas其实就是画布的意思首先我们得有一个画布

再设这样一个背景 HTML部分