![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
IT-CLASS
这个作者很懒,什么都没留下…
展开
-
vscode中 无法执行命令 报错 tsc : 无法加载文件 D:\nodejs\node_global\tsc.ps1,因为在此系统上禁止运行脚本。有关详细信息
1.管理员身份运行vs code2.在终端执行:get-ExecutionPolicy,显示Restricted3.在终端执行:set-ExecutionPolicy RemoteSigned4.在终端执行:get-ExecutionPolicy,显示RemoteSigned原创 2022-09-11 15:37:27 · 417 阅读 · 0 评论 -
Array.from(new Set)去重 与Array.map()
Array.from(new Set)去重 array.map()原创 2022-09-03 23:02:19 · 511 阅读 · 0 评论 -
Array.includes()函数
arr.includes(searchElement)原创 2022-08-28 21:22:51 · 326 阅读 · 0 评论 -
Array.find(),findIndex()
Array.find(),findIndex()原创 2022-08-28 21:13:24 · 401 阅读 · 0 评论 -
Array.from ()方法详解
Array.from ()方法详解原创 2022-08-28 21:06:20 · 195 阅读 · 0 评论 -
json数组与数组格式
json数组格式与数组原创 2022-08-28 20:56:48 · 157 阅读 · 0 评论 -
querySelectorAll和querySelector的区别
querySelectorAll和querySelector原创 2022-08-21 15:25:01 · 290 阅读 · 0 评论 -
WebSocket
WebSocket原创 2022-08-20 14:52:08 · 55 阅读 · 0 评论 -
split().reverse().join()代码解析
split('').reverse().join('')原创 2022-07-31 17:28:22 · 195 阅读 · 0 评论 -
vue 环境的搭建
vue项目搭建原创 2022-07-31 17:11:07 · 100 阅读 · 0 评论 -
display:none、visibility:hidden 和 opacity:0 之间的区别?
三者共同点都是隐藏。不同点:一,是否占据空间display:none,隐藏之后不占位置;二,子元素是否继承display:none — 不会被子元素继承,父元素都不存在了,子元素也不会显示出。visibility:hidden—会被子元素继承,通过设置子元素visibility:visible来显示子元素。opacity:0—会被子元素继承,但是不能设置子元素opacity:0来重新显示。三,事件绑定display:none的元素都已经不再页面存在了,因此无法触发它绑定的事件。visibi原创 2021-06-17 16:16:13 · 273 阅读 · 0 评论 -
v-if 和 v-show 的区别
v-if 和 v-show 的区别v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。v-show 会被编译成指令,条件不满足时控制样式将对应节点隐藏 (display:none)使用场景v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景v-show 适用于需要非常频繁切换条件的场景扩展补充:display:none、visibility:hidden 和 opacity:0 之间的区别?...原创 2021-06-17 15:54:48 · 94 阅读 · 0 评论 -
vue里为什么 data 是一个函数,Vue 组件通讯有哪几种方式
vue里为什么 data 是一个函数组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果Vue 组件通讯有哪几种方式props 和emit父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过emit 父组件向子组件传递数据是通过 prop 传递的,子组件传递数据原创 2021-06-17 15:12:01 · 133 阅读 · 0 评论 -
MVC 和 MVVM 区别
MVC 和 MVVM 区别MVCMVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据MVC 的思想原创 2021-06-17 15:03:54 · 240 阅读 · 0 评论 -
webpack学习
同构应用是指写一份代码但可同时在浏览器和服务器中运行的应用。认识同构应用大多数单页应用的视图都是通过JavaScript代码在浏览器端渲染出来,但是在浏览器端渲染的坏处有:搜索引起无法收录你的网页,因为展示的数据都是在浏览器端异步渲染出来的,大多数爬虫无法获取到这些数据。对于复杂的单页应用,渲染过程计算量大,对低端移动设备来说可能有性能问题,用户能明显感知首屏的渲染延迟。同构应用运行原理的核心在于虚拟DOM, 虚拟DOM的优点在于:因为操作 DOM 树是高耗时的操作,尽量减少 DOM 树操作能优原创 2021-05-31 20:14:49 · 100 阅读 · 0 评论 -
Chakra-UI 学习笔记
现代化 React UI 框架 Chakra-UIChakra-UI 介绍Chakra UI是一个简单的,模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件.文档: https://next.chakra-ui.com/docs/getting-startedChakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者基于Styled-Systems https://styled-system.com/支持开箱即用的主题功能默认支持白天和黑夜两种模式原创 2021-05-24 22:55:14 · 287 阅读 · 0 评论 -
css-in-js emotion
从写法上看, 侵入性比较小, 直接就是 className:import styled, { css } from 'react-emotion';const Container = styled('div')` background: #333;`const myStyle = css` color: rebeccapurple;`const app = () => (<Container> <p className={myStyle}>Hell原创 2021-05-23 22:09:20 · 168 阅读 · 0 评论 -
Formik 学习笔记
**1. Formik**1.1 Formik 介绍增强表单处理能力,简化表单处理流程官网1.2 Formik 下载npm install formik**2. Formik 增强表单**2.1 Formik 基本使用使用 formik 进行表单数据绑定以及表单提交处理import { useFormik } from 'formik'function App () { const formik = useFormik({initialValues: {username:原创 2021-05-22 15:49:15 · 318 阅读 · 0 评论 -
new Set()(ES6)
1、什么是Set()Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。Set本身是一个构造函数,用来生成 Set 数据结构2、增删改查方法2.1 添加元素add添加某个值,返回 Set 结构本身,当添加实例中已经存在的元素,set不会进行处理添加let list=new Set();list.add(1)list.add(2).add(3).add(3) // 2只被添加了一次2.2 删除元素 delete删除某个值,返回转载 2021-05-22 15:38:23 · 160 阅读 · 0 评论 -
字符串的新增方法→startsWith() endsWith() Includes() repeat()
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字转载 2021-05-21 16:37:32 · 112 阅读 · 0 评论 -
js数组中的find、filter、forEach、map四个方法的详解和应用实例
find():返回通过测试的数组的第一个元素的值在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。语法:array.find(function(value, index, arr),thisValue)转载 2021-05-21 15:50:37 · 194 阅读 · 0 评论 -
JS数组reduce()方法详解及高级技巧
1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。callback (执行数组中每个值的函数,包含四个参数)1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))2、currentValue (数组中当前被处理的元素)3、ind原创 2021-05-20 15:02:47 · 80 阅读 · 0 评论 -
从深入到通俗:Object.prototype.toString.call()
一、Object.prototype.toString() 的调用对于 Object.prototype.toString() 方法,会返回一个形如 “[object XXX]” 的字符串。如果对象的 toString() 方法未被重写,就会返回如上面形式的字符串。({}).toString(); // => “[object Object]”Math.toString(); // => “[object Math]”但是,大多数对象,toString() 方法都是重写转载 2021-05-19 21:56:17 · 2398 阅读 · 0 评论 -
nuxt - nuxtServerInit & 页面渲染前的store处理 & context
nuxtServerInit 方法状态书文件中指定了nuxtServerInit方法,Nuxt,js调用它的时候会将页面的context上下文对象作为第2个参数传给它(服务端调用)[与fetch一样,不包括context.redirect和context.error方法],当我们想要将服务端的一些数据传到客户端,可以通过这个获取保存在状态中,客户端再从状态里取actions: {nuxtServerInit({ commit}, { req }) {if (req.session.user)com转载 2021-05-16 21:46:30 · 2990 阅读 · 0 评论 -
nuxt如何处理用户登录状态持久化:nuxtServerInit 页面渲染前的store处理
vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!当然也可以使用vue-cookies进行保存token,问题来了,nuxt项目怎么保存登录状态呢?当然上面这两种方法我们都可以使用,但是有个问题,由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象),当你需要判断是否存在token的时候,你必须要在mounted进行操作,这说明页面进来的转载 2021-05-16 16:54:16 · 967 阅读 · 0 评论 -
四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml)
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样: 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没转载 2021-03-14 20:38:06 · 385 阅读 · 1 评论 -
RESTful API 设计指南
网络应用程序,分为前端和后端两个部分。当前的发展趋势,就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备…)。因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信。这导致API构架的流行,甚至出现"API First"的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。今天,我将介绍RESTful API的设计细节,探讨如何设计一套合理、好用的API。我的主要参考了两篇文章(1,2)。RESTful API一、协议API与用户的通信协议,总是使用HT转载 2021-03-14 20:35:58 · 67 阅读 · 0 评论 -
vue设置全局变量
如果需要设置全局变量,在main.js中,Vue实例化的代码里添加。来自vue官网 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:new Vue({ bef转载 2020-10-30 15:11:38 · 1171 阅读 · 0 评论 -
脚手架工具
脚手架工具目前,前端项目越来越复杂化和多元化,但是随着变化而来的就是如下问题:传统语言或语法有弊病。虽然ES6及后续版本提出很多解决方案,但是由于环境的支持程度不同,需要进行大量重复性的适配工作。无法模块化,组件化。简单来说,模块化指的是将一个文件拆分成多个相互独立的小文件,使用的时候再按照一定的规则加载和拼接。组件化是指将UI拆分成一个个功能独立单一的结构单元。存在大量的重复的机械性工作。如项目的构建,发布等。代码风格不统一,无法保证质量。严重依赖后端接口支持。其他问题。前端工程化为上原创 2020-10-12 11:49:23 · 308 阅读 · 0 评论 -
获取for循环中的索引值
首先我们看看for循环:for(var i=0; i< 6; i++){ console.log(i);}相信每个人都知道这个打印的结果吧!这个结果是:0123456我们把for循环具体到某一个事例我们平时点击tab切换时,如何获取索引值呢?比如这个例子,代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>闭包原创 2020-09-27 22:21:00 · 3890 阅读 · 0 评论 -
co 函数库的含义和用法
一、什么是 co 函数库?co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具,用于 Generator 函数的自动执行。比如,有一个 Generator 函数,用于依次读取两个文件。var gen = function* (){ var f1 = yield readFile('/etc/fstab'); var f2 = yield readFile('/etc/shells'); console.log(f1.toString()); cons转载 2020-09-27 21:20:01 · 1006 阅读 · 0 评论 -
ECMAScript 2020 新特性
JavaScript 是最流行的编程语言之一,每年都会添加新的特性。本文介绍了添加在 ECMAScript 2020(又称ES11)中的新特性。在引入 ECMAScript 2015(又称 ES6)之前,JavaScript 发展的非常缓慢。但自 2015 年起,每年都有新特性添加进来。需要注意的是,不是所有特性都被现代浏览器支持,但是由于 JavaScript 编译器 Babel 的存在,我们已经可以使用新特性了。本文将介绍 ECMAScript 2020(ES11)的一些最新特性。Optional转载 2020-09-26 14:12:27 · 168 阅读 · 0 评论 -
前端页面数据埋点
书中写到在项目上线后,通过数据监控发现:一些之前觉得很好的创意,由于资源和加载量太大,导致用户在Loading阶段大量蹦失。一些很出色的页面设计,由于没有突出重要按钮,导致转化率很低。一些动画效果绚丽的互动页面,反而转化率比同样功能的常规页面低很低。一些费了很低精力和资源做出来的页面,由于缺乏推广,造成访问量极少。我们需要对页面进行各种数据埋点,从数据的角度研究需求的实际效果、用户的实际行为和后续的改进措施。一、埋点1)PV和UVPV:Page View,页面访问次数转载 2020-09-11 23:05:02 · 3278 阅读 · 0 评论 -
浏览器缓存详解
一、概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:1、HTTP请求(Request)报文,报文格式为:请求行 – HTTP头(通用信息头,请求头,实体头) – 请求报文主体(只有POST才有报文主体),如下图HTTP响应(Response)报文,报文格式为:状态行 – HTTP头(通用信息头,响应头,实体头) – 响应报文主体,如下图注:通用信息头指的是转载 2020-09-11 22:52:03 · 170 阅读 · 0 评论 -
浏览器与Node的事件循环(Event Loop)有何区别?
前言本文我们将会介绍 JS 实现异步的原理,并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。一、线程与进程1 概念我们经常说 JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程?官方的说法是:进程是 CPU 资源分配的最小单位;线程是 CPU 调度的最小单位。这两句话并不好理解,我们先来看张图:进程好比图中的工厂,有单独的专属自己的工厂资源。线程好比图中的工人,多个工人在一个工厂中协作工作,工厂与工人是 1:n 的关系。也就是说一个进转载 2020-09-11 22:23:45 · 339 阅读 · 0 评论 -
回流与重绘(浏览器渲染原理)
前言回流与重绘,听起来很高深的概念,其实它们两个只是重复执行浏览器渲染的过程而已。所以,此博客将从浏览器渲染机制开始讲起浏览器渲染页面过程这里主要以webkit内核引擎的chrome浏览器进行讲解先将图中的几个名词概念解释一下:DOM Tree: 浏览器将HTML解析成树形的数据结构Style Rules: 浏览器将CSS解析成树形的数据结构(也就是常说的CSSOM)Attachment: 用来连接DOM与CSSOM以构建渲染树Render Tree: Render Tree可以知道网页转载 2020-09-11 21:43:57 · 430 阅读 · 0 评论 -
解决跨域问题
1.同源策略如下:URL 说明 是否允许通信项目Valuehttp://www.a.com/a.js,http://www.a.com/b.js同一域名下 允许http://www.a.com/lab/a.js,http://www.a.com/script/b.js同一域名下不同文件夹 允许http://www.a.com:8000/a.js,http://www.a.com/b.js同一域名,不同端口 不允许http://www.a.com/a.js ,h转载 2020-09-08 22:43:43 · 198 阅读 · 0 评论 -
前端安全性问题
前端安全性问题1、xss跨站脚本攻击(原理、如何进行的、防御手段是什么,要说清楚)2、CSRF跨站请求伪造(如何伪造法?怎么防御?等等都要说清楚)3、sql脚本注入(注入方式,防御方式)4、上传漏洞 (防御方式)1.xss攻击xss攻击又叫做跨站脚本攻击,主要是用户输入或通过其他方式,向我们的代码中注入了一下其他的js,而我们又没有做任何防范,去执行了这段js。可能用户会写一个死循环,将我们的页面给弄崩了,但是也有可能通过这种方式,来获取我们的cookie,从而回去登陆态等信息xss攻击从来转载 2020-09-08 22:05:04 · 317 阅读 · 0 评论 -
前端性能的优化
本文将详细介绍前端性能的优化,包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化减少请求数量【合并】如果不进行文件合并,有如下3个隐患1、文件与文件之间有插入的上行请求,增加了N-1个网络延迟2、受丢包问题影响更严重3、经过代理服务器时可能会被断开但是,文件合并本身也有自己的问题1、首屏渲染问题2、缓存失效问题所以,对于文件合并,有如下改进建议1、公共库合并2、不同页面单独合并【图片处理】1、雪碧图CSS雪碧图是以前非常流行转载 2020-09-08 21:43:02 · 248 阅读 · 0 评论