- 博客(95)
- 收藏
- 关注
RSS订阅转载 浅讲 Vue-router 原理
Vue-router原理了解一下：找到一篇文章，分析的很透彻 从vue-router看前端路由的两种实现，文章写的很好，看完这篇文章 ➕ 看源码应该可以理解，这里根据我浅显的理解概括一下：vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式 hash ---- 利用URL中的hash（“#”） 利用History interface在 HTML5中新
2020-08-18 21:03:46
226
转载 用户认证：session和JWT的区别
背景知识：Authentication和Authorization的区别：Authentication：用户认证，指的是验证用户的身份，例如你希望以小A的身份登录，那么应用程序需要通过用户名和密码确认你真的是小A。Authorization：授权，指的是确认你的身份之后提供给你权限，例如用户小A可以修改数据，而用户小B只能阅读数据。由于http协议是无状态的，每一次请求都无状态。当一个用户通过用户名和密码登录了之后，他的下一个请求不会携带任何状态，应用程序无法知道他的身份，那就必须重新认证。
2020-08-14 15:59:27
4549
原创 const 和 let 声明的变量不在 window
在写笔试题时，遇到这样一个题目：给出代码，返回函数值。var cc=3;function dd(){}let aa = 1;const bb = 2;console.log(window.cc); // 3console.log(window.dd); // dd(){}console.log(window.aa); // undefinedconsole.log(window.bb); // undefined结果是undefined 1 2 undefined..
2020-07-27 16:25:53
933
原创 scoped 属性的小知识
1、什么是scoped属性scoped 属性是 style 标签上的一个特殊属性（布尔值）。表示当前style 里的样式只属于当前模块。（作用域、私有化的思想）2、为什么会有这个属性 关于css的作用域问题，即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染。 在vue中引入了scoped这个概念...
2020-07-25 15:44:07
8494
原创 区分 package.json 中的devdependencies 和 dependencies
相同点：是一个对象，配置模块依赖的模块列表。使用npm install 安装模块或插件并写入到 package.json 文件里面不同点：1、devDependencies：插件用于本地环境开发npm install echarts --save-dev //安装模块并保存到package.json 的 devDependencies 中npm i -D echarts // 简写形式2、dependencies ：用于发布环境npm install echarts .
2020-07-15 13:55:56
222
转载 尾递归
一般递归function recsum(x) { if (x===1) { return x; } else { return x + recsum(x-1); }}执行：recsum(5)5 + recsum(4)5 + (4 + recsum(3))5 + (4 + (3 + recsum(2)))5 + (4 + (3 + (2 + recsum(1))))5 + (4 + (3 + (2 + 1)))1..
2020-07-09 20:06:21
125
转载 CDN的实现原理
一、传统url访问在描述CDN的实现原理，让我们先看传统的未加缓存服务的访问过程，以便了解CDN缓存访问方式与未加缓存访问方式的差别：用户访问未使用CDN缓存网站的过程为:1)、用户向浏览器提供要访问的域名；2)、浏览器调用域名解析函数库对域名进行解析，以得到此域名对应的IP地址；3)、浏览器使用所得到的IP地址，域名的服务主机发出数据访问请求；4)、浏览器根据域名主机返回的数据显示网页的内容。通过以上四个步骤，浏览器完成从用户处接收用户要访问的域名到从域名服务主..
2020-06-26 11:57:28
749
转载 路由进阶部分 -- 导航守卫（ 路由守卫 ）
路由进阶部分 – 导航守卫（ 路由守卫 ） - 守卫路由 - 进 - 举例： 携带数据进入 - 出 - 举例： 事情完成才能出来 导航守卫一共有三种形式 A: 全局导航守卫 全局前置守卫router.beforeEach(fn) fn中有三个参数（to,from,next） 全局的解析守卫 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是.
2020-06-18 16:26:54
437
原创 移动端左右滑动以及滚动条
对于移动端左右滑动以及滚动条.img-list { height: 166px; overflow: hidden; display: flex; flex-direction: row; display: -webkit-box; /* 手指左右滑动 */ overflow-x: auto; -webkit-overflow-scrolling: touc...
2020-04-24 15:21:47
2207
原创 【Vue】v-if、v-show的区别
v-if、v-show相同点：判断条件决定是否渲染元素不同：v-if依赖于控制DOM节点（条件为假时卸载元素），而v-show是依赖于控制DOM节点的display属性（条件为假时元素还在） 切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件块在切换时合适的销毁与重建条件块内的时间监听器和子组...
2020-04-24 14:24:52
192
原创 关于定位 position
定位的几种方式：static，relative，absolute，fixed，sticky，inheritabsolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗...
2020-04-23 11:59:41
123
原创 css优先级
优先级：！import > 行内样式（1000）> Id（100）> 类、属性、伪类选择器（10）> 元素、伪元素（1）>通配符（0）>继承（0）伪元素和伪类的区别伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；或是根据当前元素处于的状态，改变其样式。 它的功能和class有些类似，但它是基于...
2020-04-23 11:15:39
173
原创 模拟new
new操作符做了这些事：它创建了一个全新的对象 它会被执行[[Prototype]]（也就是__proto__）链接 （设置对象的__proto__属性为构造函数的原型：调用原型方法） 它使this指向新创建的对象 （使用apply，将构造函数中的this指向新对象：调用构造函数上的属性） 通过new创建的每个对象将最终...
2020-04-22 23:13:23
134
原创 css布局——两栏自适应布局
三栏布局：CSS布局：圣杯布局，双飞翼布局，Flex布局，绝对定位两栏布局：一栏定宽，一栏自适应 一栏不定宽，一栏自适应常见的方法：浮动 float+BFC 解决（不）定宽 浮动 float+margin 解决定宽 决定定位 absolute 解决定宽 flex布局 解决（不）定宽一、浮动：...
2020-04-22 14:23:26
350
原创 字体小于12px、移动端不兼容0.5px的解决方案
字体小于12px：使用transform：scale（0.5） 0.5px边框：使用transform：scale（0.5）、使用伪类一、字体小于12px的解决方案浏览器默认字体最小为12px，如果想使用小于12px的字体该怎么办？常见的例子是购物车图标 常...
2020-04-22 13:40:15
1472
1
转载 什么是单页应用
在早期的 Web 应用中，前端的作用很弱，业务逻辑和数据处理都在后端，后端给前端返回一个 HTML 页面，前端只负责展示。在这种模式下，单个 HTML 页面被当做一个功能原件，表单提交，超链接跳转都可以用来重新请求新的 HTML 页面，从而达到给用户展示新的页面的目的。在这种方式中，你可以感觉到页面总是在不停的刷新，一个点击可能都需要等待很久，这是因为，当页面变化时，所有资源都需要重新请求。这些...
2020-04-02 12:06:55
832
转载 浏览器多标签页通信
需求来源在多数CMS（内容管理系统）后台上，常见的是一个文章列表页面，点击列表项会打开一个新的文章详情页面。编辑人员经常在这个详情页面上对文章操作，比如修改标题、配图、摘要等内容。操作完毕之后，由于文章页和列表页是两个页面，文章内容数据不能及时同步到列表，这样就照成运营人员多次误操作，这大大降低了运营人员的工作效率。对于前端工程师来讲，实现浏览器多个页卡之间的通信，及时更新相关数据更改，是...
2020-03-20 09:48:11
251
转载 cookies session和token ，和一个小案例
概念cookiecookie存储在客户端，HTTP是无状态的，HTTP每次发出的时候会附上该域名下的cookie，从而可以给HTTP附上状态，最常见的就是登录态。session和tokensession和token算是一类的，他们是两种不同的服务器的验证方式。通俗来说，cookie会存一个value在客户端本地，然后将value附到HTTP上发给服务器，那么服务器是怎么通过这个v...
2020-03-19 23:04:36
457
原创 常见的设计模式
设计模式概念： 原则是“找出 程序中变化的地方，并将变化封装起来”，它的关键是意图，而不是结构 优点：有利于代码的复用和维护 常用的设计模式：单例模式、工厂模式、订阅/发布模式（观察者模式）、代理模式、组合模式、构造函数模式 单例模式：使用该模式定义的类只有一个实例 工厂模式：常用的实例化对象的模式，这种模式代替了new操作符。（在函数体内创建对象，添加属性方法，返回对象）...
2020-03-19 18:03:30
96
转载 面向对象的特点
面向对象主要有四大特性1、抽象忽略一个主题中与当前目标无关的东西，专注的注意与当前目标有关的方面。(就是把现实世界中的某一类东西，提取出来，用程序代码表示，抽象出来的一般叫做类或者接口)。抽象并不打算了解全部问题，而是选择其中的一部分，暂时不用部分细节。抽象包括两个方面，一个数据抽象，而是过程抽象。数据抽象 -->表示世界中一类事物的特征，就是对象的属性。比如鸟有翅膀，羽毛等(类...
2020-03-19 15:11:42
394
原创 进程间的通信
进程间通信（IPC，InterProcess Communication）是指 不同进程之间传播或交换信息。 这通常只发生在一个系统中。通信可以有两种类型 -具有亲缘关系的进程之间的通信，如父进程和子进程。 在不相关的进程之间在进一步讨论此主题之前需要了解的一些重要术语。管道 - 两个相关过程之间的通信。 该机制是半双工的，意味着只能从第一个进程与第二个进程通信。 为了实现全双工，...
2020-03-19 14:43:42
254
1
转载 在JS中常用的三种绑定事件方法
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？事件绑定要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在JavaScript中，有三种常用的绑定事件的方法：...
2020-03-17 17:21:41
744
原创 理解Cookie 和 Session 机制
一、什么是会话跟踪（是什么）会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。二、为什么会有Cookie（为什么）在程序中，会话跟踪是很重要的事情。理论上，一个用户的所有请求操作都应该属于同一个会话，而另一...
2020-03-17 16:18:45
986
原创 页面渲染的过程
一、页面渲染是客户端请求页面的最后一步DNS解析域名 TCP建立连接 HTTP发送请求 服务器返回状态码及相应数据 浏览器解析渲染页面二、页面渲染浏览器加载，解析，渲染页面 解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 ：我们知道浏览器为了体验友好，并不是文档全部都解析才绘制到屏幕上...
2020-03-17 14:43:36
6697
1
原创 http请求方法，请求/响应报文格式
1.http请求方法HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。序号 方法 描述 1 GET 请求指定的页面信息，并返回实体主体。 2 HEAD 类似于 GET 请求，只不过返回的响应中没...
2020-03-13 22:08:05
274
原创 arguments 对象特性
一、argumens伪数组1.arguments对象是函数的内置属性，本身是一个伪数组 JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性，（与this一样，都是内置属性）。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。arguments是一个伪数组，因此可以进行遍历，并且有length属...
2020-03-13 20:08:18
653
原创 【ES6读书笔记】——Symbol
在ECMAScript 6之前，对象中的方法和属性都是字符串形式，如果有同名的方法或属性就会被覆盖。为了解决这一问题，ES6中新增了Symbol类型，用Symbol类型创建的标识符都是独一无二的。1. 基本数据类型：SymbolSymbol([description])是一种数据类型，在 JavaScript 中 Symbol() 函数用来创建该类型的实例，但不能使用new关键字...
2020-03-13 19:06:51
141
转载 浅谈 defer 和 async 的区别
当浏览器碰到script脚本的时候： <script src="script.js"></script> 没有defer或async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.js"></script> 有async，...
2020-03-12 10:43:57
787
1
原创 浏览器的事件循环（Event Loop）
在了解事件循环前，先介绍几个概念JS单线程JS引擎线程，负责处理javascript脚本程序（V8引擎），解析javascript脚本，运行代码。每次只能执行一段代码，其他任务都得按照顺序排队等待被执行，只有当前的代码执行完成之后才会往下执行下一段代码。JS线程包含在浏览器渲染进程中。浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronize...
2020-03-09 13:49:29
567
原创 【小程序】出现 wx:key="{{index}}" does not look like a valid key name (did you mean wx:key="index" ?)
1、出现问题：<scroll-view class='messScroll' scroll-y bindscrolltolower="lower" bindscrolltolower="getBottom"> <block class='rankList' wx:for="{{rankList}}" bindtap='showDetail' wx:key="{{i...
2020-03-08 14:34:44
1216
原创 【读书笔记】JS高级程序设计20章--JSON
本章内容：理解JSON语法 解析JSON 序列化JSONJSON是一种数据格式，不是一种编程语言；JSON不属于JS，并不只是JS才使用JSON一、语法JSON的语法可以表示三种类型值简单值：在JSON中表示字符串，数组，布尔值，null；但不支持undefined 对象：对象作为一种复杂数据类型，表示的是一组无序的键值对。每个键值对中的值可以是简单值，也可以是复...
2020-03-08 14:02:45
106
原创 【读书笔记】JS高级程序设计13章--浏览器事件机制
本章内容：理解事件流 使用事件处理程序 不同的事件类型事件，是用户或浏览器自身执行的某种动作。可以使用侦听器（或处理程序）来预订事件，使事件发生时执行响应的代码一、事件流事件流描述的是从页面接收事件的顺序1.1 事件冒泡IE的事件流叫做事件冒泡事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档） ...
2020-03-08 13:50:02
115
原创 【读书笔记】JS高级程序设计7章--函数表达式+闭包+this
定义函数表达式的方式有两种：函数声明，函数表达式两者之间的区别是：函数声明有一个重要的特性函数声明提升在执行代码之前会先读取函数声明。意味着可以把函数声明放在调用它的语句后面。1.1 递归递归函数是在一个函数通过名字调用自身的情况下构成的arguments.callee 是一个指向正在执行的函数的指针，可以用它来实现对函数的递归调用（ 非严格模式下可以使用）1...
2020-03-07 11:57:26
140
原创 【读书笔记】JS高级程序设计4章--作用域+垃圾收集
一、执行环境及作用域概念：执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个 与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。 而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。当代码在一个环境中执行时，会创建变量对...
2020-03-07 10:40:20
166
原创 内存与硬盘
1、内存与硬盘的联系：内存是计算机的工作场所，硬盘用来存放暂时不用的信息，内存中的信息会随掉电而丢失，硬盘中的信息可以长久保存。举个栗子，当你单击鼠标打开了电脑的浏览器，鼠标的箭头最开始会变成一个小圈圈或者沙漏，那么这个时候就是电脑把浏览器的信息从硬盘载入内存的过程，当信息全部载入以后CPU就开始进行运算，之后你更改的信息会被临时记录到内存中，当你保存关闭浏览器以后这些信息就会从内存写入到硬盘...
2020-03-07 09:22:06
641
转载 【前端安全】二、网络劫持和HTTPS的安全
1 网络劫持有哪几种?网络劫持一般分为两种: DNS劫持: (输入京东被强制跳转到淘宝这就属于dns劫持) DNS强制解析: 通过修改运营商的本地DNS记录，来引导用户流量到缓存服务器 302跳转的方式: 通过监控网络出口的流量，分析判断哪些内容是可以进行劫持处理的,再对劫持的内存发起302跳转的回复，引导用户获取内容 HTTP劫持: (访问谷歌但是一直有贪玩蓝月的广告...
2020-03-06 11:54:20
510
原创 【前端安全】一、CSRF攻击和XSS攻击
1、CSRFCSRF，全称Cross-site request forgery（跨站请求伪造），其原理是利用用户的身份，执行非用户本身意愿的操作(隐式身份验证机制)。形式：图片URL、超链接、Form提交等，也可以嵌入到第三方论坛、文章中等地方。危害：攻击者可以盗用用户的身份，以用户的名义进行恶意操作，包括但不限于以用户的名义发送邮件、资金转账、网上等危害用户的操作原理：...
2020-03-06 11:26:01
1522
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人