- 博客(58)
- 收藏
- 关注
RSS订阅原创 React-router二级路由+动态路由+LocalStorage+cookie+路由权限校验
1、二级路由实现原理：就是在一级路由Route组件对应的component内编写NavLink+Route2、解决点击一级路由二级路由默认显示问题实现原理：将一一路由重定向到二级路由默认路径例：点击/activities 默认跳转 /activities/recommonded路径注：NavLink组件改变的是url、Switch组件内决定显示什么内容3、在一个组件内点击...
2020-06-07 17:34:06
1870
原创 React-Redux
一、Npm isntall redux --saveRedux与Vuex区别：Redux独立于React，可以在其他框架使用，但Vuex只能在Vue内使用 为什么要使用Redux？当组件嵌套的层级过深时或者兄弟组件进行数据交互时，无论是使用属性注册方式还是contenxAPI都会比较麻烦，由于Redux和Vuex类似都有一个状态管理仓库，每一个组件都可以共享这些数据，为编程者提供很大的便利...
2020-06-07 17:33:31
156
原创 JS中的位运算符
位运算将一个整数的二进制格式进行运算。在JS中如果一个数字进行位运算，那么先将这个数字转换为整数，并且是32位整数存储格式。（与JS本身采用双精度64位存储略有不同）NaN、Infinity、-Infinity转换为0与运算 &运算规则：两个整数比较，如果都为1则结果为1，否则为0。或运算 |运算规则：两个整数进行比较，如果有一位为1，则结果为1，否则为0。非/否运算 ...
2019-11-24 23:15:58
241
原创 HMR -Hot Module Repalce
HMR- Hot Module Replacement使用前提：项目必须是基于webpack-dev-server或webpac-dev-middle使用方式, 如下const webpack = require('webpack');module.exports = { // ... plugins: [ new webpack.HotModuleRepl...
2019-11-20 17:31:41
209
原创 记录一个错误node-gyp rebuild
下载 Visual C++ 2015 Build Tools，安装时，选择自定义安装，勾选系统版本对应的Windows SDKs ，直至- 安装完毕；下载 Python2.7，安装时，勾选将 Add Python.exe to PATH，即添加至环境变量，直至安装完毕；npm config set msvs_version 2015...
2019-11-19 15:48:43
2315
原创 ES6Class模拟实现
引言Class特点1.class必须以new的方式执行直接执行会报错2.class原型属性、静态属性也不可枚举3.继承: 公有属性、私有属性私有属性不等同于静态属性：私有属性可以被实例化的对象继并且每一个对象都不同，静态属性只是构造函数所有私有属性访问：var op = new Plane(); op.private(私有属性名); 静态属性访问：Plane.static(静态...
2019-10-04 21:48:54
399
原创 JavaScript数据结构（三）队列
一、定义队列遵循FIFO，先进先出原则，队列在尾部添加新元素，在顶部移除元素。最新添加的元素必须在元素末尾。二、模拟实现// 先进先出class Queue { constructor (){ this.count = 0;// 总长 this.lowestCount = 0; // 头指针 this.items = {};...
2019-09-21 11:08:55
128
原创 JavaScript数据结构（二）链表
一、定义链表存储有序的元素集合，但不同于数组，链表中的元素并不是连续放置的。每个项有一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或连接组成）。二、JavaScript模拟实现// 工具类function defualtEquals(a, b) { return a === b;}// 链表的每一项class Node { constructo...
2019-09-21 10:48:12
105
原创 JavaScript数组结构（一）栈
一、定义栈遵循LIFO-(Last in, First out)原则即先进后出，栈存储结构被用在编程语言的编译器和内存中保存变量、方法调用（js的执行栈）等，也被用于浏览器历史记录存储（浏览器回退操作）。二、JavaScript模拟实现class Stack { constructor() { this.count = 0; this.item...
2019-09-18 22:41:30
125
原创 关于JavaScirpt容易忘记的知识点
变量输出console.log(010) // 8 八进制console.log(0x10) // 16 十六进制console.log(0b10) // 2 二进制ES5遍历数组方法特点let array = [,1,,2,,3];array = array.map((i) => ++i)//[,2,,3,,4]forEach，fi...
2019-09-16 22:21:09
96
原创 JS设计模式之代理模式-虚拟代理
定义为一个对象提供一种代理以控制对这个对象的访问分类虚拟代理：虚拟代理是把一些开销很大的对象，延迟到真正需要它的时候才去创建执行安全代理：控制真实对象的访问权限远程代理（一个对象将不同空间的对象进行局部代理）智能代理（调用对象代理处理另外一些事情如垃圾回收机制增加额外的服务）注：在真实的开发中往往对于代理模式划分不那么清晰，也就是不会只用某一种代理模式，而是多种代理模式的结合。应用...
2019-09-06 19:46:06
352
1
原创 JS设计模式之单例模式
单例模式定义保证一个类仅有一个实例，并提供一个访问它的全局访问点，通俗的来说就是，对于一个构造函数无论被实例化多少次，返回的都是同一个实例对象实现核心实例化对象之前，判断this是否被赋值，赋值即返回之前的值应用场景以登陆框弹窗为例，如果不用单例模式编写，每次点击登陆按钮都创建一个新的dom元素，对于js引擎造成很大的负载，由此可见使用单例模式可以节约性能。代码分析核心原理var ...
2019-09-06 16:32:48
98
原创 JS设计模式总体概述
定义设计模式设计模式（Design Pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。模式模式是指从生产经验和生活经验中经过抽象和升华提炼出来的核心知识体系。模式(Pattern)其实就是解决某一类问题的方法论。使用设计模式的目的：为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。 设计模式使代码编写真正工程化；设计模式是软件工程的基石脉络，如同大厦...
2019-09-05 09:26:26
113
原创 Vue2.0、3.0双向数据绑定
引言大家都知道Vue双向数据绑定就是指v-model指令，而v-model的本质就是input、value的语法糖，语法糖就是方便我们代码编写，那么它底层又是怎样实现的呢？本篇将会以不同的vue版本为切入点，进行模拟实现。vue2.0-Object.definedProperty() <input type="text" id='inp'> <div id='vi...
2019-08-30 21:52:40
760
原创 图解原型链
引言在看图之前希望大家明白几点prototype：函数都有一个prototype属性，这个属性指向函数原型，原型是一个普通对象例：Function.prototype=== Function的原型constructor：函数原型中有一个constructor属性，它指向构造函数本身__proto__：所有对象都有一个__proto__属性，被称为隐式原型注：就本篇而言可以把对象分为...
2019-08-30 11:21:34
108
原创 React组件间的通信
1、爷爷组件向父亲组件、孙子组件传递数据：通过属性注册一层层的传递2、孙子组件操作爷爷组件数据注：ToDoWrapper为爷爷组件、TodoList为父亲组件、ToDoItem为孙子组件方案一：在父组件定义函数，通过属性传递将函数传递给子组件，子组件调用父组件调用的函数方案二：React.createContext()-React16版本之后原理：...
2019-08-29 18:35:36
136
原创 React组件详解
React组件：函数组件、类组件一、函数组件|视图组件|木偶组件：react16.7版本之前-无状态组件:没有this、没有生命周期、只有属性，在16.7版本之后添加了声明周期；相对class组件性能好，因为没有生命周期state这些内容的处理，因此如果某个组价只负责渲染视图没有很多交互就可以使用函数组件。1、使用方法const Component = () =>{ ...
2019-08-29 18:15:37
254
原创 数组迭代方法模拟实现
forEachArray.prototype.myForEach = function (func) { var _arr = this, _len = _arr.length, _this = arguments[1] || window; for (var i = 0; i < _len; i++) { func.apply(_this, [_arr...
2019-08-28 00:54:26
155
原创 数组方法归纳
引言在正式进入主题之前，先给大家介绍基本JS数据类型及存储位置栈内存：存储有序即一个挨着一个存储；堆内存：存储无序原始值：number、string、null、undefined、boolean，存储在栈内存引用值：array、object、function () {}、Date、RegExp()，存储在堆内存正文数组常用方法push：数组尾部添加一个或者多个元素，参数...
2019-08-26 11:59:38
145
原创 你真的了解react列表渲染中的key属性吗？
React渲染流程(简略版)：生成虚拟节点 => (diff算法比对) 渲染页面1、生成虚拟节点 + 渲染结果(Key可以看作每个列表渲染中dom元素的唯一名字)<p>a</p> => name:a<p>b</p> => name:b<p>c</p> => name:c2、改变数...
2019-08-24 21:53:13
588
原创 原生JS模拟实现React.createElement()
1、JSX语法渲染流程：使用jsx语法 => 调用React.createElement()函数 => 返回vNode(虚拟节点) => 渲染到页面上2、React.createElment(type|标签名,props|属性的对象集合,children..|各种节点)const React = { createElement(type, props, ...c...
2019-08-24 18:14:59
684
原创 Git介绍及日常工作流
引言作为一名程序员相信大家一定听过github，那么git、github又有怎样的联系呢？如果你还不能熟练的运用这两者，看完本篇文章你就会有一个清晰的认识并且会熟练的运用在日常工作中。Git介绍Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。那么我们为什要用Git?大家可以想象这样一个场景：一个网站不会是自始至终都是一个页面，如果遇到节日...
2019-08-24 11:22:02
243
原创 关系型、非关系型、实时、非实时数据库特点归纳
关系型数据库(表) 非关系型数据库 实时数据库：响应数据快（几毫秒或十几毫秒） Mysql 常用 1）硬盘存储 2）特点：开源、只要是linux系统就可运行，只要是计...
2019-08-16 22:18:21
1618
原创 封装nodejs对MongoDB的增、删、改、查
var mongo = require("mongodb").MongoClient;var url = "mongodb://127.0.0.1:27017/test3"; function insertOne(collection, obj, callBack){ //单个插入 mongo.connect(url, function (error, db) { ...
2019-08-16 22:08:08
191
原创 浅谈JS继承
引言 要知道在工程化开发中，避免不了会遇见多个对象内会有相同类别属性情形，本人在之前的一篇博客https://blog.csdn.net/weixin_43821550/article/details/96914857中已经谈到可以利用JS中的构造函数的原型提取这些共有属性但是并不是继承的全部，本篇主要讨论的是JS继承的一些方法，并通过比较得出最优雅的解决方案。继承方案与解...
2019-08-10 15:32:49
108
原创 常见Linux命令汇总及文件夹介绍
根目录文件夹/usr(UNIX Sfotware Resource) /var(variable)：和系统运行相关 /bin：包含一些可执行的文件，文件内绿色的代表可执行，青色代表示连接 /boot：与开机相关的文件 /dev：Linux中访问设备或者接口都有文件与之对应，即访问这个文件就想当与访问某个设备或者接口，dev文件夹内就存储了这些文件 /etc：存放各种配置文件 /ho...
2019-08-08 18:20:47
219
原创 JS执行机制及事件循环
在讨论今天的主题之前，大家需要明白一下几点概念浏览器的线程JS引擎线程：解释执行JS代码、用户输入、网络请求等GUI线程（渲染线程）：绘制用户界面、与JS主线程互斥HTTP网络请求线程：处理用户的GET、POST等请求，等拿到返回结果后，将回调函数推入事件队列定时器触发线程：setTimeout、setInterval等待时间结束后，将执行函数推入事件队列中事件处理线程：将...
2019-08-08 16:35:25
656
1
原创 前端性能优化之函数防抖和函数节流
函数防抖：函数防抖就是在函数需要频繁触发情况时，有足够空闲时间，才执行一次（延迟一段时间执行）。应用：实时搜索、拖拽// 封装函数防抖function debounce(hanlde,delay){//参数为事件处理函数、延迟时间 var timer = null; return function (){ var _self = this; ...
2019-08-07 10:17:09
228
原创 前端算法之求最大连续子数组和
给定一个数组，求它的最大连续子数组和。如：[-2,1,-3,4,-1,2,1,-5,4] 连续子数组[4,-1,2,1] 的和最大，为6。话不多说直接上代码var maxSubArray = function(nums) { let max = nums[0]; let sum = 0; for (let i = 0; i < nums.length; i++) {...
2019-08-06 23:29:09
202
原创 前端算法之有效括号判定
给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。示例 1:输入: "()"输出: true示例2:输入: "()[]{}"输出: true示例 3:输入: "([)]"输出: false...
2019-08-06 14:34:05
588
原创 模拟实现ES6中新存储数据方式Map
Map特点1.有属性名、属性值，键值对不重复，若属性相同会被新添加的键值对覆盖2.属性名数据类型：function、{}、NaN、number、[]、undefined、null、boolean、string3.原型方法：set()、get()、delete()、clear()、has()模拟实现hash算法：利用hash算法将属性值转化为0-8之间的，进而放入桶中桶：利用...
2019-08-06 09:30:11
283
原创 Vue之组件间的通信
一、父组件到子组件通信（子组件获取父组件数据）1）属性名注册-props 弊端：如果是三层组件（或者更多）传递数据，那么即使第二层组件没有使用的属性为了给下一级组件传递也必须被注册，才可以使用2）$attrs（推荐） vm.$attrs内包含从根实例开始到该组件为止没有被注册的属性；解决了1）中出现的问题，但是弊端就是：会再html中显示这个没有在该组件使用的属...
2019-08-05 23:26:03
130
原创 数组去重、并集、交集、差集
一、去重1、借助额外变量空间-ES5var arr = [1,3,4,5,6,6,7,3,3,3]var newArr = []var obj = {}function removeDuplicates(arr){ for(var i = 0 ; i < arr.length ; i++){ if(!obj[arr[i]]){ newArr.p...
2019-08-05 18:16:09
447
4
原创 前端隐藏元素方法归纳
CSS隐藏元素：display:none、opacity:0、visibility：hiddendisplay:none—结构存在页面中，但元素之前占据的位置会被其他元素替换、无法响应绑定的事件opacity:0——结构存在页面中，元素之前占据的位置不会被其他元素替换、可以响应绑定的事件visibility：hidden——结构存在页面中，元素之前占据的位置不会被其他元素替换、不...
2019-07-30 23:44:41
2003
原创 CSS权重
什么是CSS权重？对于我们实际开发有什么用处？请带着疑问看下面一段代码//html代码<div class = 'box'></div>//css代码div{ width:100px; height:100px; backgroundcolor:red;}.box{ backgroundcolor:green;}相...
2019-07-30 14:00:15
205
原创 Var、Let、Const区别
一、var声明变量 特点：变量声明提升、可重复定义、全局变量挂载到window二、let声明变量 特点：没有变量声明提升、不可重复定义、全局变量不会挂载到window、声明的变量与{}形成块级作用域，声明在块级作用域内的变量外部无法使用、产生临时死区、优雅的解决了闭包三、const声明变量 特点：let用于变量声明、const用于常量声明，其余特...
2019-07-29 22:32:22
94
原创 原生JS实现Ajax
//1.创建XML对象var xhr = null;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();//IE6不兼容} else { xhr = new ActiveXObject("Microsoft.XMLHttp");//IE6独有创建XML对象方法}//2.建立连接xhr.open("...
2019-07-29 22:15:13
90
原创 网络之常见HTTP状态码归纳
200——完成了一次完整的请求，即请求成功301——永久重定向（URL被永久修改，即当前URL无法访问到目的网址）：如果浏览器之前将这个URL收藏了，那么当接收到301状态码之后，浏览器会修改链接，修改为新的URL。302——临时重定向（URL被暂时修改，但也是不会访问到目的网址）303——临时重定向，但是请求方式必须为GET304——资源未修改，当浏览器多次访问同一个资源时，如果...
2019-07-29 21:36:11
129
原创 网络之深度解读GET、POST区别
其实GET和POST的区别在不同的情况下是不同的，希望完这篇文章的你可以更加深入的了解GET、POST一、只考虑语法和理论上的HTTP协议（没有基于任何规范）GET、POST几乎没有区别，最大的区别就是名不一样。二、基于RFC规范（Request For Comments是一系列以编号排定的文件，几乎所有的互联网标准都有收录在RFC文件之中）1）基于理论上： GET和...
2019-07-29 20:57:30
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人