分类：JavaScript

2020
09-24

JavaScript适配器模式原理与用法实例详解

本文实例讲述了JavaScript适配器模式原理与用法。分享给大家供大家参考，具体如下：适配模式可用来在现有接口和不兼容的类之间进行适配，使用这种模式的对象又叫包装器（wrapper），因为它们是在用一个新的接口包装另一个对象。基本理论适配器模式：将一个接口转换成客户端需要的接口而不需要去修改客户端代码，使得不兼容的代码可以一起工作。适配器主要有3个角色组成：（1）客户端：调用接口的类（2）适配器：用来连接客户端接口... 继续阅读 >

2020
09-24

JavaScript中的this基本问题实例小结

本文实例讲述了JavaScript中的this基本问题.分享给大家供大家参考，具体如下：在函数中this到底取何值，是在函数真正被调用执行的时候确定下来的，函数定义的时候确定不了。执行上下文环境： **定义**：执行函数的时候，会产生一个上下文的对象，里面保存变量，函数声明和this。 **作用**：用来保存本次运行时所需要的数据当你在代码中使用了this，这个this的值就直接从执行的上下文中获取了，而不会从作用域链中... 继续阅读 >

2020
09-24

JavaScript设计模式之门面模式原理与实现方法分析

本文实例讲述了JavaScript设计模式之门面模式原理与实现方法。分享给大家供大家参考，具体如下：外部与一个子系统的通信必须通过一个系统的一个门面对象进行，这就是门面模式。门面模式具备如下两个角色：1.门面角色客户端可以调用这个角色方法，此角色中有子系统的应用（知晓相关的（一个或多个）子系统的功能和责任）。本角色会将所有从客户端发来的请求委派到相应的子系统去。2.子系统角色可以同时有一个或多个子系统。每一个... 继续阅读 >

2020
09-24

JavaScript队列结构Queue实现过程解析

一、队列简介队列是是一种受限的线性表，特点为先进先出（FIFO：firstinfirstout）。受限之处在于它只允许在表的前端（front）进行删除操作；在表的后端（rear）进行插入操作；相当于排队买票，先来的先买票，后来的后买票。队列的应用：打印队列：计算机打印多个文件的时候，需要排队打印；线程队列：当开启多线程时，当新开启的线程所需的资源不足时就先放入线程队列，等待CPU处理；队列类的实现：队列的实现和栈一样，有两种... 继续阅读 >

2020
09-24

JavaScript实现栈结构Stack过程详解

JavaScript实现栈结构（Stack）一、前言1.1.什么是数据结构？数据结构就是在计算机中，存储和组织数据的方式。例如：图书管理，怎样摆放图书才能既能放很多书，也方便取？主要需要考虑两个问题：操作一：新书怎么插入？操作二：怎么找到某本指定的书？常见的数据结构：数组（Aarray）栈（Stack）链表（LinkedList）图（Graph）散列表（Hash）队列（Queue）树（Tree）堆（Heap）注意：数据结构与算法与语言无关，常见的编程语言都... 继续阅读 >

2020
09-24

JavaScript前端实现压缩图片功能

为什么要前端来压缩图片最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。压缩效果首先介绍下压缩的大概流程通过原生的input标签拿到要上传的图片文件将图片文件转化成... 继续阅读 >

2020
09-24

JavaScript中的this/call/apply/bind的使用及区别

一、this1.什么是thisthis关键字在大部分语言中都是一个重要的存在，JS中自然不例外，其表达的意义丰富多样甚至有些复杂，深刻理解this是学习JS、面向对象编程非常重要的一环。2.this代表什么this代表函数（方法）执行的上下文环境（上下文，类似与你要了解一篇文章，了解文章的上下文你才能清晰的了解各种关系）。但在JavaScript中this不是固定不变的，它会随着执行环境的改变而改变。1.在方法中，this表示该方法所属的对... 继续阅读 >

2020
09-24

JavaScript canvas基于数组生成柱状图代码实例

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：canvas柱状图vararr=[{id:1001,price:100},{id:1002,price:150},{id:1003,price:200},{id:1004,price:70},{id:1005,price:300}];vargap... 继续阅读 >

