- 博客(64)
- 收藏
- 关注
RSS订阅原创 约瑟夫环问题『js实现』
传说罗马人占领了乔塔帕特，41 个犹太人被围堵在一个山洞里。他们拒绝被俘虏，而决定集体自杀，大家决定了一个自杀方案，41 个人围成一个圈，由第 1 个人开始顺时针报数，每报数为 3 的人立刻自杀，然后再由下一个人重新从 1 开始报数，依旧是每报数为 3 的人立刻自杀，依次循环下去。其中两位犹太人并不想自杀，是数学家约瑟夫和他的朋友，他们发现了自杀方案的规律，选了两个特定的位置，最后只剩下他们两人，而活了下来。那么这两个位置分别是什么？这个问题转化成要解决的通用问题：即 n 个人围成一个圈，这 n 个人.
2021-04-22 20:26:39
756
原创 谈谈script标签中的async和defer
目录defer和async的的定义really? demo走走就知道了deferasync图解script中的defer与async普通scriptdeferasync推荐的应用场景script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在s
2021-04-18 16:53:08
381
原创 简单的HTTP协议与确保Web安全的HTTPS
目录HTTP什么是HTTP协议HTTP的发展阶段HTTP/0.9HTTP/1.0HTTP/1.1HTTP/2.0HTTP常见状态码HTTPSHTTP的缺点HTTP+加密+认证+完整性保护 = HTTPSHTTPS 是身披 SSL 外壳的 HTTP相互交换密钥的公开密钥加密技术共享密钥加密的困境使用两把密钥的公开密钥加密HTTPS 采用混合加密机制证明公开密钥正确性的证书HTTP什么是HTTP协议超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协
2021-04-10 14:16:58
420
转载 JS的深浅拷贝及实现
目录基本数据类型和引用数据类型深浅拷贝浅拷贝深拷贝基本数据类型和引用数据类型JS数据分为基本数据类型和引用数据类型。基本数据类型：undefined，boolean，number，string，null。现在还有symbol。引用数据类型：object基本数据类型的变量存储在栈中，引用数据类型则存储在堆中，引用数据类型的存储地址则保存在栈中。下面来看一个小例子：// 基本数据类型 let intType = 1; console.log('初始intType:' + int
2021-04-07 13:25:18
170
原创 42道vue常见面试题你悟了吗？灵魂发问~
目录1、讲述下vue的MVVM的理解 2、vue的生命周期及理解3、v-if和v-show的区别4、v-if和v-for同时使用在同一个标签上的表现5、v-for中的key的理解6、vue的自定义指令7、vue的实现原理8、vue的diff算法理解9、vue组件的通信10、vue的路由模式及区别11、vue与react、angular的比较12、vue-roter的钩子函数13、vuex的使用14、vue的filter的理解与用法15、vue的keep-alive的理解16、如何封装一个vue组件17、vu
2021-04-05 21:15:46
1312
原创 JavaScript常用设计模式之发布-订阅模式
目录发布-订阅模式介绍发布-订阅模式的优点发布-订阅模式的缺点如何实现发布-订阅模式发布-订阅模式的代码封装如何取消订阅事件全局发布-订阅对象代码封装理解模块间通信发布-订阅模式介绍发布-订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。现实生活中的发布/订阅模式比如小红最近在淘宝网上看上一双鞋子，但是呢,联系到卖家后，才发现这双鞋卖光了，但是小红对这双鞋又非常喜欢，所以呢联系卖家，问卖家什么时候
2021-04-03 20:52:05
391
原创 JavaScript常用设计模式之工厂模式
目录工厂模式复杂工厂模式工厂模式工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果。这时候我们就需要使用工厂模式。简单的工厂模式可以理解为解决多个相似的问题，这也是它的优点，比如如下代码：function CreatePerson(name,age,sex) { var obj = new Object(); obj.name = name; obj.age = age; obj.sex = sex; obj.sayName
2021-04-03 20:28:02
366
原创 排序算法
目录三种基本排序算法冒泡排序（Bubble Sort）选择排序（Selection Sort）插入排序（Insertion Sort）三种高级排序算法希尔排序（Shell Sort）归并排序（Merge Sort）快速排序（Quick Sort）对计算机中存储的数据执行的两种最常见的操作就是排序和检索，自从计算机产业伊始便是如此。这也意味着排序和检索在计算基金科学中是被研究的最多的操作。本文介绍三种基本排序算法和三种高级排序算法，当然排序算法远不止这几种，我也是一边学习一边记录，后续了再和大家分享。
2021-03-31 17:56:29
414
原创 Prototype模式的验证方法
function Cat(name,color){ this.name = name; this.color = color; } Cat.prototype.type = "猫科动物"; Cat.prototype.eat = function(){alert("吃老鼠")}; var cat1 = new Cat("大毛","黄色"); var cat2 = new Cat("二毛","黑色"); alert(cat1.type); // 猫科
2021-03-28 17:38:32
420
原创 cookie和token的区别
目录首先看看cookie和session的用途What is TokenToken与session+cookie的区别cookie和session都是会话保持技术的解决方案，随着技术的发展，token机制出现在了我们面前，有木有人傻傻分不清，我就是0.0。记录一下，Salute！首先看看cookie和session的用途要知道我们访问网站都是通过HTTP协议或HTTPS协议来完成的，HTTP协议它本身是无状态的协议（即：服务器无法分辨哪些请求是来源于同个客户）。而业务层面会涉及到客户端与服务器端的交互
2021-03-28 10:49:45
972
原创 用css画一个三角形
怎么用css画一个三角形呢？ △1、思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。2、首先创建一个带边框的div<body> <style> #triangle { width: 50px; height: 50px; border: 20px solid; border-color: blue red green greenyellow; } </styl
2021-03-27 21:44:09
871
原创 同源策略的限制，没有同源策略会怎么样？
目录同源策略同源策略的执行说说同源策略的限制没有同源策略的危害同源策略之前学习跨域方式的时候介绍过同源策略，但是学习真的不能知其一而不知其意，当时只是简单的了解，昨天面试随着面试官加深的询问没有同源策略会怎样，才发现自己还是没有真正的明白，今天简单记录一下0.0 Salute！九种跨域方式及实现原理：https://blog.csdn.net/f944913628/article/details/114288543?spm=1001.2014.3001.5501同源策略：是一种约定，它是浏览器最核
2021-03-27 11:12:24
1705
1
原创 http缓存
目录http缓存的总过程http 缓存的具体过程http缓存的好处网站性能方面谈 http缓存如何使用http缓存对于http缓存，之前一直只知道根据浏览器是否向服务端发请求来确认是否使用缓存资源，浏览器缓存分 强制缓存 和 协商缓存 ，分别使用的字段前者是Expires和Cach-control，后者是 Etag 和 Last-modified ，但对于整个浏览器缓存过程是怎么样的呢？我还是比较模糊，看了一些博客文章后算是明白，记录一下，方便以后回顾：注：缓存一定是之前已经有请求过资源的了，否则何来
2021-03-25 13:04:32
361
原创 谈谈强缓存和协商缓存
目录浏览器请求时缓存的过程什么是强缓存和协商缓存强缓存强缓存的字段Cache-Control与Expires的优先级协商缓存协商缓存的字段Last-Modified与ETag的优先级浏览器刷新问题缓存的优缺点之前陆续也看了很多关于缓存的文章，写本子上了也没记下来，不是说好记性不如烂笔头吗，对我好像不是很管用，现在梳理一下，方便之后回顾0.0浏览器请求时缓存的过程当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制。首次加载网
2021-03-25 13:03:27
653
原创 cookie(了解，设置，可以跨服务端吗)
目录什么是cookie？cookie机制：设置cookie：cookie跨域setDomain和setPath：什么是cookie？HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。无状态是指Web浏览器与Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务器返回响应（Response），连接就被关闭了，在服务器端不保留连接的有关信息。也就是说，HTTP请求只能由客户端发起，而服务器不能主动向客户端发送数据。这样cookie的用处就彰显了出来0
2021-03-25 11:17:32
1854
原创 常见面试问题汇总【前端基础篇】~持续更新...
目录前端基础什么是盒子模型？W3C标准盒子模型和IE盒子模型的区别讲一下进程和线程px，em，rem的区别说一下面相对象以及它的特点：浏览器相关框架相关讲一下vue的响应式原理前端基础什么是盒子模型？W3C标准盒子模型和IE盒子模型的区别盒子模型： 网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网
2021-03-22 17:31:19
546
原创 如何实现节流与防抖
目录防抖与节流的概念防抖函数（debounce）修复this指向和event问题节流函数（throttle）防抖和节流的区别防抖与节流的概念函数防抖： 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再输入内容，这时再触发请求。函数节流： 高频事件触发，但在n秒内只
2021-03-16 15:12:25
726
转载 九种跨域方式实现原理
目录一、什么是跨域？1.什么是同源策略及其限制内容？2.常见跨域场景二、跨域解决方案1.jsonp2.cors3.postMessage4.websocket5. Node中间件代理(两次跨域)6.nginx反向代理7.window.name + iframe8.location.hash + iframe9.document.domain + iframe三、总结前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。一、什么是跨域？1.什么是同源策略及其限制内容？
2021-03-02 17:51:28
544
转载 浅谈XSS与CSRF的攻与防
目录XSS反射型存储型基于DOMXSS 攻击的防范HttpOnly 防止劫取 Cookie输入检查输出检查CSRF浏览器的 Cookie 策略通过 Cookie 进行 CSRF 攻击CSRF 攻击的防范验证码Referer Check添加 token 验证总结在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。本文将会简单介绍 XSS 和 CSRF 的攻防问题。声明：本文的示例仅用于演示相关的攻击原理XSSXSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩
2021-03-02 12:37:07
484
转载 让你分分钟理解javaScript闭包
让你快速了解闭包闭包，是 Javascript 比较重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是 ECMAScript 规范给的定义，如果没有实战经验，很难从定义去理解它。因此，本文不会对闭包的概念进行大篇幅描述，直接上干货，让你分分钟理解闭包！闭包，一睹为快在接触一个新技术的时候，我首先会做的一件事就是找它的 demo。对于我们来说，看代码比自然语言更能理解一个事物的本质。其实，闭包无处不在，比如：jQuery、zepto的核心代码都包含在一个大的闭包中，所以下面我先写一个最简单
2021-02-21 18:38:29
390
原创 ajax和axios、fetch的区别
目录1、jQuery ajax2、axios3、fetch1、jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，
2020-12-23 15:19:54
381
原创 Echarts 数据可视化
目录1. Echarts 简介2. Echarts快速上手3. 柱状图3.1 柱状图基本使用3.2 其他常见效果1. Echarts 简介Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器Echarts 是一个纯 JavaScript 的图表库，底层依赖轻量级的 Ca
2020-12-22 16:46:13
1045
原创 Mac出现Permission denied的解决办法
当提示Permission denied：解决的办法：$ sudo chmod -R 777 某一目录其中-R 是指级联应用到目录里的所有子目录和文件777 是所有用户都拥有最高权限
2020-12-16 09:51:28
3547
原创 React基础学习-3
目录1. 虚拟DOM和diff算法1.1 createEmement 创建组件1.2 JSX转换过程1.3 虚拟DOM1.4 diff 算法1.5 递归实现 diff 算法2. 飞翔的大猪2.1 鼠标位置2.2 飞翔的大猪2.3 总结3. 组件复用3.1 render props模式3.1.1 创建鼠标位置组件3.1.2 复用鼠标位置组件3.1.3 children代替render props3.2 高阶组件3.2.1 基本使用3.2.2 displayName3.2.3 传递 props4. 路由4.1
2020-12-12 12:21:14
472
原创 React基础学习-2
目录1. 组件通讯1.1 props1.2 父子组件嵌套1.3 父向子传值1.4 子向父传值 -11.5 子向父传值 -21.6 兄弟组件传值1.7 Context2. props其他功能2.1 children 属性2.2 props校验2.3 常见校验规则2.4 默认值3. 组件的生命周期3.1 创建阶段3.2 更新阶段3.3 卸载阶段3.4 不常用钩子函数（了解）4. 组件性能优化4.1 组件更新机制4.2 减轻 state4.3 避免不必要的渲染4.3.1 state4.3.2 props4.4 纯
2020-12-10 17:09:17
609
原创 React基础学习-1
目录1.React概述1.1React简介1.2 项目搭建1.3项目结构说明1.4 React 基本使用2. JSX2.1 JSX简介2.2 JSX中的表达式2.3 条件渲染2.4循环渲染2.5 理解循环1.React概述1.1React简介React 是一个 MVC 框架React 主要是用来构建 UIReact 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源React 特点：声明式：使用 React 编写UI界面和写HTML几乎一
2020-12-10 14:42:21
703
原创 JS中call()、apply()、bind()用法总结
目录call()和apply()区别：参数书写方式不同用法bind()绑定函数和setTimeout一起使用绑定函数作为构造函数apply()、call()、bind()比较call()和apply()每个函数都包含两个非继承而来的方法：call()和apply()；在JavaScript中，call和apply作用是一样的，都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。function fruits(){} frui
2020-12-03 23:19:21
376
原创 cookie、localstorage、sessionstorage
CookieCookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。localStoragelocalStorage 是 H
2020-11-13 12:28:41
407
原创 Vue中解决路由切换，页面不更新的实用方法
目录前言一、问题呈现二、解决方案前言vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。一、问题呈现<!-- App.vue根组件代码 --><template> <div class="app"> <div class="slide"> <ul&g
2020-11-13 12:24:26
1575
1
原创 vue-Study3
目录vue生命周期vue-resource图书管理系统（改进）vue生命周期Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们称之为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
2020-11-06 23:46:43
431
原创 vue-Study2
目录v-model关于v-model的计算器小案例给元素设置样式v-for循环v-if与v-show员工管理系统小demo定义全局过滤器定义私有过滤器自定义指令v-model在vue的指令中，v-bind只能实现数据的单向绑定，也就是从M（model）自动绑定到V（view），无法实现双向绑定。使用v-model，可以实现表单元素和model中数据的双向绑定。注意：v-model只能运用在表单元素中。<body> <!-- v-bind 指令 只能实现数据的单向绑定 从M
2020-11-06 22:02:10
476
原创 初识Vue
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例为什么学习流行框架企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了）在Vue中，一个核心的概念就是，让用户不再操作DOM元
2020-10-30 19:37:48
1302
转载 MVC与MVVM
目录前言前端发展史从MVC开始到MVVM出现前言MVC和MVVM大概是个老生常谈的问题了，下面来阐述关于MVC和MVVM如此这般设计的原因以及我们应该如何思考一些相关的问题。前端发展史在上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称HTML，并在1993年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服
2020-10-30 16:12:45
388
原创 初学Express
目录Express简介安装ExpressExpress的特点Hello Express 实例路由利用 Express 托管静态文件中间件Express简介Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。它提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过
2020-10-24 00:09:10
387
原创 nodejs学习阶段习题测试及总结
目录1.1.笔试题：1.1.笔试题：1.1.1 什么是NodeJS, 以及优缺点和特点?简单来说Node.js就是运行服务端的Javascript。Node.js是一个基于Chrome Javascript运行时建立的一个平台，是一个事件驱动I/O服务端Javascript环境。基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。NodeJs特点：1.它是一个Javascript运行环境2.依赖于Chrome V8引擎进行代码解释3.事件驱动4.非阻塞I/
2020-10-23 20:48:57
2207
原创 浅谈Get与Post
目录前言什么是HTTPGET和POST区别前言get和post是两种HTTP最常用的请求方法，在说get和post之前，我们需要先了解一下什么是HTTP呢？什么是HTTP超文本传输协议（HTTP）。超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。HTTP 的工作方式是客户端与服务器之间的请求-应答协议。web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信
2020-10-16 21:53:25
428
原创 初入模板引擎之art-template
目录什么是模板引擎模板引擎的用途art-template介绍特性语法安装渲染模板引用模板引擎渲染模板的3种核心方法小案例什么是模板引擎模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。模板引擎的用途模板引擎
2020-10-16 20:15:15
615
原创 nodejs服务2
实现动态网站我们刚刚了解了nodejs实现静态服务器的功能，那么问题就随之而来了，怎么实现动态的网站呢?答案是 我们需要知道数据的获取和传输。Get参数处理→通过urlparse 将字符串转换为json格式对象。查看API重启服务：浏览器测试Post参数处理→不能使用url，使用querystring模块重启服务，使用postman测试工具登录案例创建login.html文件创建一个js文件...
2020-10-10 22:03:04
374
原创 nodejs服务1
首先我们来看看浏览器访问网站的过程是怎么样的呢？1.在浏览器地址栏中输入网址：https://www.baidu.com2.浏览器通过用户在地址栏中输入的url构建http请求3.浏览器发起DNS解析请求，将域名转换为IP地址4.浏览器将请求报文发送给服务器5.服务器接收请求报文并解析6.服务器处理用户的请求，并将处理的结果封装成http响应报文7.服务器将 http 响应报文发送给浏览器8.浏览器接收服务器响应的 http 报文,并解析9.浏览器解析 html 界面展示(渲染), 在解
2020-10-10 21:35:46
403
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人