努力奔波的程序猿-CSDN博客

为帮助您在CSDN创作的文章获得更多曝光和关注，我们为您提供了专属福利：已注册且未在CSDN平台发布过文章的用户，9月1日—9月30日期间发布首篇文章可享大额首篇流量券扶持，且发布首篇文章后30日内，享连续每日流量券扶持；已注册且未在CSDN平台发布过文章的用户，在8月1日—8月30日期间发布过首篇，可自9月1日起，享连续30天每日流量券扶持；更多福利介绍详见https://mp.csdn.net/mp_blog/manage/traffic如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇

2023-09-28 15:42:11 132

原创超简单 display:flex教学

row：横向从左到右排列（左对齐），默认的排列方式。类似左浮动。row - reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。类似右浮动。column：纵向排列。column - reverse：反转纵向排列，从后往前排，最后一项排上。

2023-06-25 14:52:03 1925

原创 sass与scss与less的区别

sass的安装需要Ruby环境，是在服务端处理的，而less是需要引入less.js来处理less代码输出css到浏览器，也可以在开发环节使用less，编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。Less 与 Sass 处理机制不一样， Less 是通过客户端处理的，Sass 是通过服务端处理，相比较之下 Less 解析会比 Sass 慢一点。Less 环境较 Sass 简单， Less 是@，而 Sass 是$

2023-03-02 09:32:33 326

原创前端面试题-react专项

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用。复杂的class组件，使用class组件，需要理解 JavaScript 中 this 的工作方式，不能忘记绑定事件处理器。因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。法糖，也是react.js的使用基础。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。

2023-02-03 16:39:56 1055

原创前端面试题 vue专项，共计58道

里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据。mutation 里不能进行异步操作，mutation 提交的是对store 数据的更改，一般调用mutation 的。12、调用 beforeRouterEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传。是一种观察的作用，用于监听某些数据的回调。的属性，首先会把新的属性进行响应式跟踪然后会触发对象 ob 的dep收集到的 watcher 去更新，当修。

2023-02-03 16:39:02 3843

原创 Web前端进阶面试题 JS47道+http20道+数据结构8道

（1）typeof：可以判断出string，number，boolean，undefined，symbol，function，bigint，但判。（1）require对应导出的方法是module.exports，import对应的方法是export default/export。token，假设请求中没有 token 或者 token 内容不对，则觉得可能是 CSRF 攻击而拒绝该请求。原型链：简单来讲就是原型组成的链，比如函数的原型是Function，Function的原型是Object，Object。

2023-02-03 16:37:59 932

原创 Web前端基础面试题 HTML23道+CSS42道+JS33道

HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document。head标签用于定义文档的头部，它是所有头部元素的容器。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的。对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，

2023-02-03 16:36:26 860

原创原生js获取鼠标位置和获取鼠标点击位置

client获取的只是可视区域的X和Y坐标，如果页面有滚动条且滚动条滚动了，我们点击页面的同一位置，那么这个X和Y值是不会改变的，那么问题来了，怎么获取页面包括滚动条部分的X和Y坐标呢，这时候我们可以用page，page是获取这个页面的X和Y值，包括不可视区域!这也编写完成了就可以获取鼠标点击坐标和鼠标实时移动位置了~...

2022-07-27 16:24:07 5547

原创 vue2.0与vue3.0的区别

vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据

2022-06-02 17:55:17 8875

原创深层前端性能优化

我把前端性能优化分为四个层面：网络通信、资源加载、代码优化、交互优化网络通信http1.1协议优化：多域名：css/js一个域名；图片一个域名；接口一个域名；底层逻辑是在http1.1协议下一个tcp链接只能建立4-8个请求。多域名能提供并发请求的可能性雪碧图：把小图片合并在一张图上；底层逻辑其实也是减少请求合并小文件：这个和雪碧图是一个道理http2.0协议优化：上面针对http1.1的优化都不管用了；他和http1.1的区别是：http1.1: 以文件形式进行传输；http2.0以二进

2022-01-14 10:44:58 167

原创 ajax

1.什么是ajax:(异步的javascript和xml),ajax并不是一门新的技术，而是多种技术的组合（html,js,xml,css）用于快速的创建动态的网页，能够实现无刷新更新数据从而提高了用户体验2.ajax的原理：由客户端请求ajax引擎，在由ajax引擎请求服务器，服务器作出一系列的响应之后将结果返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置,从而实现了页面无刷新更新数据3.核心对象：XMLHttpReques4：ajax的优点：能够减轻服务器的负担页面

2021-03-23 21:52:14 113

原创监听函数，事件冒泡，阻止事件冒泡，JS事件绑定方法

监听函数监听函数浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。JavaScript 有三种方法，可以为事件绑定监听函数。HTML 的 on- 属性HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。<body onload="doSomething()"><div onclick="console.log('触发事件')

2021-03-22 21:38:52 756 1

原创原生的DOM操作

虚拟DOM和diff算法虚拟dom就是用对象的方式区代真实的dom操作。当页面打开时浏览器解析HTML元素，构建一个dom树，将状态保存起来，在内存中模拟dom操作，又会生成一个dom树，两个进行比较，根据diff算法找出不同的地方，之渲染一次不同的地方diff算法：就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新DomJS中所有全局都是window的window的作用:在封闭空间中声明一个全局的变量全局变量和函数都属于window

