JS
聂大哥
前端技术爱好者,有问题可私聊
展开
-
PubSub原理解析并简单实现其源码
该方法接受两个参数:主题和订阅器对象。首先检查该主题是否有任何订阅器对象。否则,找到该订阅器对象在数组中的索引,然后使用splice方法从数组中删除该订阅器对象。否则,对该主题的所有订阅器对象进行遍历,依次调用每个订阅器对象的方法,并传递消息作为参数。如果该主题还没有任何订阅器对象,则需要先创建一个空数组,然后将订阅器对象添加到数组中。该实现中,PubSub对象包含三个方法:subscribe、publish、unsubscribe,以及一个名为subscribers的对象,它保存了所有订阅器对象的信息。原创 2023-03-01 15:04:01 · 376 阅读 · 0 评论 -
React父组件调用子组件方法及子组件调用父组件方法
React中分为类式组件和函数式组件,目前大多都用函数式组件,这里也都分别进行举例。原创 2023-01-17 15:46:53 · 2256 阅读 · 0 评论 -
前端数据请求Loading方案
在写业务的时候,你现在是否还再请求调用处一遍遍写showLoading、hideLoading?即使自己对不同组件库的Loading进行二次封装,方便你调用,但这也不是很好的一种解决办法。无论是ElementUI的Loading还是Antd中的,你使用前都必须要先进行导入,这时候你可能会二次封装,将封装后的对象绑定在全局上。这是很常用的一种方法,直到前两天 突发奇想,为什么Loading不能统一写在一个地方,而不需要我们一遍遍的在请求调用处写showLoading、hideLoading呢。原创 2022-11-26 12:39:55 · 1737 阅读 · 0 评论 -
Vue3 中结合 ElementPlus 实现弹窗的封装
Vue3自定义弹窗,知识点包含vue3的emit使用,自定义ref,子组件内容方法向外暴露。原创 2022-09-30 11:40:16 · 3812 阅读 · 2 评论 -
JS中如何使用reduce语法糖来做数据统计!
reduce语法糖的合理使用,整理数据的好助手!原创 2022-09-28 09:43:55 · 517 阅读 · 0 评论 -
Vue2中混入(mixins)的实战应用
统一数据转换、文件下载、流程审批、表格内容合计等功能的实现!原创 2022-09-24 13:37:36 · 2442 阅读 · 0 评论 -
Vue2中如何优雅的实现dialog的封装
优雅封装Dialog弹窗组件,省时省力好维护的高可用组件。原创 2022-09-22 21:04:23 · 1764 阅读 · 0 评论 -
electron-vue初始化项目到打包运行
Electron-vue就是基于vue来构造electron应用程序的样板代码。electron-vue充分利用vue-cli作为脚手架工具,加上拥有vue-loader的webpack、electron-packager或是electron-builder,以及一些最常用的插件,如vue-router、vuex、axios等等。...原创 2022-07-19 10:31:55 · 717 阅读 · 0 评论 -
React render中调用方法传参的几种方式
方式一:方法内写高阶函数方式二:调用函数时改变函数this指向方式三:调用时写回调的形式原创 2022-06-16 17:40:05 · 1596 阅读 · 0 评论 -
ElementUI 表单自定义正则表达式校验文本框
结合element的表单规则方式,需在data的返回中写form和formRules,这里写的自定义规则是要结合formRules,示例如下:在data函数中写自定义规则的方法,在rules中进行使用原创 2022-06-16 17:05:03 · 582 阅读 · 0 评论 -
Canvas简单实现一个刮刮乐
通过canvas实现一个简单的刮刮卡原创 2022-06-12 16:02:39 · 835 阅读 · 1 评论 -
Vue 权限指令的使用,不同情况下的权限控制分析
在日常的开发过程中,我们除了使用Vue已有的指令之外,还需自定义指令,需要对DOM节点进一步操作。在后台系统中,最常用的就是权限指令。权限控制的原理就是在系统当前界面初始化时,判断某些DOM节点有没有权限,没有则移除此DOM。...原创 2022-04-29 23:17:57 · 1546 阅读 · 3 评论 -
从零搭建Axios的封装及处理跨域
本示例是写在Vue项目中,同样的道理可以搬到React等项目中。首先,安装axiosnpm install axios接着直接上手编写request.js,此文件的作用是对axios的创建及请求拦截、响应拦截。import axios from "axios";import { Notify } from 'vant'//创建axios服务,这里可写两个基本参数,baseURL(基础地址,这里写/api是后面做跨域使用)和timeout(请求超时时间)const service = new原创 2021-12-06 14:12:19 · 733 阅读 · 0 评论 -
Vue中自定义组件全局注册安装
有没有考虑过一个问题,在Vue中为什么我们安装了ElementUI或者Antd之后,只需要在main.js中引入ElementUI并use(ElementUI),就可以在项目的任何组件中直接使用Element的任何组件?那我们自己定义的组件可不可以实现这种操作呢?而不是在组件中引入一个个的组件去使用。还像上面这样使用?在PassWordReset组件中引入了TopTip,在ForgetPwd中也引入了TopTip。那就不够优雅了!看我下面的写法,创建一个js文件,名字你可自定义,我这里写了cgi.原创 2021-12-06 09:27:05 · 569 阅读 · 0 评论 -
微信小程序页面跳转传参,参数里含等号被自动截取问题
页面跳转传参时,参数里面如果含有等号的话,等号后面的字符会被自动截取导致参数到另一个页面不完整。为解决这个问题,我们可以使用js中的encodeURIComponent(参数)函数把字符串中的URI进行编码,然后再到另外一个页面解码就OK了。encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。其他字符(比如 :;/?????&=+$原创 2021-02-02 16:27:04 · 1943 阅读 · 1 评论 -
vue将数据导出Excel表格;含文字、图片类型(并有类型的转换)
随着项目进度的前进,到了最后一步需要将数据导出到Excel表格内,并且数据中包含一些类型的转换,和图片类型。正常情况下我们只需要导出文字类型,这是最简单的一种导出方式。那么现在我还有一些类型的转换和图片的导出到表格里,这该如何做?别慌,现在开源的插件有很多能够处理这种情况的,接下来我一步一步的展示,能够让你明白。第一步:安装插件。npm install js-table2excel第二步:引入插件。import table2excel from 'js-table2excel'第三步,处理数原创 2020-10-06 15:57:35 · 4372 阅读 · 12 评论 -
小程序、网页、APP循环数据时重组数据(格式化某字段类型改为所需要的类型)
作为一个前端从事者,对数据的处理也是一种必备技能。所谓的重组数据是什么呢?拿个例子来说:比如在获取某些数据的时候,获取到了一个对象数组的格式数据,在这组数据里面,有些字段不能够直接展示给用户,而需要进行一下转换,时间戳我们需要转为正常日期时间、某些数据的状态值,可能是用数字代表,我们需要转为相对应的文字说明,再例如一个字段里存了多张图片链接,但是此字段是一个字符串,我们又如何把这些值转换为正常的能够显示在界面的数据。接下来,我就讲一下当我们获取到一个对象数组之后,如何对需要处理的字段进行格式化处理。先拿原创 2020-10-05 15:46:20 · 352 阅读 · 0 评论 -
小程序超简单的微信支付前端工作来咯
总的来说微信支付的前端工作就两个步骤。非常简单:第一步:通过向后端请求,获取参数nonceStr、package、paySign、timeStamp。这几个参数必须是通过后端处理返回的数据。也是在下一步调起微信支付必须用到的参数。另外还有一个加密类型可有可无,默认是MD5。wx.request({ url: config.Pay.url, //向后端请求的链接,这里我是封装好的,所以直接调用 method:config.Pay.method, //请求方法类型原创 2020-09-24 12:14:07 · 507 阅读 · 0 评论 -
React Native输入框获取输入的内容、输入框的密码类型
RN并没有form表单,所以想要获取输入的内容,我们必须采取其他方式。rn提供了以下几个方法可以获取输入的值:onChangeText 当文本框内容变化时调用此函数。改变后的文字内容会作为参数传递。onChange 当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。我们可以利用onChageText来获取到内容。首先我们定义state值,用于暂存用户输入的内容。export default class L原创 2020-09-06 12:46:55 · 3126 阅读 · 1 评论 -
React Native导航栏系列(五)createbottomtabnavigator自定义图标实现TabBar
在很多教程中,使用createbottomtabnavigator都是用的icon,需要各种引入组件,甚至还要修改配置文件。我觉得太麻烦了,就想不能使用自定义png图片吗?研究了一番之后,终于解决了这个问题,自己引入png图片作为TabBar的图标。因为此教程是根据前面几篇一同写的,所用知识点能够相互融合,所以这里的TabBar必须要用与前面几篇文章相同的技术原理——页面栈!第一步,安装bottom-tabs(根据你电脑系统选择命令进行安装):npm install @react-navigation原创 2020-09-03 11:22:47 · 5352 阅读 · 2 评论 -
React Native导航栏系列(四)导航栏的配置、修改、自定义导航栏,全屏模式
导航栏的配置也是一项必学知识点。修改导航栏标题、背景色、样式、新增元素等。一、设置标题首先,导航栏的标题可通过options属性来设置。function StackScreen() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} /&原创 2020-09-02 18:22:48 · 4703 阅读 · 1 评论 -
React Native导航栏系列(三)页面跳转传参
接着前两篇文章,我们继续往下学习。页面之间传递参数无论是在App中还是网站、小程序中都是非常重要的。然而各种技术的传参方式也稍有不同。那么RN中的页面传参都有哪几种方式呢?一、是在App.js中,将页面写入页面栈时传的初始参数。 <Stack.Screen name="首页" component={HomeScreen} initialParams={{cscs:'123'}} />initialParams={{cscs:‘123’}}就是首页页面初始化时的参数。你可以在HomeS原创 2020-09-02 00:48:02 · 1679 阅读 · 1 评论 -
React Native导航栏系列(二)
接着昨天的 React Native导航栏系列(一),今天继续了解RN中导航的知识。在应用中,最需要的就是页面之间跳转,返回页面,跳转到指定页面等等一系列页面导航问题。首先,你的应用里所有页面都需要写在页面栈的容器中。 <NavigationContainer> <Stack.Navigator> <Stack.Screen name="首页" component={HomeScreen}/> <原创 2020-09-01 20:32:17 · 485 阅读 · 0 评论 -
React Native导航栏系列(一)
对于RN新手来说,这里面的很多知识点可能会让你觉得很绕。就导航栏来说,就会让你觉得有点不适应,因为创建了一个新项目之后,导航栏的一些组件并不包括在创建好的项目中,只能在后面再进行安装。接下来,我会出RN导航栏的文章一二三。此导航栏适用于安卓、苹果。第一步,安装相应的组件:在React Native项目中安装所需的软件包(根据自己的系统进行选择命令):npm install @react-navigation/nativeyarn add @react-navigation/native接着还原创 2020-08-31 21:47:56 · 1460 阅读 · 0 评论 -
React Native 在ES5、ES6不同语法下实现轮播图
ES6:import React, { Component } from 'react';import {ScrollView,Text, View,StyleSheet,ToastAndroid, Button,Image,Dimensions, TouchableOpacity, Platform} from 'react-native';const Dim = Dimensions.get('window')const {width} = Dimexport default ..原创 2020-08-27 16:10:19 · 246 阅读 · 0 评论 -
React Native 动态引入本地图片(循环引入)
方法很简单,只需要定义好图片数组,接着进行循环即可。constructor(props) { super(props); this.state = { scrollImage:[ { img:require('../../images/OHR.jpg') }, { img:require('../../images/th.jpg')原创 2020-08-26 18:51:48 · 1689 阅读 · 2 评论 -
小程序云开发实时验证码功能
马上要开学了,作为学校协会程序部的老部长,要为协会做一个会员注册系统。之前的注册系统有bug,也是我的上上界部长的作品了。所以我也没深入研究,干脆自己写个小程序。一天时间,写完了包括会员注册、会员上课签到、将信息导出Excel表格等多个功能。这篇文章呢,就讲一下,会员在注册的时候,一个实时验证码。验证码的作用是为了防止学生乱注册,是报名现场在管理端实时显示的一个验证码。大体思路: 管理端能够开放注册和关闭注册,这个主要是判断数据库里的一个集合,有个字段为Code,Code为零的时候是未开启注册,为非原创 2020-08-24 18:29:53 · 639 阅读 · 0 评论 -
轻松实现视差功能,以小程序为例
视差效果现在很多应用中都会有用到。一般在商城类应用的商品详情页会用到,比如上面是图片,下面是文字。用户向上滑动时,图片能够慢点离开用户视线,从而达到较好的体验效果。功能分析:视差效果就是让多层背景以不同的速度去移动。1. 至少需要两层背景。一个是缓慢移动区,另一个是正常移动区。2. 将背景设置为相对布局。通过给缓慢区设置top值来缓冲scroll滚动。3. 根据滑动事件监听,获取滚动距离值。4. 通过计算,得到需要缓冲的top值。5. 视觉差的形成条件,正常移动区域超过缓慢移动区域的时候要进行原创 2020-08-17 16:42:26 · 1193 阅读 · 0 评论 -
小程序将元素定位底部并居中,js轻松解决;获取组件元素的高度、宽度。
对于css的使用不太熟悉的同学,想要将元素定位到底部很简单,但是使用了绝对定位或者固定定位之后,再想把元素水平居中就有点不知所措了。不过这都不要紧,我们可以通过js轻松将元素进行居中。怎样让其水平居中呢?我这里使用的是margin-left,这时候你可能会觉得数据不准啊。有可能实际并不居中。没关系,我们通过计算得到需要的margin-left的值就OK啦。解决思路:首先获取元素所占宽度,然后用满屏宽度减去元素宽度再除以2,就得到合适的margin-left的值了。现在首要的任务就是获取元素的宽度。原创 2020-08-16 12:22:44 · 1422 阅读 · 0 评论 -
微信小程序云开发之实时监听数据库某集合数据条数
我们常用的聊天功能,或者是在游戏中与队友的游戏数据保持一致,等等这些都是通过数据实时推送进行的。那么今天我就来讲一个比较简单的示例,实时监听集合中的数据条数。这是最简单的示例:db.collection('searchta').watch({ onChange: snapshot=> { console.log('docs\'s changed events', snapshot.docChanges) this.setData({ peopl原创 2020-07-09 22:05:41 · 5572 阅读 · 2 评论 -
微信小程序云开发之群发订阅消息
在上篇文章中,我讲到了订阅消息的发送。但随着业务的跟进,现在的需求是要群发订阅消息。这?不难!首先,你要搞懂一点,群发订阅消息就是将需要发送的用户openID集合起来,然后一一使用推送模板发送消息。这个时候你可能会想到循环。但是用循环实在是太多坑。解决这个问题,要么在云函数端写逻辑,多次发送;要么在小程序端写逻辑多次调用云函数。这两种方法都是可以的。我采用了第二种,在小程序端多次调用云函数。看主要代码吧:第一步,我先获取数据库用户的openid,接着通过Promise.all来处理调用云函数。r原创 2020-07-06 19:30:17 · 1854 阅读 · 5 评论 -
Open Source!教你用js做一个简单的抽奖系统~
很奇怪,可能你们都会问为什么我会突然写一个抽奖系统呢?其实起因是最近我公司年底抽奖,大会前一晚突然收到社长信息(晚上11点了),说想在大会上搞个自动抽奖的东东,最好酷炫点的。第二天就要用了,因为太急我就想到了用我最擅长的js做个简单的出来。其实做个抽奖系统很简单,里面只要一个随机函数就可以了。以下文章来自公众号[Honker],可在公众号内查看学习资料,免费获取~前提:我公司大会上是每人...原创 2020-01-15 20:07:51 · 761 阅读 · 1 评论