DaXiong1024-优快云博客

原创整理的最新的前端面试题必问集锦（持续更新）

前端面试必问一、HTML+CSS1.HTML001.标签上title属性与alt属性的区别是什么？title: 仔显示图片的时候，鼠标以上可以显示一些信息，一般为建议、提示类型alt ：当网速不佳，或者因其他原因图片加载不出来，代替图片解释的信息002.、有什么区别?、有什么区别em? 有区别，但区别不明显，浏览器显示不出来。003.请写出至少5个html5新增的标签，并说明其语义和应用场景？section：定义文档中的一个章节nav：定义只包含导航链接的章节header：定义页

2020-08-09 02:43:43 7882 3

原创 JavaScript知识梳理 - ES6新特性与重点知识总结（七）

ES6新特性与重点知识总结一、ES6变量声明var声明的变量，没有块级作用域的限制，let/const 声明的变量，具有块级作用域的限制。var声明的变量存在变量提升，let/const 声明的变量，没有变量提升。const 声明的是常亮，不能重新赋值，声明即赋值。二、解构赋值S6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。1.数组结构赋值let arr = [1, 'hello', [100,200], {a:1, b:2}, true,

2020-07-23 09:32:15 339

原创 Vue -数据更新检测的大坑！！！（一）

标题数据更新检测Vue是数据驱动的，如果某个数据类型是数组类型，在一些数组的炒作下是可以更新页面的，还有一些数组的操作不会引起页面的更新。下面的数组方法是可以引起页面更新的(编译方法)unshift() 前面增加push() 后面增加shift() 前面删除pop() 后面删除splice() 高级方法删除、添加、删除sort() 排序reverse() 倒序下面两种方式修改数组是不会引起页面的更新

2020-07-08 16:34:44 361

原创 JavaScript知识梳理 - 函数的this指向及改变 - call、apply、bind（六）

函数的this指向1.this的指向this指向函数的调用对象this指事件的调用对象在构造函数中this指向示例对象再prototype原型的方法中，this指向示例对象、找不到函数的调用的this指向window箭头函数没有自己的this，它的this指向上下文中的this(即所处环境的this)function fn(x, y) { console.log('coming',this); console.log(x + y);

2020-07-08 10:39:21 179

原创 JavaScript知识梳理 - 回归基础，深入理解Promise（五）

1.简述1.1概述Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息1.2.目的避免回调地狱的问题Promise对象提供了简洁的API，使得控制异步操作更加容易1.3.Promise的三种状态：pendding //正在请求rejected //失败resolved //成功1.4.基础用法：new Promise(function(resolve,reject){ })1.5.resolved,rejected函数

2020-07-08 10:34:44 213

原创 JavaScript知识梳理 -从面向过程到面向对象（四）

面向对象案例1.选项卡切换1.1.css样式<style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 300px; margin: 200px 0 0 800px; border: 1px solid #000; } .tits{ width: 400px;

2020-07-03 17:01:59 2873

原创 JavaScript知识梳理 - 深入理解ajax，各种封装ajax，ajax的各种使用方法（三）

call、apply、bindcall、apply、bind都是Function.prototype的方法，所以每个函数都有call、apply、bind属性。call、apply、bind的作用都可改变函数内部的this指向1.callcall()的作用改变了原来函数的this指向绑定函数内部的this指向，this指向obj没有返回值，会执行当前函数。传参方式：call()里的第一个参数一个对象，后边参数是用逗号隔开的列表。fn.call(obj,2,3,4,5)

2020-07-03 16:49:21 183

原创 JavaScript知识梳理 - 同源策略/跨域请求(二)

服务器同源策略/解决跨域请求1.服务器同源策略同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。同源指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。同源策略就是为了保证网站的数据安全而存在。2.URL构成：url：http://image.baidu.com:80/search/detail?ct=503316480&z=undefined#headerhttp ---- 超文本传输协议[image.baidu.com] ---- 域名8

2020-07-03 16:41:10 297

原创 JavaScript知识梳理 - 闭包、原型/原型链、继承（一）

闭包、原型/原型链、继承1.闭包1.1.官方解释一个拥有许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是该表达式的一部分当一个函数能够记住并访问到其所在的词法作用域及作用域链，特别强调是在其定义的作用域外进行的访问，此时该函数和其上层执行上下文共同构成闭包。闭包就是指有权访问另一个函数作用域中的变量参数的函数。闭包就是能够读取其他函数内部变量（参数）的函数闭包可以理解成定义在一个函数内部的函数1.2.特别需要明确几点闭包一定是函数对象闭包和词法作用域、

2020-06-23 21:45:39 380 1

原创 react 异步加载代码组件

import React, { Component } from 'react'/** * @description: 封装react 页面级组件按需异步加载函数 * @param {any} importComponent * @return {*} */function asyncComponent(importComponent: any) { class AsyncComponent extends Component<any, any> { construct

2021-09-08 12:25:42 293

原创解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题

移动端开发时，H5长页面在iOS系统中滑动时，当页面滑动到顶部或底部时，页面还能够上滑或下滑，手指离开屏幕后回弹，这就时橡皮筋效果，单纯来说这个效果并没有什么问题，但是它对H5页面却并不友好，会导致穿透，导致H5页面出现被截断的假象；参考了很多文章之后，我采用了如下办法，亲测好用：使用插件inobounce（但是只适用于ios系统，安卓不适用）下载插件：npm install inobounce -s在需要处理的页面上添加如下代码：useEffect(() => { let u = n

2021-09-01 16:47:20 1853

原创 Antd Form 表单中使用Upload组件

Antd Form 表单中使用Upload组件html<Form.Item label='文件上传' name='uploadFile' valuePropName='fileList' getValueFromEvent={normFile} rules={[ { required: true, message: '必填' } ]}> <Upload {...uploadProps} > <Bu

2021-08-31 17:23:56 3805

原创微信支付支付宝支付

微信公众号支付1.首先公众号授权获取code// 如果已经拿到code并且获取到openid以后就停止重定向 if (localOpenid) { return } else { // 如果浏览器地址栏参数没有code，那就控制重定向 if (!localtion.search) { //企业应用ID const appId = 'xxxxxxx' //重定向域名（需要在微信商户后台配置jsapi支付回调域名） const url = `$

2021-08-31 12:13:49 325

原创 antd表格切换分页页码时之前的选择项仍然保留问题解决

！！！主要是利用rowSelection配置项中的onSelect,onSelectAll 回调，代码如下/** * @description 表格选择行配置项 */export const useRowSelection = <T>() => { const [checkedRowKeys, setCheckedRowKeys] = useState<Key[]>([]) const [checkedRows, setCheckedRows] = useSt

2021-08-31 11:47:28 1083

原创 Use Redux

Use Redux一、Redux 简介Redux 是 JavaScript 状态管理容器。React 跟 Redux 没有什么直接的联系。就像 java 和JavaScript 之间。因为 redux 在 react 中使用起来比较好用，所以常选取 redux 作为 react 的状态管理容器。优点：可以集中管理数据，多组件共享数据。唯一的数据源，只能通过纯函数来修改。缺点：实现原理是发布订阅模式，dispatch 会触发给纯函数中type相同的操作，细粒度不够。需要手

2021-08-30 11:23:31 456

原创创建React-TS项目流程

React+TS+eslint项目流程1.使用create-react-app创建TS项目文件夹$ create-react-app h5web-ts --template typescript //h5web-ts 包名2.项目采用eslint代码检查工具eslint采用eslint+standard下载eslint$ npm install eslint --save-dev设置一个配置文件 .eslintrc.js$ ./node_modules/.bin/eslint

2021-08-30 11:21:55 2143

原创 js对树形数据的处理

遍历树状数据的总结一、在树状结构中查询id为某个值的节点（深度优先）const findInTree = (tree, id) => { if (!tree || !tree.length) { return null } for (const node of tree) { if (node.id === id) { return node } const find = findInTree(node.children, id) i

2021-06-08 11:13:07 1359

原创继承

(1)原型继承原型继承 => 就是通过改变原型链的方式来达到继承子类.prototype = 父类的实例1.父类function Person(name) { this.name = name}Person.prototype.sayHi = function (){ console.log('hello world !')}2.子类function Student(age) { this.age = age}3.实现Student 继承 PersonS

2021-02-18 22:02:22 110

原创 Vue slot插槽详解

slot -插槽一、slot 插槽调用组件时，写在组件标签内的内容，默认是不会被渲染的如果需要写在组件标签内的内容显示出来，那么就需要solt插槽二、slot 相关话术定义组件时要想好在哪个位置去渲染 solt 内容在想好位置那里放置一个 slot 标签即可slot内容就会自动替换 slot 标签slot内容调用组件时写在组件标签内的内容就叫slot内容slot标签 vue的内置组件slot 默认内容slot标签内的内容就是slot的默认内容具名插槽

2021-02-18 09:36:36 402

原创树状结构导出到excel表格

/**获取导出实例 */ async getAllInstances(SlotId) { //SlotId 数据库词槽id let result:any = [] //导出的数据模块 const allData = await this.getSimpleInstance(SlotId)//allData根据数据库词槽ID查询到的树状结构数据 let count = 1 //fn 是递归的函数 let fn = (data, objc,count) =&.

2020-12-04 17:04:25 2922

原创关于前端项目经验---前端封装项目img模块的好处

前端封装项目img模块一、前言在我们项目开发的时候，会用到许多icon、img 图片等当我们打包项目的时候，如果项目性能加载图片卡顿、迟缓、那么就可能需要用到CDN 图片静态资源托管.此时我们的项目已经完成,图片数量庞大,再去修改img的src路径便是一个巨大的任务工程。且项目以后维护也会有很多相应问题所以引入img模块化来应对该问题。二、起步创建 img.js 文件import p1 from "../assets/5.png"let imgBaseurl = "http://

2020-08-21 18:14:22 343

原创 React 非父子组件通信中央事件管理器

一、前言React 非父子组件通信可以用中央事件管理器 ,实际上就是发布订阅模式.二、定义中央事件管理器Bus.js文件let map = {}const bus = { /** * 订阅事件,监听事件 * @param {String} eventName 事件的名字 * @param {Function} callback 回调函数 */ subscribe: (eventName, callback) => { //如果map对象[ev

2020-08-19 23:03:16 327

原创前端用来模拟数据的 mock-服务器（json-server）

MOCK 服务器一、mock 简介向mock提供测试数据的格式要求，字段说明信息，mock可以提供符合要求的数据返回。其实思路很简单，但是解决了很大的问题。前后端分离，前端可以不必等后端接口，可以直接请求mock获得数据。前端不等后端，可能的做法是本地配置json串，这样做有3个不好的地方：① 耗费时间精力 ② 自己造数据也可能不一定符合要求 ③ 自己造json数据，代码不是ajax方式，后期后端提供接口了之后还是要修改。mock可以提供丰富的随机数，也可以辅助测试。二、mock 使

2020-08-13 08:13:23 1128

原创使一个div盒子垂直水平居中的几种处理方法

方法一：如果盒子有宽高div{ width:200px; height：200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px}方法二：父元素有高度的情况下并且只有一个div子元素div（父元素div）{ display:flex; justify-content:center; align-items:center}方法三：父元

2020-08-11 08:53:45 330

原创 JavaScript - 事件循环机制（Evenloop）

一、前言众所周知，浏览器的JavaScript解析引擎是单线程的，也就是说每次只能执行一个任务，其他任务都得按照顺序排队等待被执行，只有当前任务执行完成以后才可以执行下一个任务。二、JavaScript的任务分为同步任务和异步任务同步任务var t = Date.now();console.log('Hi');if (true){ console.log(123) }2.异步任务setTimeout(function() { console.log(‘b’); }, 10)

2020-08-09 10:27:49 1165

原创利用 React Swiper 封装轮播图组件

1.组件需求：封装一个react的轮播图组件。轮播图里边可以自定义图片数量，和图片2.上代码import React, { Component } from 'react'import Swiper from 'swiper'import 'swiper/css/swiper.css'export default class Swiperself extends Component { render() { return ( <div className="

2020-08-07 21:11:45 680

原创梳理 React 知识笔记从入门到放弃！框架必知的知识点

React一、React - 简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。二、前端三大框架框架名出现时间所属一开始特色Angular2009年谷歌指令系统、双向数据绑定React2013年Facebook虚拟DOM、组件化Vue2015年尤玉溪

2020-08-07 18:02:49 444 2

原创 JS - 事件模型 - 事件流

一、事件模型JavaScript 中事件模型有两种：DOM0级，DOM2级DOM0级事件模型DOM0级事件模型是早期的事件模型，所有浏览器都支持。注册事件：在事件类型前面加on，如：onclick、onmouseover …解除事件：dom.onclick = null;每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个事件函数。DOM2级事件模型DOM2级事件模型是较新的事件模型，IE8及以下是不支持的。addEventListener(type,fn,us

2020-08-04 19:03:31 449

原创 mongoDB简介和命令

MongoDB 简介和命令一、MongoDB 简介一、MongoDB是什么？MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系型数据库和非关系型数据库之间的产品，是非关系型数据库当中功能最丰富，最像关系型数据库的。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组

2020-07-28 19:35:44 149

原创解决mongoDB安装，启动数据库。连接数据库失败问题------亲测有效

Node - 011 - MongoDB 安装一、下载安装包下载页面地址二、安装双击点开，下一步同意协议，下一步选择 Custom ，下一步**注意：默认安装在C盘，如果担心C盘空间不足的话，点击 Browse 修改安装路径，请最多修改盘符为其它盘，其余路径不要动。取消安装服务，下一步注意：由于安装服务时，个别电脑可能会出现问题，这里直接取消服务安装。后续再通过别的方式来安装服务。取消左下角勾选框，下一步注意：取消左下角的勾选，不然一天也可能安装

2020-07-28 14:57:05 3890

原创简单梳理 Vue 知识笔记（持续更新）

Vue001、Vue-简介一、Vue简介一套用于构建用户界面的渐进式框架核心思想是数据驱动：数据映射视图，数据的修改会自动引起视图的改变。双向数据绑定：数据的改变会引起视图的变化，视图的变化也会引起数据的变化，这就是双向数据绑定。二、如何理解Vue的渐进式框架Vue框架本身是分层的设计：核心，视图渲染。组件化单页面路由状态管理构建系统三、前端三大框架框架名出现时间所属一开始特色Angular2009年谷歌指令系统、双向数据绑定Re

2020-07-16 08:36:31 1353

原创哎！~公司新来的前端Vue里的 v-bind v-model 指令都拎不清

v-bind(简写：)用于动态绑定html标签属性语法：v-bind:attrname="数据":attrname="数据“v-bind=对象v-bind="{name:'张三',age:18}"==>v-bind:name="张三" v-bind:age="18"v-bind="{name:name,age:age}"==>v-bind:name="name" v-bind:age="age"此时对象的值在这里是变量，是data里的变量Vu..

2020-07-08 18:56:35 242

原创 Vue - 静态方法、实例方法、实例属性、代理属性、代理方法

一、静态方法、实例方法、实例属性、代理属性、代理方法类似这种 Vue.xxx() 静态方法通过实例对象 .\$xxx() 实例方法vm.\$set()vm.\$destory()通过实例对象.\$xxx 实例属性vm.\$datavm.\$sel代理属性，一般就是定义在data选项中的数据，通过实例对象去访问。代理方法，一般就是定义在methods选项中的方法，通过实例对象直接访问...

2020-07-08 16:47:52 576

原创还不懂正则表达式，那就来看看吧

正则表达式1.正则表达式：定义字符的规则，也可定义输入字符串的规则。由普通的字符和元字符组成。通过构造函数定义正则表达式：var reg = new RegExp(/lucy/)或者var reg = new RegExp('lucy')通过字面量来定义正则表达式：//里面都是字符串 var reg = /lucy/2.元字符：\d 元字符表示0-9\D 元字符表示非数字\w 元字符表示单词字符：字母数字下划线\W 元字符表示非单词字符：\s

2020-07-08 10:46:12 350

原创三大家族之offset、scroll、client和event对象

三大家族之offset、scroll、client1.offset家族元素.offsetWidth/Height //元素的宽高：content+padding+margin元素.offsetTop/Left //元素距离最近的有定位的父元素的距离元素.offsetParent //元素的距离最近的有定位的父元素2.scroll家族元素.scrollWith/Height //如果内容的

2020-07-08 10:41:36 302

原创服务器+PHP+MYSQL

服务器+PHP+MYSQL1.服务器1.1.前端认知：前端把后端给的数据展示在页面上(列表页面)把前端的数据传递给后端, 让后端存储起来(注册)后端当前端需要数据的时候, 后端从数据库里面拿到数据给前端把前端传递来的数据存储在数据库里面数据库专门让后端进行数据的增删改查流程前端 -> 后端 -> 数据库 -> 后端 -> 前端注意：前端是不能操作数据库的前端相对数据库进行任何操作, 都要把信息告诉后端由后端进行数据库操作把

2020-07-03 16:57:29 243

原创阻止事件传播/阻止浏览器默认行为

阻止事件传播/阻止浏览器默认行为1.事件捕获event.stopPropagation()2.事件冒泡event.cancelBubble=false 低版本IE3.阻止浏览器默认行为：火狐/谷歌event.preventDefault()4.阻止浏览器默认行为：低版本IEevent.returnValue=false...

2020-07-03 16:43:02 397

原创！前端必会的github

github1.github的操作git bash here 邮件要操作的文件夹git config --list 查看配置清单git config --global user.name "你的用git户名" 给git配置用户名git config --global user.email "你的用git邮箱" 给git配置用邮箱2.github命令cd 进入文件夹cd.. 返回上一层目录mkdir 创建项目pwd 显示当前工作目录的全路径touch xx 新

2020-06-28 16:43:12 163

原创数组去重(常用的办法)

数组去重(常用的办法)1.for循环嵌套，利用splice去重function newArr(arr){ for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ //如果第一个等于第二个，splice方法删除第二个 arr.splice(j,1); j--;

2020-06-28 15:41:17 157

原创你懂sass怎么用吗？不懂快到碗里来

sass1.世界上最成熟、最稳定、最强大的专业级CSS扩展语言！sass 是一个 css 的预编译工具也就是能够更优雅的书写 css可以定义变量可以定义函数可以有if语句，可以有for循环语句sass 写出来的东西浏览器不认识，cass可以写 css代码。依旧是要转换成 css 在浏览器中运行这个时候就需要一个工具来帮我们做2.和css区别css文件后缀是.csssass文件后缀是.sass或者.scss3.sass和scss文件区别在.scss文件里面和

2020-06-28 15:38:54 166

空空如也

空空如也