- 博客(55)
- 收藏
- 关注
RSS订阅原创 前端面试问题
1.vue的生命周期有哪些，都有什么作用vue的生命周期：beforeCreate created beforeMount Mounted beforeUpdate updated beforeUnmount unmountedactivated deactivatederrorCapturedrenderTrackedrenderTriggered各个生命周期的作用：beforeCreate: 组件创建前，此时拿不到组件的实例，可以在这里做一个非响应特性的初始化数据creat.......
2022-02-22 13:56:03
416
原创 移动端的适配
一、名词屏幕尺寸：屏幕对角线的长度，单位是英寸（1英寸=2.54厘米）屏幕分辨率：指横纵方向上的像素点数，单位为px屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi实际上像素分为两种：设备像素（物理像素）和逻辑像素（css像素）DPR：设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和css像素的比值实际工作中我们得到的设计稿都是倍数图二、单位px是一个固定的值em是根据其父元素的font-size计算rem是根据
2022-01-12 16:53:46
262
原创 nprogress使用
安装 nprogressnpm install --save nprogress引入 nprogress文件和样式//引入js文件import Nprogress from "nprogress"//引入样式import 'nprogress/nprogress.css'在项目中根据项目要求修改样式（App.vue / App.css）#nprogress .bar{ background: red !important;}在请求时使用nprogress
2021-09-30 11:59:07
394
原创 gulp的使用
gulp的使用一、了解gulp1、前端自动化打包工具gulp是前端自动化打包工具，gulp运行时依赖node环境。使用gulp先手动编辑好步骤，gulp会根据步骤自动对代码进行压缩/混淆/合并。2、流（stream）/了解/当你使用代码读取磁盘上的内容时，不是立即把磁盘上的内容给你看，而是处理成我们不认识的二进制形式，当这个二进制的格式被包裹以后，就是一个可以直接使用方法的二进制，我们将这个东西叫做二进制流。3、gulp版本问题目前市面上流行两种gulp版本：[email protected] —&
2021-06-22 14:57:31
481
原创 NodeJs内置模块
Node.js是JS的后端运行环境，在后端中运行无法调用DOM和BOM等浏览器内置的API，Node.js可以使用官方API编写出web服务，运行web应用
2021-06-22 13:38:16
272
原创 了解git
git一、什么是gitgit 是分布式版本管理器。我们自己管理代码文件夹的时候，在原来的代码上修改，一旦出现问题，想回到之前一个正常功能的版本比较麻烦，且也不方便我们管理多个版本。git 个人理解就是一个管理我们文件夹的工具，它可以为我们保留所有的版本信息。使用git需要安装git软件，使用这个软件来管理我们的文件夹，当文件夹被git管理后，我们可以通过git进行操作，保存我们的版本信息，使写过的内容不会丢失。二、什么是githubgit 和 github 是两个东西，两者之间没有任何关系。
2021-06-16 17:30:11
194
原创 sass简介
SASS一、了解sass二、sass的变量三、sass的注释四、条件分支语句五、循环语句六、sass的选择器嵌套七、sass 属性的嵌套八、sass的混入九、sass继承十、sass导入一、了解sasssass官网：https://www.sass.hk/Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能，扩展名是 .sass。Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的C
2021-06-15 22:32:59
1270
原创 Typescript类
TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性，比如 类、抽象类、接口等。
2021-06-15 19:42:39
140
原创 typescript数据类型
typescript数据类型1、介绍2、布尔值3、数字4、字符串5、any 和 unknown6、void7、null 和undefined8、never9、字面量10、枚举(enum)11、object1、介绍TypeScript 支持与 Javascript 几乎相同的数据类型，此外还提供了自己特有的一些类型。类型声明类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量（参数、形参）的类型，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错，类型声明给变量设
2021-06-10 17:08:56
219
原创 typescript 简介
typescript 简介一、ts简介二、ts开发环境三、ts编译配置一、ts简介TypeScript 是由微软开发的自由和开源的编程语言，它可以在任何操作系统上运行。TypeScript 是JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型查询。二、ts开发环境typescript 目前浏览器还不能支持，需要把编写好的ts转译为js，编译
2021-06-10 16:13:42
454
1
原创 模块化开发
模块化开发一、模块化概念二、AMD三、es6 module一、模块化概念1、JS在早期的设计中没有模块化的概念，开发者根据需求来模拟出类似的功能，来 隔离 组织复杂的js代码，我们称之为模块化。模块：就是一个实现特定功能的文件，我们需要什么功能，就加载对应的模块2、模块化的优点：避免变量污染，命名冲突提高代码的复用率提高可维护性方便管理依赖关系3、为了避免缺少模块带来的问题，了解下程序员们的应对经历：函数封装对象封装自执行函数表达式模块化4、常见的模块化规范es6 m
2021-06-04 17:59:54
136
原创 代理拦截--defineProrerty/proxy
ES5提供了 **Object.defineProperty** 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。该方法无法监听数组的变化。
2021-06-04 14:31:32
384
原创 重写new、call、bind、instanceof方法
重写newfunction Fn() { // 创建一个实例对象 // this指向实例对象 // 也会像普通函数执行一样，让其执行，只不过this指向实例对象 // 返回值没有或基本值，则返回实例对象，如果引用值，以自己的为主}let f1 = new Fn()// ===============================================================function _new(Construct, ...args) { // 创建一
2021-06-03 18:25:15
121
原创 类/原型/继承
类 基础详解一、类二、原型与原型链三、获取与设置原型四、原型重定向五、原型检测六、原型扩展方法七、继承一、类1、介绍类：对一群具有相同特征的对象的集合的描述。内置类：每一种数据类型都有一个自己所属的内置类，String、Boolean、Symbol、BinInt、Object、Array、RegExp、Date、Function 等，类在实例化时需要使用NEW关键字，Symbol特殊，不能通过new关键字来实例化，直接使用即可 let sym=Symbol()自定义类：在es6之前，通过
2021-06-03 18:21:25
264
原创 JS对象详解
对象一、对象计算二、对象解构赋值对象是包括属性与方法的数据类型，JS中大部分类型都是对象，如：String、Boolean、Symbol、Number、BigInt、Object、Array、RegExp、Date、Function等等。一、对象计算对象直接参与计算时，系统会根据计算的场景在 string/number/default 间转换。对象内部自定义 Symbol.toPrimitive、valueOf、toString方法用来处理所有的转换场景。[Symbol.toPrimitive]
2021-06-01 19:22:51
623
原创 节流和防抖
节流和防抖一、防抖二、节流在“高频”触发操作的场景下，需要对操作进行优化，防抖和节流是一个很重要的手段。如： 按钮的点击、联想搜索、页面滚动等场景。一、防抖在高频操作下，我们只识别一次触发（可以控制开始触发或者是最后一次触发），一般设置一个阈值，在这个阈值内无论你操作多少次，只执行一次。简单的防抖操作 var btn = document.querySelector(".btn"); btn.addEventListener('click', clickHandler);
2021-06-01 15:28:47
92
原创 javascript 闭包
闭包一、函数的两个阶段二、不会销毁的函数执行空间闭包是函数的一种高级使用方式，在了解闭包之前，先梳理下函数的两个阶段。一、函数的两个阶段1、函数的定义阶段开辟一个存储空间把函数体内的代码当做字符串放在这个存储空间中，函数体的代码中的所有变量都不会进行解析把存储空间的地址给函数名2、函数的调用阶段按照函数名对应的地址找到函数的存储空间实参形参赋值预解析把函数存储空间中的代码拿出来执行/* 函数的定义阶段 + 在内存中开辟一个函数的存储空间xxff00 +
2021-05-29 13:34:42
145
1
原创 prototype 原型
prototype 原型一、了解对象的创建方式二、原型三、原型链一、了解对象的创建方式1、内置的构造函数创建var o1=new Object();2、字面量创建var o2={};3、自定义构造函数创建构造函数的基本使用：和普通函数一样，只不过调用的时候需要和new连用，不然就是一个普通的函数调用命名规范：首字母大写，驼峰式命名构造函数内部的this，由于和new连用的关系，指向的是当前的实例化对象构造函数会自动返回一个对象，所以构造函数内部不需要写returnfuncti
2021-05-28 11:31:33
108
原创 jQuery第三方插件
prototype 原型一、了解对象的创建方式一、了解对象的创建方式1、内置的构造函数创建var o1=new Object()
2021-05-27 07:57:35
193
原创 用jQuery发送ajax请求
使用jQuery发送ajax请求一、get()二、post()三、ajax()四、ajax全局钩子函数一、get()$.get() 通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，使用 $.ajax。$.get() 和 $.post() 也可以传入对象数据。查看案例3$.get(url,[data],[callback],[type])url : 请求的URL地址，String类型d
2021-05-25 14:14:47
680
原创 jQuery动画
jQuery动画一、jquery中的动画二、标准动画一、jquery中的动画1、标准动画show()hide()toggle()2、折叠动画slideDown()slideUp()slideToggle()3、渐显动画fadeIn()fadeOut()fadeToggle()fadeTo()4、综合动画animate5、停止动画stopfinish二、标准动画1、show()show() 显示隐藏的匹配元素语法：show()...
2021-05-24 23:27:13
299
原创 jQuery详解
jQuery一、概述二、基本使用三、jquery选择器四、样式操作五、操作元素类名六、属性操作七、内容文本操作八、元素操作九、事件绑定十、获取元素的尺寸、位置一、概述1、什么是jQueryjQuery是一个快速、小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单。结合了多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。2、jQuery 优点轻量级，核心文件才十几k
2021-05-24 17:12:44
542
原创 web存储
web存储WebStorage这是浏览器的一个存储空间作用：实现同一域名下的不同页面之间的数据互通有本地存储localStorage和会话存储sessionStoragelocalStorage存储空间里的数据会长久保存sessionStorage存储空间里的数据是会话时效有点类似于cookie，但是和cookie有区别：==cookie是能存储4kb左右，会在请求的时候自动携带，前后端都可以操作==而localStorage/sessionStorage可以存储5mb左右，请求不会携带
2021-05-23 23:29:46
187
2
原创 cookie
cookie技术会话跟踪技术。由于http协议无法记录用户信息，使用cookie来存储身份信息。cookie就是浏览器端的身份标识，cookie会在请求头中自动携带。一套协议域名端口对应一套cookie。cookie存储在当前浏览器独立创建的本地文件夹中。
2021-05-23 21:53:28
6278
原创 Promise语法
Promise语法一、回调地狱二、Promise一、回调地狱当回调函数嵌套过多的时候出现的问题没有可维护性和可读性== 代码没有问题，不是错误的，只是不好进行后期维护二、Promise1、Promise的作用解决回调地狱的方案之一承诺会帮你做“异步的事情”== 定时器回调函数，ajax函数，事件处理函数会在成功的时候帮你调用成功的回调函数会在失败的时候帮你调用失败的回调函数我们可以把异步的事情交给Promise来做== pending 继续，也就是正在做异步的事情== fu
2021-05-18 13:13:35
1229
原创 跨域请求的三种解决方案
跨域的三种解决方案一、同源策略二、解决方案1：jsonp三、解决方案2：cors二、解决方案1：jsonp一、同源策略ajax无法跨域请求文件。通俗讲就是“浏览器”给js发送请求的限制，你只能给自己域名下的服务器发送请求，不能向别人家的服务器发送请求。当ajax请求的url中的传输协议、域名、端口号，有任意一个不同时，就会触发同源策略例如：做一个外卖网站，需要地图定位功能，就可以向百度购买地图服务器的接口使用，我们请求百度的服务器，这就是跨域请求二、解决方案1：jsonp1、早期常用的一种解
2021-05-14 18:36:19
6087
原创 ajax
ajax一、请求方式二、了解传输协议三、ajax四、ajax的同步异步一、请求方式请求方式==前端和后端交流的方式==用不同的请求方式，接收到的信息是不一样的常见的请求方式== GET==POSTGET==直接在地址栏后面拼接数据==相对POST不是很安全==倾向于向服务器获取数据==大小限制2KB左右==数据格式必须是url编码格式：key1=value1&key2=value2==如果不是url编码格式会自动转换POST==在请求主体里传递过去（在地址栏没有）
2021-05-12 11:53:36
236
原创 瀑布流和懒加载
瀑布流和懒加载瀑布流懒加载瀑布流案例：瀑布流图片加载。分析：将图片放入规定的列中，先进行图片预加载，每次放入图片时判断哪列的高度最小，然后将图片放到高度最小的列中。如果是自适应页面，需要监听浏览器尺寸改变事件（resize），修改已经加载的列和图片的宽度，当浏览器出现滚动条。body的宽度改变，也需要修改已经加载的列和图片的宽度。懒加载分析：每次只加载可视窗口高度*3高的内容。监听滚动条滚动事件，当滚动条滚动超过可视高度时，继续加载图片。...
2021-05-10 18:25:15
334
原创 php入门介绍以及数据库操作
php入门介绍以及数据库操作一、前后端认知二、了解服务器三、了解php一、前后端认知前端==把后端给的数据展示在页面上（列表页面）==把前端的数据传递给后端，让后端存储起来（注册）后端==当前端需要数据时，后端从数据库里拿到数据给前端==把前段传递的数据存储到数据库里数据库==专门让“后端”进行数据的增删改查例如：用户在前端注册账号前端==通过在页面上绑定事件的方式获取用户填写的注册信息==当用户点击注册的时候把信息传递给后端后端==接收前端传递过来的注
2021-05-06 18:22:57
265
原创 javascript 动画
动画在下一个请求的执行帧上执行这个回调函数 requestAnimationFrame(fn)清除动画请求 cancelAnimationFrame(ids)var div2=document.querySelector(".div2");var x=div2.offsetLeft;var y=div2.offsetTop;var speedX=10var speedY=10var ids;animation();function animation(){ // 在下一个
2021-05-06 17:07:59
31
原创 ES6中定义类与类的继承
类和模块化开发一、类二、模块化开发一、类创建类class Box{ constructor(a,b){ this.a=a; this.b=b; } sum(){ return this.a+this.b; }}类的继承class A{ a=1;}class B extends A{ b=2;}class C extends B{ c=3; play(){
2021-04-29 22:57:48
118
原创 Set和Map类型
Set和Map一、数组和对象的优缺点二、 Set三、WeakSet四、Map五、WeakMap六、迭代器 iterator一、数组和对象的优缺点1、数组特点：数组是一个有序的列表，可以根据指定下标找到元素以及其上下关系的元素，是一种紧密结构，长度会随着添加和删除而改变。作用主要存储相关类似的数据，便于遍历全部处理缺点：插入、删除非常消耗性能，排序也非常消耗性能。元素没有宿主，本身是无关联的，数组的元素可以重复，查找速度很慢。2、对象特点：对象是一个无序的列表，以键值对形式存储，可以通过键找到值
2021-04-29 18:23:38
113
原创 ES6语法
ES6语法一、严格模式二、let和const三、箭头函数四、解构赋值一、严格模式1、执行严格模式在script标签里面书写"use strict"进入严格模式<script> "use strict" var a=3;</script>在script标签上添加属性type=“module”<script type="module"> var a=5;</script>2、严格模式下的要求变量必须声明后使用函数的参数不能
2021-04-28 18:31:02
426
原创 JavaScript中this的指向
this指向常见this指向改变this指向常见this指向this是使用在作用域里面的关键字，在不同的作用域里有不同的含义。常见的this指向：在对象Object的函数方法中，指向对象本身在全局函数中，指向window在回调函数中(例如定时器、数组和字符串的一些方法)，指向window在事件函数中，指向监听事件的对象（e.currentTarget）在箭头函数中，this将会是箭头函数外上下文环境的this指向改变this指向通过调用函数的方式改变this的指向，有三种方法1、c
2021-04-28 17:01:10
147
1
原创 JSON格式
JSON格式一、JSON格式简介二、JSON的两种方法1、JSON.stringify()2、JSON.parse()一、JSON格式简介JSON是一种文件格式，这种格式基本所有语言都认识，不管是js,java,php…，所以它就可以在不同的语言之间传递数据。（以前xml格式，但数据格式复杂，操作麻烦）。JSON是一种轻量级的数据交换格式。json文件里的数据类似于数组或者对象，区别：由于json文件是存储数据的所以json里面的值只能是：number,string,null,boolean,
2021-04-27 07:54:32
1523
原创 正则表达式
正则表达式一、什么是正则表达式二、正则表达式的创建1、字面量创建法（常用）2、构造函数创建三、正则对象的方法1、test()2、exec()四、字符串通过正则匹配的方法1、replace()2、match()3、search()4、split()五、匹配规则1、修饰符2、方括号[ ]3、元字符4、量词5、正则中需要用反斜杠\转义的字符六、正则表达式的基础语法1、字符2、点“.”3、字符类字符类字符类的范围字符类的反义转义字符类4、重复重复次数指定重复次数范围关于重复的转义字符重复-非贪婪匹配重复-选择匹配5
2021-04-26 17:51:55
625
原创 Javascript中常见的系统事件
常见的系统事件类型一、事件对象二、事件的三种绑定方式三、鼠标事件四、键盘事件五、浏览器事件六、表单事件七、触摸事件八、其他事件一、事件对象1、什么是事件对象 当触发事件时，浏览器会将所有和本次事件相关的信息记录下来，放到一个对象里面，这个对象就是本次事件的事件对象。2、如何获取事件对象标准浏览器：本次事件处理函数的形参就是本次事件的事件对象IE低版本：事件处理函数里面有一个预先定义好的变量window.event（简写 event），就是事件对象兼容写法： e=e||event二、事件的三
2021-04-23 12:03:24
583
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人