- 博客(54)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 前端 文件断点续传
最近做了一个前端文件断点续传的demo 还有很多bug和不对的地方 希望有大佬能指点一下地址：https://github.com/Month7/uploadDemo没有钱了 所以没有租服务器 没有演示的地址基本流程和原理切片，这个不用说 难点主要在于如何实现续传流程：在input file选择文件后，点击上传，客户端首先根据文件名称对文件进行md5加密，调用 '/...
2019-08-05 11:44:12
954
原创 Google开源的自动化工具LightHouse的使用
LightHouseLightHouse是一个Google开源的自动化工具，主要用于改进网络应用（移动端）的质量。目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。使用入门LightHouse 有三种工作流程Chrome 开发者工具 命...
2019-07-08 17:25:39
8651
原创 重学ES6(四) generator 与async函数
ES6新增了Generator与async函数一、Generator的语法形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态。function* Gen(){ yield 1; yield 2; return 3;}var g = G...
2019-07-03 14:36:13
341
原创 vue中 计算属性computed 与 watch侦听器的区别
计算属性用来声明一个值依赖于另一个值，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。如果不发生改变，那么计算属性将会从缓存中读取值。计算属性不能计算在data中已经定义过的值。watch用来侦听一个属性的变动，当属性发生变动时，触发相应的回调函数。在有些情况下，computed和watch都可以用，由于computed会从缓存中读取值，所以性能会好...
2019-07-02 11:16:37
633
原创 重学ES6(三) proxy代理对象
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。ES6...
2019-07-02 10:34:23
162
原创 重学ES6(二) Symbol数据类型
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。1.基本用法Symbol值通过Symbol函数来生成let a = Symbol();console.log(a); // SymbolSymbol可以接收一个字符串作为参数，表示对Symbol实例的描述。let a = Symbol('aa');Symbol生成的值都是独一无二的，即使是相同参数的Sy...
2019-06-29 00:18:42
121
原创 重学ES6(一) var let 和 const
var 是ES5中声明变量的方式，ES6中新增了let 和 const两种生命变量的方式。1.let用法类似于var 基本用法：let a = 1;var a = 1;let与var的区别：1) 块级作用域var 声明的变量，不存在块级作用域，只存在函数作用域。比如说console.log(a) // undefined{ var a = 1;}...
2019-06-28 12:41:12
135
原创 总结vue常用的组件通信方法
一、 props $emit父组件通过props向子组件传递数据，子组件通过$emit触发父组件中的方法 改变父组件的数据，符合单向数据流。二、$listeners $attrs$listeners 属性（它是一个对象，里面包含了作用在这个组件上的所有监听器。）设想这样一个场景父组件Parent 子组件A A的子组件B 如下图：要想在B组件中改变父组件的值，要怎么办...
2019-06-13 23:17:30
199
原创 浅析HTTP/2的一些新特性
1.首部压缩1.X版本中，首部用文本格式传输，通常会给每个传输增加500-800字节的开销。现在打开一个网页上百个请求已是常态，而每个请求带的一些首部字段都是相同的，例如cookie、user-agent等。HTTP2为此采用HPACK压缩格式来压缩首部。头部压缩需要在浏览器和服务器端之间：维护一份相同的静态字典，包含常见的头部名称，以及常见的头部名称和值的组合 维护一份相同的动态字典，...
2019-06-12 13:25:58
2581
原创 浅谈常见网络攻击以及防御
常见的网络攻击主要有xss攻击，csrf攻击和sql注入等。一、XSS，即 Cross Site Script，中译是跨站脚本攻击。XSS 攻击是指攻击者在网站上注入恶意的客户端代码，从而在用户使用浏览器进行访问时，获得用户隐私数据的一种行为。XSS分为反射型（非持久型）、存储型（持久型）和基于DOM1.反射型反射型 XSS 只是简单地把用户输入的数据 “反射” 给浏览器，这...
2019-06-11 15:57:08
5040
原创 原生js统计页面内所有标签的种类和个数
var all = document.getElementsByTagName('*');var tags = [];for(var i=0;i<all.length;i++){tags.push(all[i].tagName.toLocaleLowerCase());}var res = {};for(var i=0;i<tags.length;i++){...
2019-01-13 23:23:56
1789
原创 浅谈js事件循环机制与Node的事件循环机制
宏任务：setTimeout，setInterval，微任务：promise的回调js的事件循环机制比较简单先执行主线程代码，执行完毕后，清空微任务队列，然后取出一个宏任务，然后清空微任务队列，如此循环Node的事件循环比较复杂 Node的事件循环分为六个阶段(1)timers计时器 执行setTimeout、setInterval的回调函数(2)I/0 callba...
2018-12-05 23:49:34
985
原创 javascript new运算符的过程及其模拟实现
new一个对象的过程var a = new A();(1)创建一个空对象 newObj(2)将newObj的__proto__指向A的prototype(3)执行A的构造函数(4)return newObj function _new () {var newObj = {};var constructor = Array.prototype.shift.c...
2018-10-04 10:13:59
277
原创 浅析https加密原理与握手流程
首先说下对称加密和非对称加密对称加密 只有一个密钥，比如叫key 这个key同时扮演加密和解密的角色。非对称加密 有公钥和私钥 私钥只能一个人持有 私钥加密的密文 公钥都可以解密 公钥加密的密文，只有私钥可以解密。https握手流程一、客户端发出请求，明文传输 (1)自己支持的一套加密规则 (2)一个随机数二、服务端从客户端发来的加密算法中选择一套，...
2018-10-03 23:23:54
979
原创 封装一个javascript instanceOf函数
原理:就是左边的参数沿原型链向上查找，不想多打字，直接贴代码function myInstanceOf (left,right) {let rightPrototype = right.prototype;let leftProto = left.__proto__;while(true) {if(leftProto === null){return false;}...
2018-09-09 18:10:32
704
原创 js 遍历dom tree
// 深度优先遍历算法描述：（1）访问结点v。（2）找到v的第一个邻接点w。（3）如果邻接点w存在且未被访问，则从w出发深度优先遍历图；否则，结束。（4）找顶点v关于w的下一个邻接点，转(3)。递归算法：function dfs (node) {console.log(node); // 访问nodefor(var i=0;i<node.children....
2018-08-19 16:11:51
603
原创 实现一个javascript new的功能
要想实现new的功能,我们首先要知道new是干什么的呢?在js中 var a = new A() 后1.创建一个空对象obj{}2.将a的this指向obj{}3.将a的_proto_指向A的prototype4.执行A的构造函数5.返回obj 代码级实现:function Test (name) {this.name = name;this.test ...
2018-08-18 19:19:02
1222
原创 手写实现一个promise
function myPromise (callback) {let self = this;self.status = 'pending';self.value = undefined;self.reason = undefined;self.fullFiledArr = [];self.rejectedArr = [];function resolve (value...
2018-08-14 15:38:51
903
原创 javascript深拷贝与浅拷贝
深拷贝：复制出的新变量的改变不会影响原变量。浅拷贝：复制出的新变量的改变会影响原变量。js中实现深拷贝的几种方法和优缺点：1手动实现（只使用于一层对象，实际是浅拷贝？） function deepClone(obj,copy){copy=copy||{};for(var key in obj){copy[key]=obj[key];}return copy;...
2018-03-02 18:12:05
269
原创 输入URL到显示页面发生了什么&浏览器渲染&回流和重绘
服务器端：1.查找缓存2.通过DNS服务器将URL转换成IP地址3.浏览器给服务器发出http请求4.网站的永久重定向5.服务器跟踪重定向地址6.服务器处理响应7.服务器发回响应浏览器端：1.下载HTML2.将HTML解析成Dom Tree3.将css文件解析成 CSSOM4.根据Dom树和CSSOM 形成render Tree5.布局 计算出renderTree的每一个节点的位置6.渲染 ren...
2018-03-02 02:15:20
379
原创 javascript基本数据类型和引用数据类型
javascript变量有两种不同的数据类型：基本类型和引用类型。基本类型指的是简单的数据段，引用类型指的是由多个值构成的对象。基本类型有6种 null undefined number string boolean Symbol(ES6)基本类型和引用类型的区别：1基本类型是不可变的，引用类型的值是可变的。2基本类型的比较是值的比较，引用类型的比较是引用的比较。3.基本类...
2018-02-26 17:13:59
518
原创 javascript原型链
首先，函数有prototype属性，而对象（除Object）都有_proto_属性 _proto_可以理解为：构造器的prototype_proto_指向谁呢1.当以函数字面量的形式创建一个对象时var a={};_proto_指向Object的prototype2.当以构造器的形式创建一个对象时var A=function(){};var a=new A();_...
2018-02-25 01:27:53
218
原创 css position属性
今天面试，position竟然答错了。。唉。。以前以为很简单没有看，看来还是差的很多要继续学习啊。复习一下position：relative:生成相对定位的元素，相对于其正常位置进行定位。absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(脱离标准文档流)fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。(脱离标准文档流)static:默认值，没有...
2018-02-24 19:29:53
271
原创 ACM解题报告四，五，六周
青蛙跳台阶Problem Description一只青蛙一次可以跳上1级台阶，也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。算法 ：动态规划 也可以用递归做，递归和dp的区别在于空间和时间的取舍分析：寻找递推公式N级台阶 第一步的跳法有n种第一步跳1级 那么剩下(n-1)级 ，跳法：f(n-1)第一步跳2级 那么剩下(n-2)级
2018-01-14 21:22:36
245
原创 ACM解题报告第一，二，三周
数字序列时间限制：2000/1000 MS（Java / Others）内存限制：65536/32768 K（Java / Others）总共提交数量：183301已接受提交：45608问题描述一个数字序列被定义如下：F（1）= 1，F（2）= 1，F（N）=（A * F（N - 1）+ B * F（N - 2））模7. 鉴于A，B和n，你要计算f（
2017-12-18 21:30:16
549
原创 jQuery实现瀑布流
这几天做比赛项目的时候要写一个表白墙，用了瀑布流的方式实现，现在来说一下这个瀑布流是怎么实现的。瀑布流是什么就不再说了，不知道的可以看看这个：点击打开链接现在说说瀑布流的原理：先计算一行最多容纳几个div 而后将第一行摆满div，将他们的高度存入数组找出第一行中高度最小的div，第二行中的div距离顶部的距离就是该高度+留白，而后更新数组这样就基本实现瀑布流了代码：ht
2017-12-18 19:29:51
259
转载 杭电ACM题目分类
原文链接找不到了基础题：1000、1001、1004、1005、1008、1012、1013、1014、1017、1019、1021、1028、1029、1032、1037、1040、1048、1056、1058、1061、1070、1076、1089、1090、1091、1092、1093、1094、1095、1096、1097、1098、1106、1108、1157、1163、1164、1
2017-11-25 15:15:32
455
原创 jQuery实现下雪效果
先上效果图：基本原理：动态生成雪花div，设置它的定位为绝对定位。初始时，设置它的位置为距顶部-30px。用Math.random()方法使雪花的大小随机，初始水平位置和最终水平位置随机。初始和最终透明度随机。然后用clone()方法复制雪花，通过jQuery动画方法让其下落，下落时间为固定时间+浏览器高度决定的时间。源代码：{CSDN:CODE:2
2017-11-07 22:24:55
1987
原创 javascript基本数据类型和typeof方法的总结
javascript中五种基本数据类型：Number String Boolean Null Undefined在ES6中新增了Symbol使用typeof运算符可以查看对象的数据类型，不过要注意，typeof(null)将会返回object，《JavaScript》一书中写道：这是一个设计时的巨大错误。typeof运算符返回的结果有： number string undefined ...
2017-11-02 19:17:19
305
原创 php组合开发包 appserv的使用
最近在学习ajax。在《《锋利的jQuery》》一书第六章中，介绍了在jQuery于Ajax的应用。要学习Ajax当然要有实例啦。书上的例子是无法直接在本地运行的，因为会跨域，要在服务器上运行才行。我这里是按照的书上的用的PHP网页架构工具组合包AppServ，不过一开始出了很多问题，在网上查了很久，弄了半天也没弄好，后来出去吃了个饭回来突然明白了，记录一下。首先是安装，非常的
2017-10-31 19:21:12
676
1
原创 css实现基本的鼠标滑过图片添加遮蔽层效果
一个非常常用的效果实现的基本思想：（1）把要显示的div的定位设置为相对定位（2）把要覆盖在上面的一层设置为绝对定位，通过rgba()来设置背景色及透明度先将不透明级别(opicaty)设置为0。同时设置渐变的时间。（3）为显示的div添加hover伪类，鼠标滑过时，将覆盖层的opiacty设置为1。贴代码：html:{CSDN:CODE:2599798
2017-10-26 23:24:17
1244
原创 css中伪类after before用法
:before 选择器在被选元素的内容后面插入内容。:after 选择器在被选元素的内容后面插入内容。1基本用法 before和after p:before{ content: "before"; } p:after{
2017-10-21 15:28:15
711
原创 javascript中的==，!==,===,!===比较运算符
最近在学习前端，虽说前端入门简单，但是要学深入是真的不容易。学前端，最基础的就是三剑客，html,css,javascrpit了而js更是重点中的重点，javascript虽然和java名字很像，但是和java是完全不一样啊。习惯了c和java的我对于js的变量提升，闭包，原型都是一脸懵逼啊..好了现在写正事，仔细探讨一下js中的==，!==,===,!===1.==和
2017-10-19 16:25:04
487
转载 html 块级元素和行内元素
原文地址：http://www.cnblogs.com/Jackie0714/p/4923639.html1.关于行内元素和块状元素的说明 根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-
2017-10-11 19:33:55
200
原创 暴力枚举 循环数
题目描述循环数是那些不包括0且没有重复数字的整数(比如81362)并且还应同时具有一个有趣的性质, 就像这个例子:如果你从最左边的数字开始(在这个例子中是8)向右数最左边这个数(如果数到了最右边就回到最左边),你会停止在另一个新的数字(如果停在一个相同的数字上，这个数就不是循环数).就像: 8 1 3 6 2 从最左边接下去数8个数字: 1 3 6 2 8 1 3 6 所以下一个数字是6
2017-09-08 00:09:44
324
原创 计蒜客 递推
A 点有一个过河卒，需要走到目标BBB 点。卒行走规则：可以向下、或者向右。同时在棋盘上的任一点有一个对方的马（如上图的 CCC 点），该马所在的点和所有跳跃一步可达的点称为对方马的控制点。例如上图 CCC 点上的马可以控制 999 个点（图中的 P1,P2⋯P8P1,P2 \cdots P8P1,P2⋯P8 和 CCC）。卒不能通过对方马的控制点。棋盘用坐标表示，AA
2017-08-11 19:10:24
349
原创 计蒜客 蒜头君开公司（全排列）
2020 年，蒜头君自己开了一家拥有 N 个员工的大公司。每天，蒜头君都要分配N 项工作给他的员工，但是，由于能力的不同，每个人对处理相同工作所需要的时间有快有慢。众所周知，蒜头君是一个非常重视效率的人，他想知道该如何分配工作，才能使得完成所有工作的时间总和最小（每个员工只可以被分配到一个工作）。但是我们也都知道蒜头君不是一般的懒，所以蒜头君找到了你，请你拯救一下蒜头君吧！输入格式
2017-08-06 13:21:46
649
原创 计蒜客 八皇后问题
八皇后问题：蒜头君在和朋友下国际象棋，下的时候突发奇想，在国际象棋棋盘的每个格子上写下 111 到999999 内的数字，又拿出了珍藏已久的888 个皇后棋子。国际象棋中的皇后可以将同一行、同一列和同一对角线上的对方棋子吃掉。小蒜头在想，怎么摆放这888 个皇后的位置才能让她们不能互相攻击，同时这888 个皇后占的格子上的数字总和最大。蒜头君来求助热爱算法的你了，你
2017-08-03 14:04:46
351
原创 计蒜客 敲七，蒜头君买书
有一种酒桌游戏叫做“敲7”，规则是从一个人开始，说出任意数字，其他人会顺序往后报，如果一个数字包含 77，或者是77 的倍数，那么需要敲打杯子或盘子，不能说出。现在 nn 个人围坐在一个圆桌周围，他们编号从 11 到 nn 顺时针排列。从某一人开始报出一个数字，其他人会按照顺时针方向顺序往后报(加一)，如果某个人的数字包含 77，或者是77 的倍数，那么他将退出游戏
2017-07-30 00:45:22
1074
1
原创 浅谈C++ STL常用容器
动态数组：有些时候想开一个数组，但是却不知道应该开多大长度的数组合适，因为我们需要用到的数组可能会根据情况变动。这时候我们就需要用到动态数组。C++中动态数组写作vector。要使用vector，需要添加头文件 #include定义和初始化：C++中定义一个动态数组为 vector t T为类型，t为名称。插入元素：通过push_back()方法插入元素。获取长度并访问元素：通
2017-07-26 11:19:34
198
JavaScript设计模式与开发实践
2018-01-15
Visual Studio Code
2017-09-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人