前端
文章平均质量分 84
川上饺子
这个作者很懒,什么都没留下…
展开
-
微信小程序蓝牙功能开发与问题记录
由于当前项目的需求是,一个手机只能连接一个蓝牙设备(小程序做处理),但是实际手机是支持连接多个蓝牙设备的,所以如果用户一次性点了很多个设备,需要做相关处理。有时蓝牙设备传来的帧会有不完整的情况,需要做拼接处理。此处逻辑为:在监听函数中,获取到不完整的帧时,如果帧头正确,保存并等下一帧,否则舍弃。2)关于搜索设备(startBluetoothDevicesDiscovery):安卓机搜索一次以后,再次调用该接口,刚才已经搜索出来的设备搜索不到了,除非加上参数:allowDuplicatesKey。原创 2023-05-04 15:59:50 · 4410 阅读 · 3 评论 -
JavaScript 函数式编程基础概念
函数式编程的一些概念解释: 引用透明(referential transparency)与纯函数、不可变性(Immutability)、等式推理(equational reasoning)、Point-free、惰性求值、柯里化(currying)与偏函数(partial)、compose与pipe。原创 2022-10-13 16:21:59 · 239 阅读 · 0 评论 -
javascript函数式编程初探——什么是函数式编程?
什么是函数式编程?这里的函数是指什么?什么是引用透明?什么是副作用?什么是纯函数?这篇文章将帮你理清这些概念,带你走进函数式编程的世界~原创 2022-08-29 14:34:05 · 310 阅读 · 0 评论 -
闭包及其知识体系梳理
最近重温了王福朋老师的博客《 深入理解javascript原型和闭包》(非常生动有趣,强烈推荐),打算梳理一下前端面试逃不开的知识点 —— 闭包。也算是一篇读老师博客摘录总结的学习笔记吧。闭包这个东西,每次看了概念就忘记。究竟要怎么理解?知识点不是孤立的。把知识点串联起来嵌入我们的知识体系中,能更好帮我们去理解。本篇文章列出了学习闭包涉及的前置基础知识,也包括这些知识点涉及到的常见的面试/笔试题型。通过对这些前置知识点梳理,最后我们能够更清楚理解闭包。接下来会根据图上面的标记顺序去学原创 2022-03-30 11:12:54 · 285 阅读 · 0 评论 -
JS设计模式 - 工厂模式
《JavaScript设计模式》工厂模式学习小结一、定义解释因为用new关键字和类构造函数创建对象,会导致两个相关的类之间产生依赖性,于是就出现了工厂模式来帮我们。工厂模式用一个方法来决定实例化哪个具体的类,有助于消除两个类之间的依赖模式。它分为简单工厂模式和复杂工厂模式。简单工厂模式:使用另外一个类或对象封装实例化操作(通常是一个单体)。复杂工厂模式:实现一个抽象工厂方法并把实例化工作推迟到子类中,即使用子类来决定一个成员变量应该是哪个具体的类的实例。二、举例解释假设我们要开几原创 2022-03-16 17:27:01 · 1947 阅读 · 0 评论 -
JS设计模式 - 单例模式
《JavaScript设计模式》单例模式学习小结一、解释单例模式,又称单体(singleton)模式。单体是一个对象。具体来说是,用来划分命名空间,并将一批方法和属性组织起来的对象。它使代码成为一个逻辑单元,确保所有代码使用的都是同样的全局资源。单体的基本结构如下:var Singleton = { username: '', login: function () { }}二、单体的使用1. 用于划分命名空间的单体单体对象内所有成员都被包装在这个对象原创 2022-02-24 10:36:14 · 475 阅读 · 0 评论 -
JS设计模式 - 适配器模式
一、解释 适配器模式可用来在现有接口和不兼容的类之间进行适配。它被添加到现有代码中来协调两个不同的接口。就类似于苹果电脑的 type-c 接口和U盘之间的接口转换器。二、举例????1 :来看一个简单的例子我们现在客户系统有一个对象 clientObj,而我们有一个现有的方法 interfaceMethod:var clientObj = { name: 'Jack', phone: '13333333333', address: 'China'}fun.原创 2022-01-14 13:57:58 · 761 阅读 · 0 评论 -
react 函数组件和class组件的区别
一、组件的定义1.class组件:继承React.Component,且需要创建render方法来返回元素。classWelcomeextendsReact.Component{render(){return<h1>Hello,{this.props.name}</h1>;}}//2.函数组件functionWelcome(props){return<h1>Hello,{props.na...原创 2021-09-14 14:04:46 · 4185 阅读 · 0 评论 -
vue项目 利用异步特性实现图片懒加载
一、前言标题中写的“vue 图片懒加载...“,虽然确实是在vue项目中写的,但其实这篇文章主要讲的是一个思路,无论是不是在vue中,都是这个道理。二、简单介绍本文的懒加载是针对如下情况:通过调用接口,获取当页的用户信息(包括用户头像)。但这个时候数据中的头像不能直接通过<img>展示出来,而是需要先调用接口转为base64 ,例如:<img src="data:image/png;base64,iVBO..."/> 。这个时候有10条用户信息,就需要调用接口读取图片10原创 2021-03-10 17:03:19 · 1724 阅读 · 0 评论 -
vue 项目开发的搭建
一、介绍本文是基于https://github.com/PanJiaChen/vue-admin-template的模版进行搭建。在模板基础上的搭建过程中,提出以下可能遇到的问题:1、如何mock接口数据?大家都知道前后端开发速度不一定一致,有时候前端开发比较快,这个时候可以先进行mock数据进行测试。这个模板已经有mock例子了,因此下面会简单以mock菜单为例子做演示。通过讲菜单mock,顺便能够了解一下菜单如何动态添加的。2、mock的api和后端api接口如何进行切换?3、如..原创 2020-12-30 13:14:17 · 156 阅读 · 0 评论 -
令牌过期以后刷新token并重调接口
一、目标设置客户端时间,只要超过客户端时间,系统自动退回到登录页面;当未超过客户端设置的时间时,调用接口,发现令牌过期了,先调用更新令牌接口,然后再重新调用接口。我原来的token刷新方式是:登录获取过期时间,在每次调用接口的时候比较当前时间和过期时间,如果调用接口的时候发现即将过期,刷新令牌获取新的时间;如果调用接口发现过期了,退出页面。由于是有相似之处的,所以我在此基础上进行修改。二、思路1、在外置参数中设置客户端时间2、登录的时候存储客户端时间,每次调用接口的时候判断有没有过期原创 2020-12-28 10:33:12 · 4186 阅读 · 0 评论 -
vue el-tree的展示和节点默认勾选,以及踩的坑
一、目标:点击按钮,获取tree,并且勾选相应的节点。二、实现:1、写一个树<el-tree :data="treeData" default-expand-all show-checkbox node-key="id" ref="tree" @current-change="handleCheckChange" @check="handleCheckChange" :default-checked-keys="checkedRole"原创 2020-12-25 10:21:10 · 5869 阅读 · 2 评论 -
npm publish的发布记录(踩坑记)
记录我是如何从一个坑跳到另一个坑最终跳出来的过程。npm账号登录以后,对项目进行npm publish。坑1:Private mode enable, only admin can publish this module解决办法:切换npm的源地址:npm config set registry http://registry.npmjs.org/npm config ls //查看当前npm源配置再次npm publish到了坑2...坑2:403 Forbidd.原创 2020-11-25 17:39:16 · 1702 阅读 · 3 评论 -
vue项目 table的展示列控制+行计数+table相同行的合并
直接上代码<template> <div> <div> <el-popover placement="bottom" title="展示列控制" width="350" trigger="click"> <el-checkbox-group v-model="checkedC原创 2020-11-03 09:35:42 · 806 阅读 · 0 评论 -
vue项目中将treetable(树形表格)数据导出到Excel
1、安装依赖npm install -S file-savernpm install -S xlsxnpm install -D script-loader2、引入在src目录下引入相关文件/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github....原创 2020-11-02 17:07:55 · 3029 阅读 · 4 评论 -
vue项目 如何使用websocket
一、介绍业务要求:用户可以看到列表中哪些用户是在线的,能跟在线用户发送消息,并收到即时消息。参考网上一些介绍,根据实战经验进行总结。二、思路1、用户登录以后,进行websocket连接;2、首次登录,获取在线用户信息并渲染,每次接受新消息,出现消息提示,并调用相应方法(根据业务需要);3、退出登录需要断开连接。三、注意1、token过期问题。websocket在连接过程中,token可能过期。解决思路:2、页面刷新问题。如果登录时进行websocket连接,那原创 2020-10-27 15:28:53 · 3222 阅读 · 1 评论 -
vue项目的换肤功能
踩坑:看到网上一个办法是在static中写好不同的样式文件。当按钮点击切换的时候,调用方法,去动态加载css文件。export function getTheme(themeId){ return require("../../static/css/theme/" + themeId + "/index.scss");}但是!这样切换的时候,后面的样式会覆盖前面的样式!...原创 2020-04-14 11:40:06 · 657 阅读 · 0 评论 -
vue项目 el-tree的界面自定义 实现增删改查操作
介绍:el-tree在element文档中有查询全树的代码,本文主要是在此基础上添加了增加、删除、修改的界面样式与功能。具体来说:1、鼠标移动到树上显示删除和修改: 点击删除,当前节点删除; 点击修改,树的选中节点变成input可以重新输入名称并且右边出现取消或确认的icon。2、点击底部添加按钮,如果未选中树节点,则在最外层新增input进行名称输入,右边同样有取消或确认的icon。若选中树节点,则在选中节点下添加子节点,同样以input形式输入名称。实现效果:...原创 2020-06-22 09:26:39 · 4461 阅读 · 14 评论 -
vue项目中的单点登录
要实现单点登录,集成项目和跳转目标项目分别要怎么做?一、集成项目的代码页面html代码:添加handleRoute()方法 <div class="content"> <div class="content-box text-center" v-for="(item, index) in appList" :key="index" :style=原创 2020-10-13 16:27:08 · 2733 阅读 · 1 评论 -
时间格式转换记录
1、将指定时间转化为时间戳格式。例如:将’2020-10-13 09:48:45’ 格式或者’2020-10-13T09:48:45’,转化为 1602553725000 毫秒格式代码: Date.parse(new Date(’2020-10-13 09:48:45’)) 或者 new Date(’2020-10-13 09:48:45’).getTime()2、将指定时间转化为年月日时分秒格式。代码:dateFormatter(new Date(’...原创 2020-10-13 15:41:56 · 1112 阅读 · 0 评论 -
本地资源跨域问题
问题:ajax请求本地资源跨域受限。解决:打开终端全局安装 http-server输入: npm install http-server -g再在目标文件中终端中输入: hs打开以上网址就可以了。原创 2020-07-28 15:37:38 · 280 阅读 · 0 评论 -
vue项目 使用simple-uploader进行携带参数进行文件和文件夹上传
介绍:由于element的el-upload不支持文件夹上传,所以用了vue-simple-uploader,实现了文件夹/文件的携带form data 和 headers参数上传。vue-simple-uploader还能用于切分上传、断续上传,此处项目没有用到。想对上传做更多的处理的小伙伴,推荐去看源码。另:以下代码加了文件列表的拖拽。1、安装:npminstall vue-simple-uploader--save2、 <uploader ...原创 2020-06-04 09:39:31 · 9648 阅读 · 36 评论