- 博客(24)
- 收藏
- 关注
RSS订阅原创 面试算法题
最近这面试题不得不说，简直是有点非人类的感觉，在正常的业务逻辑中不应该出现这样的数据处理逻辑，如果有，我要跟后端打一架！！不过既然是面试，那只能见招拆招，兵来将挡水来土掩。废话不多说，看题 const pathList = ["/a/b", "/a/2/c", "/d"]; /** * 如上，输入是一个一维String数组pathList，里面记录了由"/"分隔的字符串， * 表示了用户在系统中存储的目录结构 * 现在需要将这个目录结构进行结构化，方便使用Ech
2022-04-11 18:42:20
967
1
原创 手写一个Promise
es6中新增定义了一个Promise的类，本篇记录一下对Promise的深入学习过程。(长篇警告！！！)首先纠正一个错误观点，“Promise是用来解决回调地狱的问题”，这只是语法糖，Promise真正解决的是数据依赖问题, 采用的方法依然是我们常挂嘴边的, "老掉牙"的 解耦。解的是 数据产生(发` ) 与 使用(收) 的耦, 也就是 发 与 收 的解耦.接下来剖析一下他的解耦过程，分步实现1、构造函数里传一个函数的两个参数（resolve, reject）2、resolve 成功时执行的回调
2021-06-08 15:59:20
154
1
原创 Ajax
// 实例化ajax请求const xhr = new XMLHttpRequest()// open 创建请求第一个参数是请求方式，第二个是请求地址，第三个参数是是否异步xhr.open('GET',"/api",false) xhr.send() //发送请求 参数：body 要发送的数据（字符串类型） xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert
2021-03-24 08:29:58
96
原创 关于js单线程，事件循环，微任务宏任务
众所周知，javascript是一门单线程\异步、非阻塞、解释型脚本语言。所谓单线程，就是当上一句代码没执行完时，下一句代码不会执行。 所以当在页面中需要请求数据时，如果数据都是以单线程的形式请求，会造成上面的数据没有请求到时，下面的数据也不会发送请求，造成很卡的现象。解决这个问题我们可以将请求代码写成异步请求的格式（ajax，axios）；虽然js引擎只维护一个主线程用来解释执行JS代码，但实际上浏览器环境中还存在其他的线程，例如处理AJAX，DOM，定时器等，我们可以称他们为工作线程。同时浏览器中还
2021-03-24 07:54:19
123
原创 关于原生js事件
js事件分为事件冒泡和事件捕获事件捕获:事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。放一张示例图以便理解js 事件绑定的三种方法1.嵌入dom<div onclick="start()">按钮</div><script>function start(){ alert('1')
2021-03-23 08:09:02
209
转载 dom操作
1，DOM的本质：DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型当网页被加载时，浏览器会创建页面的文档对象模型javascript能改变页面中的所有HTML元素javascrip能改变页面中的所有HTML属性javascrip能改变页面中的所有CSS样式javascrip能对页面中的所有事件做出反应DOM是哪种数据结构树（DOM树）DOM树形结构2.js获取DOM节点的几种方式document.getElementById(); //id名，
2021-03-22 08:24:03
86
原创 关于BOM操作
如何识别浏览器的类型分析拆解url各个部分//navigatorconst ua = navigator.userAgentconst isChrome = ua.indexOf('Chrome')//拿到浏览器信息console.log(isChrome) //返回true和false//screen 包含有关客户端显示屏幕的信息console.log(screen.width)console.log(screen.height)//locationlocation.href 返回.
2021-03-22 08:19:40
106
原创 事件轮询和微/宏任务
Event Loop？什么是Event Loop，Event Loop是计算机系统的一种运行机制，JavaScript语言就采用这种机制，来解决单线程运行带来的一些问题。（事件循环/事件轮询）过多的同步操作会让代码运行过程阻塞，而多线程不仅占用多倍的系统资源，也闲置多倍的资源，Event Loop就是为了解决这个问题而提出的，Event Loop是一个程序结构，用于等待和发送消息和事件，简单来说在程序中设置两个线程：一个负责程序本身的运行，称为"主线程"；另一个负责主线程与其他进程（主要是各种I/O操
2021-03-22 08:11:48
163
原创 vue面试中会遇见的问题
VUE中 给元素绑定key值作用key的作用主要是为了更高效的渲染DOM，另外当你使用同名标签元素过渡切换时，也会用到key值，使用的目的也是为了让VUE可以区分它们，不然VUE只会替换其内容并不会触发过渡效果。注意：尽量别用index去代替key值，因为key的主要作用是为了高效的渲染DOM，当一个页面有多个循环，这个时候如果用index做为key，index值就会存在重复，同时也违背了key高效渲染的初衷<template> <div> // 1.
2021-03-18 08:40:01
99
原创 Class 继承
ES6中引入了 Class（类）这个概念，作为对象的模板。通过class关键字，用于定义一个类。官方文档中这样介绍classES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。简单来说class 的出现可以让我们操作对象的时候更加的简单方便。用一个例子简单记述一下使用方法class People{ // 定义一个类 (声明了一个构造函数People) constructor(na
2021-03-16 22:06:26
64
原创 vue面试题由浅入深（二）
高级特性1、 如何自定义v-model在子组件中<template> <input type="text" :value="txt" @input="$emit('change',$event.target.value)" ></template><script>export default{ model:{ prop:text, event:'change' }, props:{ text:String }}<
2021-03-14 21:55:42
136
1
原创 2021-03-14
前端知识小课堂开课了html语义化左侧就是html语义化总结：增加代码可读性，让搜索引擎更容易懂（SEO）块级元素&内联元素display: block/table; 有div、h1、h2、table、ul、ol、p等等特点：标签在不设置宽的时候也会独占一行display: inline/inline-block; 有span、img、input、button等等特点：标签不会独占一行，会一直往后排，知道浏览器宽度不够，然后自动换行盒模型宽度计算offsetWidth的定义
2021-03-14 21:53:56
53
原创 vue面试题由浅入深（一）
vue面试题的自我总结基础的使用vue的原理层及高级特性使用vue设计具体项目功能使用1、插值，表达式vue可以使用 {{ }} 双花括号的方式在dom结构中插入想要的值，使用vue 我们的工作更多的是去操作数据改变视图，尽量避免直接操作dom元素。2、指令动态属性动态地绑定一个或多个 属性，或一个组件 prop 到表达式。在绑定 class 或 style 属性时，支持其它类型的值，如数组或对象在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型
2021-03-14 21:47:08
340
原创 项目性能优化的方法
一、vue-router路由懒加载懒加载是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。方法和原理require-ensure说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack
2021-01-19 21:18:33
795
原创 配置rem
rem 单位会根据根节点的字体大小来改变来改变自身大小，所以可以使用js代码来适配rem。往往我们接到的设计图纸都是以ipone6的375px视口宽度为基准。为了方便计算，配置的根节点字体大小都是以整数记。如果以375为便准配置100px的根节点大小可能会出现计算不方便，数值太小等问题，所以干脆使用750为基准配置100px的根节点大小。(function(doc, win) { var docEl = doc.documentElement, resizeEvt = "orien
2021-01-14 19:53:21
183
原创 vant 实现图片懒加载
1.关于路由的懒加载 大家可能知道 就是为了减少第一次加载程序的时候 一次性发送那么多请求减少服务器的压力图片的懒加载也是这样的原理 放置一次行加载太多的图片给用户体验不好 而且用户也可能不会游览后面的图片比如轮播图 一次性就只加载俩张托图片 用户往后拨动或者 自动拨动到第二张的时候加载第三张图片 算是一种优化方式你安装好了 vant后import { Lazyload } from “vant”Vue…use(Lazyload)在组件中 // 将src改成 v-lazy 就可以了
2021-01-14 10:26:06
2129
原创 简单学会github的基础使用
3 修改代码并提交首先输入 git status 列出当前目录所有还没有被git管理的文件和被git管理且被修改但还未提交(git commit)的文件，也就是所有改动文件，红色字体标出。然后输入 git add . (有个点) 表示添加当前目录下的所有文件和子目录，然后 再输入一次 git status 如果看见文件都变绿了 ，那么就代表 它们已经准备好了被提交（git commit）然后提交： git commit -m "modify" git pull
2021-01-13 21:50:09
169
1
原创 深拷贝浅拷贝，原型，类型校验，递归深拷贝
遇见一个问题，解决的时候衍生出了几条底层原理。为此做一下总结let arr = ['1', '2', '3', { name: 'zhangsan'}, { name: 'lisi'}]声明一个数组，要求对数组进行深拷贝一 、 深拷贝和浅拷贝的区别所有基础数据类型（String，Number，null，undefind，Boolean）进行赋值时都是深拷贝所有声明的变量在赋值引用数据类型时，都是浅拷贝，因为引用数据类型都是存放在堆中，而声明的变量就相当于一个指针，指向了堆中的
2021-01-13 21:28:02
104
原创 三分钟学会Vuex
Vuex 是什么？vuex是一个专门为vue提供的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex有五大核心首先简单说明，然后在下面详细介绍使用方法核心方法简单说明stateVue使用单一状态树的方式，将各组件的数据都储存在state中。（所以每个应用将仅仅包含一个 store 实例）getterVuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性
2021-01-12 21:50:06
225
1
原创 git命令
git命令git init 作用是初始化一个能让git进行管理的仓库 使用 attrib-h .git可以释放出隐藏文件 .git创建出自己的项目文件 打开项目文件夹 然后又在文件夹中打开git命令窗git add “文件名称”提交单个文件 git add . 提交所有修改的文件git status 可以查看当前git 所处的状态 比如放在git add 后执行git status 命令可以查看当前都添加了那些修改的内容git commit -m “本次更改内容的描述” 因为描述内容需要表达本
2021-01-12 19:16:50
88
原创 JS递归
递归就是函数的自我调用，通过这种方式，可以对复杂数组进行处理，例如数组嵌套数组，对象嵌套对象，或者更深层的嵌套关系。举个栗子 // 要求 从数组arr 中将所有对象数据平铺 var arr = [{ id: '1', name: '课程1', children: [{ id: '2', name: '课程2', }, {
2021-01-12 08:45:06
289
1
原创 冒泡排序
先说下冒泡排序的定义冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。下面有两个例子，是用冒泡排序的方法解决相应的问题1 、 中国有一套反导系统，某国向中国发射N枚导弹，导弹系统有一个bug，10000米导弹飞过来，射下来，发射过来[10000,5888,12000,6999,7000,3000,4
2021-01-11 16:44:02
221
1
原创 react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松第一步 先安装路由依赖yarn add react-router-dom --saveyarn add react-router-config --save第二部 配置路由文件新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件 import React from 'react'; impo.
2020-12-16 17:04:13
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人