要不要买菜啊-CSDN博客

原创 js中ASCII编码的使用

大写字母A-Z对应的ASCII码值是65-90小写字母a-z对应的ASCII码值是97-122数字0-9对应的ASCII码值是 48-57。

2022-10-24 16:14:24 2136 2

组件的创建就是被用来复用的，若A界面改变了A组件的data数据，B界面在使用A组件时，其中的数据也会随着A界面的改变而变化，这是我们不希望看到的，因此通过函数的方式，在每次调用data函数式，都返回一个新的对象，就可以保证各个组件都有自己的一套独立的数据，不会互相造成影响。不同功能区域划分为不同的组件，多个界面共同使用的组件可抽象位公共组件进行复用。当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。.......

2022-08-09 16:57:40 435

原创 Cookie、session、token

比如客户端发请求过来，服务器端会把sessionid放在setcookie中，返回给客户端，客户端进行登录请求时，就会带着这个值，服务器拿到以后，这里先说下，服务器端对session保存的方式有两种，一种是存在一个文件中，一种是放在数据库中。进行认证，认证成功以后，返回通过加密后的token，客户端拿到之后，保存，下次还是这个用户访问的时候，就会带着这个token进行请求，被请求得服务拿着这个token去认证中心看下是不是该用户的，是，那么就给通过，返回响应结果。cookie是保存在客户端的，不安全。...

2022-08-09 15:04:02 288

原创 Vue权限控制

中我们可以根据后端返回的数据。

2022-08-08 17:15:51 7977

原创 webpack

webpack 是帮我们打包前端资源的，如css,js,图片字体都是需要http 加载的我们做前端项目的时候有经验把很多的零碎的js打包在一起这样我们可以减少http请求，同样我们也希望使用模块化依赖，我们会做很多复用的代码写在一个模块里，而不是每个项目copy一份，到时候有个问题而不是每个项目的去修改一遍。处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css），是提供一个入口类似index.html，自动把所需的js及图片资源引入到html中。......

2022-08-05 20:26:23 285 2

原创 webpack使用三优化环境配置

正常来说,一个文件会被所有的loader过滤处理一遍,如果我有100个loader配置,那么我一个文件就要被100个loader匹配,而使用oneOf后,而如果放在oneOf中的loader规则有一个匹配到了,oneOf中的其他规则就不会再对这文件进行匹配。官方有标准的说法：Tree-shaking的本质是消除无用的js代码。指的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。...

2022-08-05 20:22:12 418

原创 webpack 使用二

会将中的值设置为 production。能让代码优化上线运行的环境将某些文件提取为单独文件提取CSS为单独文件打包出来的bundle.js还包含了css文件，明显不有利于我们做浏览器缓存，需要抽离css文件，打包成单独的文件。......

2022-08-05 16:25:21 106

原创 webpack的使用一

创建相关文件夹与文件(build与src文件加与index.js)运行指令a)开发环境指令:webpack就会以./src/index.js为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是开发环境b)生产环境指令:做的都是一样的,环境是生产环境c)当配置文件写好后,可以直接使用webpack指令进行打包index.js: webpack入口起点文件2. 结论：1. webpack能处理js/json资源，不能处理css/img等其他资源。...............

2022-08-05 15:09:09 112

原创 axios 简介及在项目中的使用

是一个基于 promise 的网络请求库，可用在node.js 和浏览器中。可以看到后台中设置了时间停止5秒，即用来模拟需要5秒才能获取到数据，这时候该promise对象的状态是pending,即没有完成也没有失败;axios请求返回一个promise对象，和promise中的 API 一致，可以链式调用，支持async 和 await。}) // 即获取了一个Promise对象，注意，这是同步调用，回调函数才是异步调用。因为是基于promise的请求库，所以支持promise的API，.........

2022-08-05 10:37:57 425

原创 Ajax 相关问题

