- 博客(60)
- 收藏
- 关注
RSS订阅原创 动画滚动到页面指定位置
/** * 动画垂直滚动到页面指定位置 * @param { Number } currentY 当前位置 * @param { Number } targetY 目标位置 */ export function scrollAnimation(currentY, targetY) { // 获取当前位置方法 // const currentY = document.documentElement.scrollTop || document.body.scrollTop //
2021-12-07 13:29:19
137
原创 前端闭包，有你就够了
闭包的概念我的理解为，就是函数嵌套函数，内部的函数可以访问到外部函数申明的变量和参数（闭包是函数里面的函数，并且它能记住周围的东西。）特点：1、让外部访问函数内部变量成为可能；2、 局部变量会常驻在内存中；3、 可以避免使用全局变量，防止全局变量污染；4、会造成内存泄漏（有一块内存空间被长期占用，而不被释放）闭包的创建闭包可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前
2021-08-20 15:15:27
351
原创 vue实现登录失效后,重新登录,跳转的还是之前的页面
实现方式1、router.jsrouter.beforeEach((to, from, next) => { let accessToken = localStorage.getItem("accessToken"); if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限 if (!accessToken) { // 判断当前的token是否存在
2021-05-18 15:43:28
2019
原创 WEB常见的攻击方式有哪些？如何防御？
一、 什么是web攻击Web攻击（WebAttack）是针对用户上网行为或网站服务器等设备进行攻击的行为如植入恶意代码，修改网站权限，获取网站用户隐私信息等等Web应用程序的安全性是任何基于Web业务的重要组成部分确保Web应用程序安全十分重要，即使是代码中很小的 bug 也有可能导致隐私信息被泄露站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践我们常见的Web攻击方式有XSS (Cross Site Scripting) 跨站脚本攻击CSRF（Cross-
2021-03-26 10:24:39
1533
原创 vue双向数据绑定原理及实现
现在，vue已经成为了前端开发者必会的一个框架了，但是，对于里面的双向绑定原理只是了解了个大概，并没有很深入的去探究其原理的的实现，所以，最近，特意话了一段时间来深入的研究了下，并实现了个简单版的vue双向绑定vue数据双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。var vm = new Vue({ data: { obj: { a:.
2021-03-17 16:10:34
408
5
转载 vue set方法的实现原理
Object.defineProperty()这个方法对对象的属性方法的添加或者删除不能做到实时的监听，数组通过索引去 修改数组都是不能被检测？所以vue实现了set方法，那么实现的set方法的原理是什么呢？vm.$set( target, propertyName/index, value )参数：{Object | Array} target{string | number} propertyName/index{any} value用法：向响应式对象中添加一个属性，并确保这个新.
2021-03-12 17:06:38
2836
原创 call，apply，bind的用法、区别及原理的实现
call、apply 和 bind 是挂在 Function 对象上的三个方法，调用这三个方法的必须是一个函数。主要用来改变函数运行时this的指向基本用法1、call方法基本语法：func.call(thisArg, param1, param2, …)call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。示例：var obj = { message: 'My name is: '}f.
2021-01-31 12:02:55
334
2
原创 javaScript中常用数组api总结
数组在开发过程中占据了重要的角色，今天我主要通过4个部分来总结一下，开发过程中常用的到的一些api一、数组的构造器二、改变自身的方法三、不改变自身的方法四、遍历的数组一、数组构造器1、Array 构造器Array 构造器用于创建一个新的数组。通常，我们可以使用对象字面量的方式创建一个数组，例如 var a = [] 就是一个比较好的写法。但是，总有对象字面量表述乏力的时候，比如，我想创建一个长度为 6 的空数组，用对象字面量的方式是无法创建的，因此只能写成下述代码这样。// 使用 Ar.
2021-01-27 23:05:55
304
2
原创 javaScript设计模式——享元模式（十二）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...
2021-01-23 18:22:34
166
原创 javaScript设计模式——组合模式（十）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...
2021-01-22 16:15:36
254
原创 javaScript设计模式——状态模式（八）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...
2021-01-22 14:33:09
138
原创 javaScript设计模式——策略模式（七）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式原型模式桥接模式组合模式命令模式享元模式...
2021-01-21 15:15:48
161
原创 javaScript设计模式——命令模式（十一）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...
2021-01-14 22:04:47
111
原创 javaScript设计模式——桥接模式（九）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...
2021-01-12 22:11:45
117
1
转载 图解 Promise 实现原理—— 基础实现
摘要 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。 ...
2021-01-12 21:20:06
262
原创 javaScript设计模式——观察者与发布订阅者模式（六）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式原型模式桥接模式组合模式命令模式享元模式...
2021-01-09 16:48:03
173
原创 git常用命令大全
git init //初始化git仓库git remote add origin git@server-name:path/repo-name.git // 添加/关联一个远程仓库git remote rm origin // 删除远程仓库origingit remote update origin -p //更新远程分支git status // 查看本地工作区及暂存区状态git branch // 查看本地分支git branch -a // 查看分支信息(包括远程仓库的分支信息)
2021-01-07 22:24:38
61
原创 javaScript设计模式——代理模式（五）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式代理模式为一个对象提供一个代用品或占位符，以便控制它的访问。当我们不方便直接访问某个对象时，或不满足需求时，可考虑使用一个替身对象来控制该对象的访问。替身对象可对请求预先进行处理，再决定是否转交给本体对象用生活中的例子简单的描述一下1、你自己不太方便买一件商品，可以通过找代购帮你买，然后代购买好东西后交给
2020-12-30 17:10:30
136
原创 javaScript原型与原型链
一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.name)
2020-12-27 18:57:52
137
原创 javaScript设计模式——装饰器模式（四）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。意图动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。主要解决一般的，我们为了扩展一个类经常使用继承方式实
2020-12-26 23:48:38
160
原创 javaScript常用的设计模式——适配器模式（三）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式适配器模式（Adapter Pattern）是作为两个不兼容接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。举个真实的例子，读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器，再将读卡器插入笔记本，这样就可以
2020-12-23 21:51:52
154
1
原创 javaScript常用的设计模式——单例模式（二）
设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式单例模式要求一个类只有一个实例化对象存在这个实例化对象必须提供一个全局对外访问方式这个实例化对象应当是私有的，不能被外界直接访问或者更改使用场景引用第三方库（多次引用只会使用一个库引用，如 jQuery）弹窗（登录框，信息提升框）购物车 (一个用户只有一个购物车)全局态管理 store (Vu
2020-12-21 14:59:47
177
3
原创 vue中UEditor富文本编辑器实现自定义上传图片
UEditor自定义图片上传使用UEditor上传图片时，会出现如下情况，需要后端配置，所以我在这里通过iview自定义的封装了个图片上传1.模板封装<template> <div class="editor-wrapper"> <vue-ueditor-wrap v-model="editorHtmlData" :config = myConfig @beforeInit="addCustomButtom"></vue-ue
2020-12-17 17:21:40
2742
5
原创 vue中富文本编辑器 vue-ueditor-wrap 的使用
最近的vue项目中用到了编辑器，刚开始使用的wangeditor，但后来由于满足不了更多的需求，现换成了百度的UEditor，踩了很多坑，现在记录一下1.下载UEditor相关静态文件链接：https://pan.baidu.com/s/15bUMrmCBt8I69P4lzNZtIA提取码：5ybv2.修改UEditor目录 并引入项目顺利解压完之后，将文件直接放到到项目的public文件中。下载完之后，还会有ueditor.all.js和ueditor.parse.js方便查看源代码（我这.
2020-12-17 17:18:57
6161
4
原创 vue+iview+wangeditor相关配置+实现图片上传功能
wangeditor 这个插件实现的编辑器功能比较简单，如果想要更全一点的功能，可以使用vue-ueditor-wrap先看一下实现后个效果吧下载依赖npm install wangeditor实现//editor组件<template> <div class="editor-wrapper"> <div :id="editorId" class="editor"></div> </div><
2020-12-17 16:17:36
506
2
原创 在vue中使用字符串模板拼接的点击事件@click时点击事件失效
在vue中使用字符串模板拼接的点击事件@click时，点击事件失效处理办法1.将@click 改成onClick str = `<p class="riskType"><strong>风险点：</strong> <a onClick="riskBox('${item.riskContent}','${item.riskTypeName}')">审查建议</a></p>`2、在生命周期mounted中赋值方法给window对象，
2020-12-16 14:58:24
2877
3
原创 javaScript常用的设计模式——工厂模式（一）（简单工厂、工厂方法、抽象工厂）
一、简单工厂概念： 简单工厂模式属于类的创建型模式，又叫静态工厂方法模式。通过专门定义一个工厂类来负责创建其他类的实例，被创建的实例通常都具有共同的父类举例说明：现在有个工厂，可以生产美式咖啡，卡布奇诺咖啡，拿铁咖啡，通过外界的订单来生产产品。代码实现：class Coffee{ constructor(name){ console.log(name) }}class AmericanoCoffee extends Coffee{}class Cappucci
2020-12-15 22:39:30
494
原创 javascript 实现给定一个排序数组，你需要在原地删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度（leetcode 24题）
给定一个排序数组，你需要在 原地 删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。示例 1:给定数组 nums = [1,1,2], 函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为 1, 2。 你不需要考虑数组中超出新长度后面的元素。示例 2:给定 nums = [0,0,1,1,1,2,2,3,3,4],函数应该返回新的长度 5, 并且原.
2020-12-14 16:18:52
576
原创 javascript 罗马数字转字符串(leetCode 13题）
题目罗马数字包含以下七种字符: I， V， X， L，C，D 和 M。字符数值I1V5X10L50C100D500M1000例如， 罗马数字 2 写做 II ，即为两个并列的 1。12 写做 XII ，即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。通常情况下，罗马数字中小的数字在大的数字的右边。但也存在特例，例如 4 不写做 IIII，而是 IV。数字 1 在数字 5 的左边，所表示的数等
2020-12-14 15:16:53
131
原创 webpack开发环境和生产环境性能优化
开发环境性能优化1、优化打包构建速度（1）HMR（热模块替换）构建的时候如果只有一个模块变化，那么只构建这一个模块，其他模块用缓存，极大提升构建速度，体验更好devServer:{hot:true}html （一般只有一个模块，不需要处理，开启热模块后，会存在问题，需要在入口处，引入html文件，eg：entry：[‘./src/index.js’,’./src/index.html’]）css（style-loader内部已经做了处理）js（需要自己配置,不能对入口文件做处理）//如果
2020-12-13 22:26:36
355
原创 webpack5打包错误（ Cannot find module ‘webpack-cli/bin/config-yargs）
错误 Error: Cannot find module 'webpack-cli/bin/config-yargs//paskage.json"devDependencies": { "webpack": "^5.2.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0"}解决：//卸载当前的 webpack-cli npm uninstall webpack-cli//安装 webpack-cli
2020-12-08 20:29:26
482
原创 webpack5打包错误（Automatic publicPath is not supported in this browser ）
Automatic publicPath is not supported in this browser 错误解决方法：//在webpack.config.js文件中添加module.exports = { output: { publicPath: './' }}
2020-12-08 20:27:02
605
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人