- 博客(99)
- 收藏
- 关注
原创 Symbol基本数据类型
ES6引入的一种新的原始数据类型Symbol,表示独一无二的值。Symbol函数可以接受参数,表示对于这个唯一值的描述,属于基本数据类型,Symbol()函数会返回symbol类型的值。
2022-09-15 19:11:52
1369
2
原创 ES6类和继承
2、constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor里面定义的属性属于实例的私有属性。3、定义在类体的方法称为实例方法,其实是存在于Person.prototype中,可供所有的实例调用。比如上述的sayName方法就属于公共方法,可供所有实例使用。定义在类体的属性:如果是引用数据类型,就属于实例的私有属性,比如上述的test;如果是
2022-09-15 17:12:33
887
2
原创 ES6——对象、数组、字符串、数值新增API
它是 Array.prototype.map() 和Array.prototype.flat()的组合,通过对map调整后的数据尝试展平操作。创建数组实例,参数是数组元素,解决了new Array(10)传递一个整数值,创建的是length为该整数值的数组。注意:将obj的原型对象设置为obj1,obj的构造函数的prototype仍然指向obj原来的原型对象。(2)三个参数时,表示合并对象,把后两个对象合并到第一个对象,并返回第一个对象。指的是被复制的对象里是基本数据类型,实现的就是深拷贝。
2022-09-15 15:23:20
1177
2
原创 ES6基本语法之扩展运算符、解构赋值、箭头函数
扩展运算符[...]会把剩余的未被解构赋值的全部获取到,因此d的值为[ 11, 999 ],h的值为{ f: 4, i: 6, j: 7 },e和f1变量名和属性名不同,无法获取到值,因此为undefined。通常情况下,定义了默认值的参数,应该是函数的尾参数,此时函数的length属性将返回没有指定默认值的之前的参数个数。(3)方法中返回一个箭头函数:此时箭头函数的外部作用域是sayName方法,因此箭头函数this的指向就是sayName方法this的指向,sayName方法this指向对象obj。
2022-09-14 21:41:23
1676
1
原创 ES6包管理机制以及模块化
ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,ES6 的第一个版本,在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。ES6在ES5的基础上拓展了很多新特性。ES5是2009年发布的,ES6是2015年发布的,ES2015 在ES5基础上拓展了很多新特性。
2022-09-13 20:35:19
951
2
原创 猿创征文 | 云服务器部署——将项目部署到云服务器上
安装完成后jdk的家目录是 /usr/lib/jvm/java-8-openjdk-amd64。3、在浏览器输入自己的ip地址,出现下图所示则说明云服务已经开启。2、将我们的项目拖拽到 /var/www/html 这个目录下。3、给所有远程登录的用户赋予权限(默认给root用户)自行选择购买阿里云服务器或者腾讯云服务器或者其他的。新建数据库,导入sql文件,添加用户,给用户授权。(腾讯云是ubuntu,阿里云是root)将jar包放到云服务器的 /jar 目录下。(我使用的是腾讯云服务器)
2022-09-05 10:36:52
882
14
原创 猿创征文 | JavaScript函数柯里化
柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这里使用到了闭包的原理来实现add函数,这种方法比较简单,很容易就能想到,但是这种方法并不通用,所以我们可以封装一个函数,用于将普通函数转成柯里化函数。柯里化函数执行的过程就是一个收集参数的过程,因此我们只要收集完所有参数,然后把参数传递给普通函数执行即可。那么,此时add函数应该如何写呢?
2022-09-03 13:21:45
351
8
原创 猿创征文 | H5API之websocket和地理位置的获取
websocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,即ws协议。它是客户端和服务器端进行通信的协议,它使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接,这个连接是实时的也是永久的,除非被手动关闭,否则服务器可以随时将消息推送到客户端,且它的连接需要服务器的支持。
2022-09-01 19:42:21
1033
31
原创 猿创征文 | H5 API之web存储、拖拽事件以及跨文档通信
web存储分为cookie和WebStorage,WebStorage又分为sessionStorage和localStorage。cookie存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie。localStorage与sessionStorage区别:1、不同浏览器无法共享localStorage和sessionStorage2、相同浏览器且同一域名和端口号下的不同页面可以共享localStorage3、相同浏览器的不同页面不能共享sessionStorage......
2022-08-31 22:05:49
1079
4
原创 html5新增特性之画布canvas的使用
目录一、基本用法二、canvas的使用1、绘制一个矩形填充矩形轮廓矩形2、清除画布区域 3、绘制一个圆填充圆轮廓圆会移动的圆4、渐变色绘制线性渐变径向渐变5、绘制线段绘制一个三角形6、绘制图片7、绘制视频 8、绘制文本1、获取canvas对象——获取画布 通过document.getElementById()等方法取得canvas对象。2、取得上下文(context)——获取画笔 图形上下文是一个封装了很多绘图功能的对象,参数只能是“2d”3、定义填充样式实心填充样式:轮廓
2022-08-30 19:02:47
1996
16
原创 猿创征文 | 使用Jquery封装的AJAX请求数据
该方法用于执行一个异步的ajax的请求。基本语法格式如下:( 这里只列举了一些常用的参数,里面还有很多的参数,大家感兴趣的可以到上查看。):String类型,发送请求的url地址:String类型,请求方式,比如post、get、put、delete等:PlainObject类型,请求头,使用对表示,例如:{ 'Content-Type': 'application/json' }PlainObject:纯粹的对象(即通过 "{}" 或者 "new Object" 创建的)......
2022-08-29 20:07:36
1147
11
原创 猿创征文 | 如何使用原生AJAX请求数据
AJAX英文全称 Asynchronous Javascript And XML(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构,AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载。......
2022-08-28 12:40:22
1884
14
原创 JS防抖和节流
在进行窗口的操作或者输入框操作时,如果事件处理函数用的频率无限制,会加重浏览器和服务器的负担,此时我们就可以用防抖(debounce)和节流(throttle)的方式来减少调用频率,同时又不影响实际效果。在设定的时间内触发一次事件,会在设定的时间结束之后执行该事件处理程序,如果在设定的时间内多次触发事件,则每次触发事件都会重新计时。(可以将防抖类比成电梯:第一个人进电梯之后,电梯会在5秒之后自动关闭电梯门,如果在这5秒内又有人进来了,那么电梯会重新等待5秒后再关门。)...
2022-08-27 22:08:55
13894
10
原创 jQuery 基础知识
jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。我们通过" jQuery "和" $ "来调用jQuery函数 (选择器) ,然后通过选择器选择到符合条件的Element元素,将其保存到jQuery对象。......
2022-08-26 20:12:20
543
3
原创 BOM介绍
虽然 ECMAScript 把浏览器对象模型(BOM,Browser Object Model)描述为JavaScript 的核心,但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。多年来,BOM 是在缺乏规范的背景下发展起来的,因此既充满乐趣又问题多多。毕竟,浏览器开发商都按照自己的意愿来为它添砖加瓦。最终,浏览器实现之间共通的部分成为了事实标准,为 Web 开发提供了浏览器间互操作的基础。......
2022-08-25 19:45:44
386
8
原创 什么是重排和重绘?何时会触发?
当dom的变化影响了元素的几何信息(位置),浏览器需要计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排,表现为重新生成布局,重新排列元素。重排和重绘会消耗浏览器的性能(会去计算浏览器的内存空间,占据cpu)会造成页面卡顿,UI展示迟缓。当一个元素(颜色、字体颜色)的外观被改变,但是没有改变布局,重新把元素外观绘制出来的过程叫做重绘,表现为某些元素的外观被改变。1、添加、删除元素(重排)、更新节点(重绘)6、用户行为(重排或者重绘)5、添加一个样式表(重排)4、添加动画(重排)
2022-08-25 11:20:40
722
3
原创 http和https的区别
1. http:客户端和服务器通信遵循的超文本传输协议(请求和应答的标准),明文传输数据 ,容易被黑客拦截(wifi、运营商网络、代理服务器) 2. https是具有安全性的ssl加密的传输协议,会对传输的数据进行加密,会对响应的数据解密 3. http默认端口是80,https默认端口是443 4. 页面加载时间不同。http连接简单无状态 https握手时间长,会使得页面加载时间延长50% 增加10%-20%的耗电 5. https需要ca(给数据绑定加密方式)证书,费用较高
2022-08-25 10:58:50
176
1
原创 DOM事件机制
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2022-08-24 20:27:32
1369
7
原创 DOM节点类型及其属性和方法
DOM是JS操作网页的接口,全称为“文档对象模型它的作用是将网页转为一个JS对象,从而可以用脚本进行各种操作(比如增删内容)。文档——文档表示的就是整个的HTML网页文档对象——对象表示将网页中的每一个部分都转换为了一个对象模型——使用模型来表示对象之间的关系,这样方便我们获取对象文档对象模型(DOM)是网页的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问,以改变文档的结构,样式和内容。
2022-08-23 23:50:42
6243
4
原创 js数组扁平化
数组扁平化就是将多维的数组转换成一维数组,比如将 `[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5]` 扁平化后就是 `[1,2,3,4,5,6,7,8,9,10,11,12,13,5]`
2022-08-23 10:46:49
330
6
原创 js实现继承的三种方式
1、原型链继承:通过原型继承多个引用类型的属性和方法。2、经典继承(盗用构造函数/对象伪装):在子构造函数中调用父构造函数3、组合继承(伪经典继承):综合了原型链和经典继承函数,将两者的优点集中了起来。
2022-08-20 12:34:38
1111
3
原创 js深入理解对象——工厂模式、构造函数模式、原型模式、组合模式
工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。工厂模式是一种创建型模式,简单来说,工厂模式就是创建对象的一种方式。前面的案例使用构造函数可以这样写// 自定义构造函数 function Person(name , age , gender) {} } var person1 = new Person('叶子yes' , 18 , '女');var person2 = new Person('张三' , 19 , '男');......
2022-08-18 20:18:23
483
10
原创 js数组去重的六种方法
用于查找数组元素,找到了返回元素下标,找不到返回-1,因此我们可以定义一个新的空数组用来存放数组去重后的值,然后利用indexOf()判断数组元素的值是否存在新数组中,如果不存在,则将它添加到新数组中;如果存在,说明是重复的值,不需要理会。思路:filter方法对数组元素进行筛选,找出符合条件的数组元素,并返回一个新数组。方法也是用来查找数组元素的,找到了返回true,没找到返回false,因此思路也是和第二种一样的。思路:将数组元素两两进行比较,如果相等,则删除其中一个,并修正数组下标。...
2022-08-18 11:25:46
951
3
原创 js工具库——Moment.js和lodash
Moment.js是JavaScript日期处理类库。(需要先安装node.js)打开vscode,在当前目录下打开终端,执行命令进行安装:安装完之后,目录如下:moment.js的更多使用可以查看。
2022-08-17 20:26:48
1153
6
原创 Math对象和Date对象常用方法
Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,把 Math 作为对象使用就可以调用其所有属性和方法。...
2022-08-17 18:49:59
361
3
原创 js基本包装类型
在 ES 中,数据类型分为基本数据类型和引用数据类型。而基本包装类型,严格来说不属于上面两个中的任意一个,但是又和这两种类型息息相关。基本数据类型和引用类型这两个类型其中一个很明显的区别是,引用类型有自己内置的方法,也可以自定义其他方法用来操作数据,而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。但基本数据类型真的没有吗?对于部分基本类型来说确实是这样的。......
2022-08-17 11:45:41
2026
11
原创 js正则表达式
1、如果正则表达式中有修饰符"g",这时,在正则表达式的实例reg中会维护lastIndex属性,记录下一次开始的位置,当第二次执行exec的时候,从lastIndex开始检索。2、如果正则表达式中没有修饰符"g",不会维护lastIndex属性,每次执行从开始位置检索。...
2022-08-16 20:13:49
933
3
原创 js数组方法重写——pop、push、shift、unshift、every、some、filter、map、forEach
js中给我们提供了很多数组API,比如pop、push、filter、map等,这些都是别人写好的,放在数组的原型对象上,供我们使用。我们也可以对这些方法进行重写,这样可以加深我们对这些数组方法的理解。...
2022-08-16 15:56:02
1809
2
原创 JavaScript数组方法
sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数,将按字母顺序(Ascall编码)对数组中的元素进行排序,说得更精确点,是**按照字符编码的顺序进行排序**。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。如果要想进行升序或是降序排序的话,要提供比较函数。...
2022-08-13 22:15:20
911
原创 JavaScript函数详细介绍
自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找,如果没有就一直向上级祖先元素寻找(这就是所谓的"静态作用域",静态作用域是指函数的作用域在函数定义时就已经确定了)...
2022-08-12 23:11:48
9618
2
原创 【JavaScript】js实现双向数据绑定
我们可以定义一个对象,然后为这个对象设置访问器属性(本身还未在对象中定义),当对象属性被修改时触发set函数,通过这个函数可以进行数据的操作,比如数据的判断赋值等一系列操作,从而实现数据的双向绑定。vue是数据驱动框架,当数据发生改变的时候,视图自动更新。4、由于对象属性值被修改从而触发set函数,然后我们在set函数中把用户输入的值赋值给input输入框下面的div,就可以实现双向数据绑定了。我们需要实现的双向数据绑定是:当在 input 框中输入内容时,input 框下方也能实时显示输入的内容。....
2022-08-10 23:30:39
5077
5
原创 JavaScript对象详细介绍
数据属性、访问器属性。这两种属性用于设置属性的高级属性,例如该属性是否可以配置,是否可以读写,是否可以遍历,并且可以通setter,getter来监听数据的改变。语法1、obj:必需。目标对象2、prop:必需。需定义或修改的属性的名字3、descriptor:必需。目标属性所拥有的特性传入函数的对象。即第一个参数obj;......
2022-08-10 22:46:41
374
4
原创 【JavaScript】使用js实现冒泡排序
3、这时候最后一个元素是最大的,所以最后一个元素就不需要参与比较大小。1、比较相邻的两个元素,如果前一个比后一个大,则交换位置。2、比较完第一轮的时候,最后一个元素是最大的元素。3、依次类推,每轮冒泡都能得到一个最大值。...
2022-08-10 11:25:34
1149
原创 【JavaScript】js隐式类型转换和显式类型转换
● 如果符号两侧都是字符串,不会将其转换为数值进行比较,而会分别比较字符串中字符的Unicode编码,而在比较字符编码时,是一位一位进行比较的,如果符号两侧第一位一样,则比较下一位。2、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值。3、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值。2、如果第一个操作数是真,直接返回第一个操作数。.
2022-08-09 23:12:42
1260
原创 【javaScript】js基础知识
undefined派生自null,所以undefined == null结果为true,但是null表示空对象,undefined表示未定义;当栈存放引用类型时,值为对象的地址,obj与obj1指向同一个地址,所以当obj的name值变为“lisi”时,obj1也会发生变化。在body部分中的JavaScript会在页面加载的时候被执行,在head部分中的JavaScript会在被调用的时候才执行。指变量,函数,属性的名字或者函数的参数。基本数据类型变量都维护在栈区,基本数据类型的值保存在栈区。...
2022-08-08 11:33:52
559
3
原创 grid网格布局
flex布局布局和grid布局的本质区别在于:布局是一维布局,一次只能处理一个维度上的布局,也就是行或者列;而布局是二维布局,它将容器划分为行和列,形成一个个单元格,然后我们就可以指定我们的 “ 项目 ” 所占的单元格,形成我们想要的布局。比如,下面的布局我们就可以使用grid布局轻松实现:1、display 属性 生成块级的网格容器 生成行内的网格容器使用 display:grid; 容器是块级元素:使用 display:inline-grid; 容器是行内块元素:...
2022-08-06 23:30:26
1345
2
原创 Linux常用命令
也称为设备目录,包含的一些文件是对应连接到计算机的一些设备,在linux系统中,任何设备都是以文件的形态存在于这个目录中。(在指令模式下,按 i、I 、a 、A 、o、O 键都能进入编辑模式,按esc又回到指令模式)设置user22文件的拥有者的权限为rwx,同组人的权限为 r–,其他人的权限为 r–(要确保新的拥有者是已经存在的系统中的账号,也就是在/etc/passwd中有记录)u(拥有者), g(同组人), o(其他人),a(all,全部人)编辑文件(i 键编辑,esc退出编辑,:wq 保存退出)..
2022-08-04 17:30:21
2405
1
原创 使用HTML和CSS实现京东首页(完整代码)
本次案例使用了HTML和CSS对京东网站的首页进行了重构,页面效果如下:HTML页面结构部分的代码:CSS样式代码:源码已经在Gitee上开源,欢迎大家下载:https://gitee.com/goodyezi/jd-static-page.git
2022-07-31 22:00:02
1537
2
原创 【案例】使用CSS3实现天空变化效果
使用到的图片素材:(都是一些云朵图片,背景是透明的)先写html结构,html结构很简单,只需要4个div标签即可,外面包裹的div用来设置背景,即天空颜色,里面三个div用来放云朵:接下来写CSS样式:设置一个天蓝色的背景色:然后设置背景动画,变化的效果是:天蓝色–> 黑色–> 天蓝色然后设置动画播放:设置完之后,就可以得到下面天空变化的效果:接下来再来设置云朵的样式,三个云朵样式都是一样的:然后再设置云朵动画,主要是让云朵不断向左移动:然后让动画播放:来看看最终效果吧!下面是完整代码
2022-07-28 16:31:37
1688
原创 CSS媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color(等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。媒体查询与弹性盒布局的适用情况媒体查询当页面的结构发生变化的话最好使用媒体查询。弹性盒如果只是宽高的变化,尽量使用弹性盒。...
2022-07-28 15:44:34
22374
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