- 博客(42)
- 收藏
- 关注
RSS订阅原创 react高阶组件的用法，使用高阶组件制作通用弹窗
PC端网页通用的提示弹窗样式大同小异：黑色遮罩层+弹窗内容用react做这种需求的思路：可以把遮罩层当做是一个组件，弹窗实际显示的内容也作为一个组件，并把内容组件作为参数传入遮罩层组件，形成新组建返回。1、遮罩层组件import "./index.scss";//ContentComponent：传入的内容组件，//cancelEvent：取消按钮点击事件//confirmEvent： 确认按钮点击事件//data：外层传入遮罩层组件的参数const LayerMask = ({Conten
2021-12-24 18:59:40
903
原创 使用gzip压缩大量文本，然后提交给后台接口
开发过程中，日志接口使用http定时发送给后台接口，日志传输涉及到大量数据，经开发协商决定先把大量的日志文本压缩，然后再发送给接口，提高发送数据的速度和成功率，压缩方式是gzip相关压缩库的文件是：https://github.com/nodeca/pako/tree/master/dist/pako_deflate.min.js代码：let pako = require('../js/pako_deflate.min.js');let binaryArray = pako.gzip('大量文本'
2021-04-16 16:36:46
299
原创 vue中使用watch监听对象，监听方法没有被触发的原因
watch: { friendList:{ //注意，这里是对象 handler(val){ }, deep:true }}，computed:mapGetters({ friendList:'getFriendList'}),mounted(){ this.$store.dispatch('editFriendList', hy.friendList);}下面是vuex中，mutations的内容：EDIT_FRIEND_LIST (state, data) {
2020-11-13 18:40:41
4605
1
原创 js生成随机数
// 随机数，包含ram1和ram2 getRandomIdx(ram1, ram2) { ram1 = Number(ram1) ram2 = Number(ram2) var range = Math.abs(ram2 - ram1) var Rand = Math.random() return (ram1 < ram2 ? ram1 : ram2) + Math.round(Rand * range) },
2020-11-10 16:14:32
150
原创 js判断数据是否是对象
isObject(obj) { if (!obj || Object.prototype.toString.call(obj) !== '[object Object]') { return false } return true },
2020-11-10 16:13:44
1437
原创 JS获取PC操作系统信息
getOsInfo(){ let str = navigator.userAgent; let rsg = /\((.*?)\)/; let arr = rsg.exec(str); let result = ""; if(arr.length >= 2){ result = arr[1]; }else{ result = str.toLowerCase().indexOf("mac os x") > 0 ? "mac os
2020-11-10 16:12:56
792
原创 js判断是否是base64字符串
js判断是否是base64字符串isBase64(str){ if(str === '' || str.trim() === ''){ return false; } try{ return btoa(atob(str)) == str; }catch(err){ return false; } },
2020-11-05 12:06:45
7279
原创 js对比两个对象是否相同
js对比两个对象是否相同compareArray(arrA, arrB) { let isSame = true if (arrA.length !== arrB.length) { return false } else { arrA.some((el, idx) => { if (el !== arrB[idx]) { isSame = false return true }
2020-11-05 12:05:49
683
原创 js判断两个数组是否相同
js判断两个数组是否相同compareArray(arrA, arrB) { let isSame = true if (arrA.length !== arrB.length) { //判断长度 return false } else { arrA.some((el, idx) => { //判断元素 if (el !== arrB[idx]) { isSame = false retur
2020-11-05 12:04:29
943
原创 JS深拷贝
深拷贝，拷贝出来的数据和元数据是完全独立，不受引用的影响：deepClone(parentObj, childObj) { if (!parentObj || typeof parentObj !== 'object') { return parentObj; //若果不是对象 直接返回 } childObj = childObj || (Array.isArray(parentObj) ? [] : {}) try { for (let i in
2020-11-05 12:03:52
107
原创 js正则表达式获取操作系统信息
js用正则表达式读取userAgent后，根据结果获取操作系统的信息：let txt= navigator.userAgent;//txt = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36"let reg = /\((.*?)\)/;let rs = reg.exec(txt);console.log(rs[1]
2020-11-05 10:29:57
334
原创 electron项目混淆压缩代码
前端的代码混淆只能起到扰乱阅读理解的作用，代码根本还是暴露在外，所以原则上还是无法完全保护。项目中为了代码保护，需要混淆压缩代码，试了一下几个插件。1、uglifyjs-webpack-plugin此插件不支持es6语法，对于es6的语法报错，看了解决方法，需要通过安装相关babel库和配置babelrc，转义es6语法解决报错但是本人开发环境比较复杂，多次配置都没能解决问题2、使用webpack-obfuscator插件这个插件可以把代码按照不同方式和混淆严重程度去配置，最终混淆后的代码是生成
2020-10-15 10:15:54
2456
原创 electron-vue开发模式，每次修改代码热更新的时候，无法杀死electron进程重启，导致CPU很高，电脑卡死
这是由于每次修改源码的时候，重启了多次electron进程，热更新的时候没有彻底杀死进程重启，导致多个进程一起工作，占用大量CPU，电脑卡死，解决方法，修改热更新重启进程的方法，找到dev-runner.jsif (electronProcess && electronProcess.kill) { manualRestart = true process.kill(electronProcess.pid) electronProcess
2020-10-15 10:01:58
2635
原创 vue判断iframe是否加载完毕
html<main> <img v-show="!completeLoad" src="../images/loading.gif"/> <iframe v-show="completeLoad" :src="url" width="100%" id="license_iframe" height="100%"></iframe></main>jsmounted () { var _this = this const ifra
2020-09-09 16:19:49
3865
原创 javascript使用gzip压缩数据后传输给后端
使用场景：app的日志接口需要大量提交日志给服务器，每30s提交一次，一次性最多提交50条日志数据，日志信息包含大量文本数据，导致数据传输量大，故后端的接口改成接受gizp压缩后的数据流java接口定义：前端javascript请求：let binaryArray = pako.gzip(JSON.stringify(params));let buffer = new Uint16Array(binaryArray).bufferlet url = _configServer.LOG_SERVI
2020-08-28 11:04:52
2684
原创 给JSON数组对象排序
//先按照status排序//如果status一样，再按照name字段排序return this.toyList.sort((a, b) => { if (a.status === b.status) { return b.name.charAt(0) > a.name.charAt(0) ? -1 : 1 } return b.status - a.status })...
2020-07-09 14:46:20
155
原创 js 全局监听回车键
document.addEventListener('keyup', function(e) { let currKey = 0 e = e || event currKey = e.keyCode || e.which || e.charCode // 支持IE、FF if (currKey === 13) { if (event) { e.returnValue = false
2020-07-07 17:34:52
907
原创 css实现带阴影效果的三角形箭头下拉菜单
先看效果：小三角形的边框和矩形菜单四周，都有阴影实现思路：div+伪类<div class="menu-list"> <div class="menu-item">Backup and Restore</div> <div class="menu-item" style="border-bottom:none;" @click="signOut" > Sign Out </div></div>css：.m
2020-06-30 18:30:17
838
原创 vue父组件从接口获取数据后传给子组件（父组件延迟传值）
data() { return { logoCss: { width:0, height:0, defaultImgUrl: null, }, } }, <mobileWidget v-if="logoCss.defaultImgUrl != null" :logo-css="logoCss" />如上图，mobileWidget是子组件，父组件的logoCs..
2020-06-23 21:03:05
4581
1
原创 Vue devTools的安装及使用
Vue devTools的下载地址：https://github.com/vuejs/vue-devtools直接点击下载添加到chrome extension添加成功后右上角能看到vue的调试插件：运行vue 项目，打开开发者调试工具，选择vue，如下：就能看到vue里面的数据状态，这样子调试相比断点或者console等方法会高校很多...
2020-06-18 14:19:28
98
原创 vue实现组件拖拽功能
/*组件拖拽插件 在vue中使用方法：导入此插件，使用mixins混入对象在需要拖拽的元素添加如下方法即可：<div οndragstart="return false;" οndrοp="return false;" draggable="false" @mouseup="onMouseup" @mousedown="onMousedown($event)"@mousemove="dragMouseMove($event)"></div>*/export const
2020-06-17 18:02:30
1099
原创 js用正则表达式替换指定字符串，要求使用最短匹配
需求：现用字符串和base64图片混合在一起的字符串，如：let str = "hello <img src=\"data:image/jpg;base64,xxx这是base64内容xxx\" style=\"max-width:100%;\">hahaha...其中，文本内容和图片内容可以多个，相互混在一起，现在需要把图片用特殊字符：[image] 来替换，最终替换结果如下：let str = "hello [image]hahaha..."要求js用正则表达式替换指定字符串，使
2020-06-08 17:10:39
997
原创 二分法求立方根
function lfg(x){ if(x==0){ return 0; } let min = 0,max = x; if(x<0){ min = x; max = 0; } while(min < max){ let mid = (min + max) / 2; //二分法 let tmp = mid*mid*mid; if (tmp > x) {
2020-06-04 19:14:24
1751
原创 js求两个正整数的最小公倍数
//js求两个正整数的最小公倍数function gbs(a, b){ let max = a; if(b > max){ max = b; } if(a==1 || b == 1){ console.log(a + "和" + b + "的最小公倍数是：" + max); return; } let find = 0; for(let i=1; i<=max; i++){
2020-06-04 12:57:32
1608
原创 在其它js模块触发当前vue组件的watch监听方法
this.$set(this, "requestStatus", hy.messageRequest);this指向vue组件，requestStatus是当前vue通过watch监听的对象，hy.message是其他js文件导出模块后，挂载到全局的对象。上面代码在mounted注册后，实现的功能：hy.messageRequest对象被改变后，会触发当前vue组件的watch对requestStatus的监听方法。也就是说，当前vue组件监听了requestStatus对象的某属性，比如：wa
2020-06-04 11:06:06
644
原创 js将字符串转为驼峰格式
js将字符串转为驼峰格式let str = 'font-size';for(let i=0; i<str.length; i++){ let cur = str.substr(i,1); if(cur == '-'){ let leftStr = str.substr(0,i); let cap = str.substr(i+1,1); let rightStr = str.substr(i+1+1); str = l
2020-06-03 18:40:31
603
原创 js输入任意字符串，统计各个字符的个数
js输入任意字符串，统计各个字符的个数function count(str) { let newStr = ''; let map = new Map(); for(let i=0; i<str.length; i++){ let c = str.substr(i,1); if(c.trim()){ //空字符不算 newStr += c; let num = 1; if
2020-06-03 18:27:24
2537
原创 js节流优化，防止方法被瞬间无限次调用
场景：理论上onmousemove、vue 的watch变量、以及被其他端调用的方法，都有可能被频繁过度调用，从而瞬间产生过多方法调用，导致出现异常bug。本人遇到挺多这种场景：1、鼠标移动事件2、websocket响应服务端的指令都存在本地方法被瞬间过多调用的可能，这时候就需要用定时器做节流优化：let _t = this; //this指向vuelet oTimeout = null;if(!_t.changeWait){ _t.changeWait = true;
2020-06-02 11:58:00
666
原创 js插入排序
算法步骤：将第一待排序序列第一个元素看做一个有序序列，把第二个元素到最后一个元素当成是未排序序列。从头到尾依次扫描未排序序列，将扫描到的每个元素插入有序序列的适当位置。（如果待插入的元素与有序序列中的某个元素相等，则将待插入元素插入到相等元素的后面。）let arr = [4,1,8,34,62,56,9,16]var len = arr.length;var preIndex, current;for (var i = 1; i < len; i++) { debugger
2020-06-02 11:48:55
151
原创 选择排序算法
原理思路：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。重复第二步，直到所有元素均排序完毕。function selectionSort(arr) { var len = arr.length; var minIndex, temp; for (var i = 0; i < len - 1; i++) { minIndex = i; for (var
2020-05-29 11:54:54
98
原创 冒泡排序
冒泡排序算法：function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j+1]) { // 相邻元素两两对比 var temp = arr[j+1];
2020-05-29 11:09:32
70
原创 求连续子数组的最大和
输入一个整形数组（可能有正数和负数），求数组中连续子数组（最少有一个元素）的最大和。要求时间复杂度为O(n)。描述：输入随机整数的数组问题：求出该数组的所有元素连续的，子数组中，元素和最大的子数组示例1：输入数组：[1,2,-3,5,7,-9];输出结果：[5,7]示例2：输入数组：[1,3,-3,5,7,-9,8];输出结果：[1,3,-3,5,7,]答案：let arr = [1,-3,7,-6,2,-2,6,-3,4,6,-8];let length = arr.length
2020-05-28 18:24:30
130
原创 蓝牙模块Noble不兼容最新的macOS系统(10.15.4)的解决方法
2020年3月底，macOS新版本的系统：catalina 10.15.4发布了，测试和产品提出问题：当更新了最新的系统后，electron的项目中的蓝牙功能不能用了。看了一下目前正在使用的蓝牙模块的底层代码：发现以前的同事也遇过macOS版本更新后，noble模块不能兼容的问题，解决方法主要是去把noble模块的发起蓝牙连接和写入指令等js代码改写，关键点是改写通信id。如上图，noble...
2020-04-16 19:48:20
1484
1
原创 jquery实现省份城市的联动查询
$(function(){ var bankselect = document.getElementById('bankselect'); if (bankselect.options.length < 2) { $.each(bankList, function (index, item) { bankselect.options.add(new Optio...
2020-04-10 10:04:46
377
原创 安装指定版本的nodeJs
1、安装n模块：npm install -g n2、升级nodejs到最新的稳定版n stable3、安装指定版本n v8.9.0
2020-04-10 10:01:39
1488
原创 HBase的特点和体系架构
1、HBase能做什么a、海量数据的存储 b、准实时查询2、HBase业务场景a、交通 b、金融 c、电商 d、移动 等3、HBase特点a、容量大 b、面向列 c、多版本d、稀疏性 e、扩展性 f、高可靠性 g、高性能(LSM数据结构)4、如何选择合适的版本考虑因素：稳定性a、官网版本 b、CDH版本5、HBase在Hadoop生态系统的定位：6、HBase体系...
2020-04-10 09:52:38
405
原创 Hadoop安装与配置
一、Google三大数据技术1、MapReduce BigTable HDFS大数据处理技术：批数据处理技术 --> MapReduce流数据处理技术 --> Storm大图数据处理技术 --> Pregel二、Hadoop的功能与优势1、组成： a、HDFS:分布式文件系统 存储海量数据b、MapReduce: 并行处理框架 实现任务分解与调度2...
2020-04-10 09:49:18
87
原创 MapReduce运行流程
一、原理分而治之，一个大任务分成多个小的子任务(map)，并行执行后，合并结果(reduce)二、MapReduce运行流程1、基本概念a、Job & Task 一个job分为多个Task Task又分为MapTask和ReduceTaskb、JobTrackerc、TaskTrackerJobTracker的角色：a、作业调度b、分配任务 监控任务的执行进度...
2020-04-10 09:37:55
164
原创 分布式系统，NoSql与关系型数据库的比较
一、分布式系统CAP理论：1、Consistency: 一致性 ：系统中所有节点的数据状态(版本) 是相同的2、Avalibility 可用性 ：系统会处理和响应每个请求 24x73、Partition-tolerance 分区可容忍性：如果一些节点宕机或者网络故障 还能提供服务水平扩张：1、数据分片2、数据冗余一致性：1、最终一致性2、强一致性P是必须的 C和A具...
2020-04-10 09:32:30
1757
原创 HDFS的应用
背景：2002年 起源于Apache Nutch2004年 借鉴Google GFS, 开发Nutch MapReduce2004年 借鉴Google MapReduce 开发Nutch MapReduce2006年 成为Lucene下的独立子项目 改名为Hadoop2008年 Hadoop成为Apache的顶级项目一、基本概念1、块 block ：是文件存储处理的逻辑单元 默认一...
2020-04-10 09:26:03
576
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人