- 博客(39)
- 收藏
- 关注
RSS订阅
原创 简单实现节流函数和防抖函数，我奶奶看完都懂了
在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。今天自己翻阅了一些资料之后，来简单的谈谈我对节流函数和防抖函数的理解，希望能帮助大家理解；节流函数顾名思义，就是节省流量节...
2019-09-04 13:28:43
486
原创 前端常用设计模式
设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结，设计模式并不是一种固定的公式，而是一种思想，是一种解决问题的思路；使用设计模式是为了可重用代码，让代码更容易被他人理解，保证代码可维护性。
2023-11-07 09:06:07
337
原创 JavaScript设计模式——命令模式
命令模式是JavaScript设计模式中行为型的一种设计模式； 定义： 向某些对象发送请求，但是并不知道被请求的操作具体是什么，所以我们希望以一种松耦合的方式来设计程序，使得请求发送者和接收者之间能够消除彼此之间的耦合关系；而我们的这种松耦合的方式就是命令模式； 白话解释： 假如你是你们公司研发部门团队leader，这时你们领导分布给你一个任务，你粗略的看了一下，很...
2019-10-25 11:00:21
385
原创 JavaScript设计模式——职责链模式
职责链模式是设计模式中行为型的一种设计模式； 定义： 使多个对象都有机会处理请求，从而避免请求的发送者与接收者之间的耦合关系，将这些处理请求的对象形成一个链，并沿着这个链传递请求，直到有一个对象处理它为止； 白话解释： 作者坐标武汉，1000+万人口的新一线城市 ；以早高峰公交为例，早上早高峰的时候通常都是公交车前门拥堵，以至于没办法刷卡乘车；但是后门相对来说会...
2019-10-23 15:52:46
358
原创 JavaScript设计模式——代理模式
代理模式属于设计模式中结构型的设计模式； 定义： 顾名思义就是为一个对象提供一个代用品或占位符，以便控制对它的访问！ 白话解释： 很多明星都是有经纪人的，如果要联系明显进行商演或者开演唱会之类的商业活动通过是需要先跟经纪人取得联系的，跟经纪人谈好了合作事宜之后经纪人再转达给某明星，然后某明星才会去参加活动；同样租房也是一个同样的道理，我们不管是租房还是买房，第一...
2019-10-21 16:38:25
276
原创 JavaScript设计模式——适配器模式
适配器模式是设计模式行为型模式中的一种模式； 定义： 适配器用来解决两个已有接口之间不匹配的问题，它并不需要考虑接口是如何实现，也不用考虑将来该如何修改；适配器不需要修改已有接口，就可以使他们协同工作； 白话解释： 你买了某种电器产品，准备带回家好好感受该款产品的魅力；结果带回家之后准备通电使用的时候，发现该产品仅支持两孔插座，而你家里的电源插座都是三孔插座；这个...
2019-10-19 10:36:53
492
原创 JavaScript设计模式——策略模式
策略模式是JavaScript设计模式中行为型的设计模式； 定义：定义一系列算法，并将这些算法各自封装成策略类（方法），然后将不变的部分和变化的部分分离开来，并且这些算法可以相互替换 白话解释： 实际上所谓的策略模式就是值根据不同的策略来执行不同的方法，是不是很类似与if-else分支判断；但是策略模式是用来解决多重条件判断语句的； 使用场景： ...
2019-10-18 14:58:09
228
原创 JavaScript设计模式——观察者模式
观察者模式又被称为发布-订阅模式，是设计模式中的一种行为型模式； 定义： 观察者模式定义了一种一对多的对象依赖关系，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知； 白话解释： 假如你去苹果专卖店买最新款的iphone11，因为iphone11刚出来不久，正处旺季，供货不足；当你去专卖店的时候，店员告诉你暂时没货了，但是你可以留下你的联系方式，如果货到了，...
2019-10-17 11:54:27
376
原创 JavaScript设计模式——原型模式
原型模式： 原型模式是指原型实例指向创建对象的种类，并通过拷贝这些原型创建新的对象，是一种用来创建对象的模式，也就是创建一个对象作为另一个对象的prototype属性； prototype警告：学习了解原型模式前需先学习原型、原型链、prototype、__proto__、constructor等知识；（https://www.cnblogs.com/dengyao-b...
2019-10-14 15:45:09
196
原创 CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了；先上效果图：原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的；首先新建一个div，画出提示框的轮廓<div class="demo"></div>给定样式： ...
2019-10-12 16:06:23
1222
原创 Javascript设计模式——建造者模式
建造者模式是相对比较简单的一种设计模式，属于创建型模式的一种； 定义：将一个复杂的对象分解成多个简单的对象来进行构建，将复杂的构建层与表现层分离，使相同的构建过程可以创建不同的表示模式； 优点：建造者模式的封装性比较好，创建对象和构建过程解耦； 建造者模式很容易扩展，当我们需要扩展的时候，通过一个新的建造者就可以实现； 模式作用：分步创建一个复杂的对象 解耦封...
2019-10-12 14:12:50
230
原创 JavaScript设计模式——单例模式
单例模式也称为单体模式，规定一个类只有一个实例，并且提供可全局访问点； 在读这篇文章之前，也许你对单例模式的概念感到模糊或者不清楚，但是其实在日常的开发中你肯定用到过单例模式； JavaScript中没有类的定义，单例模式的特点是”唯一“和”全局访问“，那么我们可以联想到JavaScript中的全局对象，利用ES6的let不允许重复声明的特性，刚好符合这两个特点；是的，全局对象是最...
2019-10-11 11:26:50
203
原创 JavaScript设计模式——工厂模式
在介绍工厂模式之前，首先我们要理解一下什么是设计模式？什么是设计原则？ 设计模式: 通常在我们解决问题的时候，很多时候不是只有一种方式，我们通常有多种方式来解决；但是肯定会有一种通用且高效的解决方案，这种解决方案在软件开发中我们称它为设计模式； 设计模式并不是一种固定的公式，而是一种思想，是一种解决问题的思路；恰当的使用设计模式，可以实现代码的复用和提高可维护性；...
2019-10-10 14:06:05
749
原创 简单理解Vue中的nextTick
Vue.nextTick是Vue官方给我们提供的一个API（方法），作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM； 那么我们的理解是：当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是...
2019-10-07 15:29:55
268
原创 vue-router路由元信息及keep-alive组件级缓存
路由元信息？（黑人问号脸？？？）是不是这么官方的解释很多人都会一脸懵？那么我们说meta，是不是很多人恍然大悟，因为在项目中用到或者看到过呢？ 是的，路由元信息就是我们定义路由时配置的meta字段；那么这个meta的作用是什么呢？ 首先看一个场景： 通常我们在开发网站或者移动应用的时候，我们通常会有网页权限验证的需求（别说你没有，你肯定有），这种需求一般是指需要登录后才可...
2019-09-28 16:03:37
349
原创 Webpack配置区分开发环境和生产环境
在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境； 当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点： 开发环境的需求...
2019-09-27 15:55:02
3969
1
原创 理解Vue.mixin，利用Vue.mixin正确的偷懒
关于Vue.mixin在vue官方文档中是这么解释的： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 我们的理解：Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载...
2019-09-26 13:37:56
255
原创 HTML5实现首页动态视频背景
话不多说，先看效果图：炫酷吗？你想实现这种动态视频作为背景的首页吗？来，一起来学习，本文将带你一起实现H5动态视频背景；首先网上找一段清晰的视频下载下来，最好是MP4格式的；下载好了之后我们新建一个html文件来写代码：html代码： <video id="v1" autoplay loop muted> <source src="....
2019-09-25 15:01:45
16865
4
原创 一个web前端开发者的日常唠叨
时间飞逝，距离上一次更新博客已经过去了三个月，上一篇博客的发布时间停留在了4月4日。 近来三个月没有更新博客，深感抱歉和愧疚。停更博客就意味着学习的越来越少，作为一个普通的前端开发者来说这是万万不可取的。近日入职了一家新公司，在上一家公司里只是草草的待了三个月，导致离职的原因有很多，这里就不赘述了；近日入职新公司，由于还没进项目组闲暇时间还比较多，就写写博客跟开发朋友们聊聊前端开发；...
2019-09-25 14:25:40
315
原创 vue-router钩子函数实现路由守卫
接上一篇，我们一起学习了vue路由的基本使用以及动态路由、路由嵌套以及路由命名等知识，今天我们一起来学习记录vue-router的钩子函数实现路由守卫； 何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦...
2019-09-24 11:10:09
351
原创 Vue路由（vue-router）详细讲解指南
中文文档：https://router.vuejs.org/zh/Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）： route：首先它是个单数，译为路...
2019-09-21 15:09:01
582
原创 一文轻松搞懂Vuex
概念： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（官网地址:https://vuex.vuejs.org/zh/）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 换成我们大白话来说：Vuex就是一个状态管理模式，可以简单的理解为一个全局对象，然后我们可以修改这个全局对象里面的属性或者添加方法，但是我们不能像传统...
2019-09-20 16:49:56
203
原创 利用HBuilder打包Vue开发的webapp为app
众所周知，前端开发完成的webapp只能运行在浏览器上，对运行环境有一定的限制，也就是除了浏览器其他的环境下不支持；那么现在如果有个需求是这样的呢？需要一套代码三端运行呢？三端运行（黑人脸？？）是的，三端运行即web端，安卓端和IOS端 ；先别急着说实现不了和不可能，利用HBulder来试试；HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBu...
2019-09-16 14:53:37
1066
原创 前端项目自动化构建工具——Webpack入门教程
参考资料：https://www.webpackjs.com/（中文文档） https://www.webpackjs.com/（官方文档） 首先有必要说明一下，本文侧重讲解webpack基本配置属性，不附带实例，将会以通俗易懂的形式地讲解；如若需要实例进行相关练习，可将本文作为理论基础； Webpack是前端项目自动化构建工具，本质上，webpack是一个现代 JavaSc...
2019-09-16 11:35:56
239
原创 简单粗暴详细讲解javascript实现函数柯里化与反柯里化
函数柯里化（黑人问号脸）？？？Currying（黑人问号脸）？？？妥妥的中式翻译既视感；下面来一起看看究竟什么是函数柯里化： 维基百科的解释是：把接收多个参数的函数变换成接收一个单一参数（最初函数的第一个参数）的函数，并返回接受剩余的参数而且返回结果的新函数的技术。其由数学家Haskell Brooks Curry提出，并以curry命名。 概念往往都是干涩且难懂的，...
2019-09-09 14:54:58
322
原创 大白话通俗易懂的讲解javascript原型与原型链（__proto__、prototype、constructor的区别）
javascript原型和原型链是js中的重点也是难点，理论上来说应该是属于面向对象编程的基础知识，那么我们今天为什么要来讲这个呢？（因为我也忘了，最近看资料才揭开面纱…… 哈哈哈） 好了，直接进入正文。在js的编程世界中，万物皆对象；不管你是数组还是函数还是对象，都是属于对象类型；那么这么多对象，如何进行管理呢？js中把对象分为实例对象、函数对象、原型对象三大类； 实例...
2019-09-07 16:02:43
326
原创 简单详细讲解js闭包（看完不懂你砍我！！！）
《javascript高级程序设计》中闭包的概念： 闭包，其实是一种语言特性，它是指的是程序设计语言中，允许将函数看作对象，然后能像在对象中的操作般在函数中定义实例（局部）变量，而这些变量能在函数中保存到函数的实例对象销毁为止，其它代码块能通过某种方式获取这些实例（局部）变量的值并进行应用扩展。 我们的理解： 其实闭包就是一个函数，一个外部函数通过调用函数并r...
2019-09-06 17:21:44
161
原创 javascript简单实现深浅拷贝
深浅拷贝知识在我们的日常开发中还算是用的比较多，但是之前的状态一直都是只曾听闻，未曾使用（其实用了只是自己没有意识到），所以今天来跟大家聊一聊js的深浅拷贝； 首先我们来了解一下javascript的数据类型，在ES5版本的js中我们的javascript一共有6种数据类型，分别是： Number（数值型）、String（字符串）、Boolean（布尔型）、Object（对象，o...
2019-09-05 16:10:59
184
原创 关于JSON解析的问题（js序列化及反序列化）
我们都知道，现在的开发模式都是前后端分离的，后台返回数据给前端，前端负责数据交互并渲染到页面，所以我们需要从后端接口上获取数据显示到页面上。在接受服务器端数据数据时，一般是字符串。这时，就需要用到JSON里面的API来进行转换了；JSON.parse()parse()方法用于从一个字符串中解析出JSON对象例：var str='{"name":"xianyu","age":"21"}'经...
2019-09-04 14:09:20
794
原创 H5中的history方法Api介绍
最近公司在做一个微信公众号，看了项目源码，看到项目中用到了history的Api来进行控制浏览器的历史记录及前进/后退键；下面来跟大家一起来捋捋history的Api方法和使用：history.pushState(data,title,url)：在浏览器中新增一条历史记录；data会在onpopstate事件触发时作为参数传递过去，title为页面标题，url为页面地址；history.r...
2019-09-04 14:07:25
936
原创 vue.js中ref及$refs的使用及讲解
关于ref和$refs的用法及讲解，vue.js中文社区（ https://cn.vuejs.org/v2/api/#ref ）是这么讲解的： ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件；vue.js中文社区文档上的说明已经就比较通俗易懂了，其实...
2019-09-04 14:05:06
2988
原创 vue中的v-if和v-show的区别
v-if和v-show的区别是前端面试中常问的基础知识点，v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢？v-if和v-show的区别又是什么呢？首先我们可以来看一下Vue中文社区说明文档的介绍:Vue中文社区说明文档中简单来说是：初始渲染的时候进行条件判断展示；在实际开发中我们会经常使用到v-if和v-show来进行判断展示，我们可以这么理解：<...
2019-09-04 14:02:10
671
原创 vue-cli+v-charts实现可视化图表
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具，在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。v-charts的中文社区文档（...
2019-09-04 13:59:16
1724
原创 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题
HTML5实现一键拨号，一键发短信以及上传头像等问题都是比较常见的场景，近期在做移动端项目的时候遇到阻挠，通过查找资料解决了问题；废话不多说，直接上案例代码；HTML5实现一键拨号：<a href="tel:151********" class="phone">HTML5实现一键发短信：<a href="sms:151********" class="message"...
2019-09-04 13:56:06
302
原创 vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下：方法一：params传参：this.$router.push({ name:"admin", //这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) ...
2019-09-04 13:54:00
6662
3
原创 AntV F2+vue-cli构建移动端可视化视图
AntV F2是蚂蚁金服旗下的一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。AntV F2官方文档地址：https://antv.alipay.com/zh-cn/f2/3.x/话不多说，直接进入正题：Antv F2官方比较友好，给我...
2019-09-04 13:52:18
2807
原创 vux-scroller实现移动端上拉加载功能
本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能：纠错声明：网上查阅资料看到很多人都将vux和vuex弄混，在这里我们先解释一下，vuex是vue框架自带的组件，是数据状态管理工具，vux是一款移动端的UI组件库；vux（官方文档：https://doc.vux.li/zh-CN/）是基于WeUi和vue（2.x）开发的移动端的UI组件库，主要服务于微信页面。基于we...
2019-09-04 13:47:10
556
原创 vue实现手机号码的校验（防抖函数的应用场景）
上一篇博文我们讲到了节流函数的应用场景，我们知道了节流函数可以用在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应用场景： 通过上一篇博文的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次； 如果对防抖函数原理有疑惑，请点击链接跳转到关于防抖函数讲解的...
2019-09-04 13:44:11
1080
原创 vue实现输入框的模糊查询（节流函数的应用场景）
上一篇讲到了javascript的节流函数和防抖函数，那么我们在实际场合中该如何运用呢？ 首先，我们来理解一下：节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数；
2019-09-04 13:39:06
4895
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人