2021-03-21 19:22:05 711 1

原创 JS基础知识总结

1.什么是模块化模块化是指把一个复杂的系统分解到一个一个的模块，再用一定的方式拼装起来。2.模块化开发的优点(1)一个单独的文件就是一个模块，是一个单独的作用域，只向外暴露特定的变量和函数。这样可以避免污染全局变量，减少变量命名冲突。(2)代码复用，让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。3.js模块化规范Js模块化规范有：CommonJS、AMD、CMD、以及本文要总结的ES6的模块系统。其中，CommonJS是服务端的模块规范，AMD和CMD是浏览器端的模块规范。C.

2021-03-21 19:15:21 201 3

原创单线程和异步

异步:异步 async 是相对于同步 async 而言的，同步就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。js中使用:当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous）和异步任务（asynchronous）。对于同步任务来说，会被推到执行栈按顺序去执行这些任务。对于异步任务来说，当其可以被执行时，会被放到一个任务队列里等待JS引擎去执行。当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，

2021-03-21 18:54:14 489 3

原创同步和异步手写Promise

callback hell 和 Promise

2021-03-18 22:00:13 131

原创闭包手写bind函数作用域自由变量 this

手写bind函数知识点：call()、apply()、bind() 方法的存在是为了改变函数体内 this 的指向call()、bind() 方法分别接收参数，apply() 方法接收数组形式的参数，它们的第一个参数都是 this 的指向可省略或为 nullcall()、apply() 方法会立即执行。bind() 方法不会立即执行，它会返回一个函数，可以将函数存储在变量中，再通过变量获取函数的返回值arguments 是一个伪数组，使用 ES6 提供的 Array.from() 方法将伪数组转换

2021-03-17 20:17:37 220

原创继承原型关系原型链

视频第五章节给我们讲了继承，原型和原形链等一些知识继承语法父类class People {constructor (name) { this.name = name;}eat() { console.log(`${this.name} 在吃饭`)}}子类class Student extends Peopleconstructor(name,number) { super(name) this.number = number}sa

2021-03-16 19:59:34 95

原创公司面试前我们需要准备

面试前我们需要准备：1.面试官在你自我介绍的时候，才有时间看你的简历。人太多没时间看，看了也记不住。2.你在自我介绍中，他在想问你什么问题。3.了解你语言表达能力，自信气场，仪表形态。常规低级错误：1.对面试官说：简历上有你自己看吧。2.对照简历就念。要点：熟悉自己的简历，熟悉自己要讲什么，反复练习。3.不遵守时间要求。要求一分钟，说了五分钟。4.将自己太完美，或者太low。讲什么东西：1.姓名，年龄，专业，特长，经历（有价值的）2.在一分钟自我介绍，人士想了解什么。讲出跟他招聘

2021-03-14 19:35:20 237 2

原创前端框架及项目面试题库介绍

第二个视频给我们讲解了一些前端常问的基础面试题，我们必须理解去思考如何应对这些面试题1.vue-router有哪几种导航钩子① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；beforeEach（）每次路由进入之前执行的函数。afterEach（）每次路由进入之后执行的函数。beforeResolve（）2.5新增② 单个路由（实例钩子）beforeEnter（）beforeLeave（）③ 组件路由钩子：beforeRouteEnter（）beforeRouteLea

2021-03-14 19:19:24 473 4

原创 Web前端需求的技能

看完视频让我明白了Web前端需求的技能，主要包括以下几点：1、精通HTML/CSS/JavaScript等前端相关技术;2、掌握DIV CSS流动布局HTML代码编写，了解CSS3、HTML5优先;3、掌握JavaScript语言核心技术DOM、BOM、Ajax、JSON等，熟悉对象化Javascript编程，熟悉Javascript应用框架(如prototype/jQuery/YUI/Ext至少一种);4、熟练使用各种常用JavaScript调试工具，熟悉至少一种流行的JS框架，如jQuery及V

2021-03-14 19:09:25 1254 1

原创项目性能优化 (总结)

一、关于项目优化的总结:1.减少HTTP请求数量加载进行优化数据优化2、压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。3．源码优化1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也

2021-01-19 19:48:06 2324

原创 Promise使用解决的问题/async的使用

Promisepromise是异步编程的一种解决方案，他比传统的回调函数加事件更加合理和强大，我用promise除了使用他的异步操作外，还使用promise在项目中解决了回调地狱等问题。promise的特点，promise一共有两个特点:对象不受外界影响，一共有三个状态，分别是进行中，成功，或者失败，只有异步操作的结果，可以决定是哪一种状态，任何其他的操作都无法改变这个状态一旦状态改变，就不会再变，任何时候都可以得到这个结果，promise的状态改变只有两种可能，要么是成功，要么失败。Promise

2021-01-16 18:58:18 663

原创关于rem 针对设计稿宽度，设计rem调试比例

css3规定：1rem的大小就是根元素html的font-size的值。通过设置根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。rem宽度比例设计稿宽度首先:1rem = 100px100vw = 750px所以1rem = 100vw / 7.5 = 13.333333333vw// 最后设置根元素font-size为13.33

2021-01-14 18:57:06 3206 6

原创 js单线程，事件循环，微任务宏任务

js为什么是单线程单线程：同一个时间只能做一件事Js作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定Js同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？之后为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质

2021-01-14 18:46:06 810 1

空空如也

空空如也