- 博客(72)
- 收藏
- 关注
RSS订阅原创 cookie、session、token的区别
什么是认证（Authentication）由于http是无状态的协议，因此，需要各种通行证来证明身份。我们主要有以下几种方式的证明。什么是 Cookiecookie对于事务处理没有记忆能力，每次客户端和服务端会话完成时，服务端不会保存任何会话信息：每个请求都是完全独立的，服务端无法确认当前访问者的身份信息，无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。所以服务器与浏览器为了进行会话跟踪（知道是谁在访问我），就必须主动的去维护一个状态，这个状态用于告知服务端前后两个请求是否来自同一浏览器
2022-05-19 20:42:41
6213
原创 vue2和vue3的区别
vue实例的创建及挂载//Vue2的写法import Vue from 'Vue' //引入Vue构造函数const vm = new Vue({ render:h=> h(App)});// 挂载vm.$mount('#app')console.log(vm)//Vue3的写法import { createApp } from 'vue' //引入一个名为createApp的工厂函数const app = createApp(App);// 挂载app.mount('#
2022-05-07 18:59:09
456
原创 导航流程：从输⼊URL到页面展示的过程
从输入网址到展示页面的流程如下浏览器进程主要负责用户交互、⼦进程管理和⽂件储存等功能。网络进程是面向渲染进程和浏览器进程等提供⽹络下载功能。 渲染进程的主要职责是把从⽹络下载的HTML、JavaScript、CSS、图⽚等资源解析为可以显⽰和交互的页面。因为渲染进程所有的内容都是通过⽹络获取的，会存在⼀些恶意代码利⽤浏览器漏洞对系统进⾏攻 击，所以运⾏在渲染进程⾥⾯的代码是不被信任的。这也是为什么Chrome会让渲染进程运⾏在安全沙箱里，就是为了保证系统的安全。⾸先，用户从浏览器进程⾥输⼊请求信息 输
2022-05-06 14:59:24
392
原创 http和ip、tcp协议详解
ip协议IP：把数据包送达⽬的主机 1数据包要在互联⽹上进⾏传输，就要符合⽹际协议 ⽹ （Internet Protocol，简称IPI ）标准。互联⽹上不同的在 线设备都有唯⼀的地址，地址只是⼀个数字，这和⼤部分家庭收件地址类似，你只需要知道⼀个家庭的具体 地址，就可以往这个地址发送包裹，这样物流系统就能把物品送到⽬的地。 计算机的地址就称为IP地址，访问任何⽹站实际上只是你的计算机向另外⼀台计算机请求信息。 计如果要想把⼀个数据包从主机A发送给主机B，那么在传输之前，数据包上会被附加上主机B的IP地址
2022-04-27 18:26:23
1363
原创 scoped的原理及穿透使用
scoped的作用scoped的由来css一直有个令人困扰的作用域问题：即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。为了避免css样式之间的污染，vue中引入了scoped这个概念。在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过设置该属性，使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。
2022-04-25 23:03:05
1885
原创 从结构化上下文解读闭包
关于闭包有两种常见的说法，第一种说法是，闭包是由函数以及声明该函数的词法环境组合而成的。这个说法来源于MDN-闭包。另外一种说法是，闭包是指有权访问另外一个函数作用域中的变量的函数。闭包确实可以访问另一个函数作用域变量的功能，但闭包不是函数。我们先来了解词法环境词法环境我们可以看看ES5规范第十章（可执行代码和执行上下文）中的第二节词法环境是怎么说的。A Lexical Environment is a specification type used to define the associat
2022-04-21 21:42:48
173
原创 ajax的原理和场景
我们以前介绍过在jQuery中使用ajax，但是那是被封装后，不是直接操作的。我们今天介绍在js原生中的ajax.ajax的原理最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。可以局部刷新页面。1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)1. var xhr=null; 2. if (window.XMLHttpRequest)
2022-04-19 21:43:42
110
原创 token的原理及过期处理
Token 是用户登录成功之后服务端返回的一个身份令牌，在项目中的多个业务中需要使用到：访问需要授权的 API 接口校验页面的访问权限…但是我们只有在第一次用户登录成功之后才能拿到 Token。所以为了能在其它模块中获取到 Token 数据，我们需要把它存储到一个公共的位置，方便随时取用。往哪儿存？本地存储获取麻烦数据不是响应式Vuex 容器（推荐）获取方便响应式的登录成功，将 Token 存储到 Vuex 容器中获取方便响应式为了持久化，还需
2022-04-18 21:39:41
20160
1
原创 vuex的安装及简单使用
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。这是官网对 vuex 的一个简单介绍，官网地址Vuex 状态管理核心Vuex主要有5个管理核心：state、getter、mutation、action、module
2022-04-16 19:39:00
228
原创 Vue Router 的路由模式 hash 和 history 的原理及区别
hash模式的实现原理早期前端路由是基于location.hash来实现的，location.hash的值就是URL中#后面的内容，eg：www.word.com#search，它后面的location.hash的值为#search。hash路由模式的实现主要基于下面几个特性：URL中hash值只是客户端的一种状态，当向服务器发送请求时，hash部分不会被发送；hash值发生变化时，会在浏览器访问历史中增加一条记录；可以通过a标签的href属性修改hash，也可通过给location.hash赋值
2022-04-15 21:58:36
897
原创 vue动态组件及插槽
组件进阶组件进阶 - 动态组件目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件、组件进阶 - 组件缓存目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁语法: V
2022-04-12 23:05:34
1458
原创 vue的生命周期
钩子函数目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法初始化挂载更新销毁阶段方法名方法名初始化beforeCreatecreated挂载beforeMountmounted更新beforeUpdateupdated销毁beforeDestroyde
2022-04-11 23:32:04
91
原创 vue组件的使用和通信
vue组件_概念组件是可复用的 Vue 实例, 封装标签, 样式和JS代码组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)vue组件_基础使用目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件口诀: 哪部分标签复用, 就把哪部分封装到组件内(重要): 组件内template只能有一个根标签(
2022-04-10 20:12:30
788
原创 vue中的过滤器和监听器计算属性的使用场景
vue过滤器-定义使用目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, 插值表达式和v-bind表达式Vue中的过滤器场景字母转大写, 输入"hello", 输出"HELLO"字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"语法:Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})filters: {过滤器名字: (值) => {return “返回处理后的值”}例
2022-04-06 21:30:41
519
原创 vue的基础指令及修饰符
vue基础-插值表达式目的: 在dom标签中, 直接插入内容又叫: 声明式渲染/文本插值语法: {{ 表达式 }}<template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div></templ
2022-04-04 22:07:51
882
原创 vue脚手架的基本使用
学Vue目标: 更少的时间,干更多的活. 开发网站速度, 快虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)现在很多项目都是用vue开发的Vue是什么渐进式javacript框架, 一套拥有自己规则的语法官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用什
2022-04-03 23:13:31
1119
原创 webpack中常见的loader和plugin及运行流程
Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。常见的加载器有以下几种1、 file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件2、 url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中
2022-03-29 21:11:47
2164
原创 webpack的安装与基本使用
webpack基本概念目标: webpack本身是, node的一个第三方模块包, 用于打包代码webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫webpack能做什么把很多文件打包整合到一起, 缩小项目体积, 提高加载速度(演示准备好的例子)webpack基础使用目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下默认入口: ./src/index
2022-03-28 21:43:04
331
原创 common js和es6模块化的区别
模块化早期 JavaScript 开发很容易存在全局污染和依赖管理混乱问题。这些问题在多人开发前端应用的情况下变得更加棘手。即每个引入的js文件会共享变量，且相互之间若存在依赖关系，会导致下层无法调用上层的方法等一系列问题，所以我们需要模块化来解决问题。common jsCommonjs 的提出，弥补 Javascript 对于模块化，没有统一标准的缺陷。nodejs 借鉴了 Commonjs 的 Module ，实现了良好的模块化管理。目前 commonjs 广泛应用于以下几个场景：Node 是
2022-03-26 20:29:36
1384
原创 express中req请求，取参数的三种方法 req.params req.query req.body区别
基本使用const request = require(‘request’)引入这个包就可以开始使用了，最简单的使用方式就是 request(url) 就可以想指定的地址发起一个 get 请求。从这里我们可以看出 request 暴露出来的就是一个函数。其实它内部的结构如下function request (uri, options, callback) {if (typeof uri === ‘undefined’) {throw new Error(‘undefined is not a v
2022-03-23 20:09:57
2372
原创 JavaScript中instanceof 和type of 实现原理
typeof 实现原理typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型，这种判断能帮助我们搞定一些问题，比如在判断不是 object 类型的数据的时候，typeof能比较清楚的告诉我们具体是哪一类的类型。但是，很遗憾的一点是，typeof 在判断一个 object的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪
2022-03-20 20:16:23
456
原创 node中module.exports和exports的区别
module.exports和exportsNode应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。module.exports = {};1.module.
2022-03-20 09:44:01
428
原创 ajax提交数据中formdata的使用
什么是formdataFormData是Ajax2.0(XMLHttpRequest Level2)提供的一种将form表单元素name和value组合成键值，实现表单数据的序列化，从而减少from表单元素的拼接，提高工作效率对的接口，以方便将form表单数据通过XMLHttpRequest.send() 方法发送到后端，可以使用该对象来处理form表单元素并方便的进行文件上传。FormData主要用途1.将form表单元素的name和value组合成键值对，实现表单数据序列化，提高开发效率。2 异
2022-03-16 20:11:05
5621
原创 原生js书写jquery中的serialize用法
我们在jQuery中使用ajax收集表单值，常用到serialize来序列化,我们给大家介绍一些这个方法的特性，及如何再原生中实现它。1.必须具有 … 标签的前提下，才能使用 $(‘form’).serialize() .2.各项表单元素（input、select、textarea）必须具备 name 属性。下面我们就用原生js实现这个方法Object.prototype.serialize = function(){ var res = [], //存放结果的数组 current = nul
2022-03-13 20:17:57
2217
原创 理解JavaScriptES6中的TDZ（暂时性死区）
什么是TDZTemporal Dead Zone(TDZ)是ES6中对作用域新的专用语义。TDZ名词并没有明确地写在ES6的标准文件中，一开始是出现在ES Discussion讨论区中，是对于某些遇到在区块作用域绑定早于声明语句时的状况时，所使用的专用术语。let/const和var的区别在ES6之前，JS的只有两种作用域，全局作用域和函数作用域，但是在ES6种出现了块级作用域，即使用let/const可以定义块级作用域。那么在ES6的新特性中，最容易看到TDZ作用的就是使用let/const的使用
2022-03-12 20:40:30
705
原创 token的理解与使用
什么是tokentoken 是服务器端生成的串字符串，以作客户端进行请求的一个令牌，当第一次登陆后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token青睐请求数据即可，无需再次带上用户名和密码。token的用处Token 完全由应用管理，所以它可以避开同源策略Token 可以避免 CSRF 攻击Token 可以是无状态的，可以在多个服务间共享Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token
2022-03-12 20:17:09
3729
原创 JavaScript中for 循环和foreach的区别
s中那么多循环，for for…in for…of forEach，有些循环感觉上是大同小异今天我们讨论下for循环和forEach的差异。我们从几个维度展开讨论：for循环和forEach的本质区别。for循环和forEach的语法区别。for循环和forEach的性能区别。for循环是js提出时就有的循环方法。forEach是ES5提出的，挂载在可迭代对象原型上的方法，例如Array Set Map。forEach是一个迭代器，负责遍历可迭代对象。forEach 的参数我们真正了解 fo
2022-03-11 20:34:26
3666
原创 git的基本使用
git是目前最新的分布式版本系统，分布式带来的优点使得git成为目前最好的版本控制系统之一。（高性能、方便团队协作、扩展性高）git大概由四个区域组成1.工作区：本地电脑存放项目文件的地方，比如learnGitProject文件夹；2.暂存区（Index/Stage）：在使用git管理项目文件的时候，其本地的项目文件会多出一个.git的文件夹，将这个.git文件夹称之为版本库。其中.git文件夹中包含了两个部分，一个是暂存区（Index或者Stage）,顾名思义就是暂时存放文件的地方，通常使用add命
2022-03-11 19:15:41
53
原创 前端学习之js中数组去重的方法
数组是js中一种重要的数据类型对象，但常常带有重复的元素，因此我们需要一些方法来对数组进行去重。1.1.使用filter和Mapfunction uniqueFunc(arr, uniId){const res = new Map();return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));}2.双循环去重最基本的一种解法，时间复杂度和空间复杂度较高，它实现的原理很简单：先
2022-03-10 16:55:06
694
原创 简析JavaScript深浅拷贝
基本类型 & 引用类型ECMAScript中的数据类型可分为两种：基本类型：undefined,null,Boolean,String,Number引用类型：Object,Array,Date,Function,RegExp等不同类型的存储方式：基本类型：基本类型值在内存中占据固定大小，保存在栈内存中引用类型：引用类型的值是对象，保存在堆内存中，而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址不同类型的复制方式：基本类型：从一个变量向另外一个新变量复制基本类型的值，会创建
2022-03-09 21:05:26
130
原创 前端学习之防抖和节流的运用
防抖防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。**好处：**能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次防抖的应用场景用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；实现输入框的防抖防抖动的 timer定义防抖的函数，函数里面定义一个延时器，在演示器里面调用发起JSONP的请求在触发 keyup 事件时，立即清空
2022-03-08 21:04:31
1996
原创 前端学习之从抓包中了解http协议
我们首先使用fiddler从任意网页抓取请求和响应，可以看到响应和请求大概可分为4个部分。HTTP什么是HTTP协议HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。例如：客户端要以HTTP协议要求的格式把数据提交到服务器服务器要以HTTP协议要求的格式把内容响应给客户端HTTP协议的交互模型HTTP 协议采用了 请求/响应 的交互模型。# HTTP请求消息什么是HTTP请
2022-03-08 20:44:02
164
原创 前端学习之 ajax中实现post上传文件并展示进度条组件
我们上次给大家分别介绍了在form表单中和用在jQuery中使用ajax函数提交数据，今天我们给大家介绍在原生js中如何用ajax提交和返回数据。使用xhr发起GET请求步骤创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 xhr.onreadystatechange 事件// 1. 创建 XHR 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数xhr.open('GET', 'http://www
2022-03-06 21:10:33
2212
1
原创 前端学习之ajax入门和发送请求
AjaxAjax 的概念在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。发送 Ajax 请求的五个步骤其实也就是 使用 XMLHttpRequest 对象的五个步骤。我们先回忆一下，一个完整的HTTP请求需要的是：请求的网址、请求方法g
2022-03-05 22:42:02
525
原创 前端学习之JavaScript es6对比es5的新增方法
声明变量新增let、const两种方法letlet的出现是为了弥补var将变量挂在window上的缺陷与var不同：1.不属于window该变量不会挂载在window顶级对象上，而是新建一个对象。,2.不允许重复声明var可以多次重复声明（最后一次声明会覆盖前面的声明），而let不能（会报错）可以避免重复命名3.不存在变量提升（严格来说存在，但是会先被赋值，不会初始化）先打印，再赋值会报错4.暂时性死区变量会绑定在块级作用域中，不受全局影响。变量在作用域内已经存在，但必须在let/
2022-03-02 20:31:50
408
原创 前端学习之JavaScript 正则表达式的运用
什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户 名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外， 正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要 的特定部分(提取)等 。 其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表
2022-03-01 21:08:16
367
原创 前端学习之JavaScript 面向对象和如何开启严格模式
面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现， 使用的时候再一个一个的依次调用就可以了。面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。面向过程与面向对象对比面向过程优点性能比面向对象高，适合跟 硬件联系很紧密的东西，例 如单片机就采用的面向过程 编程。缺点不易维护、不易复用、不易扩展面向对象优点易维护、易复用、易扩展，由于面向对象有 封装、继承、多态性的特性，可以设计出低 耦合的系统，使系统 更加灵活、更加易于维 护.缺点
2022-02-27 19:25:00
295
原创 前端学习之JavaScript 原型和继承
js设计的理念在JavaScript es5之前并没有类的概念，要靠原型链的一步步指向来实现继承，今天我们给大家介绍中实现继承的几种方法。在设计JavaScript之初，是c++和java最兴盛的时代，而JavaScript作为一种简易的脚本语言，不需要继承机制，但是由于js的万物皆是对象的设计理念，必须要有一种机制，将各个对象之间连接，于是就有了今天的原型链。但是，他不打算引入"类"的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的
2022-02-24 21:00:28
526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人