如下图所示，两个不符合同源策略的页面http://a.qq.com/a.html和http://b.qq.com/b.html，其主域相同为qq.com。a.html嵌套b.html，再都通过js设置document.domain为主域qq.com，则两个页面满足了同源策略，从而实现了跨域通信。1、在http://a.qq.com/a.html和http:/b.qq.com/b.html两个文件中都加上document.domain = "qq.com"；它虽然不是标准的一部分，但各个主流浏览器都支持。..

2022-08-03 22:23:05 310

原创 Promise (三) async/await

async 函数是使用async关键字声明的函数。async 函数是构造函数的实例，并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于的异步行为，而无需刻意地链式调用promise。......

2022-08-03 10:11:50 545

原创 Promise 二：关键问题

1.如何改变promise的状态?(1)如果当前是pending就会变为resolved如果当前是pending就会变为rejected(3)抛出异常:如果当前是pending就会变为rejected2.一个promise指定多个成功/失败回调函数,都会调用吗?当promise改变为对应状态时都会调用3.改变promise状态和指定回调函数谁先谁后?(1)都有可能。......

2022-08-02 22:39:08 73

原创 Promise 一：基本问题

1.抽象表达:1) Promise 是一门新的技术(ES6规范)是JS中进行异步编程的新解决方案备注：旧方案是单纯使用回调函数2.具体表达:1)从语法上来说: Promise是一个构造函数2)从功能上来说: promise对象用来封装一个异步操作并可以获取其成功/ 失败的结果值变为resolved变为rejected说明:只有这2种,且一个promise对象只能改变一次无论变为成功还是失败,都会有一个结果数据成功的结果数据一般称为。.........

2022-08-02 20:50:27 267

原创 DOM0、DOM2、DOM3 事件

鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。DOM级别一共可以分为4个级别DOM0级，DOM1级，DOM2级和DOM3级，而DOM事件分为3个级别DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。如下图所示以上代码我们通过直接在HTML代码里定义了一个onclick的属性触发showFn方法，这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。.........

2022-08-01 17:30:38 1496

原创浏览器的安全问题

目录1、Web页面安全同源策略（Same-origin-policy）why为什么引入同源策略什么是同源具体来说同源策略表现在 DOM Web数据和网络这三个层面。XSS（Cross Site Script 跨站脚本攻击）CSRF攻击（Cross-site request forgery）又称跨站请求伪造2、浏览器网络安全3、浏览器系统安全我们再分析页面的安全策略之前，先假设一下，如果页面中没有安全策略的话，Web世界是怎么样的。Web世界是开放的，任何资源都可以接入其中，我们的网站可以加载并执行别的网站的

2022-07-05 17:23:15 1445 1

原创 HTTP协议发展史

目录一、超文本传输协议 HTTP/0.9HTTP/0.9实现有以下三个特点：二、被浏览器推动的HTTP/1.0 2-1、HTTP/1.0如何通过请求头和响应头来支持不同类型的数据三、HTTP/1.11、改进持久连接2、提供虚拟主机的支持3、客户端Cookie、安全机制四、HTTP/2.01、HTTP1.1的主要问题1. TCP的慢启动2、同时开启多条TCP连接，那么这些连接会竞争固定的带宽3、HTTP/1.1队头阻塞问题2、HTTP/2 的多路复用多路复用的实现HTTP/2 的其他特性1、可以设置的优先级2

2022-07-05 10:54:05 481

原创进程和线程有什么区别？

进程是正在运行的程序实例线程是进程中执行执行任务的基本单位也就是说一个运行的程序至少包含一个进程，一个进程至少包含一个线程，线程不能独立于进程存在从计算机角度来说进程（Process）是操作系统分配资源得基本单位，一个进程拥有的资源有自己的堆、栈、虚存空间（页表）、文件描述符等信息，从编程的角度来看待进程，可以将其看做是一个类或者一个PCB（Process Control Block）进程控制块的结构体。此结构体大致包含以下内容：1. 进程编号PID 进程的身份标识2. 进程的状态3. 进程状态4. 就

