- 博客(33)
- 收藏
- 关注
RSS订阅
转载 处理v-html的潜在XSS风险
没有进行防止xss攻击的例子<p v-html="test"></p> export default { data () { return { test: `<a οnclick='alert("xss攻击")'>链接</a>` }}结果，js事件被执行，弹出弹框，我们要杜绝这种情况，保留a标签，拦截onclick事件解决办法法一：使用一个xss的npm包来过滤xss攻击代码，给指令的value包上一层xss
2020-09-25 10:11:54
1672
原创 （十一）进阶算法之“搜索排序”
进阶算法之“搜索排序”排序和搜索简介排序和搜索是什么？JS中的排序和搜索排序算法搜索算法Javascript实现：冒泡排序Javascript实现：选择排序Javascript实现：插入排序Javascript实现：归并排序Javascript实现：快速排序Javascript实现：顺序搜索Javascript实现：二分搜索LeetCode：21.合并两个有序链表LeetCode：374.猜数字大小思考题排序和搜索简介排序和搜索是什么？排序：把某个乱序的数组变成升序或者降序的数组搜索：找出数组中某个
2020-09-24 15:44:33
565
原创 （十）数据结构之“堆”
数据结构之“堆”堆是什么？JS中的堆堆的应用第K个最大元素LeetCode：215.数组中的第K个最大元素LeetCode：347.前K个高频元素LeetCode：23.合并K个排序链表思考题堆是什么？堆是一种特殊的完全二叉树所有的节点都大于等于（最大堆）或小于等于（最小堆）它的子节点JS中的堆JS中通常用数组表示堆左侧子节点的位置是2 * index + 1右侧子节点的位置是2 * index + 2父节点位置是( index - 1 ) / 2堆的应用堆能高效、快速地找出最大值和
2020-09-24 14:45:12
239
原创 （九）数据结构之“图”
数据结构之“图”图是什么图的常用操作图的深度/广度优先遍历什么是深度/广度优先遍历深度优先遍历算法口诀广度优先遍历算法口诀LeetCode：65.有效数字LeetCode：417.太平洋大西洋水流问题LeetCode：133.克隆图思考题图是什么图是网络结构的抽象模型，是一组由边连接的节点图可以表示任何二元关系，比如道路、航班….JS中没有图，但是可以用Object和Array构建图图的表示法：邻接矩阵、邻接表、关联矩阵…图的常用操作深度优先遍历广度优先遍历图的深度/广度优
2020-09-23 23:28:49
226
原创 （八）数据结构之“树”
数据结构之“树”树是什么？什么是深度/广度优先遍历？深度优先遍历算法口诀广度优先遍历算法口诀二叉树的先中后序遍历二叉树是什么先序遍历算法口诀（根 > 左 > 右）中序遍历算法口诀（左 > 根 > 右）后序遍历算法口诀（左 > 右 > 根）树是什么？一种分层数据的抽象模型。前端工作中常见的树包括：DOM树、级联选择、树形控件…JS中没有树，但是可以用Object和Array构建树树的常用操作：深度/广度优先遍历、先中后序遍历什么是深度/广度优先遍
2020-09-23 14:53:21
234
原创 （七）数据结构之“字典”
数据结构之“字典”字典是什么？LeetCode：349.两个数组的交集LeetCode：20.有效的括号LeetCode：1.两数之和LeetCode：3.无重复字符的最长子串LeetCode：76.最小覆盖子串思考题字典是什么？与集合类似，字典也是一种存储唯一值的数据结构，但它是以键值对的形式来存储ES6中有字典，名为Map字典的常用操作：键值对的增删改查const m = new Map();// 增m.set('a', 'aa');m.set('b', 'bb');// 删m.
2020-09-22 15:30:52
421
原创 （六）数据结构之“集合”
数据结构之“集合”集合是什么？LeetCode：349.两个数组的交集前端与集合：使用ES6的Set思考题集合是什么？一种无序且唯一的数据结构ES6中有集合，名为Set集合的常用操作：去重、判断某元素是否在集合中、求交集// 去重const arr = [1, 1, 2, 2];const arr2 = [...new Set(arr)];// 判断元素是否在集合中const set = new Set(arr);const has = set.has(3);// 求交集cons
2020-09-21 16:16:15
522
转载 设置背景图片模糊，内容不模糊
设置背景图片模糊，内容不模糊需求：一个div设置了background-image，现在需要使背景模糊，div内的文字清晰显示。解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="text/css"> .conten
2020-09-18 14:21:53
2809
1
原创 （四）数据结构之“队列”
数据结构之“队列”队列是什么？队列的应用场景场景一：食堂排队打饭场景二：JS异步中的任务队列场景三：计算最近请求次数LeetCode：933.最近的请求次数前端与队列：JS异步中的任务队列技术要点思考题队列是什么？一个先进先出的数据结构JavaScript中没有队列，但可以用Array实现队列的所有功能const queue = [];queue.push(1);queue.push(2);const item1 = queue.shift();const item2 = queue.sh
2020-09-14 16:02:56
302
原创 （三）数据结构之“栈”
数据结构之“栈”栈是什么栈的应用场景场景一：十进制转二进制场景二：有效的括号场景三：函数调用堆栈JS中的函数调用堆栈LeetCode：20.有效的括号LeetCode：144.二叉树的前序遍历技术要点思考题栈是什么一个后进先出的数据结构JavaScript中没有栈，但可以用Array实现栈的所有功能const stack = [];stack.push(1);stack.push(2);const item1 = stack.pop();const item2 = stack.pop();
2020-09-14 15:37:03
302
原创 （二） 时间/空间复杂度计算
时间/空间复杂度计算时间复杂度是什么？O(1)O(n)O(1)+O(n)=O(n)O(n)*O(n)=O(n^2)O(logN)空间复杂度是什么？O(1)O(n)O(n^2)思考题时间复杂度是什么？一个函数，用大O表示，比如O(1)、O(n)、O(logN)…定性（大概）描述该算法的运行时间O(1)let i = 0;i += 1执行了一次O(n)for (let i = 0; i < n; i += 1){ console.log(i)}执行了n次O(1)+O(n)=
2020-09-14 15:06:59
183
原创 （一）数据结构与算法简介
数据结构与算法简介目标掌握数据结构与算法的理论知识补齐算法短板梳理前端与算法结合点，不再纸上谈兵，将算法用于实战三部曲理论：数据结构与算法的特点、应用场景等等刷题：做一些算法题，推荐使用LeetCode实战：在工作中与数据额结构/算法打交道刷题刷题网站：推荐使用LeetCode刷题顺序：推荐按照类型刷图，相当于集中训练重点关注：通用套路、时间/空间复杂度分析和优化实战前端与数据结构/算法的结合点在工作中与数据结构/算法大交道数据结构与算法是什么数据结构：计算机存储、组织数
2020-09-14 14:39:53
306
转载 NATAPP本地地址映射到外网
NATAPP本地地址映射到外网官网地址步骤官网地址https://natapp.cn/步骤参考地址：https://cloud.tencent.com/developer/article/1144260注册账号登录之后进点击购买免费或者付费隧道（免费版的仅供测试，连接数一旦多起来会很卡，常用的用户可以购买付费版通道）根据需要选择隧道协议,这里以web演示,购买隧道本机建立web服务,输入本地端口，例如：8000.确保 http://127.0.0.1 可以访问.在
2020-09-11 10:41:58
387
原创 （十四）综合应用
综合应用综合应用搭建开发环境演示项目功能画 UML 类图开始写代码准备工作入口文件App.jsShoppingCart.jsGetCart.jsList.jsItem.js状态管理模拟日志补充折扣功能综合应用使用 jQuery 做一个模拟购物的小 demo ，不用 vue 或 React 是因为它们封装了很多东西，使用封装的框架，就不容易分析设计模式。工厂模式：$(...)，创建商品实例单例模式：购物车装饰器模式：log（点击按钮日志打点）代理模式：优惠商品打折：name 有“优惠”字样、pr
2020-09-07 15:37:26
427
原创 （十三）其他设计模式
其他设计模式其他非常用设计模式原型模式桥接模式组合模式享元模式策略模式模板方法模式职责连模式命令模式备忘录模式访问者模式中介者模式解释器模式其他非常用设计模式可能不常用可能是找不到经典应用场景设计模式有：原型模式桥接模式组合模式享元模式策略模式模板方法模式职责连模式命令模式备忘录模式访问者模式中介者模式解释器模式原型模式基于一个对象创建一个重复的对象，重新new代价较大的情况下，就拷贝一份。具体实现就是自己实现一个 clone 自己的 API ，外部调用时克隆自己
2020-09-07 14:25:09
237
原创 （十二）状态模式
状态模式状态模式状态模式 介绍概念示例状态模式 演示状态模式 场景有限状态机（finite state machine）实现一个简单的 Promise状态模式 总结状态模式介绍演示场景总结状态模式 介绍概念一个对象或者实例可能会有不同状态的变化（例如交通信号灯），如果仅用if...else去处理状态变化，扩展性非常差，特别是针对复杂的状态变化。状态模式就提出了一种处理复杂状态变化且扩展性好的设计思路。示例交通信号灯不同颜色的变化状态模式 演示传统的 UML 类图[外链图
2020-09-04 11:09:50
145
原创 （十一）迭代器模式
迭代器模式迭代器模式迭代器模式 介绍概念示例迭代器模式 演示迭代器模式 场景jQuery eachES6 Iterator迭代器模式 总结迭代器模式介绍演示场景总结迭代器模式 介绍概念这种模式用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。示例没有找到合适的例子，就以一个常用的 jQuery 为示例吧。<p>jquery each</p><p>jquery each</p><p>jquery each<
2020-09-03 18:03:42
178
原创 （十）观察者模式
观察者模式观察者模式观察者模式 介绍概念示例观察者模式 演示观察者模式 场景网页事件PromisejQuery callbacksnodejs 自定义事件nodejs streamnodejs 多进程通讯组件生命周期vue 响应式的实现一对多的关系观察者模式 总结观察者模式介绍演示场景总结观察者模式 介绍观察者模式是前端最常用、最重要的设计模式，如果让你只掌握一种设计模式，那肯定就是观察者模式！！！概念当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如
2020-09-03 16:50:09
281
原创 （九）外观模式
外观模式外观模式概念演示场景总结外观模式概念外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yHq3UTrh-1598951456467)(./img/1.jpg)]如去医院看病，可能要去挂号、门诊、划价、取药，让患者或患者家属觉得很复杂，如果有提供接待人员，只让接待人员来处理，就很方便。演示外观模式比较简单，很容易理解。传统的 UML
2020-09-03 14:56:30
136
原创 （八）代理模式
代理模式代理模式代理模式 介绍概念示例代理模式 演示代理模式 场景网页事件代理`$.proxy`ES6 Proxy代理模式 总结代理模式介绍演示场景总结代理模式 介绍概念为其他对象提供一种代理以控制对这个对象的访问。在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上。在面向对象系统中，有些对象由于某些原因（比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问），直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。[外链
2020-09-03 14:51:58
186
原创 （七）装饰器模式
装饰器模式装饰器模式装饰器模式 介绍概念示例装饰器模式 演示装饰器模式 场景ES7 装饰器装饰类装饰方法core-decorators装饰器模式 总结装饰器模式介绍演示场景总结装饰器模式 介绍概念装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。示例手机上套一个壳可以保护手机，壳上粘一个指
2020-09-03 14:41:39
131
原创 （六）适配器模式
适配器模式适配器模式适配器模式 介绍概念示例适配器模式 演示适配器模式 场景适配器模式 总结适配器模式介绍演示场景总结适配器模式 介绍概念将一个类的接口适配成用户所期待的。一个适配允许通常因为接口不兼容而不能在一起工作的类工作在一起，做法是将类自己的接口包裹在一个已存在的类中。示例我们国家的电器使用普通的扁平两项或三项插头，而去外国的话，使用的标准就不一样了，比如德国，使用的是德国标准，是两项圆头的插头。怎样解决这个问题呢？只要使用一个电源转化器就行了。[外链图片转存失败,源站可能
2020-09-03 14:28:13
159
原创 （五）单例模式
单例模式单例模式单例模式 介绍概念示例单例模式 演示单例模式 场景jQuery 只有一个 `$`登录其他单例模式 总结单例模式介绍演示场景总结单例模式 介绍概念单例模式，是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中，应用该模式的类一个类只有一个实例。即一个类只有一个对象实例示例按照面向对象的编程思想，任何东西都可以抽象为一个类，然后可以 new 出若干个对象。但是针对某些场景，只能存在唯一的对象系统登录框购物车这就产生了
2020-09-02 15:44:41
125
原创 （四）工厂模式
工厂模式工厂模式工厂模式 介绍概念示例工厂模式 演示工厂模式 场景jQuery `$('div')``React.createElement`vue 异步组件工厂模式 - 总结工厂模式介绍演示场景总结工厂模式 介绍概念工厂模式是我们最常用的实例化对象模式了，是用工厂方法代替new操作的一种模式。著名的 Jive 论坛 ,就大量使用了工厂模式，工厂模式在 Java 程序系统可以说是随处可见。因为工厂模式就相当于创建实例对象的new，我们经常要根据类Class生成实例对象，如A a=new
2020-09-02 14:59:55
607
原创 （三）设计原则
设计原则设计原则何为“设计”设计原则介绍单一职责原则开放封闭原则李氏置换原则接口隔离原则依赖倒置原则举例说明从设计到模式简介 23 种设计模式设计原则何为“设计”？设计原则从设计到模式简介 23 种设计模式何为“设计”按我的理解，通俗来说，设计（仅指编程设计）就是按照哪一种思路或者标准来实现功能。同样的功能，不同的设计思想都能用不同的方式来实现，前期效果可能一样，但是随着产品功能的增加和扩展，设计的作用才会慢慢的显示出来。结合《UNIX/Linux 设计哲学》中提到的系统设计原则 htt
2020-09-02 14:44:04
220
原创 （二）面向对象
面向对象搭建开发环境安装 webpack启动服务babel 解析 ES6什么是面向对象概念三要素继承封装多态应用场景为何要用面向对象其他UML类图介绍类图几种关系demo总结搭建开发环境初始化npm环境，npm init安装webpack，npm install webpack webpack-cli --save-dev安装webpack-dev-server，npm install webpack-dev-server html-webpack-plugin --save-dev安装babel
2020-09-02 09:56:51
248
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人