
前端基础
前端包括js,css,HTML
如果时光可以倒流,我会选择在家陪伴家人
这个作者很懒,什么都没留下…
展开
-
JS对象与函数,以及闭包
目录1.JS对象学习1.1.总述1.2.对象属性1.3.对象方法1.4.对象访问器1.5.对象构造器1.6.对象原型1.7.ES5对象方法2.函数定义2.1.总述2.2.函数参数2.3.函数调用2.4.函数Call2.5.函数Apply2.6.闭包3.闭包个人总结3.1.参考资料3.2.官方代码解析1.JS对象学习1.1.总述1.【所有JS值,除了原始值,都是对象】,那么也就是除了原始值之外,都是JS对象;2.既然原始值原创 2021-08-27 18:14:32 · 530 阅读 · 0 评论 -
H5 data-*属性
<ul> <li data-animal-type="鸟类">喜鹊</li> <li data-animal-type="鱼类">金枪鱼</li> <li data-animal-type="蜘蛛">蝇虎</li> </ul> ①data-*属性用于存储页面或应用程序的私有自定义数据;(注意是私有、自定义数据)②data-*属性赋予我们在所有HTML元素...原创 2021-08-18 09:50:13 · 267 阅读 · 0 评论 -
ES6非空判断
es6 Null传导运算符(?.)const firstName = message?.body?.user?.firstName || 'default';?.运算符相当于一种短路机制,只要不满足条件,就不再往下执行。Null 判断运算符(??)①||:属性的值为null、undefined、为空字符串、false、0,默认值就会是 || 右边的值②??:只有运算符左侧的值为null或undefined时,才会返回右侧的值es6判断对象是否为空,并判断对象是否包含某个属性(1)原创 2021-08-18 09:48:53 · 3000 阅读 · 0 评论 -
input设置为type=number的问题
在HTML5中,当input的type设置为number时,发现maxlength属性不好用,因此,需要自己想方法去自己弄,比如其中几种解决方法:①<input type="text"pattern="\d{10}">②<input type="text"pattern="\d"maxlength="10">...原创 2021-08-18 09:47:19 · 1782 阅读 · 0 评论 -
ECMAScript6-基础22-其他变化
目录块级作用域字符串解构赋值对象数组函数块级作用域①let取代var:ES6 提出了两个新的声明变量的命令:let和const。其中,let完全可以取代var,因为两者语义相同,而且let没有副作用。var命令存在变量提升效用,let命令没有这个问题。②全局常量和线程安全:在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。const优于let有几个原因。一个是const可以提醒阅读程序的人,这个变量不应该改变..原创 2020-12-07 21:06:15 · 245 阅读 · 0 评论 -
ECMAScript6-基础21-Module加载实现
目录浏览器加载ES6模块与CommonJS模块的差异Node.js的模块加载方法package.json的main字段package.json的exports字段CommonJS模块加载ES6模块ES6 模块加载 CommonJS 模块同时支持两种格式的模块Node.js 的内置模块加载路径内部变量循环加载浏览器加载<script src="path/to/myModule.js"></script>默认情况下,浏览器是同步原创 2020-12-07 21:05:12 · 401 阅读 · 0 评论 -
ECMAScript6-基础20-Module语法
目录概述严格模式export命令import命令模块的整体加载export default 命令export与import的复合写法模块的继承import()函数概述在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思原创 2020-12-07 21:04:29 · 351 阅读 · 0 评论 -
ECMAScript6-基础19-Class继承
目录概述Object.getPrototypeOf()super关键字类的prototype属性和__proto__属性概述Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法原创 2020-12-07 21:03:51 · 228 阅读 · 0 评论 -
ECMAScript6-基础18-Class基本语法
目录概念constructor方法类的实例取值函数(getter)和存值函数(setter)属性表达式Class表达式注意事项静态方法实例属性的新写法静态属性私有方法和私有属性new.target属性概念ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法原创 2020-12-07 21:02:57 · 226 阅读 · 0 评论 -
ECMAScript6-基础17-async函数
目录概念使用错误处理async函数的实现原理顶层await概念ES2017标准引入了async函数,使得异步操作变得更加方便。async函数就是 Generator 函数的语法糖。 const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(...原创 2020-12-07 21:00:40 · 155 阅读 · 0 评论 -
ECMAScript6-基础16-Generator函数
目录概念yield表达式与Iterator接口的关系next 方法的参数for...of 循环Generator.prototype.throw()Generator.prototype.return()next()/throw()/return()的共同点yield* 表达式作为对象属性的Generator函数Generator函数的thisGenerator 与上下文概念Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完原创 2020-12-07 20:59:49 · 353 阅读 · 0 评论 -
ECMAScript6-基础15-Iterator与for...of循环
目录Iterator的概念默认Iterator接口调用Iterator接口的场合字符串的Iterator接口遍历器对象的return(),throw()for...of 循环Iterator的概念JS原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set,为了遍历这些数据集合,就需要一种统一的接口,来处理所有不同的数据结构。遍历器(Iterator)就是这个统一的接口,为各种不同的数据结构提供统一的访问机制。任何数据结原创 2020-12-07 20:58:56 · 257 阅读 · 0 评论 -
ECMAScript6-基础14-Promise对象
目录概述基础案例Promise.prototype.then()Promise.prototype.catch()Promise.prototype.finally()Promise.all()Promise.race()Promise.allSettled()Promise.any()Promise.resolve()Promise.reject()Promise.try()概述Promise 是异步编程的一种解决方案,Promise 提供统一.原创 2020-12-07 20:58:08 · 357 阅读 · 0 评论 -
ECMAScript6-基础13-Reflect
Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。①将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。②修改某些Object方法的返回结果,让其变得更合理。比如,Object.definePr原创 2020-12-03 21:37:24 · 100 阅读 · 0 评论 -
ECMAScript6-基础12-Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。(有点类似于JAVA语言的Proxy)ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。var proxy = new Proxy(target, handler);Proxy 对原创 2020-12-03 21:36:45 · 211 阅读 · 0 评论 -
ECMAScript6-基础11-Set和Map数据结构
目录Set概念基础案例Set实例的属性和方法(操作数据)Set实例方法(遍历成员)WeakSet概念基础案例Map概念基础案例实例的属性和操作方法遍历方法与其他数据结构的互相转换WeakMap概念Set概念ES6提供了新的数据结构 Set。成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化...原创 2020-12-03 21:35:35 · 135 阅读 · 0 评论 -
ECMAScript6-基础10-对象的新增方法
目录Object.is()概念基础案例Object.assign()概念基础案例注意Object.getOwnPropertyDescriptors()概念__proto__属性概念Object.setPrototypeOf()/Object.getPrototypeOf()概念基础案例Object.keys()/Object.values()/Object.entries()概念基础案例Object.fromEntries()概念原创 2020-12-03 21:33:08 · 449 阅读 · 0 评论 -
ECMAScript6-基础9-对象的扩展
目录属性的简洁表示法概念基础案例属性名表达式标题概念方法name属性概念基础案例属性的可枚举性概念基础案例属性的遍历概念super关键字概念基础案例对象的扩展运算符:解构赋值概念基础案例对象的扩展运算符:扩展运算符概念基础案例链判断运算符?.概念基础案例注意Null判断运算符概念基础案例属性的简洁表示法概念ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。...原创 2020-12-03 21:29:14 · 299 阅读 · 0 评论 -
ECMAScript6-基础8-数组的扩展
目录扩展运算符概念案例讲解扩展使用Array.from()概念案例讲解Array.of()概念案例讲解实例copyWithin()概念基础案例实例find()/findIndex()概念基础案例实例fill()概念基础案例实例entries()/keys()/values()概念基础案例实例includes()概念基础案例实例flat()/flatMap()概念基础案例数组的空位概念.原创 2020-12-03 21:25:31 · 156 阅读 · 0 评论 -
HTML5学习-2-新增/修改HTML标签
目录标签-修改(声明)标签-修改(超链接)标签-新增(文章)标签-新增(旁白)标签-新增(音频播放)标签-新增(文本方向)标签-新增(覆盖文本方向)标签-修改(按钮) 标签-新增(画布) 标签-新增(用户调用的命令) 标签-新增(选项列表)标签-新增(细节)标签-新增(对话框或窗口)标签-修改(相关元素分组)标签-新增(figure标题)标签-新增(独...原创 2020-11-23 17:33:15 · 811 阅读 · 0 评论 -
HTML5学习-1-form表单
Input类型相比传统的H4中的<input type/>,新增了几种类型:表单元素datalist效果,类似于在下拉列表中,通过用户输入来自动补齐的效果;keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。outp...原创 2020-11-23 17:32:03 · 522 阅读 · 0 评论 -
HTML5学习-0-基础知识
目录前言个人学习看法视频video音频audio拖放drag/drop画布canvas内联SVG地理定位Web存储应用程序缓存定义使用方法cache manifest文件说明Manifest文件更新缓存Web Workers服务器发送事件开发过程EventSource对象事件属性前言自己基于HTML4 + JQery开发好几年了,然后HTML5一直没怎么认真看,因此,想趁着不忙的时候,把HTML5认真看一遍,看看..原创 2020-11-23 17:30:32 · 427 阅读 · 0 评论 -
ECMAScript6-基础6-数值存储与数据扩展
JS与IEEE754标准概念由于不同机器所选用的基数、尾数位长度和阶码位长度不同,因此对浮点数的表示有较大差别,这不利于软件在不同计算机之间的移植。为此,美国IEEE(电器及电子工程师协会)提出了一个从系统角度支持浮点数的表示方法,称为IEEE754标准(IEEE,1985),当今流行的计算机几乎都采用了这一标准;BugJava中浮点数,既float和double,都是采用的IEEE754标准。无论在java、python、javaScript里面都存在 1 + 2 != 3 问题,这个问题原创 2020-10-13 17:49:00 · 366 阅读 · 0 评论 -
ECMAScript6-基础5-扩展正则
RegExp构造函数概念在之前,有2种方式来创建RegExp:①第一个参数是字符串,第二个参数表示正则表达式的修饰符;②就一个正则表示式;到了ES6新增了1种方式:如果RegExp构造函数第一个参数是一个正则对象,那么还可以使用第二个参数指定修饰符,且返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符;案例讲解/注意事项 new RegExp('xyz', 'i'); 这是ES5的一种方式,该方式需要2个参数,该表达式等价于var regex =原创 2020-09-23 18:29:25 · 208 阅读 · 0 评论 -
ECMAScript6-基础4-字符串新增方法
String.fromCodePoint()概念之前提供的String.fromCharCode()方法,用于从Unicode码点返回对应字符,缺点在于不能识别码点大于0xFFFF的字符;为了解决这个问题,ES6提供了String.fromCodePoint()方法,该方法弥补了String.fromCharCode()方法不能识别大于0xFFFF的字符;案例讲解/注意事项 String.fromCodePoint(0x20BB7) String.fromCodePoint原创 2020-09-21 18:08:25 · 216 阅读 · 0 评论 -
ECMAScript6-继承
类Class简化,简化,还是简化,简化代码量,简化操作。下面列举出简化的内容:方法定义语法、类定义语法。下面依次分开来讲:方法定义语法①添加函数属性:不再使用function方式添加方法,而是直接使用属性名作为函数名的方式来取代关键字function。②添加生成器函数属性:在标准函数名的前面添加一个*即可。③添加标准的访问器函数属性:通过get/set关键字直接在行内定义访问器...原创 2020-02-15 17:53:26 · 176 阅读 · 0 评论 -
ECMAScript6-模块
模块就是一个包含JS代码的文件,因此模块本质上就是一段脚本,但是模块与脚本还是有两点区别:①在ES6模块中,无论你是否加入use strict;语句,默认情况下模块都是在严格模式下运行。②在模块中可以使用import和export关键字。export默认情况下,某个模块中的所有声明相对于本模块而言都是寄存在本地的,只有本模块可见,其他模块不可见。但如果想让其他模块使用本模块的部分功...原创 2020-02-14 15:43:53 · 203 阅读 · 0 评论 -
ECMAScript6-基础1-声明变量let和const
使用var关键字来定义变量,往往会带来2个意想不到的情况:①在代码块内声明的变量,其作用域是整个函数作用域而不是块级作用域,举个例子:functionA内部定义了functionB,functionB内部通过var定义变量,其作用域是在functionA内,同时functionA包含functionB,所以,也能在functionB内使用。②循环内变量共享问题。for(var i=0;i&...原创 2020-02-14 15:43:08 · 187 阅读 · 0 评论 -
ECMAScript6-代理
ES6这里,想给所有的JS对象定义一个接口,那么对象是什么呢?①对象都有属性;②对象都有原型;③部分对象是构造函数/普通函数;那么目前、未来所有的JS对象都有这3个特性的话,那么公共接口就从这3个方面进行入手。所以ECMAScript 标准委员会定义了一个由14种内部方法组成的集合,亦即一个适用于所有对象的通用接口。属性、原型和函数这三种基础功能自然成为它们关注的核心。1.obj.[[Ge...原创 2020-02-14 15:42:32 · 158 阅读 · 0 评论 -
ECMAScript6-集合
Set无论是什么语言,还是什么数据结构,感觉Set没什么可说的,还是直接上API靠谱:1.new Set:创建一个新的、空的 Set。2.new Set(iterable):从任何 可遍历数据 中提取元素,构造出一个新的集合。3.set.size:获取集合的大小,即其中元素的个数。4.set.has(value):判定集合中是否含有指定元素,返回一个布尔值。5.set.ad...原创 2020-02-14 15:41:29 · 120 阅读 · 0 评论 -
ECMAScript6-Symbols
这东西干什么用呢,通俗点来讲就是:对某个obj的某个属性名进行唯一性的命名,其属性名永远唯一,不用担心与其他JS框架、第三方差价发生冲突。既然是为了解决命名冲突,而发明的这项新技术,说白了就是确保任意对象某个属性名的唯一性,下面通过一个案例来讲解该项技术特点: var mySymbol1= Symbol(); obj[mySymbol1] = "success"; // 保...原创 2020-02-14 15:40:57 · 154 阅读 · 0 评论 -
ECMAScript6-基础7-函数的扩展
我之前一直使用JDK1.6,很少涉及到高版本JDK,后来随着JDK1.8普及后,也知道了lambda表达式,但一直没有深入研究,说实话,对这块确实不理解,后来我也是百度了网友的一些博客突然发现一句话写的特别好,现在分享下:Lambda 表达式,也可称为闭包,它是推动Java8发布的最重要新特性。Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中)。这里还提到一个名词“...原创 2020-02-14 15:40:21 · 149 阅读 · 0 评论 -
ECMAScript6-基础2-变量解构赋值
我个人对解构的理解就是:更加方便的赋值,包括用户在自定义函数的入参的时候,既然入参可以解构,那么函数的返回值也可以解构,例如:函数直接返回一个object,然后利用解构语法直接获取object的属性,方便、简单,省去中间变量的操作。①解构赋值解构赋值,通过字面意思可以理解为:通过解构技术来实现赋值效果。解构赋值可以将数组、对象属性赋值给各种变量,这种赋值语法非常简洁,例如: va...原创 2020-02-14 15:39:33 · 178 阅读 · 0 评论 -
ECMAScript6-不定参数
不定参数,这让我想起2件事情:①java的可变参数。感觉ECMAScript6的不定参数跟java的可变参数真像。②js的arguments对象。其实arguments对象也能实现不定参数的效果,只不过其可读性不高,进而导致后期维护比较麻烦。另外在原先函数基础上添加/减少参数个数,导致arguments对应的索引还得修改,太麻烦。不定参数规则:①在函数参数中,如果有不定参数的话,则...原创 2020-02-14 15:38:30 · 160 阅读 · 0 评论 -
ECMAScript6-基础3-字符串扩展
模板字符串啊,模板字符串,整体给我的印象,有点像我之前用过的FreeMarker,一种占位符的感觉。模板字符串使用反撇号`来取代普通字符串的单引号’或双引号”,除此之外,至少看起来与普通字符串没什么大区别。模板字符串最基本的用途就是模板占位符(这就是为什么说是有点像FreeMarker)。模板占位符表现为${JS表达式},这里的表达式可以是函数调用、算术运算、甚至还可以是模板占位符。J...原创 2020-02-14 15:37:55 · 279 阅读 · 0 评论 -
ECMAScript6-循环
for-of循环首先看看传统的数组遍历方法: var myArray=[“a”,”b”,”c”]; for(var index=0;index<myArray.length;index++){ console.log(myArray[index]); } 然后到了ECMAScript5之后,发明了数组内建的forEach方法: ...原创 2020-02-14 15:37:16 · 303 阅读 · 0 评论 -
学习ECMAScript(2017年7月27日)
一元运算符Deletedelete 运算符删除对开发者新增的属性或方法的引用,不能删除系统的属性或方法引用。Voidvoid 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值。例如,从 HTML 的 元素调用 JavaScript 函数时。要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果。例如:Click me原创 2017-07-27 09:50:35 · 807 阅读 · 1 评论 -
getElementById与IE6
问题描述在 IE6 IE7 IE8(Q) 中,支持以 document.getElementById(elementName) 的方式获取 name 属性值为 elementName 的 A APPLET BUTTON FORM IFRAME IMG INPUT MAP META OBJECT EMBED SELECT TEXTAREA 元素。受影响的浏览器原创 2017-04-15 15:12:49 · 659 阅读 · 0 评论 -
JavaScript-1-基础
1、新浏览器中直接使用,老旧的浏览器中需要使用;2、如果在文档已完成加载后执行document.write,那么整个HTML页面将被覆盖;3、在JavaScript中,用分号来结束语句是可选的;4、JavaScript代码块:由左花括号开始,由右花括号结束;5、JavaScript对大小写敏感;6、JavaScript会忽略多余的空格;7、JavaScript是脚本语言,浏原创 2017-02-12 11:55:21 · 250 阅读 · 0 评论