2022-07-02 20:01:13 4536 1

原创 vue 插槽

插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。通俗点说，就是在子组件中挖个坑，在父组件使用子组件时，就会向子组件内埋点土。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。子组件中定义插槽；父组件使用子组件时往插槽写入代码；简单的举

2022-06-30 20:24:44 104

原创虚拟DOM（VNode Virtul DOM ）

目录分析思路回答范例一、前言二、render函数三、render函数应用四、深入数据对象六、总结备注现有框架几乎都引入了虚拟 DOM 来对真实 DOM 进行抽象，也就是现在大家所熟知的 VNode 和 VDOM，那么为什么需要引入虚拟 DOM 呢？围绕这个疑问来解答即可！虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个对象，只不过它是通过不同的属性去描述一个视图结构。通过引入vdom我们可以获得如下好处：将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能方便实现跨平

2022-06-30 16:51:44 576

转载 Vue进阶：mixins 学习

在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的、和等页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面，太多的组件会很快变得混乱，难于维护，甚至对于组件开发者自已而言，也是件难事。在中，对于这样的场景，官方提供了一种叫混入（）的特性。使用允许你封装一块在应用的其他组件中都可以使用的函

2022-06-30 11:13:28 199

原创 Vuex状态（数据）管理

vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。2）vuex有哪几种属性？有五种，分别是 State、 Getter、Mutation 、Action、 Module。3） vuex的State特性Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是s

2022-06-30 09:24:26 165

原创实现路由跳转的方式

直接写在html中，结构简单使用方便，但是只能放在标签中使用，标签会将路由转成标签，通过点击跳转路由，因此局限性也非常大编程式路由导航需要写在js中，结构也不算复杂，优势在于非常灵活，不受固定标签限制，可以在任意情景下转跳路由在Vue里，可以通过vm的$router对象来进行路由的管理这里区分一下 route 和 route和route和router，顾名思义，$route是当前路由组件激活的对象，里面是当前路由组件的一些信息，比如para......

2022-06-29 22:16:10 1699

原创路由守卫

作用：分类全局守卫：全局前置守卫 beforeEach()全局后置守卫 afterEach() 独享守卫 beforeEnter()组件内守卫进入守卫：beforeRouteEnter 路由更新守卫：beforeRouteUpdate离开守卫：beforeRouteLeave对路由进行权限控制执行时机：初始化是执行、每次路由切换前执行全局后置守卫 afterEach()执行时机：初始化时执行、每次路由切换后执行独享守卫 beforeEnter()组件内守卫进入守卫：befor

2022-06-29 20:08:18 231

原创简述⼀下src与href的区别

src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加......

2022-06-28 22:21:09 73

原创 vue组件缓存

先来看看官网对keep-alive的一些功能说明：组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。就可以使用到keep-alive，它可以用来进行动态组件的缓存组件复用，提高性能缓存不太使用的组件，而不是直接销毁在实际项目开发的时候，我们可能需要具体的某个项目可以进行缓存，那么如何通过keep-alive来实现呢？include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存exclude：[String,RegExp,Array] 匹

2022-06-28 21:38:00 5834

原创 watch和computed的区别以及选择?

两个重要API，反应应聘者熟练程度。computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。在输入框中，改变 name 值得时候，msg 也会跟着改变。这是因为 computed 监听自己的属性 msg，发现 name 一旦变动，msg 立马会更新。注意：msg 不可在 data 中定义，否则会报错（计算属性不可在data中定义，会报错）get 方法：first 和 second 改变时，会调用 get 方法，更新 full

2022-06-28 16:15:41 860

转载 v-if和v-for哪个优先级更高？

