- 博客(37)
- 收藏
- 关注
原创 什么是DOM?DOM常见的操作有哪些?
什么是DOM、DOM的作用、DOM Tree是如何形成、document顶层节点、html根节点以及根节点下的节点存在的三种关系
2024-04-04 11:23:46
699
原创 前端必背理论知识
前端js三大组成部分:DOM, BOM, ECMAScript1. 构造函的内部原理在函数预编译阶段把this的隐式指向一个空对象{}执行this.xxx = yyy隐式return this当显示设置return时, 若:return引用值,则覆盖this;return原始值,则不覆盖this2. 什么是原型 原型是构造函数创建对象的原始模型特点:原型也是对象,原型是函数对象的一个属性原型自带constructor属性,constructor指定构造函数
2021-12-02 11:26:10
604
原创 vsCode快捷键
Alt + up/down 移动行上下Shift + Alt up/down 在当前行上下复制当前行Ctrl + Shift + K 删除行Ctrl + Enter 在当前行下插入新的一行Ctrl + Shift + Enter 在当前行上插入新的一行Ctrl + Shift + | 匹配花括号的闭合处,跳转Ctrl + ] 或 [ 行缩进Home 光标跳转到行头End 光标跳转到行尾Ctrl + Home 跳转到页头Ctrl + End 跳转到页尾Ctrl +
2021-12-02 11:25:23
238
原创 前端状态码
一些常见的状态码为:200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用详细分解:11xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码。 代码 说明 100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。22xx (成功) 表示成功处理了请求的状态代码。代码 说明200 (成功) 服务器已成功处理了请求。 通常,
2021-12-02 11:24:04
1462
原创 如何让一个div上下跳动
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>div上下跳动</title></head><style> .bo
2021-12-02 10:45:31
644
原创 ES6(十八)Module
ModuleES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。export 命令模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口。import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。export输出变量的写法:// profile.jsexport var firstNam
2021-12-02 09:30:03
89
原创 ES6(十七)Class
Class用法class跟let、const一样:不存在变量提升、不能重复声明…es5面向对象写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。//es5functi
2021-12-02 09:29:30
123
原创 ES6(十六)async 函数
async 函数含义ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖?意指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读。不过其并没有给语言添加什么新东西。反向还有语法盐:主要目的是通过反人类的语法,让你更痛苦的写代码,虽然同样能达到避免代码书写错误的效果,但是编程效率很低,毕竟提高了语法学习门槛,让人齁到忧伤。。。
2021-12-02 09:28:58
103
原创 ES6(十五)Generator
Generator简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。跟普通函数的区别function关键字与函数名之间有一个星号;函数体内部使用yield表达式,定义不同的内部状态。Generator函数不能跟new一起使用,会报错。functio
2021-12-02 09:16:45
793
原创 ES6(十四)Iterator
Iterator概念迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。Iterator 的作用有三个:为各种数据结构,提供一个统一的、简便的访问接口;使得数据结构的成员能够按某种次序排列;主要供for...of消费。Iterator本质上,就是一个指针对象。过程是这样的:(1)创建一个指针对象,指向当前数据结构的起始位置。(2)第一次调用指针对象的next方法,可
2021-12-01 09:16:11
123
原创 ES6(十三)Promise
Promise概念Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所`Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。特点对象的状态不受外界影响。一旦状态改变,就不会再变,任何时候都可以得到这个结果。状态Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他
2021-12-01 09:15:55
2971
原创 ES6(十二)Reflect
Reflect概述Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。设计目的将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。修改某些Object方法的返回结果,让其变得更合理。比如,Object.defineProperty(obj, name, desc)在无法定义属性时
2021-12-01 09:15:29
139
原创 ES6(十一)Proxy
Proxy概述Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”,即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。var obj = new Proxy({}, { get: function (target, key, receiver) {
2021-12-01 09:15:11
142
原创 ES6(十)Set 和 Map 数据结构
Set 和 Map 数据结构Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4//通过add方法向 Set 结构加入成员,结果表明 Set 结构不会添
2021-12-01 09:14:07
173
原创 ES6(九)Symbol
Symbol为啥需要SymbolES5里面对象的属性名都是字符串,如果你需要使用一个别人提供的对象,你对这个对象有哪些属性也不是很清楚,但又想为这个对象新增一些属性,那么你新增的属性名就很可能和原来的属性名发送冲突,显然我们是不希望这种情况发生的。所以,我们需要确保每个属性名都是独一无二的,这样就可以防止属性名的冲突了。因此,ES6里就引入了Symbol,用它来产生一个独一无二的值。Symbol是什么Symbol实际上是ES6引入的一种原始数据类型,除了Symbol,JavaScript还有其他5种
2021-12-01 09:13:20
228
原创 ES6(八)函数的扩展
函数的扩展函数参数的默认值基本用法ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello与解构赋值默认值结合使用function foo({x, y = 5}) { console.log(x
2021-12-01 09:12:41
164
原创 ES6(七)对象的扩展
对象的扩展属性的简洁表示法ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};方法也可以简写。const o = { method() { return "Hello!"; }};// 等同于const o = { method: function() { re
2021-12-01 09:11:31
123
原创 ES6(六)数组的扩展
数组的扩展扩展运算符含义扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符将一个数组,变为参数序列。扩
2021-12-01 09:10:11
152
原创 ES6(五)字符串扩展
字符串扩展includes()、startWith()、endsWith()传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。let s = 'Hello world!';s.startsWith('Hell
2021-12-01 09:09:24
132
原创 ES6(四)数值的扩展
数值的扩展Number.isFinite()、Number.isNaN()ES6 在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法。Number.isFinite()用来检查一个数值是否为有限的(finite)。Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFinite(NaN); // falseNumber.isFinite(Infinity); //
2021-11-30 15:15:27
141
原创 typescript((九)ts中的泛型
函数中参数为变量的泛型的使用function join(first: number | string, second: number | string) { return `${first}${second}`}join(2, 7)如果要求第一个参数的类型和第二个参数的类型相同,那就是要泛型写泛型注意三个关键fn / <T,P> 函数的参数的个数决定泛型的个数 fn<T,P>(first:T,second:P){}调用函数时 fn<string,nu
2021-11-30 14:19:31
563
原创 typescript(八)ts中的Enum枚举
业务场景:根据不同数字做不同事初级程序员代码:function getResult1(num: number) { if (num == 1) { return '烫头' } else if (num == 2) { return 'rap' } else if (num == 3) { return '唱跳' }}const result = getResult1(1)console.log('结果是' + resu
2021-11-30 14:08:20
1089
原创 typescript(七)ts中的类class
先写一个简单的类class Girlclass { public name: string}const girlcA = new Girlclass()girlcA.name = '小红'console.log(girlcA.name) // 小红如果类中的属性模式是public属性,可以被外部访问,也可以在内部使用class Person1 { public name: string; constructor(name: string) { this
2021-11-30 14:01:55
1170
原创 typescript(六)ts中的接口
ts中的接口和类型别名很相似,从不同中学习认识接口。两者的区别接口只适用于对象类型定义,无论是单个对象还是函数参数为对象,数组元素为对象的定义,然而类型别名适用于任何变量,并且可以是基础类型。可以把这两个重复的类型注解,定义成统一的接口。2.接口的应用:interface Iob { unname: string, age: number}// 单个变量接口的应用const objA: Iob = { unname: '小红', age: 16 }// 函数中的参数为
2021-11-30 13:46:09
1962
原创 typescript(五)ts中数组类型的定义
上面已经做过数组内存在单个或多个类型一样的数组的类型定义,再复习下const arrA = [1, 2, 4] // 这里利用ts 的类型推断,arrA的数组类型定义为:const arrA: number[] = [1, 2, 4]数组汇总存在单个或者多个同类型的数组的类型定义还有很多,比如:const arrC: boolean[] = [true, false]const arrD: string[] = ['1', '3']const arrE: void[] = [undefined
2021-11-30 13:30:40
7961
原创 typescript(四)ts中函数的参数和返回值的类型定义
前面我们讲到过ts的静态类型定义中的函数类型定义,先来回顾下:const fnA: () => string = () => { return '1' }const fnB: () => number = () => 6const fnC: () => boolean = () => true拓展下:在接口中如何定义函数类型呢?接口后期会讲interface Ifn { (one: number, two: number): number}let
2021-11-30 11:29:30
25258
原创 typescript(三)ts中的类型注解和类型推断
ts的类型注解?哈哈,看到这个词是不是挺唬人的,我刚开始学习也是一样,其实类型注解就是ts为一个变量,或者一个对象,一个数组,一个函数,一个类等定义了类型,就是类型注解。就是声明了类型。let numA :numbernumA = 6这里声明变量numA为数字类型,这就叫做ts为numA做了类型注解。类型注解不仅仅限于基础类型,还有我们上一节学的对象类型的注解。ts的类型推断ts具备类型判断能力let numB = 6声明的变量numB我们在这里并没有声明类型,但是ts的类型推断可以将变
2021-11-30 10:39:35
2012
原创 typescript(二)ts的静态类型
什么是ts的静态类型ts可以定义静态类型,什么是静态类型呢?就是你一旦定义了,将这个类型赋予某个变量,那么这个变量至始至终永远都是这个类型。ts使用静态类型,意味着使用静态类型的变量今后类型无法改变,类型的属性和方法也跟着确定了。静态类型分类什么是ts的静态类型1.基础类型2.对象类型2-1.对象类型2-1.数组类型2-3.函数类型2-4.类类型1.基础类型基础的静态类型包括(number,string,null,undefinde,symbol,boolean,void等),以这些类型为变量定义类
2021-11-30 10:20:41
2555
原创 typescript(一)全局安装typescript
typescript的简介ts是在2012年由微软公司发布的,距今已经维护了9年了,ts其实就是js的超集,也就是由js演变而来的,最后所有的ts都会转化成js来进行编译。typescript开发环境搭建1.安装node运行环境可以在node官网下载node.js来进行对node.js安装。如果已经安装完成了,就可以打开命令行输入node -v来检测是否安装成功。2.全局安装typescript这里可以使用npm或者yarn都可以进行安装npm install typescript -gy
2021-11-30 09:53:17
1717
原创 ES6(三)解构赋值
解构赋值写在最前面1.数组的解构赋值(1)基本用法(2)默认值2.对象的解构赋值(1)基本用法(2)默认值3.字符串的解构赋值(1)基本用法4.函数参数的解构赋值(1)基本用法(2)默认值5.用途写在最后面写在最前面1.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。说白了就是在解构赋值给变量2.数组的解构赋值要点:必须结构一样3.对象的解构赋值要点:{ a: a, b: b } = { a: 1, b: 2 },理论上也是结构一样,只是
2021-11-19 14:37:23
265
原创 ES6(二)ES6的let、const(var、let、const的区别)
写在最前面es5中变量声明只有var,没有let、constes5中只有全局作用域、函数作用域,没有块级作用域变量提升:就是把变量提升提到当前作用域的top的地方,并不会把赋值也提升上来,而var存在变量提升先不用着急去看什么let、const,先看看你们在使用var的时候会不会遇到下面这种情况?var v='Hello World';(function(){ console.log(v);//打印结果:undefined var v='I love you';})()
2021-11-18 15:35:42
172
原创 ES6(一)ES6的开发环境搭建(es6转码为es5)
Babel使用规则Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。下面是一个例子。// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item + 1;});//上面的原始代码用了箭头函数,这个特性还没有得到广泛支持,Babel将其转为普通函数,就能在现有的JavaScrip
2021-11-16 16:01:41
5345
原创 大名鼎鼎的Promise,看完此篇,从此不再谈之色变
写在最前面:估计有好多小伙伴和我一样,看到代码里面的promise或者听见promise,都有些犯怵,之前总觉得很难,所以能不用就不用,经过几天的整理,彻底击溃了这个纸老虎,方便以后工作之用,为此专门写一篇关于promise的理解,如果有理解的不到位的地方,请各位多多指正。话不多说,从一个个问题开始,一步步带你了解这只纸老虎问题1:什么是Promise?有什么用?Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。这是官方对Promise的
2021-11-14 17:49:53
917
2
原创 JavaScript的执行机制(async/await)(二)
写在最前面问题1?项目中经常会遇到通过请求获取某个值或者条件后,根据值或者条件去执行其他操作的情况,但往往请求属于异步任务,导致没拿到值或者条件时,就执行了之后的操作,会因为值为空或者条件不满足而导致报错!只能将后续代码写在请求promist.then()中,导致代码不可维护,不灵活,所谓的‘函数瀑布’。理想状态下: console.log('执行上一步操作') alert('请求接口满足了条件') console.log('根据条件执行下一步操作')打印结
2021-11-13 16:18:22
1169
原创 JavaScript的执行机制(同步和异步)(一)
网上看了好多js执行机制的帖子,自己也做了很多尝试,为了以后工作需要,今天整理一篇出来,理解不到位的请多多指正。1.js是单线程语言,只能同时做一件事情,js和DOM共用一个线程(js可以修改DOM),DOM渲染中js必须停止,js进行过程中DOM渲染必须停止。问题1如果一个大型网站,需要在首页请求很多图片来装饰,按照js单线程的原理,是不是就得等到所有图片都请求成功后才能加载出网页?事实并非如此,那么这其中的解决方法是什么呢?问题2 // 1 setTime
2021-11-12 18:10:21
594
原创 Css-按钮点击按压效果
1.css <style> body { background-color: gray; } .btn { width: 100px; height: 40px; border: 1px solid #333; border-radius: 10px; text-align: cente...
2021-11-03 15:46:32
4439
原创 一名前端的自述
为什么我是前端。从一名化工厂的普通工人,到电子厂的普通职员,再到三线城市里的一名ui设计,最后到今天的前端。我可以说是经历了很多岗位,但为什么我最终停留在了前端?经常发呆想这个问题,最终想明白了,原来仅仅是为了生活,为了更好的生活。 前端入门相较于其他互联网职业相对简单,但对我无而言并非如此。学设计时接触过一些基本的前端知识(html、css),当时就觉得敲代码很高级,很有优越感,之后就报了线上培训班,花了整整一年半的时间,每天白天听课晚上实践,最终懵懵懂懂、信心满满的一头...
2021-11-02 23:34:42
453
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人