LylBrave-CSDN博客

原创 Vue更改了data里的数据，但是视图却没有更新

1.Vue不能检测以下数组的变动：var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的当利用索引值修改数组某项时，使用：Vue.set(vm.items, indexOfItem, newValue);或者：vm.$set(vm.items, indexOfItem, newValue)vm.items...

2020-05-18 14:35:15 1255

原创 vue+express搭建系统时利用token保持登陆状态

在我们登陆以后，我们通常希望以后的每次url请求都带上认证信息，即让我们的服务器知道我们已经登陆。利用jwt（jsonWebToken）插件可以帮我们生成相应toktenconst jwt = require('jsonwebtoken');let expressJWT = require('express-jwt');//引入中间件对token进行验证app.post('/login...

2020-02-07 12:04:25 637

原创 express4.0+在解析前端post的数据时获取不到req.body

由于前端在用axios的post方法数据时，是以 Request Payload 格式传给服务器，所以此处要使用bodyParser插件,安装插件npm install bodyParser然后在app.js文件中引入，并写上这两行代码就可以解析出req.body中的数据了app.use(bodyParser.urlencoded({extended:true}));app.us...

2020-02-07 11:55:56 1562 1

原创 JS异步回调Async/Await与Promise

promise是为解决ES6异步回调而生的，为了避免出现回调地狱，那为什么又需要Async/Await呢？什么是Async/Await？1.async/await是写异步代码的新方式，以前的方法有回调函数和promise2.async/await是基于promise实现的，她不能用于普通的回调函数3.是非阻塞的4.async/await使得异步代码看起来像同步代码使同pro...

2018-09-17 15:17:35 485

原创 setTimeout和setInterval的区别

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行...

2018-08-13 16:35:00 235

转载 js中块级作用域和函数作用域的区别

为什么需要块级作用域？ES5只有全局作用域没和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景，内层变量可能覆盖外层变量：var tmp = new Date();function f(){ console.log(tmp); if(false){ var tmp = "hello"; }}f(); // undefined上面代码中，...

2018-08-13 10:40:11 8165 2

原创如何实现每执行一次函数，结果都会自增1

function f(){var cnt=0;return function(){ return ++cnt;}}var fa=f();//将函数f的的返回值给变量fnconsole.log(fa());//1console.log(fa());//2console.log(fa());//3函数的返回值是函数（对象的引用），这里将其赋值给变量fn。在调用fn时，其输出结果每次都...

2018-08-07 15:23:30 8714 2

转载如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式。方法一：localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。 <input id="name"> <input type="button" id="btn...

2018-08-04 16:24:44 384

转载 Vuex的单向数据流

随着前端的项目的越来越复杂，出现了一堆概念来降低开发的复杂性。单向数据流就是其中一个。如果项目很简单，不需要用单向数据流。单向数据流是什么单向数据流指只能从一个方向来修改状态。下图是单向数据流的极简示意：单向数据流的极简示意与单向数据流对对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合）中可以修改自己或其他Model的状态，用户的操作...

2018-08-04 10:35:45 6630 1

原创函数去抖和函数节流

函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就...

2018-08-04 10:31:56 261

原创 setTimeout(fn, 0) 的作用

调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间，而非确切的时间。零延迟 (Zero delay) 并不是意味着回调会立即执行。在零延迟调用 setTimeout 时，其并不是过了给定的...

2018-08-02 16:03:52 870

原创 RESTful是什么？

REST即表述性状态传递（英文：Representational State Transfer，简称REST）是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。表述性状态转移（REST）是一组架构约束条件和原则，而满足这些约束条件和原则的应用程序或设计就是RESTful。REST原则：资源与URI（要让一个资源可以被识别，需要有个唯一标识，在Web中这个唯一...

2018-08-02 15:40:23 168

原创 https的握手过程

https并非是应用层的一种新协议，它只是在http通信接口部分用SSL（Secure Socket Layer）和TLS（Transport Layer Security）协议代替而已。浏览器使用http时，直接同tcp通信；当浏览器使用https时，浏览器会先同TLS/SSL进行通信，然后TLS/SSL再同tcp进行通信。在使用TLS/SSL后，http便拥有了加密功能。TLS/SSL...

2018-08-02 10:46:25 2815

原创详析cookie和session到底是什么？

一.什么是CookieCookie意为“甜饼”，是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准，所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能...

2018-08-02 10:37:20 342

原创详细介绍缓存的几种方式

对于Web前端而言，cache可以说是无处不在，通常是2个环节之间，就会引入一个cache做为提升整体效率的角色。例如A和B两者之间的数据交换，为了提升整体的效率，引入角色C，而C被用于当做热点数据的存储，或者是某种中间处理的机制。也就是我们常常说的“空间换时间”，牺牲一部分代价，来换取整体效率的提升。那么我们一起来看看前端当中，有那些比较关键的缓存？它们又是怎样协调工作的呢？我们一起来看...

