分类：JavaScript

2020
09-28

JavaScript ES6 Class类实现原理详解

JavaScriptES6之前的还没有Class类的概念，生成实例对象的传统方法是通过构造函数。例如：functionMold(a,b){this.a=a;this.b=b;}Mold.prototype.count=function(){returnthis.a+this.b;};letsum=newMold(1,2);console.log(sum.count())//3这中写法跟传统的面向对象语言差异较大，写起来也比较繁杂。ES6提供了更加接近其他语言的写法，引入了Class（类）的概念，作为对... 继续阅读 >
2020
09-28

JavaScript cookie原理及使用实例

什么是cookie？cookie是本地计算机的临时存储。作用：在浏览器中进行数据的存储,用户名、密码（比如：保存页面信息，自动登录等）。特点：cookie需要在服务器环境下运行；cookie的容量在4kb左右，限制为每个域名50个cookie个数(IE)，不同浏览器容量和个数不同；cookie以字符串类型存储，不同域名存储的数据是无法共享；cookie默认是临时存储的，当浏览器关闭时，自动销毁；cookie可以被禁用也可以删除，且安全性不高。... 继续阅读 >
2020
09-28

JavaScript中的各种宽高属性的实现

JavaScript中的各种宽高属性的实现 在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等......这么多，傻傻分不清也正常啊。本文的目标：理清js及jquery的各种width和height对width和高度做一些实际的应用window和document首先我们来高清两个概念：window和document的区别是什么？window.location和document.locatio... 继续阅读 >
2020
09-28

Javascript查看大图功能代码实现

功能与实现点击小图片可以查看大图实现就是把大图放置在顶层（z-index大于当前页面的）,并且还可以加一些额外的比如透明度什么的。大图以动画的形式出现动画就是css动画样式了，可以自定义动画，将图片一点点变大，发挥想象了。代码html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="style.css"rel="externalnofollow"type="text/css"><linkrel=... 继续阅读 >
2020
09-28

JavaScript交换变量的常用方法小结【4种方法】

本文实例讲述了JavaScript交换变量的常用方法。分享给大家供大家参考，具体如下：许多算法需要交换2个变量。在编码面试中，可能会问您“如何在没有临时变量的情况下交换2个变量？”。我很高兴知道执行变量交换的多种方法。在本文中，您将了解大约4种交换方式（2种使用额外的内存，而2种不使用额外的内存）。1.解构赋值解构赋值语法（ES2015的功能）使您可以将数组的项提取到变量中。例如，以下代码对数组进行解构：leta;letb;[a... 继续阅读 >
2020
09-28

原生JavaScript创建不可变对象的方法简单示例

本文实例讲述了原生JavaScript创建不可变对象的方法。分享给大家供大家参考，具体如下：Javascript是一种灵活的语言，你可以重新定义任何东西，但是当项目变得复杂时，我们会发现可变数据结构的问题。随着JavaScript的最新版本的发布这种情况发生了改变。现在可以创建不可变的对象了。本文介绍如何用三种不同的方法来做。对象的不变性意味着我们不希望对象在创建后即以任何方式更改（将它们设置为只读类型）。假设我们需要定义一个... 继续阅读 >
2020
09-28

Javascript幻灯片播放功能实现过程解析

javascript实现幻灯片播放实现原理step1设置容器，包含图片、翻页、下标等元素，通过相对定位来布局。step2将幻灯片变化，需要改变的元素放在一个字容器内，display设为none,并且采取动画来变化。step3设置js函数，将应该播放的元素样式激活，其他的元素仍为未激活状态或者不展示类的隐藏。代码html<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><!--引入css样式--><linkrel="s... 继续阅读 >
2020
09-28

基于javascript实现日历功能原理及代码实例

日历在学习javascript过程中，菜鸟教程有一个javascript实例---css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。功能按照传统日历方式显示该月的每一天。可以突出显示今天的日期可以翻阅上一个月和下一个月的日历实现step1传统日历布局样式：分别将年份与月份、星期、该月的全部天数采用列表布局，排列组成传统日历的样式。step2初始化和更新月份：先将列表清空（debug过程中，有一个发现，... 继续阅读 >
2020
09-28

JavaScript设计模式之观察者模式与发布订阅模式详解

本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式。分享给大家供大家参考，具体如下：学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻分不清楚，博客起因如此，开始对观察者和发布订阅开始了Google之旅。对整个学习过程做一个简单的记录。观察者模式当对象间存在一对多关系时，则使用观察者模式(ObserverPattern)。比如，当一个对象被修改时，则会自动... 继续阅读 >
2020
09-28

简单了解JavaScript弹窗实现代码

功能点击写点什么弹窗，可以输入文字。关闭弹窗时自动保存，并且将弹窗内容转换为段落中的文字。low没有下限实现step1设置弹窗容器，包含关闭按钮和文本区域，设置display为隐藏（none)，并设置在顶层。step2设置弹窗按钮（这里是点击段落内容呀），并书写对应的js函数（将弹窗的display显示）。step3设置关闭按钮的js函数，获取文本并加入到段落中，关闭弹窗（还是display啊）代码html代码<!DOCTYPEhtml><html><head><metach... 继续阅读 >
2020
09-28

