![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 78
前端攻城狮的开始
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
JS如何实现数组扁平化?不同的方法有什么区别?
面试官:给我手写一个数组扁平化吧,我不要flat。我:。。。????前言数组扁平化?听起来好像灰常的好大上?真的吗?那数组扁平化到底是什么?怎么实现呢?数组的扁平化处理,其实就是多维数组转化为一维数组。如下,将上面这个数组转化为下面的数组那怎么去实现呢?别着急。我们一个一个说。ES6的flatary = arr.flat(Infinity)console.log([1, [2, 3, [4, 5]]].flat(Infinity))Array.protype.flat().原创 2021-07-24 14:38:45 · 321 阅读 · 31 评论 -
CommonJS模块与ES6模块的区别
转载请注明出处:CommonJS模块与es6模块的区别CommonJS对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该模块输出的变量重新赋值。对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块。当使用require命令加载某个模块时,就会运行整个模块的代码。当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,转载 2021-04-07 22:50:14 · 424 阅读 · 0 评论 -
js垃圾回收机制和内存泄漏
知识线什么是内存泄漏?=> 是什么导致的内存泄漏?=> 怎么解决内存泄漏?=> 垃圾回收机制的策略(两种) => 如何管理好内存?面试官:什么是内存泄漏?为什么会导致内存泄漏?什么是内存泄漏?不再用到的内存,没有及时释放,就叫做内存泄漏。为什么会导致内存泄漏?内存泄漏是指我们已经无法再通过 js 代码来引用到某个对象,但垃圾回收器却认为这个对象还在被引 用,因此在回收的时候不会释放它。导致了分配的这块内存永远也无法被释放出来。如果这样的情况越 来越多,会导致内存不原创 2021-04-07 20:02:09 · 721 阅读 · 3 评论 -
Chorme V8垃圾回收算法
Chrome V8 垃圾回收算法Chrome 浏览器所使用的 V8 引擎就是采用的分代回收策略。这个和 Java 回收策略思想是一致的。目的是通过区分「临时」与「持久」对象;多回收「临时对象区」(新生代younggeneration),少回收「持久对象区」(老生代 tenured generation),减少每次需遍历的对象,从而减少每次GC的耗时。V8的内存限制在node中javascript能使用的内存是有限制的.64位系统下约为1.4GB。32位系统下约为0.7GB。对应到分原创 2021-04-07 19:30:41 · 776 阅读 · 0 评论 -
跨域的九种解决方案
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。一、什么是跨域?1.什么是同源策略及其限制内容?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。同源策略限制内容有:Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后,结果被浏览原创 2021-04-07 11:53:32 · 2790 阅读 · 0 评论 -
图片懒加载和预加载
懒加载1.什么是懒加载懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。2.为什么要用懒加载能提升用户的体验,不妨设想下,用户打开像手机淘宝长页面的时候,如果页面上所有的图片都需要加载,由于图片数目较大,等待时间很长,用户难免会心生抱怨,这就严重影响用户体验。减少无效资源的加原创 2021-04-07 10:00:53 · 762 阅读 · 0 评论 -
10分钟快速理解JS的节流、防抖
前言今天看到阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习。here we go![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Os3MsZDw-1617719777291)(js防抖和节流.assets/165a252b4b69aab5)]概念和例子函数防抖(debounce)函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设原创 2021-04-06 22:50:54 · 645 阅读 · 0 评论 -
JS异步编程
知识线JS 为什么是单线程? => 单线程带来的问题? => 如何实现异步编程?(同步和异步) => 异步代码的执行 顺序 => Event Loop 运行机制。JS 为什么是单线程?JS 单线程的特点就是同一时刻只能执行一个任务。这是由一些与用户的互动以及操作 DOM 等相关的操作决定了 JS 要使用单线程,否则使用多线程会带来 复杂的同步问题。如果是多线程,一个线程正在修改 DOM,另一个线程正在删除 DOM,那么以哪一 个为准呢?如果执行同步问题的话,多线程需原创 2021-04-06 15:37:22 · 572 阅读 · 0 评论 -
事件循环机制 => EventLoop详解
前言面试官:说说异步代码的执行顺序?Event Loop 的运行机制是如何的运行的?什么是 EventLoop ?先看这张图,先不管宏任务,微任务是什么,先看整个流程。分析:判断宏任务队列是否为空不空 --> 执行最早进入队列的任务 --> 执行下一步空 --> 执行下一步判断微任务队列是否为空不空 --> 执行最早进入队列的任务 --> 继续检查微任务队列空不空空 --> 执行下一步因为首次执行宏队列中会有 script原创 2021-04-06 15:30:57 · 1388 阅读 · 0 评论 -
Vue生命周期详解
前言首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉,左边是官网的,右边是加了一定注解的。咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。这里有一份代码,先在浏览器里面跑一遍,然后F12,打开console。方面下面一一解读钩子函数。<!DOCTYPE html><html lang="en"><head> <meta原创 2021-04-06 01:08:23 · 641 阅读 · 0 评论 -
vue-router路由详解
什么是路由?说起路由你想起了什么?路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科额, 啥玩意? 没听懂在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛.路由器是做什么的? 你有想过吗?路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包原创 2021-04-04 02:33:49 · 1052 阅读 · 1 评论 -
vue-router路由传参的三种方式
前言我们在组件切换时经常会有传递一些数据的需求,这样就涉及到了路由传参的问题。vue-router传递参数有两个大类:①编程式的导航router.push。②声明式的导航 <router-link>编程式导航router.push通过params属性传值-name//路由配置文件中{ path: '/detail', name: 'Detail', component: Detail }//跳转时页面this.$router.push({原创 2021-04-04 01:11:15 · 5622 阅读 · 10 评论 -
路由的懒加载
认识路由的懒加载官方给出了解释:当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了官方在说什么呢?首先, 我们知道路由中通常会定义很多不同的页面.这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑原创 2021-04-03 22:25:55 · 630 阅读 · 1 评论 -
Vuex详解
Vuex是做什么的?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能状态管理到底是什么?状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透。其实,你可以简单的将其看成把需要多个组件共享的原创 2021-04-03 20:28:49 · 533 阅读 · 0 评论 -
mutation响应规则
前言 我们都知道,Vuex的store中的state是响应式的,当state中的数据发生改变时,Vue组件会自动更新。但是是不是任何情况都会自动更新的呢?显示不是的。那什么情况下才能响应呢,那我们的先知道它响应的原理。响应原理 当我们在state里添加属性时,都会被添加到响应式系统中,响应式系统会监听属性的变化,当属性发生变化时,会通知所有页面中用到该属性的地方,让界面发生刷新。后添加的属性由于之前没有在store里初始化,我们就无法监听该属性,界面不能刷新。响应规则这就要求我们必原创 2021-04-03 19:25:54 · 675 阅读 · 1 评论 -
ES6 Promise用法小结
什么是Promise呢?ES6中一个非常重要和好用的特性就是Promise但是初次接触Promise会一脸懵逼,这TM是什么东西?看看官方或者一些文章对它的介绍和用法,也是一头雾水。Promise到底是做什么的呢?Promise是异步编程的一种解决方案。那什么时候我们会来处理异步事件呢?一种很常见的场景应该就是网络请求了。我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传原创 2021-04-01 21:40:50 · 1249 阅读 · 1 评论 -
webpack-Plugin(插件)的使用
plugin是什么?plugin是插件的意思,通常是用于对某个现有的架构进行扩展。webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。loader和plugin区别loader主要用于转换某些类型的模块,它是一个转换器。plugin是插件,它是对webpack本身的扩展,是一个扩展器。plugin的使用过程:步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)步骤二:在webpack.config原创 2021-04-01 15:17:25 · 1058 阅读 · 0 评论 -
webpack-图片文件处理
资源准备阶段示例1.安装依赖npm install --save-dev url-loadernpm install --save-dev file-loader2.配置webpack.config.js//导入path模块const path = require('path');module.exports = { entry: './src/main.js', output: { //path是通过node模块的path.resolve函数拿到,第一个参数是内置原创 2021-04-01 13:20:19 · 742 阅读 · 0 评论 -
webpack-less文件的处理
官方文档传送门继续在官方中查找,我们会找到less-loader相关的使用说明首先,还是需要安装对应的loader注意:我们这里还安装了less,因为webpack会使用less对less文件进行编译npm install --save-dev less less-loader其次,修改对应的配置文件添加一个rules选项,用于处理.less文件使用对象(Object)的形式传递 options 给 Less。module.exports = { module.原创 2021-03-30 00:55:31 · 856 阅读 · 0 评论 -
webpack中使用的css文件的配置
什么是loader?webpack关于loader的文档https://webpack.docschina.org/loaders/#stylingCSS文件处理准备工作开始打包css-loader作用:·载 CSS 文件并解析 import 的 CSS 文件,最终返回 CSS 代码npm install --save-dev css-loaderstyle-loader作用:将模块导出的内容作为样式并添加到 DOM 中...原创 2021-03-30 00:37:01 · 523 阅读 · 0 评论 -
webpack基本使用
什么是Webpack?什么是webpack?这个webpack还真不是一两句话可以说清楚的。我们先看看官方的解释:At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。但是它是什么呢?用概念解释概念,还是不清晰。我们从两个点来解释上面这句话:模块 和 打包前端模块化和gr原创 2021-03-30 00:05:40 · 819 阅读 · 0 评论 -
Vue 插槽slot的使用(具名插槽、作用域插槽)
编译作用域在理解插槽前,不得不先理解一个概念:编译作用域。官方对于编译的作用域解析比较简单,我们自己来通过一个例子来理解这个概念:我们来考虑下面的代码是否最终是可以渲染出来的:<my-cpn v-show="isShow"></my-cpn>中,我们使用了isShow属性。isShow属性包含在组件中,也包含在Vue实例中。答案:最终可以渲染出来,也就是使用的是Vue实例的属性。原因分析官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组原创 2021-03-25 23:10:05 · 949 阅读 · 0 评论 -
Vue 组件化思想和实现步骤
什么是组件化?组件化思想组件化是Vue.js中的重要思想它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用任何的应用都会被抽象成一颗组件树组件化思想的应用:有了组件化的思想,我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理,并且扩展性也更强。注册组件步骤注册组件步骤解析1.Vue.extend():调用Vue.extend()创建的是一个组件构造器。通常在创建原创 2021-03-25 22:27:16 · 1136 阅读 · 0 评论 -
Vue 父子组件的通信传参(props、$emit)
简述我们知道子组件是不能引用父组件或者Vue实例的数据的。但是,在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢?Vue官方给出以下方法通过props向子组件传递数据通过事件向父组件发送消息真实的开发中,Vue实例原创 2021-03-25 22:24:17 · 921 阅读 · 0 评论 -
Vue 父子组件的相互访问 ($refs、$children)
简述有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。父组件访问子组件:使用$children或$refs子组件访问父组件:使用$parent父访问子$children(不推荐)this.$children是一个数组类型,它包含所有子组件对象。我们这里通过一个遍历,取出所有子组件的message状态。$children的缺陷通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多,我们需要拿到其中原创 2021-03-25 22:21:41 · 2738 阅读 · 4 评论 -
数据双向绑定v-model的使用和原理
简述表单控件在实际开发中式非常常见的,特别是对于用户信息的提交,需要大量的表单Vue中使用v-model指令来实现表单元素和数据的双向绑定简单使用当我们在输入框输入内容时,因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以会发生响应的改变所以,通过v-model实现双向绑定,我们也可以将v-model用原创 2021-03-25 20:36:16 · 6557 阅读 · 0 评论 -
ES新增数组方法--filter/map/reduce/forEach/some/every
前言本文对ES5新加的一些数组方法的使用做个简单演示1.forEach() :arr.forEach(function(vlaue, index, [array])) 分别对应数组的value(值)、index(索引号)、数组本身遍历数组的全部元素,即使return true也不会终止迭代,因为forEach本质是一个函数,参数是一个回调函数,回调函数的return只是终止了回调函数而已,不是终止forEach,而forEach内部应该是多次调用了那个函数 var arr = [1, 2,原创 2021-03-24 01:04:07 · 1241 阅读 · 0 评论 -
Vue里面数组哪些方法是响应式的
简述因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。尾部追加:push()尾部删除:pop()首部删除:shift()首部添加:unshift()删除/插入/替换元素:splice()排序:sort()反转数组:reverse()push() //1.push方法,最后一位添加元素,响应式,数据改变let letters=['A','B','C','D原创 2021-03-23 16:51:07 · 1455 阅读 · 0 评论 -
条件渲染 v-if和v-show
v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。在 template 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把原创 2021-03-23 15:03:41 · 861 阅读 · 0 评论 -
Vue v-for对数据的遍历
场景当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式:v-for = “item in items”数组数据情况1: 不需要使用索引值格式:``v-for=" item in items "依次从items 中取出item,并且在元素的内容中,我们可以使用Mustache语法(插值{{item}}),来使用item<!-- 1.在遍历的过程中,没有使用索引值(下标值)--> <原创 2021-03-23 15:02:00 · 1808 阅读 · 0 评论 -
Vue 事件监听v-on(简单使用,参数问题,修饰符)
简述在前端开发中,我们需要经常和用户交互这个时候,我们就必须监听用户发生的事件,比如点击,拖拽,键盘事件等等在Vue中使用v-on监听事件v-on介绍作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:event简单使用/*这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用*/<div id="app"> <h2>当前计数器为:{{counter}}</h2>原创 2021-03-23 14:09:47 · 899 阅读 · 0 评论 -
Vue 条件渲染v-if和v-show
v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。在 template 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把原创 2021-03-23 13:37:04 · 781 阅读 · 0 评论 -
ES6中块级作用域的横空出世(let、var、const)
let 关键字let 关键字用来声明变量,使用 let 声明的变量有几个特点:不允许重复声明;块儿级作用域(局部变量);不存在变量提升;不影响作用域链;let创建变量代码示例:// let关键字使用示例:let a; // 单个声明let b,c,d; // 批量声明let e = 100 ; // 单个声明并赋值let f = 521 , g = 'iloveyou', h = []; // 批量声明并赋值不允许重复声明:let dog = "狗";let dog = "原创 2021-03-21 23:57:41 · 880 阅读 · 1 评论 -
Vue 计算属性
前言人生如逆水行舟,不进则退简介在vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。简单使用<div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>.原创 2021-03-21 22:52:39 · 941 阅读 · 0 评论 -
v-bind——Class 与 Style 绑定
前言本篇记录一下的v-bind指令,从简单使用到复杂应用。简述v-bind 主要用于动态地属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定.简单使用<div id="app"> //错误写法 <img src="{{imgURL}}" alt=""> //正确写法 <img v-bind:src="imgURL" alt=""> <原创 2021-03-21 16:40:43 · 1074 阅读 · 4 评论 -
Vue 快被大家遗忘的指令
前言本篇做了一些对不被常用的指令的汇总。了解即可,知道他们能做什么就好了v-once该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次,不会随着数据的改变而改变 <div id="app"> message只会渲染一次,数据改变后也不能更新 <h2 v-once>{{message}}</h2> </div>这个还是算没那么不常用的,还是有一定的应用的场景。v-html该指令原创 2021-03-21 15:00:45 · 801 阅读 · 0 评论 -
Vue MVVM模型
简介MVVM 是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的原创 2021-03-21 12:28:47 · 976 阅读 · 0 评论 -
ES6学习笔记(二)
前言这是学习es6的一些新特性整理出来的笔记,有看不懂的地方推荐阮一峰的ES6,写的很详细。附上传送门阮一峰ES6,接上一集传送门ES6学习笔记(一)14 、Set集合ES6 提供了新的数据结构 Set(集合)。 它类似于数组,但成员的值都是唯一的 ,集合实现了 iterator接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法size 返回集合的元素个数;add 增加一个新元素,返回当前集合;delete 删除元素,返回 boolean 值;has 检测集原创 2021-03-19 22:18:16 · 874 阅读 · 0 评论 -
ES6学习笔记(一)
一、概述1 、什么是 ECMAECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。 1994 年后该组织改名为 Ecma 国际;2 、什么是 ECMAScriptECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言;百度百科:https://baike.baidu.com/history/ECMAScript/1889420/原创 2021-03-19 01:34:52 · 946 阅读 · 0 评论 -
JavaScript进阶之OOP(二)
3.构造函数和原型在ES6(ECMAScript6.0)之前,JavaScript没有类的概念,在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和他们的特征的。创建对象:(JavaScript基础也有做过笔记)对象字面量 var obj = {}new Object() var obj = new Object()自定义构造函数function name1(){ this.属性=值; this.方法=function (){}}let obj原创 2021-03-18 00:47:23 · 1027 阅读 · 0 评论