2018-08-02 10:29:58 3193

原创在使用rem适配移动端时，如何改变根元素的字体大小？

rem和em相对单位长度我们经常用在响应式开发中，rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。一般我们会使用js去控制根元素的font-size大小，然后进行rem换算：functi...

2018-08-02 10:16:28 6240

原创 canvas画矩形和svg画矩形的方法

1.canvas画矩形<!doctype html><html><head><style>#huaban{border:1px solid;}</style><script></script><meta chars

2018-08-02 10:03:51 1043

原创怎么解决跨域的问题

跨域感觉是面试里被问到的概率最高的几个问题之一，所以准备好好总结一下。一、通过jsonp跨域在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http:/...

2018-08-01 21:21:14 330

转载 js几种请求方式的对比（XHR,jQuery中的ajax，fetch，axios）

开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，jQuery实现的AJAX，Fetch ,让我们首先来比较一下这三者的使用示例。XMLHttpRequestvar xhr;if (window.XMLHttpRequest) {　 // Mozilla, Safari... 　xhr = new XMLHttpRequest();}...

2018-08-01 20:41:26 2229

原创 apply，call，bind的区别

首先，call()和apply()就是改变函数的执行上下文，也就是this值。他们两个是Function对象的方法，每个函数都能调用。他们的第一个参数就是你要指定的执行上下文，第二个用来传递参数(说第二个不准确，应该说第二部分，因为参数可以传多个)，也就是传给调用call和apply方法的函数的参数。说白了，就是调用函数，但是让它在你指定的上下文下执行，这样，函数可以访问的作用域就会改变，不得不说...

2018-08-01 20:22:45 152

转载 websockt原理

WebSocket原理及技术简介Siwind原创WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。...

2018-08-01 10:01:52 1087

原创 canvas绘图不清晰的解决办法

用canvas绘图，发现图像和文字变得模糊了，因为是跑在ios上，开发用的mac，于是查了下资料，发现ios4-ios6屏幕分辨率：设备分辨率 = 1 ： 2，也就是说，我们用canvas画的图1个点对应的其实是被横向纵向放大了2倍的，基于些，我用了如下两种解决方案解决模糊，方法一：先看效果图利用transform:scale(0.5)直接缩小一半方法二：将canvas样式属性宽度...

2018-08-01 09:56:14 6490

原创 canvas、svg与flash

在前端开发中我们做动画主要有四种方式：CSS的animation和transition；canvas；svg动画；flash动画。今天我们主要来看看cancas、svg与flash。1.区别canvas画出的图形都是附在canvas区域之上，但图形都是不可操作的，如果要操作图形，就是直接操作整个canvas，即清空canvas和重绘。svg是一种在网页上画矢量图的方法，结构基于XML。...

2018-08-01 09:48:48 1013

转载 generator

Generator简介先来一段最基础的Generator代码function* Hello() { yield 100 yield (function () {return 200})() return 300}var h = Hello()console.log(typeof h) // objectconsole.log(h.next()) /...

2018-07-30 17:04:47 110

转载进程与线程

在理解进程和线程概念之前首选要对并发有一定的感性认识，如果服务器同一时间内只能服务于一个客户端，其他客户端都再那里傻等的话，可见其性能的低下估计会被客户骂出翔来，因此并发编程应运而生，并发是网络编程中必须考虑的问题。实现并发的方式有多种：比如多进程、多线程、IO多路复用。多进程进程是资源（CPU、内存等）分配的基本单位，它是程序执行时的一个实例。程序运行时系统就会创建一个进程，并为它分配资...

2018-07-30 16:38:22 80

原创 JS的执行顺序

首先我们都知道js是单线程的。1.什么是单线程？通俗点说，就是代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段代码来解释一下吧for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //输出：4,4,4 },0)}我们来看一下上面的这段代码，既...

2018-07-30 16:28:01 303

原创 Vue的数据双向绑定

Vue的双向数据绑定主要通过Object.defineProperty来实现，先为所有的属性加上get/set的监控，这样当属性值改变时就会触发对应的set方法，然后再在set方法中通过观察者来更新视图，同时在get方法中进行依赖收集。vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来...

2018-07-30 11:12:22 139

转载 Vue的计算属性

这里我们引用Vue.js的官方文档所说的：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里...

2018-07-30 10:23:35 602

转载 xss和csrf

XSS定义的主语是“脚本”，是一种跨站执行的脚本，也就是javascript脚本，指的是在网站上注入我们的javascript脚本，执行非法操作。 CSRF定义的主语是”请求“，是一种跨站的伪造的请求，指的是跨站伪造用户的请求，模拟用户的操作。XSS攻击发生的条件是可以执行javascript脚本，一般在站点中总会有发表文章、留言等信息的表单，这种表单一般是写入到数据库中，然后在某个页面进行...

2018-07-27 16:59:27 105

原创 express中间件和路由

1.通常http的url是这样的：http://host[:port][path]，http表示协议、host表示主机、port为端口、path指定请求资源的URI，如果URL没有给出path，一般默认为“/”（通常有客户端来补上）2.所谓路由就是如何处理http请求中的路径部分（path）例如，我们在express中:var express = require('express')...

2018-07-27 16:42:37 1016

原创 node.js怎么发起子进程

node本身为单进程，并使用驱动模式处理并发，为了解决单进程在多核cpu上的资源浪费，node提供了cluster和child_process模块来创建多个子进程。Node.js是单线程的,对于现在普遍是多处理器的机器是一种浪费,怎么能利用起来呢？于是child_process模块出现了。child_process模块可以在其他进程上产生、派生，并执行工作。child_process模块提...

2018-07-27 16:37:07 397

转载 webpack浅析

webpack 是现在前端开发常用的打包工具，上手简单，但是有很多概念比较难懂。这里整理下，方便以后查阅。loader 和 plugin主要区别 loader 用于加载某些资源文件。因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。这就需要对应的loader将资源转化，...

2018-07-27 16:33:16 93

原创 webpack流程

我们可以把webpack看成一个工厂，进入的原料经过工厂的加工，然后输出1.前端环境搭建：使用npm install webpack来安装webpack2.部署webpack：在package里配置3.html打包我们需要安装引入html-webpack-plugin4.css打包需要css-loader由于webpack只能打包js文件，故其他文件的打包则需要相应的插件。...

2018-07-23 21:26:49 348

原创 JS模块化

随着前端js代码复杂程度提高，js模块化是一个必然趋势，不仅好维护同时依赖明确，不会污染全局。1.无模块化：通过script标签引入js，相互罗列，但是被依赖的放在前面，否则就会报错。缺点：污染全局变量，维护成本高，依赖关系不明显2.commonJS：该规范主要用在服务端的node中，同步方式加载，它有四个重要的环节：module，expor...

2018-07-23 21:11:55 98

原创 Http2管线化和持久连接

浏览器在默认状态下并不激活http管线化功能。管线化：是一项实现了多个http请求不需要等待相应的应答就能够写进同一个socket的技术。管线化需要客户端和服务端双方都支持管线化。http持久化持久化连接也称http长连接或者http连接复用，思想是使用一个TCP去发送和接受多个http请求/响应，以避免每次单独请求进行新的连接。...

2018-07-23 09:38:15 1254

原创 JS的事件循环机制

1.为什么js是单线程的？作为运行在浏览器的脚本语言，主要用途之一是操作DOM，如果有两个线程同时对一个DOM进行操作的话，则浏览器不知道该听谁的2.主线程：规定现在执行执行栈中的哪个事件主线程循环：即主线程会不停的在执行栈中读取事件，会执行完栈中的所有同步代码，当遇到一个异步事件后，并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，我们称之为任务队列。主线程将...

2018-07-20 10:02:36 826

原创 js中创建对象的几种方式

1.工厂模式function createPerson(name){ //1、原料 var obj=new Object(); //2、加工 obj.name=name; obj.showName=function(){ alert(this.name); } //3、出场 return obj; ...

2018-07-17 09:18:57 130

原创闭包

在理解闭包之前，我们先提出两个概念：局部作用域和全局作用域。在javaScript语言中，函数内部可以读取全局变量，而函数外部却无法获得函数内部的变量。在我们创建对象的时候，其实也创建了一个scope内置对象，scope内置对象中保存了对象被创建的作用域中对象的集合，这个集合叫做作用域链，它决定了哪些数据可以被访问，顺着作用域链一级一级的向外查找父对象上的变量与属性。故为了我们外部也能访问函数...

2018-07-16 20:35:03 111

原创 JS中实现继承的几种方法及其优缺点

要搞懂JS继承，我们首先要理解原型链：每一个实例对象都有一个__proto__属性（隐式原型），在js内部用来查找原型链；每一个构造函数都有prototype属性（显示原型），用来显示修改对象的原型，实例.__proto__=构造函数.prototype=原型。原型链的特点就是：通过实例.__proto__查找原型上的属性，从子类一直向上查找对象原型的属性，继而形成一个查找链即原型链。1.原型...

2018-07-16 10:25:55 5958

原创 promise的理解

常见的异步编程方式有：回调函数、事件监听、ES6的promise。而promise是用来解决回调噩梦的，当无数个回调函数嵌套那将是灾难性的，promise相当于是将回调函数用一种更简单明了的方式改写。promise其实是一个构造函数，其接受一个函数作为参数（函数中则有resolve和reject两个参数，分别表示执行成功与失败时的回调函数）。将我们的异步方法用promise进行封装。即：...

2018-07-15 13:25:57 188

空空如也

空空如也