此题考查常识，文档中曾有详细说明v2|v3；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。在中，优先于被解析；但在中，则完全相反，的优先级高于。我曾经做过实验，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件实践中也不应该把它们放一起，因为哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表。通常有两种情况下导致我们这样做：为了过滤列表中的项目 (比如 )。此时定义一个计算属性 (比如 )，让其返回过滤后的列表即可。为了避免渲染本应该被隐藏

2022-06-28 14:16:10 358

原创 vue 组件之间的通信方式

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件之间的相互通信是十分有必要的。父组件向子组件传送数据，这应该是最常用的方式了子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed2. refref 如果在普通的DOM元素上，引用指向的就是该DOM元素;如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动

2022-06-28 11:29:49 151

转载前端路由 vue-router ？

路由就是SPA（单页面应用的路径管理器），适用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和内容映射起来。传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则表现为路径之间的切换，也就是组件的切换。路由模块的本质是建立起 url 和页面之间的映射关系。SPA（single page application）：单页面应用程序，只有一个完整的页面，在加载页面时，不会加载整个页面，只是更新某个指定容器中的内容。SPA核心之一是

2022-06-28 10:13:34 131

原创 SPA单页面应用

SPA（Single-page application）仅在 Web页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。补充：为什么单页面应用最好前后端分离？前端项目要自己管理路由，如果是单页面的话，路由切换不需要经过后端，前端可以很方便的管理，包括状态。如果多页面的话，前端路由在切换的时候，就需要提交到后端，跳页。这样路由管理就麻

2022-06-27 21:39:22 243

原创浏览器缓存——HTTP缓存

浏览器的缓存机制即HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的。针对一些Web资源（hrml，js，图片，数据等）,即浏览器和web服务器之间的文件数据副本。当我们第一次打开某一个网页时,浏览器向服务器发起请求，请求所需要的资源。当我们使用web缓存，下一次再访问该网页时，可以根据一些缓存策略，来决定是否用缓存中的资源还是再次向服务器发起请求，减少浏览器和服务器之间通信的时延不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码强

2022-06-27 10:55:57 905

原创 Vue是如何实现数据双向绑定的？

有没有想过，我们在做原生页面开发时，有涉及到“数据绑定“的概念吗？答案肯定是有的，比如下面的例子：通过 JavaScript 控制 DOM 的展示，就是数据（Data）到模板（DOM）的绑定，这就是数据单向绑定。而双向绑定就是在这个基础上，又扩展了反向的绑定效果，就是模板到数据的绑定。上面的例子扩展以下：我们将与单向绑定的却别是，数据与模板是相互影响的，一方发生变化，另一方立即做出更新。在这个简单的例子中，我们认识了双向绑定，Vue便是在此概念下进行模块化抽象封装。上面的例子中，我们看到

2022-06-20 15:22:14 5895 1

原创如何把类数组对象转为数组对象

目录一、数组二、对象三、类数组对象3.1 什么是类数组对象3.2 js中哪些是类数组对象3.3 类数组对象怎么转化为数组1、Array.from()（ES6+）2、slice3、splice4、concat5、for循环依次遍历稀疏数组 (sparse array)3.4 怎么判断是不是类数组对象3.5 复习一下这三种数组方法，我就没记得过1. slice(start,end):2、splice(index,howmany,item1,item2...):3、concat(arr1,arr2...): 返回

2022-06-19 14:08:09 3022 1

原创同源策略（same origin policy）

同源策略是一个重要的安全策略，它用于限制一个origin的文档或它加载的脚本如何能与另一个源的资源进行交互。能够减少恶意文档，减少可能被攻击媒介。如果两个URL的协议、域名、端口号都相同，就称这两个URL同源。浏览器默认两个不同的源之间是可以互相访问资源和操作DOM的。两个不同的源之间若是想要访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。它的存在可以保护用户隐私信息，防止身份伪造。Web内容的源用于访问它的URL的协议（方案）、主机（域名）、和端口号。只有当协议、主机、域

2022-06-19 10:22:50 17623 2

空空如也

空空如也