├── index.js ├── otherShare ├── 前端知识点总结 │ ├── js篇 │ │ ├── 实现一个 instanceof.md │ │ ├── 超大数相加.md │ │ ├── 实现ES6的class语法.md │ │ ├── JS编程实现简单模板引擎变量替换.md │ │ ├── 不使用NEW运算符如何创建JS对象.md │ │ ├── 实现一个 new.md │ │ ├── js基本数据类型.md │ │ ├── 箭头函数简析.md │ │ ├── json和xml的区别.md │ │ ├── 函数防抖与节流.md │ │ ├── for in 和 for of的区别.md │ │ ├── promise的简单实现.md │ │ ├── 实现一个 sum(1)(2)(4,1).valueOf() sum(1,2,3,4).valueOf().md │ │ ├── 实现call、apply、bind.md │ │ ├── JavaScript中this.md │ │ ├── Javascript的继承与多态.md │ │ └── 对象深、浅拷贝.md │ ├── 浏览器 │ │ ├── 如何获取浏览器的唯一标识？.md │ │ └── cookie 和 token 在什么情况下会被劫持？.md │ ├── css篇 │ │ ├── 盒模型.md │ │ ├── 垂直居中.md │ │ ├── img.md │ │ ├── position.md │ │ └── 避免重排和重绘的小技巧.md │ ├── html篇 │ │ ├── html5的优缺点.md │ │ ├── 如何实现浏览器内多个标签页之间的通信.md │ │ └── iframe的优缺点.md │ ├── 框架篇 │ │ └── Vue 的响应式原理中 Object.defineProperty 有什么缺陷？.md │ ├── other │ │ ├── 优化网页手段.md │ │ └── 前端缓存.md │ ├── 网络篇 │ │ └── 从输入URL到页面加载发生了什么？.md │ └── 工程化 │ │ └── webpack 热更新原理.md ├── 服务器知识点总结 │ ├── 接口如何防刷.md │ ├── 请求状态码.md │ ├── DNS.md │ ├── TCP.md │ └── http1.0、1.1、2.0 协议的区别.md ├── 数据结构分享 │ ├── 栈和队列转换.md │ └── 树状数组入门.md └── 源码之殇 │ ├── Vue Keep-alive原理.md │ └── new Vue().md ├── algo ├── 数组_Array.md ├── 栈_stack.md ├── 队列_ queue.md └── 跳表_skiplist.md ├── theoreticalKnowledge ├── CommencementIsJustStart毕业也是开始.md ├── DynamicProgramming动态规划.md ├── Array数组、LinkedList链表、Stack栈、Queue队列.md ├── HighClassDynamicProgramming高级动态规划、字符串算法.md ├── DFS深度优先搜索、BFS广度优先搜索、Greedy algorithm贪心算法、Binary search二分查找.md ├── ProblemClassificationCut习题分类斩.md ├── Trie树、Union-Find并查集、search搜索、tree树.md └── Hash table哈希表、Map映射、Set集合 、Tree 树、Binary tree二叉树、Binary search tree二叉搜索树、图(Graph) 、 recursive递归 、divide分治 、recall 回溯.md ├── demos ├── 八皇后问题.md ├── 薅羊毛问题.md ├── 爬楼梯变体问题.md ├── 01背包问题变体.md ├── 滑动窗口11道.md ├── 动态规划理论.md └── 01背包问题.md └── README.md /index.js: -------------------------------------------------------------------------------- 1 | // 这是一个空文件! -------------------------------------------------------------------------------- /otherShare/前端知识点总结/js篇/实现一个 instanceof.md: -------------------------------------------------------------------------------- 1 | ## 实现一个 instanceof 2 | #### code 3 | ```javascript 4 | function myinstanceof(a,b) { 5 | while (a) { 6 | if( a.__proto__ === b.prototype) return true; 7 | a = a.__proto__; 8 | } 9 | return false; 10 | } 11 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/js篇/超大数相加.md: -------------------------------------------------------------------------------- 1 | # 超大数相加 2 | #### 解法 3 | ```javascript 4 | let addBigNum = (a,b) => { 5 | let res = '',tmp = 0; 6 | a = a.split(''); 7 | b = b.split(''); 8 | while(a.length || b.length || tmp){ 9 | tmp += ~~a.pop() + ~~b.pop(); 10 | res = (tmp %10)+res; 11 | tmp = tmp > 9; 12 | } 13 | return res.replace(/^0+/,''); 14 | } 15 | ``` -------------------------------------------------------------------------------- /otherShare/服务器知识点总结/接口如何防刷.md: -------------------------------------------------------------------------------- 1 | ## 接口如何防刷 2 | #### 措施 3 | + 网关控制流量洪峰 4 | + 对在一个时间段内出现流量异常，可以拒绝请求 5 | + 源ip请求个数限制 6 | + 对请求来源的ip请求个数做限制 7 | + http请求头信息校验 8 | + host、User-Agent、Referer 9 | + 对用户唯一身份uid进行限制和校验 10 | + 基本的长度，组合方式，有效性进行判断 11 | + uid具有一定的时效性 12 | + 前后端协议采用二进制方式进行交互或者协议采用签名机制 13 | + 验证码等 14 | + 人机验证 15 | + 验证码 16 | + 短信验证码 17 | + 滑动图片形式 18 | + 12306形式(找不同) 19 | + 返回"操作频繁"的错误提示 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/js篇/实现ES6的class语法.md: -------------------------------------------------------------------------------- 1 | #### 实现ES6的class语法 2 | ```javascript 3 | function inherit(subType,superType) { 4 | subType.prototype = Object.create(superType.prototype,{ 5 | constructor: { 6 | enumerable:false, 7 | configurable:true, 8 | writable:true, 9 | value:subType 10 | } 11 | }) 12 | Object.setPrototypeOf(subType,superType) 13 | } 14 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/浏览器/如何获取浏览器的唯一标识？.md: -------------------------------------------------------------------------------- 1 | ## 如何获取浏览器的唯一标识？ 2 | ### 简易原理 3 | + 由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同，因此绘制成图片数据的 CRC 校验也不一样。 4 | ### code实现 5 | ```javascript 6 | function getCanvasFp () { 7 | let canvasEle = document.createElement('CANVAS') 8 | canvasEle.setAttribute('id','canvas') 9 | const ctx = canvasEle.getContext('2d') 10 | ctx.font = '14px Arial' 11 | ctx.fillStyle = '#ccc' 12 | ctx.fillText('hello, shanyue', 2, 2) 13 | return canvasEle.toDataURL('image/jpeg') 14 | } 15 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/css篇/盒模型.md: -------------------------------------------------------------------------------- 1 | ## 盒模型 2 | #### W3C标准模型和IE模型 3 | + 包含：margin、border、padding、content 4 | + 区别 5 | + 标准：width = content 6 | + IE：width = content + padding + border 7 | #### CSS3转换 8 | + box-sizing 9 | + content-box 10 | + 元素的 width = content 11 | + border-box 12 | + 元素的 width = border + padding + content 13 | #### 番外 14 | + margin 15 | + margin-top/margin-bottom 16 | + 行内元素无效 17 | + margin-left/margin-right才有效 18 | + 相邻块级元素 19 | + 都是整数，margin值取两者最大值 20 | + 都是负数，margin值取最小值 21 | + 两者正负相反，margin值取两者之和 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/html篇/html5的优缺点.md: -------------------------------------------------------------------------------- 1 | # html5的优缺点 2 | #### 优点 3 | + 网络标准统一、HTML5本身是由W3C推荐出来的。 4 | + 多设备、跨平台 5 | + 即时更新。 6 | + 提高可用性和改进用户的友好体验； 7 | + 有几个新的标签，这将有助于开发人员定义重要的内容； 8 | + 可以给站点带来更多的多媒体元素(视频和音频)； 9 | + 可以很好的替代Flash和Silverlight； 10 | + 涉及到网站的抓取和索引的时候，对于SEO很友好； 11 | + 被大量应用于移动应用程序和游戏。 12 | #### 缺点 13 | + 安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。 14 | + 完善性：许多特性各浏览器的支持程度也不一样。 15 | + 技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战 16 | + 性能：某些平台上的引擎问题导致HTML5性能低下。 17 | + 浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/js篇/JS编程实现简单模板引擎变量替换.md: -------------------------------------------------------------------------------- 1 | ## JS编程实现简单模板引擎变量替换 2 | ### 解题关键 3 | + replace/正则 4 | ### 参考文献 5 | + [js简单前端模板引擎实现](https://segmentfault.com/a/1190000010366490) 6 | + [JavaScript模板引擎实现原理实例详解](https://www.jb51.net/article/152760.htm) 7 | #### code 8 | ```javascript 9 | let render = (str) => { 10 | return (obj) => { 11 | str = str.replace('YY',obj.YY); 12 | str = str.replace('MM',obj.MM); 13 | str = str.replace('DD',obj.DD); 14 | return str; 15 | } 16 | } 17 | // 栗子 18 | const YY = '2020'; 19 | const MM = '02'; 20 | const DD = '04'; 21 | const str = render('YY-MM-DD')({YY,MM,DD}); 22 | console.log(str);// 2020-02-04 23 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/js篇/不使用NEW运算符如何创建JS对象.md: -------------------------------------------------------------------------------- 1 | ## 不使用NEW运算符如何创建JS对象 2 | #### 解法 3 | + 利用字面量 4 | ```javascript 5 | let a = [],b = {},c = /abc/g; 6 | ``` 7 | + 利用 dom api 8 | ```javascript 9 | let d = document.createElement('p'); 10 | ``` 11 | + 利用JavaScript内置对象api 12 | ```javascript 13 | let e = Object.create(null); 14 | let f = Object.assign({x:2},{y:3}); 15 | let g = JSON.parse('{}'); 16 | ``` 17 | + 利用装箱转换 18 | ```javascript 19 | let h = Object(undefined); 20 | let i = Object(null); 21 | let j = Object(1); 22 | let k = Object('a'); 23 | let l = Object(true); 24 | let m = (function() {return this}).call(1) 25 | ``` 26 | + 利用 ES6构造器 27 | ```javascript 28 | class myObj{ 29 | constructor(a) {this.a = a;} 30 | } 31 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/css篇/垂直居中.md: -------------------------------------------------------------------------------- 1 | ## 垂直居中的卍种方法 2 | #### 解法一 3 | + 对单行元素进行居中垂直(文本+图片) 4 | + 设置行内元素的父元素：height == line-height 5 | + 设置行内元素：vertical-align:middle，line-height 6 | #### 解法二 7 | + 定位 8 | + position:absolute + margin-top(元素高度一半) 9 | + position:absolute + top:0 + bottom:0 + left:0 + right:0 + marign:auto 10 | + position:absolute + top:calc(50% - 元素height/2) + left:calc(50% - 元素width/2) 11 | + position:absolute + top:50% + left:50% + transform:translate(-50%,-50%) 12 | #### 解法三 13 | + 居于视口单位的解决方案 14 | + margin-top:50vh + transform:translateY(-50%) 15 | #### 解法四 16 | + table 17 | + 父元素 18 | + display:table; 19 | + 子元素 20 | + display:table-cell + vertival-align:middle 21 | #### 解法五 22 | + flex 23 | + 父元素 24 | + display:flex 25 | + 子元素 26 | + margin:auto 27 | + algin-items:center -------------------------------------------------------------------------------- /otherShare/前端知识点总结/css篇/img.md: -------------------------------------------------------------------------------- 1 | # div里包img图片下方有空白的问题 2 | ```javascript 3 | 6 | ``` 7 | ### 原理 8 | + 图片的display属性默认是inline， 9 | + 而这个属性的vertical-align的默认值是baseline。 10 | + 所以就会出现上图的情况（图片底部出现一个小留白区域）。 11 | #### 解法 12 | + 把img变成块状元素，所以是否需要留白，可以用过padding来设置。 13 | ```css 14 | img { 15 | display: block; 16 | } 17 | ``` 18 | + 直接修改vertical-align属性值 19 | ```css 20 | img { 21 | vertical-align: middle/bottom; 22 | } 23 | ``` 24 | + 把img元素的底部外边距改成负值 25 | ```css 26 | img { 27 | margin-bottom: -4px; 28 | } 29 | ``` 30 | + 出现留白的原因是因为垂直对齐的方式所导致的，所以可以修改父元素的font-size，把父元素的字体大小改为0，所以就没什么垂直对齐所言 31 | ```css 32 | .banner { 33 | font-size: 0; 34 | } 35 | ``` 36 | + 把img的父元素行高设成0 37 | ```css 38 | .banner { 39 | line-height: 0; 40 | } 41 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/框架篇/Vue 的响应式原理中 Object.defineProperty 有什么缺陷？.md: -------------------------------------------------------------------------------- 1 | ## Vue 的响应式原理中 Object.defineProperty 有什么缺陷？ 2 | ### 为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？ 3 | #### 参考文献 4 | + [Vue为什么不能检测数组变动](https://segmentfault.com/a/1190000015783546#comment-area) 5 | + [抱歉，学会 Proxy 真的可以为所欲为](https://zhuanlan.zhihu.com/p/35080324) 6 | + [阮一峰 - Proxy详解](http://es6.ruanyifeng.com/#docs/proxy) 7 | + [面试官: 实现双向绑定Proxy比defineproperty优劣如何?](https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf) 8 | #### 参考答案 9 | + Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应； 10 | + Vue通过修改数组的八种方法进行了hack处理 11 | + push() 12 | + pop() 13 | + shift() 14 | + unshift() 15 | + splice() 16 | + sort() 17 | + reverse() 18 | + Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。 19 | + Proxy可以劫持整个对象，并返回一个新的对象。 20 | + Proxy有13种劫持操作 21 | + Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/js篇/实现一个 new.md: -------------------------------------------------------------------------------- 1 | ## 实现一个 new 2 | ### 参考文献 3 | + [实现 new](https://zhuanlan.zhihu.com/p/84605717) 4 | ### 定义 5 | 1. 创建一个新的空的对象 6 | 2. 将构造函数的作用域赋给新对象(因而 this 就指向了这个新对象) 7 | 1. 即将新对象的原型链链接到构造函数的原型对象上 8 | 3. 执行构造函数中的代码(为这个新对象添加属性) 9 | 4. 如果构造函数有返回值，则返回；否则，返回新对象。 10 | #### code 11 | ```javascript 12 | function myNew() { 13 | var constr = Array.prototype.shift.call(arguments); 14 | var obj = Object.create(constr.prototype); 15 | var res = constr.apply(obj,arguments); 16 | return res instanceof Object ? res : obj; 17 | } 18 | ``` 19 | + 或者这样写 20 | ```javascript 21 | function myNew(fun,...args) { 22 | if(typeof fun !== 'function'){ 23 | console.log('参数必须是一个函数'); 24 | } 25 | let obj = Object.create(fun.prototype); 26 | let res = fun.call(obj,...args); 27 | if(res !== null && (typeof res === 'object' || typeof res === 'function')){ 28 | return res; 29 | } 30 | return obj; 31 | } 32 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/css篇/position.md: -------------------------------------------------------------------------------- 1 | # position属性的理解 2 | + static 3 | + 对象遵循常规流 4 | + 此时4个定位偏移属性不会被应用 5 | + 默认元素都是静态的定位 6 | + relative 7 | + 对象遵循常规流 8 | + 相对定位 9 | + 并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 10 | + absolute 11 | + 对象脱离常规流 12 | + 绝对定位 13 | + 使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素 14 | + 其margin不与其他任何margin折叠。 15 | + 元素定位参考的是离自身最近的定位祖先元素，要满足两个条件， 16 | + 第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。 17 | + 第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。 18 | + fixed 19 | + 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 20 | + 固定定位 21 | + center 22 | + **CSS3新增** 23 | + 与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。 24 | + 盒子在其包含容器垂直水平居中。 25 | + page 26 | + **CSS3新增** 27 | + 与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。 28 | + sticky 29 | + **CSS3新增** 30 | + 对象在常态时遵循常规流。 31 | + 它就像是 relative 和 fixed 的合体， 32 | + 当在屏幕中时按常规流排版， 33 | + 当卷动到屏幕外时则表现如fixed。 34 | + 该属性的表现是现实中你见到的吸附效果。 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/other/优化网页手段.md: -------------------------------------------------------------------------------- 1 | ## 优化网页手段 2 | ### 参考文献 3 | + [前端性能优化最佳实践](https://csspod.com/frontend-performance-best-practices/#content-ajax-cache) 4 | #### 方法途径 5 | + 页面 6 | + 减少 HTTP 请求数 7 | + 减少 DNS 查询 8 | + 避免重定向 9 | + 缓存 Ajax 请求 10 | + 延迟加载 11 | + 预先加载 12 | + 减少 DOM 元素数量 13 | + 划分内容到不同域名 14 | + 尽量减少 iframe 使用 15 | + 避免 404 错误 16 | + 服务器 17 | + 使用 CDN 18 | + 添加 Expires 或 Cache-Control 响应头 19 | + 启用 Gzip 20 | + 配置 Etag 21 | + 尽早输出缓冲 22 | + Ajax 请求使用 GET 方法 23 | + 避免图片 src 为空 24 | + Cookie 25 | + 减少 Cookie 大小 26 | + 静态资源使用无 Cookie 域名 27 | + CSS 28 | + 把样式表放在 中 29 | + 不要使用 CSS 表达式 30 | + 使用 替代 @import 31 | + 不要使用 filter 32 | + JS 33 | + 把脚本放在页面底部 34 | + 使用外部 JavaScript 和 CSS 35 | + 压缩 JavaScript 和 CSS 36 | + 移除重复脚本 37 | + 减少 DOM 操作 38 | + 使用高效的事件处理 39 | + 图片 40 | + 优化图片 41 | + 优化 CSS Sprite 42 | + 不要在 HTML 中缩放图片 43 | + 使用体积小、可缓存的 favicon.ico 44 | + 移动端 45 | + 保持单个文件小于 25 KB 46 | + 打包内容为分段（multipart）文档 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/css篇/避免重排和重绘的小技巧.md: -------------------------------------------------------------------------------- 1 | ## 避免重排和重绘的小技巧 2 | + 浏览器渲染网页过程 3 | + 解析HTML(HTML Parser) 4 | + 构建DOM树(DOM Tree) 5 | + 渲染树构建(Render Tree) 6 | + 绘制渲染树(Painting) 7 | + ![截屏2020-01-30下午4.34.49.png](https://pic.leetcode-cn.com/da9927ecd22a40ad7c6f52af2700410da87e6972896d8da833623bad5e8e04fd-%E6%88%AA%E5%B1%8F2020-01-30%E4%B8%8B%E5%8D%884.34.49.png) 8 | + reflow：重排/回流 9 | + 改变窗口大小 10 | + 改变文字大小 11 | + 添加/删除样式表 12 | + 内容的改变，(用户在输入框中写入内容也会) 13 | + 激活伪类，如:hover 14 | + 操作class属性 15 | + 脚本操作DOM 16 | + 计算offsetWidth和offsetHeight 17 | + 设置style属性 18 | + repaint：重绘 19 | + 在一个元素的外观被改变，但没有改变布局的情况下发生的， 20 | + 如改变了visibility、outline、background等。 21 | + 当repaint发生时，浏览器会验证DOM树上所有其他节点的visibility属性。 22 | + 优化 23 | + translate属性值来替换top/left/right/bottom的切换 24 | + scale属性值替换width/height 25 | + opacity属性替换display/visibility 26 | + 创建文档片段，一次性添加所有动态元素 27 | + document.createDocumentFragment() 28 | + 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。 29 | + 例如有动画效果的元素就最好设置为绝对定位。 -------------------------------------------------------------------------------- /otherShare/前端知识点总结/html篇/如何实现浏览器内多个标签页之间的通信.md: -------------------------------------------------------------------------------- 1 | # 如何实现浏览器内多个标签页之间的通信? 2 | #### websocket 3 | + 建立在 TCP 协议之上，服务器端的实现比较容易。 4 | + 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 5 | + 数据格式比较轻量，性能开销小，通信高效。 6 | + 可以发送文本，也可以发送二进制数据。 7 | + 没有同源限制，客户端可以与任意服务器通信。 8 | + 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。 9 | #### setInterval+cookie 10 | + 在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。 11 | #### localstorage 12 | + code 13 | ```javascript 14 | window.onstorage = (e) => {console.log(e)} 15 | // 或者这样 16 | window.addEventListener('storage', (e) => console.log(e)) 17 | ``` 18 | + 注意 19 | + onstorage以及storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。 20 | + 在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行：localStorage.setItem('a', 'b')代码，同样是不会触发监听函数的。 21 | #### html5浏览器的新特性SharedWorker 22 | + 普通的webworker直接使用new Worker()即可创建，这种webworker是当前页面专有的。 23 | + 还有种共享worker(SharedWorker)，这种是可以多个标签页、iframe共同使用的。 24 | + SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号) -------------------------------------------------------------------------------- /otherShare/数据结构分享/栈和队列转换.md: -------------------------------------------------------------------------------- 1 | #### 两个栈实现一个队列 2 | ```javascript 3 | let stack1 = []; 4 | let stack2 = []; 5 | function push(node){ 6 | while(stack2.length !== 0){ 7 | stack1.push(stack2.pop()); 8 | } 9 | return stack1.push(node); 10 | } 11 | function pop(){ 12 | while(stack1.length !== 0){ 13 | stack2.push(stack1.pop()) 14 | } 15 | return stack2.pop() 16 | } 17 | ``` 18 | #### 两个队列实现一个栈 19 | ```javascript 20 | let queue1 = []; 21 | let queue2 = []; 22 | function push (node){ 23 | if(queue1.length === 0){ 24 | queue2.push(node); 25 | }else{ 26 | queue1.push(node); 27 | } 28 | } 29 | function pop (){ 30 | if(queue1.length === 0){ 31 | while(queue2.length !== 1){ 32 | queue1.push(queue2.pop()) 33 | } 34 | return queue2.pop(); 35 | }else{ 36 | while(queue1.length !=== 1){ 37 | queue2.puush(queue1.pop()); 38 | } 39 | return queue1.pop(); 40 | } 41 | } 42 | ``` -------------------------------------------------------------------------------- /otherShare/前端知识点总结/html篇/iframe的优缺点.md: -------------------------------------------------------------------------------- 1 | # iframe的优缺点 2 | #### 优点 3 | + iframe能够把嵌入的网页原样展现出来； 4 | + 模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷； 5 | + 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用； 6 | + 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决； 7 | + 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页； 8 | + 方便制作导航栏。 9 | #### 缺点 10 | + iframe会阻塞主页面的 Onload 事件，影响网页加载速度； 11 | + 搜索引擎的检索程序无法解读这种页面，不利于 SEO; 12 | + iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 13 | + 如果需要使用 iframe ，最好是通过 javascript动态给iframe添加 src 属性值，这样可以绕开以上两个问题。 14 | + 多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差 15 | #### 应用场景 16 | + 分析 17 | + iframe的页面和父页面（parent）是分开的，所以它意味着，这是一个独立的区域，不受 parent的CSS或者全局的JavaScript的影响。 18 | + 应用 19 | + 网页编辑器； 20 | + 跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放； 21 | + 历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代； 22 | + 纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换； 23 | + 用iframe实现无刷新文件上传，在FormData不可用时作为替代方案； 24 | + 创建一个全新的独立的宿主环境。iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范； 25 | + 用来加载广告； 26 | + 一般邮箱使用iframe，如QQ邮箱； 27 | + 一些简单的后台页面。 -------------------------------------------------------------------------------- /otherShare/服务器知识点总结/请求状态码.md: -------------------------------------------------------------------------------- 1 | ## 请求状态码 2 | ### 参考文献 3 | + [HTTP状态码详解](http://www.daqianduan.com/4280.html) 4 | ### 大概 5 | + 1xx 6 | + 指示信息：表示请求已接收，继续处理 7 | + 2xx 8 | + 成功：表示请求已被成功接收、理解、接受 9 | + 3xx 10 | + 重定向：要完成请求必须进行更进一步的操作 11 | + 4xx 12 | + 客户端错误：请求语法错误或请求无法实现 13 | + 5xx 14 | + 服务器错误 15 | ### 常见 16 | + 200 17 | + 一切正常，对GET和POST请求的应答文档跟在后面。 18 | + 204 19 | + 没有新文档，浏览器应该继续显示原来的文档。 20 | + 如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 21 | + 206 22 | + 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新） 23 | + 301 24 | + 永久重定向，资源已永久分配新URI 25 | + 302 26 | + 临时重定向，资源已临时分配新URI 27 | + 303 28 | + 临时重定向，期望使用GET定向获取 29 | + 类似于301/302，不同之处在于， 30 | + 如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。 31 | + 304 32 | + 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。 33 | + 服务器告 诉客户，原来缓冲的文档还可以继续使用。 34 | + 400 35 | + 请求出现语法错误。 36 | + 401 37 | + 需要通过HTTP认证，或认证失败 38 | + 403 39 | + 资源不可用。服务器理解客户的请求，但拒绝处理它。 40 | + 通常由于服务器上文件或目录的权限设置导致。 41 | + 404 42 | + 无法找到请求资源 43 | + 500 44 | + 服务器故障或Web应用故障 45 | + 502 46 | + 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应 47 | + 504 48 | + Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求 49 | + 505 50 | + HTTP Version not supported -------------------------------------------------------------------------------- /otherShare/前端知识点总结/浏览器/cookie 和 token 在什么情况下会被劫持？.md: -------------------------------------------------------------------------------- 1 | ## cookie 和 token 在什么情况下会被劫持？ 2 | ### 常见攻击 3 | + CSRF 4 | + Cross-site request forgery（跨站请求伪造） 5 | + 原理是利用用户的身份，执行非用户本身意愿的操作 6 | + 图解 7 | + ![](https://upload-images.jianshu.io/upload_images/6201701-a101b1b5765c4d2c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp) 8 | + 形式 9 | + 图片URL 10 | + 超链接 11 | + Form提交 12 | + 嵌入第三方论坛、文章中 13 | + 防御 14 | + 验证码 15 | + 检验头部Refer字段 16 | + Refer用来记录该HTTP请求的来源地址 17 | + Token 18 | + 浏览器不会自带token 19 | + 过程 20 | + 服务器生成随机数Token 21 | + 并将该随机Token保存在用户Session（或Cookie中） 22 | + 用户在提交(如表单)数据时，该Token会提交到服务器 23 | + 服务器检测提交的Token是否与用户Session（或Cookie）中的是否一致 24 | + XSS攻击 25 | + Cross site script，即跨站脚本 26 | + 形式 27 | + 用户输入没有进行限制或过滤，从而被黑客嵌入恶意代码提交 28 | + 防御 29 | + 设置Cookie的属性为Http only，这样js就无法获取Cookie值 30 | + 对用户输入做过滤和限制 31 | + 提交数据做 Html encode处理 32 | + 去掉