- 博客(80)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 python设计模式之单例模式
单例模式经典的实现方式是，创建一个类，这个类包含一个方法，这个方法在没有对象存在的情况下，将会创建一个新的实例对象。如果对象存在，这个方法只是返回这个对象的引用
2020-03-19 11:15:13
204
原创 前端实现复制功能
由于clipboard.js功能复杂,且体量过大.本文将在其基础上删减部分代码实现更小,更快的赋值功能// 改写的Clipboard.js代码(更快更简洁更小)class ClipboardAction { /** * @param {Object} options */ constructor(options) { this.resolv...
2020-03-12 11:01:16
987
原创 判断地图上的点是否在区域内的方法
// 地图的工具类(使用平台,小程序,h5,pc等)const EARTHRADIUS = 6370996.81;const mapUtils = (function() { const GeoUtils = function () { }; // ------添加静态方法------- /** * 判断点是否在矩形内 * @param...
2020-03-01 16:09:14
3133
原创 charles使用合集
1. Charles教程1：安装及证书的导入2. Charles教程2：如何拦截、修改、发送请求3. Charles教程3：如何修改响应内容4. charles教程4：如何跨域
2020-12-28 14:04:28
307
原创 前端实现页面水印
前端实现页面水印的思路,先将名称画到canvas上,再将canvas生成base64图片格式作为盒子的背景图追加到页面上,其中利用pointer-events: none属性实现点击穿透.
2020-04-20 16:26:35
1363
原创 页面元素全屏以及退出全屏的方法
一. 页面元素全屏function requestFullScreen(elem) { // 兼容不同的浏览器 var requestMethod = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullScreen; ...
2020-03-04 14:49:45
594
原创 前端本地储存的二次封装
一. sessionStorage的封装const PREFIX = 'cache_';class Store { constructor(device) { this.store = device; } get(key) { return this.store.get(key); } set(key, value)...
2020-02-16 00:00:47
336
原创 js实现下载excel
excel是常见的表格处理工具,那么前端怎么实现excel生成与下载呢?我们利用xlsx.js来实现一. 安装js-xlsxnpm install xlsx二. 文档简介完成的XLSX对象:需要理解的术语:1 workbook是xlsx读取excel内容后的js对象,读取到内容后可以对表格进行操作;同样的也可以创建一个空的workbook,往其中写入内容完整的workbook对象...
2020-02-06 17:41:34
6563
原创 javaScript中的call()、apply()、bind()的用法终于理解
其实是一个很简单的东西，认真看十分钟就从一脸懵B 到完全 理解！先看明白下面：例1obj.objAge; //17obj.myFun() //小张年龄undefined例2shows() //盲僧比较一下这两者this 的差别，第一个打印里面的this 指向obj，第二个全局声明的shows()函数 this 是window ；1，call()、apply()、bind(...
2020-01-03 17:08:06
126
原创 小程序-相册授权
今天我们讲一讲小程序里相册授权的问题。一、询问是否拥有相册权限// 先询问权限的问题checkWriteAlbumAuth() { return new Promise(resolve => { wx.getSetting({ success(res) { resolve(res.authSetting['...
2019-12-19 20:41:39
2933
原创 前端骨架屏实践
前端骨架屏的实践:在众多的前端开发产品中,对于loadding的致敬是非常多的，今天讨论下骨架屏（Skeleton Screen）实现的几种方式以及实例。一、 gif动画形式在pc端这种菊花图已经占领很大市场了，具体的应用如下：<template> <div> <img v-if="iShowLoading" src="loading.gif" /&g...
2019-12-10 14:18:36
567
原创 IntersectionObserver的实践
在小程序里面提供了createIntersectionObserver来实现监听目标元素与视窗的位置变化wx.createIntersectionObserver(Object component, Object options)利用这个API，可以轻松实现滚动定位功能：实现的整体思路：先实现根据页面的滚动，导航条高亮到具体的内容模块再实现点击对应的导航，页面再滚动到具体的内容区域...
2019-11-24 20:12:23
1228
原创 杂谈: this指向问题
this指向在前端的代码里,是最常见的运用技巧,那么搞清this指向,也就就能梳理更清晰的逻辑,避免bug的产生.一 this指向大全1. 全局的this指向window2. 函数内部的this指向window3. 对象里的方法中的this指向这个对象4. ---------以上内容总结为: this指向其调用者------------5. 箭头函数的this是定义其所在的对象而不是使...
2019-09-25 00:16:55
264
原创 axios的封装
axios是现在前端最常用发请求的工具库,本文将对axios进行封装第一步: 引入axioscnpm install axios -S第二步: 封装get/post/put等方法import axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.def...
2019-08-18 16:00:17
401
原创 VUE组件通信深入一:八大常用通信方式
在理解VUE组件传值深入之前,我们必须理解基础的VUE传值的方式:这里有一篇文章介绍VUE传值的方式现在VUE的传值的主要方式有:params与query传值方式props down 与 event up传值(props下发event上传)provide 和 inject方式slot内容分发,也可以传值eventBus第三方bus的传值方式vuex全局状态实现传值localsto...
2019-08-18 15:24:45
644
原创 react样式的私有化方法
由于react的样式管理是比较弱的，官方是建议把style直接写到jsx标签里当然这种处理的方式显然不是特别适合,这样就造成了样式与标签耦合在一起了,我们知道在VUE中的利用scoped做到了样式私有化,react的样式私有化有以下几种处理方法:1.利用css module来解决这里有一篇关于css modoule的文章在create-react-app中使用css modules的方法...
2019-08-18 01:09:15
4721
1
转载 react生命周期详解
开局一张图,内容全靠编:一、初始化阶段1、设置组件的默认属性static defaultProps = { name: ‘sls’, age:23 }; //or Counter.defaltProps={name:‘sls’}2、设置组件的初始化状态constructor() { super(); this.state = {number: 0} }3、componentWillM...
2019-08-12 23:34:42
138
原创 前端八大安全问题总结及解决措施
前端的常见安全问题总结:http://www.ciotimes.com/InfoSecurity/139333.html
2019-08-05 20:00:26
1486
原创 javaScript设计模式之策略模式
1.概念介绍策略模式(Strategy Pattern)：封装一系列算法，支持我们在运行时，使用相同接口，选择不同算法。它的目的是为了将算法的使用与算法的实现分离开来。策略模式通常会有两部分组成，一部分是策略类，它负责实现通用的算法，另一部分是环境类，它用户接收客户端请求并委托给策略类。2.优缺点2.1优点有效地避免多重条件选择语句；支持开闭原则，将算法独立封装，使得更加便于切...
2019-07-23 22:37:01
197
转载 深入浅出之JS闭包
一 定义:MDN对闭包的定义为:闭包是指那些能访问到自由变量的函数那什么是自由变量呢?自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量举个例子:let x = 10;由此可以看出闭包由两部分组成:闭包 = 函数 + 函数能够访问到的自由变量举个例子:var a = 1;function foo() { console.log(a);}...
2019-07-15 22:12:28
222
原创 javascript设计模式之单例模式
一 什么是单例模式单例模式之所以这么叫，是因为它限制一个类只能有一个实例化对象。经典的实现方式是，创建一个类，这个类包含一个方法，这个方法在没有对象存在的情况下，将会创建一个新的实例对象。如果对象存在，这个方法只是返回这个对象的引用二 实现一个单例模式2.1 ES6的class写法class Singleton { static instance = null ...
2019-07-10 23:07:20
375
原创 格式化日期的工具库
因为Date对象里没有格式化日期的方法,但是日常操作中,我们却经常用到,很多同学喜欢直接引入moment.js这个第三方工具库,但是moment.js是一个非常大且强壮的开源库,如果对于小型应用,并不适合,所以我们直接封装一个小型的格式化日期的JS
2019-06-24 22:36:10
483
原创 VUE中$set与$nextTick的使用
在VUE的使用中,可能很多开发者都遇到过当改变了数据的时候,视图并没有产生变化,这时就需要用到这两种API来解决了首先,我们先总结下那些情况下会遇到视图不更新的情况:为对象新增一个属性改变数组的长度,交换数组的顺序,利用索引修改数据另外VUE包装了观察数组的变异方法,它们能触发视图的更新:push()pop()shift()unshift()splice()sort...
2019-05-02 21:52:09
3883
原创 webpack项目运用(一)打包压缩css文件
在webpack里我们会遇到一些关于压缩打包css的场景歌,本文就教大家如何实现:一. webpack解析css的loader因为webpack没有loader的情况下只能打包js文件,所以我们需要特定的loader来打包我们的css文件.常用的loader:css-loader用于解析css文件sass-loader用于解析scss文件style-loader将css文件生成字符串...
2019-04-11 22:35:50
2726
原创 vue组件通信深入二: pubsub.js
VUE组件通信除了我在VUE组件通信一里面提及的方式之外,还有一种比较常用的通信方式:pubsub.js实现组件之间的通信一 什么是pubsub.jspubsub.js是一种发布订阅者模式,它为组件之间的通信提供了更方便快捷的方式.关于pubsub.js更多内容,请点击二 在项目快速的运用为了在项目里快速运用这个库,我们对其进行一个封装import PubSub from 'pubsu...
2019-04-02 23:00:17
1834
原创 vue-grid-layout组件的改装--暴露布局方法
vue-grid-layout是一个非常优秀的vue栅格拖动布局的组件,使用方法请参考官网属性 GridLayout参数:layout类型：Array必需：true这是网格的初始布局。值必须是 Object 项的Array。 每个项目必须有 i，x，y，w 和 h proprties。 有关详细信息，请参阅 GridItem 文档 below。colNum类型：Number必需...
2019-03-28 23:17:47
28685
原创 数组与对象的浅拷贝与深拷贝
一 浅拷贝浅拷贝: 当拷贝的数据是对象,对象里的 1) 属性值是基本数据类型,那么拷贝的是地址, 2) 属性值是复杂引用类型,那么拷贝的是地址浅拷贝只解决了第一层的问题,拷贝的第一层如果是引用类型,拷贝的还是地址1.1 对象的浅拷贝1.1.1 Object.assgin()方法Object.assgin()//将所有可以枚举属性的值从一个或多个源对象复制到目标对象,返...
2019-03-19 22:27:22
461
原创 quill-editor实现自定义按钮,上传图片到服务器,获取文本内容并展示
quill-editor是一款非常强大的富文本组件,在最近的项目里也是使用到了,附上:插件源码使用也是非常简单:一.下载Vue-Quill-Editornpm install vue-quill-editor --save二.在vue里的组件中使用&amp;amp;amp;amp;lt;template&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div class=&amp;amp;a
2019-02-21 22:20:43
6869
3
原创 数组 对象 字符串高级API
一. 改变对象的属性名let jsonObj = [ { &amp;amp;amp;amp;amp;amp;amp;amp;quot;_id&amp;amp;amp;amp;amp;amp;amp;amp;quot;: &amp;amp;amp;amp;amp;amp;amp;amp;quot;123456&amp;amp;amp;amp;amp;amp;amp;amp;quot;, &
2019-01-14 22:25:43
1095
2
原创 VUE生命周期深入理解
一 基础的生命周期理解上面的图片详细解释了生命周期钩子里应该做哪些事情,诸位可以自行取舍,下面我们结合案例总结下:created钩子: 发ajax请求mounted钩子: 也可以发送ajax请求,更多的是操作DOM元素updated钩子: 可以用来监听路由变化beforeDestroy钩子: 记录当前页面的一些数据destroy钩子: 清楚定时器等二 深入理解生命周期上面的内...
2018-12-25 23:03:56
569
原创 git常用的操作
git是很多公司使用的版本控制工具，今天就来说一下git使用的大体流程：1 下载git在使用Git前我们需要先安装 Git。Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行。Git 各平台安装包下载地址为：http://git-scm.com/downloads2 配置gitGit 提供了一个叫做 git config 的工具，专门用来配置或读...
2018-12-02 20:57:13
418
原创 响应式图片
最早接触bootstrap框架里面对图片的响应式处理是这样做的:给所有的图片一个img-responsive类而这个类里面的利用css属性来做到响应式一. 利用类名响应式图片&lt;img src="test.png" class="img-responsive" alt=""&gt;响应式类的具体做法:.img-responsive { di
2018-11-22 11:35:17
455
原创 JS中函数深入理解
本期拿两个面试题来充当内容:一 函数作为返回值的运用要求实现下面的形式:add(1)(2)(3) 最终的结果是6初次看到这个题,很多人都是一脸懵逼,现在我们来解析一下,这个无非是函数的多次调用,我们改变下题型,相信很多人就能看懂了.const fn1 = add(1)const fn2 = fn1(2)const fn3 = fn4(3)这样表示函数的每次的返回值又是一个函数,...
2018-11-20 23:00:21
377
原创 token
首先说下,怎么碰到这个问题的,面试的一家公司问我TOKEN是什么?一脸懵逼…一.什么是tokenToken 的中文有人翻译成 “令牌”，意思就是，你拿着这个令牌，才能过一些关卡.一般用来做登录校验或则身份验证.二.传统的身份验证(session的方法)HTTP 是一种没有状态的协议，也就是它并不知道是谁是访问应用。这里我们把用户看成是客户端，客户端使用用户名还有密码通过了身份验证，不过下回...
2018-11-15 23:06:55
805
原创 登录校验的实现
在前端领域,一个避不开的话题就是登录验证的实现,本文将通过3种方式来实现登录验证:一 php+js实现登录验证开发时,前后端分离提供的接口如下:## 用户登录的接口type : posturl : api/doLogin.phpdata : password email响应体: ok 或则 fail## 判断登录成功的接口type : get url...
2018-11-07 21:53:44
6059
转载 Vue通信、传值的多种方式，详解（都是干货）
Vue通信、传值的多种方式，详解（都是干货）：&nbsp;&nbsp;一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）this.$router.push({ path: '/conponentsB', query: ...
2018-11-05 12:56:26
726
转载 彻底搞清楚javascript中的require、import和export
原文地址: https://www.cnblogs.com/libin-1/p/7127481.html一 为什么有模块概念理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了二 模块化时代2.1 require时代Javasc...
2018-10-30 15:51:51
1174
原创 Vue中computed，watch，Methods的比较
我们都知道在Vue构造函数的参数对象中有一个【data】属性，该属性值是一个对象，该对象是对数据的代理，是一个键值对并且时刻与页面表现是一致的，但是这里面只能是简单的键值对，不能拥有业务逻辑，并且由于【data】中的属性属于同一个生命周期，所以如果我们需要某一个属性是依赖于另外一个属性时，在【data】中是做不到的，于是Vue为我们提供了【计算属性】一 computed计算属性：在构造函数的...
2018-10-27 16:08:24
651
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人