2020
09-24

JavaScript 严格模式(use strict)用法实例分析

本文实例讲述了JavaScript严格模式(usestrict)用法。分享给大家供大家参考，具体如下：使用"usestrict"的目的是指定代码在严格条件下执行。严格模式通过在脚本或函数的头部添加"usestrict";表达式来声明。不允许使用未声明的变量。"usestrict";myFunction();functionmyFunction(){y=3.14;//报错(y未定义)}在函数内部声明是局部作用域(只在函数内使用严格模式):x=3.14;//不报错myFunction();functionm... 继续阅读 >

2020
09-24

通过实例了解Javascript柯里化流程

函数式编程是一种如今比较流行的编程范式，它主张将函数作为参数进行传递，然后返回一个没有副作用的函数，说白了，就是希望一个函数只做一件事情。像Javascript，Haskell，Clojure等编程语言都支持函数式编程。这种编程思想涵盖了三个重要的概念：纯函数柯里化高阶函数而这篇文章主要是想向大家讲清楚柯里化这个概念。什么是柯里化首先我们先来看一个例子：functionsum(a,b,c){returna+b+c;}//调用sum(1,2,3);... 继续阅读 >

2020
09-24

Javascript作用域和作用域链原理解析

作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们，但这些概念对掌握Javascript至关重要。正确的去理解这个概念有利于你去写更好，更高效和更简洁的代码，让你成为一个更优秀的Javascript开发者。因此，在本文中，我将会向大家解释清楚什么是作用域和作用域链，以及Javascript引擎在内部是如何通过它们操作和查找变量的。事不宜迟，正文开始:)什么是作用域Javascrip... 继续阅读 >

2020
09-24

Javascript模拟实现new原理解析

new是JS中的一个关键字，用来将构造函数实例化的一个运算符。例子：functionAnimal(name){this.name=name;}Animal.prototype.sayName=function(){console.log("I'm"+this.name);}varcat=newAnimal('Tom');console.log(cat.name);//Tomconsole.log(cat.__proto__===Animal.prototype);//truecat.sayName();//I'mTom从上面的例子可以得出两点结论：new操作符实例化了一个对象；这个对象可以访问构造... 继续阅读 >

2020
09-24

JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

本文实例讲述了JavaScriptHTMLDOM元素(节点)新增，编辑，删除操作。分享给大家供大家参考，具体如下：createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChildcreateElement以下代码是用于创建<p>元素:varpara=document.createElement("p");createTextNode为<p>元素添加文本节点：varnode=document.createTextNode("这是一个新的段落。");appendChild（它用于添加新元素到尾部）将文... 继续阅读 >

2020
09-24

JavaScript中break、continue和return的用法区别实例分析

本文实例讲述了JavaScript中break、continue和return的用法区别。分享给大家供大家参考，具体如下：break停止了这个for循环，跳出循环来继续执行fn函数里之后的语句 functionfn(){for(vari=0;i<5;i++){if(i==3){break;}console.log(i);}console.log("ha")}fn();//012hacontinue只是停止了当前循环，继续执行后面的循环，当循环执行完继续执行fn函数里之后的语句 functionfn(... 继续阅读 >

2020
09-23

javascript将扁平的数据转为树形结构的高效率算法

当我们需要将一个一维数组转换成一个多层结构的时候，最简单但是最慢的就是多个for循环嵌套，但是这样做有一些缺点，那就是效率太低、而且有多少层就需要嵌套几个for循环，不好用。我实现了用O(n)级算法将一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。一位数组中每一个元素必须要包含以下属性：拥有一个唯一的id拥有一个parent_id,这个id指向它父级的id其他则为每一个元素中的一些信息，我这里是菜单... 继续阅读 >

2020
09-23

原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法。分享给大家供大家参考，具体如下：<!--1、创建场景--><!--2、定义初始数据 以及随机食物--><!--3、控制贪吃蛇方向--><!--4、判断位置以及和随机食物的位置增加贪吃蛇长度-->HTML部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>html,body{width:100%;height:100%;overflow:hidden;... 继续阅读 >