- 博客(47)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 移动端软盘遮盖输入框的解决方案
手机端在向页面输入内容时，我们希望点击输入框聚焦后页面能自动定位，将输入框移至可见区域内。如上图所示，如果点击输入框，这时候手机会调起软盘，那么软盘会盖住输入框，这样用户体验不好。避坑指南当点击输入框时调起软盘，安卓和IOS会有所不同，IOS中弹起软盘会让整体布局往上移，而安卓不会而是整体布局高度缩减了。如果要监听键盘弹起或者收起，IOS会失效。const originalHeight = document.documentElement.clientHeight || document.bo
2021-12-27 16:25:15
879
原创 useState vs useReducer使用场景介绍
React HooksReact Hooks 推出以后，函数组件中经常使用useState保存状态。用过一段时间后发现过多的useState导致页面非常臃肿，具有关联性的状态分散，不利于维护。基于此，其实React在推出管理状态的Hook时就考虑到了，另一个useReducer就是用于解决上面的现象。那么考虑其使用场景就是必须的了。何时使用useState或useReducer一个典型的例子：累加器import { useState } from 'react'const Counter =
2021-10-13 15:54:12
2079
1
原创 高阶函数——优雅的封装
高阶函数抽象、重复的抽象、可组合性抽象看下面的代码，我们将代码封装成函数，它的好处是什么呢？let total = 0, count = 1;while(count <= 10) { total += count; count = 1;}console.log(total)上面是一个简单的累加代码，命令式的编写代码，再简单逻辑的时候我们能够很清楚在干什么，但是一旦变量增多，代码行增加，逻辑复杂起来，我们就很难一下子明白这段代码是在干什么。console.log(sum(r
2021-09-26 21:51:25
241
原创 如何实现：fn(‘a.b.c.d.e‘, obj) // zdde ?
递归实现多层嵌套key取值const obj = { type: 'person', a: { b: { c: { d: {e:'zdde'}} } } }}实现const deepPick = (key, obj) => { const [fitst, ...props] = key.split('.'); return props.length ? deepPick(props.join('.'), obj[first]) : obj[
2021-09-12 18:19:25
826
原创 手撕Vue-Router原理-实现自己的路由插件
1.路由总结基础知识点是必须掌握的，无论在业务开发过程中还是准备面试复习，都需要扎实掌握。手写路由插件-基础版1.初始化一个vue项目新建一个vuerouter文件夹，在文件夹中创建一个index.js文件，我们的vue插件就写在index中。2.VueRouter的使用方式 vue-router的基本使用方式： import Router from ‘vue-router’ Vue.use(Router) export default new Router({ mode: 'his
2021-07-13 13:50:28
184
原创 vuejs源码之createElement
vue使用createElement函数创建vnode上文中我们提到了vue使用虚拟dom来描述dom节点，这样做的目的是较少浏览器的开销，提高性能。那么vue是如何创建虚拟dom的呢？下面我们来分析vue中的createElement函数是如何创建vnode的。...
2021-05-26 10:33:06
725
原创 vuejs源码之render函数的分析
render函数分析紧接上文分析到了src\core\instance\lifecycle.js文件下的mountComponent函数，该函数首先就判断了用户是否自己再配置选项中写了render，如果用户没有自己写render，那么vue会进行创建。用户自己写render示例如下：在index.html 中 <div id="app"></div>new Vue({ el: '#app', render(createElement){ return cre
2021-05-23 10:41:54
262
原创 vuejs源码之实例对象挂载分析
vm.$mount的实现逻辑在new Vue(options)之后，vue做了一系列的初始化过程，在init()函数最后进行了挂载操作。if (vm.$options.el) { vm.$mount(vm.$options.el)}vm.$mount方法在多个地方都有定义，如 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtim
2021-05-20 16:15:32
283
1
原创 vuejs源码之初始化过程分析
vue中初始化流程分析首先观察Vue构造函数function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)}从源码中可见，构造函数执行
2021-05-17 18:24:58
196
2
原创 vuejs源码之编译构建过程
vuejs打包构建流程梳理package.json 找到入口文件vue2.6.11源码中打包命令分别为以下三个： "build": "node scripts/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex",ssr 服务端渲染 和 weex版本 暂时不关注。主要看 build 默认构建。这
2021-05-17 14:04:56
536
1
原创 JavaScript之二叉树前中后序遍历(递归与非递归版对比)
构建二叉树数据binaryTree.jsconst bt = { val: 1, left: { val: 2, left: { val: 3, left: null, right: null }, right: { val: 4, left: null, right: null } }, right: { val: 5, left: { val: 6, left: null, right: null },
2021-05-11 09:35:37
113
原创 Vue源码系列之数据响应式原理
Vue数据响应式原理响应式数据vue中响应式数据主要表现在数据发生变化会导致页面随之更新，页面操作更新也会导致vue数据的更改。那么，实现响应式数据也需要用到数据劫持的方法，当我们DOM结构中使用到相关数据时，就要对使用到的数据进行监听，无论数据是否重复，都需要对所依赖的数据进行监听。上图中，name属性用到了两次，那么就需要进行两次监听。代码实现Vue.js class Vue{ constructor(options){ //保存该选项 this.$option
2021-03-26 20:04:34
111
原创 Vue源码系列之数据代理和数据劫持
数据代理和数据劫持数据代理有如下数据：a:{ b:{ name:'张三'; }}a.b.name // 张三上述代码在访问name属性时需要a.b.name这样访问，那么如果能够直接使用a.name这样访问，就说对象a代理了a.b的任务，实现了数据代理。那么在Vue中我们能够直接使用Vue实例对象访问到data中的数据就是将数据代理到了Vue实例对象下面，即vm.name代理了vm.$data.name。数据劫持数据劫持是实现数据代理的一种技术。Vue2.x中使用的是Object
2021-03-25 17:59:21
661
1
原创 JS之LeetCode_01_02_20题分析记录
算法基础薄弱抓紧时间多补补LeetCode 01 两数之和如题：分析暴力破解肯定时间复杂度较大，而且面试官肯定不想看到这样的答案。我们将目光从数组中拉出来，关注一下target = 9，我们可以利用9 减去 数组中的每个数得到和为target的另一个值，记为res。假如nums = [ 2 ,7 ,11 ,15];9 - nums[i] = 7 , 2 , -2 , -6; 那么 nums[i] = 2 7 11 15 ,这里我们可以借助Map集合来帮助我们找出两个数的下标。将nums[i
2021-03-12 21:46:41
112
原创 如何实现函数节流和函数防抖？
函数节流函数节流从现象来看首次执行事件函数后间隔一段时间后再次执行该事件函数，从而将频繁的触发导致的事件函数频繁执行这一频率给降低。如下图频率的比较从图上看出，未进行节流处理的事件回调函数，会因为频繁的触发导致事件回调函数频繁的执行，如果是含有请求的事件回调函数，那么势必对服务器造成压力，如果是操作dom元素也会对浏览器的渲染产生压力。应用场景比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数；函数节流实现function thrott
2021-03-06 11:01:42
244
原创 自定义系列之Vue全局事件总线
自定义全局事件总线对象模块解决Vue中多重组件嵌套以及兄弟组件之间传值问题Vue中以及提供了解决方案为什么还要自定义呢？答：模仿Vue的实现方式自己来完成功能，能够提高我们编程思维，从设计的角度出发，往往能让我们更清楚底层逻辑实现。提高我们的编码质量。模仿 $on $emit $off首先，我们看看vue中要是使用这些方法，该如何使用。应该明确的是，这些方法一般用在组件中。//父组件mounted(){ this.$on('add',this.addHandle)}methods:{
2021-02-19 10:51:41
557
原创 一文讲清vue中自定义事件监听和分发
自定义全局事件总线事件监听和组件传值方式在Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发：//在父组件中mounted () { //给Header组件添加addTodo事件，通过$on监听 this.$on('addTodo', this.addTodo)}methods: { addTodo (todo) { this.todos.unshift(todo) },}//Header组件中methods: {
2021-02-17 21:14:06
829
原创 妈妈再也不用担心系列之上传进度条
妈妈再也不用担心系列之上传进度条进度条的实现话不多说，有图有真相！！！原理是啥？首先明白两个东西页面的进度条是由div 宽度百分比 实现的上传百分比是由XMLHttpRequest 对象的upload.onprocess函数产生的ok，基于这两点，我们就可以完成上传进度条了。代码撸起来！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t
2020-12-18 18:11:06
125
1
原创 快来看啦！~百度搜索JSONP实战！
先设计一个简单的搜索样式如下图基础内容参考文章 如何优雅的使用JSONP？猛戳此处！！！<div class="search-wrap "> <div class="input-wrap"> <input type="text" class="search-input J_searchInput" placeholder="百度一下"> </div> <div class="list-wrap">
2020-12-18 16:36:52
319
2
原创 如何优雅的使用JSONP？猛戳此处！！！
如何优雅的使用JSONP？猛戳此处！！！JSONP（JSON with Padding）JSONP 是一种json的使用模式，主要是用来解决跨域请求数据。因为有同源策略存在的原因，导致我们从不同的域（网站）访问数据会出现跨域报错。JSONP就是用来解决该问题的手段之一。清楚JSONP为什么不会跨域<script src="https://www.baidu.com/wd=D"></script>//这种方式的请求是不会产生跨域的，因此我们可以利用script标签的src来请
2020-12-18 15:39:47
157
原创 如何优雅的封装原生ajax？原来如此简单！
封装原生AjaxJQuery中的写法<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script> $.ajax({ type:'get', url:'data.json', success:function (data) { console.log(data);
2020-12-15 21:06:31
135
原创 Java多线程基础(三)
线程的通信问题：如何使用两个线程打印1-100.线程1，线程2交替打印呢？class Number implements Runnable{ private int number = 1; @Override public void run() { while (true) { synchronized (this) { if (number <= 100) {
2020-08-06 20:23:55
110
原创 Java多线程基础(二)
线程的生命周期1.源码中定义的生命周期源码中的状态定义的界限不是很清楚，那么通常一个线程的完整生命周期需要经历五种状态。1.新建：当一个Thread类或其子类的对象被声明并创建时，新生的线程处于新建状态2.就绪：处于新建状态的线程被start()后，将进入线程列表等待cpu的时间片，此时它已经有了运行的条件，只是还没有得到cpu的资源。3.运行：当就绪的线程被调度并获取cpu执行权时，便进入了运行的状态，run()方法中就定义了线程要完成的操作和功能。4.阻塞：在某种特殊的情况下，被认为的挂起
2020-08-05 21:21:59
159
原创 Java多线程基础炒鸡详细(一)
基础概念1.程序：程序是为了完成特定任务、用某种语言编写的一组指令的集合。一段静态的代码，静态对象。2.进程：是程序的一次执行的过程，或是正在运行的一个程序。是一个动态的过程：进程的产生、存在和消亡的过程。——生命周期。3.线程，进程可以进一步细化为线程，是一个程序内部的一条执行路径。①若一个进程同一时间并行执行多个线程，那就是支持多线程的②每个线程拥有独立的运行栈和程序计数器，线程切换的开销小③一个进程中的多个线程共享相同的内存单元/内存地址空间→它们从同一堆中分配对象，可以访问相同的变量和对
2020-08-04 22:00:49
112
原创 利用jnetpcap捕获网卡信息提供jar包文件
一、需要的环境jnetpcap.dll和jnetpcap-pcap100.dlljnetpcap.jar资源下载链接：https://pan.baidu.com/s/14SY4LS52LAhbbdBUa5aasw提取码：xk0l二、配置将上述两个dll文件复制到jdk/bin目录下在jnetpcap.jar所在目录打开cmd，输入一下命令：mvn install:install-file -Dfile=jnetpcap.jar -DgroupId=org.jnetpcap -Darti
2020-05-30 12:52:19
494
原创 前后端分离之网络设备监控系统开发二
1、MIB文件介绍在SNMP网络管理中，管理信息库MIB（Management Information Base）是对于通过网络管理协议可以访问的信息。这些信息更具体的理解为网管中被管资源，而网络管理中的资源是以对象来表示，每一个对象表示被管资源某一方面的属性，这些对象的集合形成管理信息库。MIB文件是用ASN.1语法来描述的，所以为了精确定义MIB中各管理对象，用户不得不参考一些ASN.1语法的有关文档如RFC1155、RFC1212等等来定义设备自己的MIB。ASN.1是抽象句法表示法一（Abst
2020-05-22 10:55:46
326
原创 C语言多种方式实现约瑟夫环
一、顺序表#include <stdio.h>#include <stdlib.h>#define MAXSIZE 20typedef struct{ int data[MAXSIZE]; int length;}SeqList;void InitSeq(SeqList *L,int *data,int n){ int i; L->length = 0; for(i=0;i<n;i++){ inser
2020-05-22 10:25:27
712
1
原创 前后端分离之网络设备监控系统开发一
1、开发环境win10 专业版jdk1.82、开发框架后端 springboot前端vue3、基于协议SNMP网络管理协议协议介绍：SNMP：“简单网络管理协议”，用于网络管理的协议。SNMP用于网络设备的管理。SNMP的工作方式：管理员需要向设备获取数据，所以SNMP提供了“读”操作；管理员需要向设备执行设置操作，所以SNMP提供了“写”操作；设备需要在重要状况改变的时候，向管理员通报事件的发生，所以SNMP提供了“Trap”操作。4、Linux centos7 上配置SN
2020-05-22 09:00:21
389
原创 C语言顺序表——不跟你多废话的代码
直接复制就能运行#include <stdio.h>#include <stdlib.h>#define MAX_SIZE 10/*** 定义数据元素*/typedef struct dataType{ int num; char *name; int age; char *gender; char *major;...
2020-03-20 11:40:03
136
原创 C语言单链表，能直接运行的代码！
C语言单链表，实现增删改查不废话 直接上代码，COPY就能运行#include <stdio.h>#include <stdlib.h>/***定义数据元素*/typedef struct{ int id; char * name; char * gender; int age;}ElemType;typedef str...
2020-03-20 11:34:01
622
2
原创 Spring AOP 实现日志功能
理解AOPAOP，面向切面编程。举一个不是很恰当的例子：在一个工厂的车间中，有很多工人在工作，为了保证车间的生产效率， 管理人员都会给车间装上摄像头，通过摄像头来反映车间内部工人的工作情况。摄像头就是从侧面监控的，就相当于我们的切面，我们通过摄像头就不会打扰到车间工人的工作，我们不用走进车间去问每个工人做了多少事，做了哪些事，一切都交给了摄像头来记录。车间就相当于我们的任务主体，比喻说我们...
2020-03-14 12:20:11
278
原创 springboot+springsecurity+jwt
什么是JWT——What is JSON Web Token?首先JWT全称是JSON Web Token，它是根据开放标准RFC7519所定义的一个紧凑和独立的在各方安全的传输信息的JSON格式对象。它所传递的信息能够被验证和信任，因为它是数字签证。以上是官方解释，大白话就是它是来做安全认证的，客户端和服务端的身份认证，可以通过JSON Web Token来做，当然使用springsecur...
2020-03-03 22:14:04
344
原创 利用spring security实现动态权限控制
前言：利用security实现权限控制一，准备数据库MySql1，创建五张表，user表、role表、uer_role表、menu表、menu_role表user表：用来存放用户信息，字段id、name、username、password、enabled等说明：必要的字段username和password，这两个字段表示登陆时需要验证的内容。在登陆页面输入的用户名和密码即为这两个字段，n...
2020-02-26 22:00:57
1241
原创 springboot+vue之处理json 数据
一、前言：springboot+vue 项目，项目用到了spring security，前端登陆时，需要传json给后端，但是spring 默认是不接受json的。处理方式，可以在后端配置，但是我这里采用前端处理的方式。建立一个前端工具文件，里面来处理请求和数据发送我这里文件 apj.jslet base = ''; //定义前缀 方便信息更改export const postKeyV...
2020-02-09 21:07:48
2654
原创 spring security超详细入门（一）
一，首先通过spring initializr 创建一个spring项目下一步选择spring web 和spring security然后一路next 就完成了创建好后我们创建一个文件夹 controller和一个文件 HelloController启动项目 http://localhost:8080/hello.ok ,那么这里的用户名和密码是什么呢？spring se...
2020-02-07 17:14:50
422
原创 promise请求数据实战
function getJSON(url){ return new Promise((resolve,reject)=>{ const request = new XMLHttpRequest(); request.open("GET",url); request.onload = function(){ try...
2019-11-04 14:56:29
608
原创 CIsco之平衡混合路由协议——EIGRP（一）
CIsco之平衡混合路由协议——EIGRP（一）1，介绍（1）EIGRP是思科独有的一种动态路由协议，也叫增强内部网关路由协议，即增强的IGRP。它融合了距离矢量和链路状态两种路由选择协议的特点，所以也叫平衡混合路由协议。2，特点（1）运行EIGRP的路由器之间形成邻居关系，相互发送路由信息，通过给邻居发送hello包来维持联系，保持邻居关系，保存在邻居表中。另外，还有路由表和拓扑表。（...
2019-10-28 20:44:53
462
网络流量数据如何提取特征？
2020-05-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人