JavaScript面向对象之七大基本原则实例详解

本文实例讲述了JavaScript面向对象之七大基本原则。分享给大家供大家参考，具体如下：面向对象编程有自己的特性与原则，如果对于面向对象有一些了解的话，面向对象三大特征，封装、继承、多态，如果对面向对这三个概念不太了解，请参考面向对象之三个基本特征（javaScript）单一职责如果我们在编写程序的时候，一类或者一个方法里面包含了太多方法，对于代码的可读性来说，无非是一场灾难，对于我们来说。所以为了解决这个问题，出... 继续阅读 >
2020
09-28

JavaScript面向对象三个基本特征实例详解【封装、继承与多态】

本文实例讲述了JavaScript面向对象三个基本特征。分享给大家供大家参考，具体如下：了解过面向对象的同学应该都知道，面向对象三个基本特征是：封装、继承、多态，但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是封装与继承，对于多态来说可能就不是那么了解了。封装在说封装之先了解一下封装到底是什么？什么是封装封装：将对象运行所需的资源封装在程序对象中——基本上，是方法和数据。对象是“公布其接口”... 继续阅读 >
2020
09-28

JavaScript布尔运算符原理使用解析

布尔运算符分为四种:取反运算符(!)且运算符(&&)或运算符(||)三元运算符(?表达式1:表达式2)取反运算符(!)用于将任何值转换为布尔值后再变为相反值,即true变false,false变true取反运算符对以下六个值返回false,其余都返回true:undefinednull''false0NaN如果对一个值取反两次,则相当于将其转换为了布尔值,与Boolean()函数的作用相同!!1等同于Boolean('1')且运算符(&&)且运算符用于多个表达式:表达式... 继续阅读 >
2020
09-28

JavaScript常用工具函数大全

本文实例总结了JavaScript常用工具函数。分享给大家供大家参考，具体如下：为元素添加on方法Element.prototype.on=Element.prototype.addEventListener;NodeList.prototype.on=function(event,fn){、[]['forEach'].call(this,function(el){el.on(event,fn);});returnthis;};为元素添加trigger方法Element.prototype.trigger=function(type,data){varevent=document.createEvent("HTMLEvents");event.ini... 继续阅读 >
2020
09-28

JavaScript函数重载操作实例浅析

本文实例讲述了JavaScript函数重载操作。分享给大家供大家参考，具体如下：上个星期四下午，接到了网易的视频面试（前端实习生第二轮技术面试）。面了一个多小时，自我感觉面试得很糟糕的，因为问到的很多问题都很难，根本回答不上来。不过那天晚上，还是很惊喜的接到了HR面电话。现在HR面试的结果还没有出来，听说要等到下周二才出，所以再好好等几天哈。前面说了这多的废话，现在是时候和伙伴们分享一下面试干货哈。因为二面问到... 继续阅读 >
2020
09-28

有趣的JavaScript隐式类型转换操作实例分析

本文实例讲述了JavaScript隐式类型转换操作。分享给大家供大家参考，具体如下：JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的，如下是数值类型和布尔类型的相加：3+true;//4结果是一个数值型！如果是在C或... 继续阅读 >