- 博客(49)
- 收藏
- 关注
RSS订阅原创 webpack进阶 -- 自定义Plugin，Loader封装&打包优化
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在 Webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，这个依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。在这个过程中，Webpack 可以通过使用loader和plugin来扩展其功能。loader本质上是一个函数，loader的执行顺序在use数组里面是从下往上执行，里面有一个pitch方法，use数组中pitch。
2024-05-09 15:48:58
1021
原创 DS18B20数字温度计系统设计
STC89C52单片机STC89C52单片机接口介绍这个单片机一共有40个引脚。①P0口(P0.0~P0.7) 8位漏极开关型双向I/O端口。可以作为通用I/O口使用，但必须加上拉电阻。②P1口(P1.0~P1.7) 内部带上拉电阻的8位准双向I/O端口。③P2口(P2.0~P2.7) 内部带上拉电阻的8位准双向I/O端口。④P3口(P3.0~P3.7) 内部带上拉电阻的8位多功能双向I/O端口，具有外中断。51单片机中断触发方式介绍有两种中断触发方式，分别是电平触发和边沿触发。电平触发是每
2022-05-28 12:45:56
1306
原创 TypeScript基本操作
接口TS接口我的理解就是面向对象编程中的一种规范，定义接口后不用担心函数内部状态数据，它只规定这批类里面必须提供某些方法，满足规定的开发需要这样。属性类型接口interface Iperson{ //?代表可选参数 firstname?:string; lastname:string}function showFullName(person:Iperson){ return person.firstname+person.lastname}let person
2021-05-31 22:14:45
132
原创 react-hook
Hook是React 16.8.0版本增加的新特性/新语法， 可以让你在函数组件中使用 state 以及其他的 React 特性1 State Hookimport React, {useState,useEffect} from 'react'usestate的参数是初始化缓存的值，返回值是包含两个元素的数组，第一个为内部缓存的值，第二个为更新状态的函数。 let [count,setcount] = useState(0); function increment(){ s
2021-05-01 19:54:03
138
原创 redux使用说明
redux可以帮助我们统一的管理数据的状态，首先安装redux npm install --save redux创建store.js文件，引入store构建器import {createStore,applyMiddleware} from 'redux';引入reducerimport countRecucer from './count_reducer';/* 引入redux-thunk支持异步 */import thunk from 'redux-thunk';//将store暴露
2021-04-22 20:43:38
160
原创 react路由详解
安装配置路由首先使用npm安装模块npm i react-router-dom -s在index.js根文件中包裹App组件BrowserRouter是基于history实现，还有hashrouter，它是通过监测#符号后面的参数实现组件更新的。import {BrowserRouter} from "react-router-dom"; <BrowserRouter> <App /> </BrowserRouter> 在需要使用路由的组件
2021-04-12 20:46:21
177
原创 react基础及父子组件传值
本文介绍的是脚手架中一些使用react需要注意的地方这样引入在后面写组件我们会比较便捷。import React,{Component,Fragment} from 'react'需要注意的是组件方法中的this指向是指向window的，这与它的执行上下文有关，如果我们想要将其指向组件，有两种方式。第一种是使用箭头函数创建方法，第二种是在使用bind指向。class App extends Component{ constructor(props){ //如果想在const
2020-12-02 16:53:35
189
原创 原型链继承
在原型链跌了好几次跟头，今天将其归类稍加总结一下。在js中，对象都有__proto__属性，一般这个是被称为隐式的原型，该隐式原型指向构造该对象的构造函数的原型。在js中，一切皆对象，对象则可通过构造函数和字面量的形式生成。首先我们要扒一扒proto、prototype、constructor__proto__：事实上就是原型链指针！真正指向了祖先级对象。prototype：这个是指向构造函数的原型对象,其实原型对象就只是个普通对象，里面存放着所有实例对象需要共享的属性和方法！constructor
2020-10-25 22:17:46
150
原创 vuex && redux
什么是vuexVuex 是专门为 Vue.js 设计的状态管理库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单地说就是采用全局单例模式，将组件的共享状态抽离出来管理，使组件树中的每一个位置都可以获取共享的状态（变量）或者触发行为。额，或者更直白的说就是响应式的全局变量vuex四种状态之间的区别state共享状态（即变量）......
2020-07-11 18:29:27
259
1
原创 搭建flutter环境入坑集合
搭建flutter环境用了4个下午，真可谓是人生到达了高潮。听人说mac比较好配环境，不过我用的是windows，唉，该遇到的坑基本上统统走了一遍。搭建环境那个我就不讲了，大家可以看一下技术胖的视频在b站上，就说一下遇到的坑，来正文吧。问题一：遇到了get packages第三方包问题。没有这玩意代码在编译器环境中会直接报错，获取的方式有两种，第一种是翻墙，这种方式对梯子的要求还是有点高的，不建议使用。第二种是flutter专门照顾国内用户的，设置镜像源可解决问题。FLUTTER_STORAGE_BAS
2020-05-30 22:22:44
294
原创 webpack面试题总结
网上对于webpack实习面试的问题有很多，但是自我感觉不是很统一。有些也很难理解。在这篇博客中我将会将这些问题全部打包到一块。附带答案！！！1 对webpack的理解我的理解是文件打包及资源处理，当然功能肯定不局限于此。当我们不打包的时候文件的多而繁杂，所以文件对应的请求也就变多，很大的影响这个用户的体验，速度也很慢。这样就需要一个东西来整合资源，并且把资源分类，打包减少http请求数，...
2020-05-08 11:59:02
559
原创 Vue核心之虚拟DOM以及diff算法的实现
第一次看前端知识的源码，相对于之前的学习难度提升了很多。不过也理解了很多有意思的东西！js操作真实DOM的代价用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新20个DOM节点，浏览器收到第一个DOM请求后并不知道还有19次更新操作，因此会马上执行流程，最终执行20次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节...
2020-03-13 20:47:51
280
原创 js垃圾回收机制和内存泄漏
js的垃圾回收机制概述JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。JS垃圾回收方式JS执行环境中的垃圾回收器怎样才能检测哪块内存可以被回收有两种方式：标记清除（mark and sweep）、引用计数(reference counting)。标记清除大部分浏...
2020-03-11 11:41:59
198
原创 TCP的三次握手和四次挥手
一 TCP报文格式TCP报头中的源端口号和目的端口号同IP数据报中的源IP与目的IP唯一确定一条TCP连接。TCP在发送数据前必须在彼此间建立连接，这里连接意思是：双方需要内保存对方信息（例如：IP，Port…）序列号seq：占4个字节，用来标记数据段的顺序，TCP把连接中发送的所有数据字节都编上一个序号，第一个字节的编号由本地随机产生；给字节编上序号后，就给每一个报文段指派一个序号；序...
2020-03-09 15:37:06
169
原创 登陆验证koa-passport中间件的简单使用
简述koa-passport是koa的一个中间件，它实际上只是对passport的一个封装。利用koa-passport可以简便的实现登录注册功能，不但包括本地验证，还有很多提供第三方登录的模块可以使用。这篇博客只讲一下登陆验证这块的一些简单内容配置安装依赖npm install -S koa-passport npm install -S passport-local 引包imp...
2020-02-13 19:08:01
525
原创 koa中间件
中间件的工作原理初始化koa实例后，我们会用use方法来加载中间件(middleware)，会有一个数组来存储中间件，use调用顺序会决定中间件的执行顺序。每个中间件都是一个函数(不是函数将报错)，接收两个参数，第一个是ctx上下文对象，另一个是next函数(由koa-compose定义)在建立好http服务器后，会调用koa-compose模块对middleware中间件数组进行处理。具体...
2020-01-22 21:14:49
179
原创 Mongodb在node中的使用
安装mongodb首先先认识一下这个数据库，MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。安装并配置这个数据库参考官网即可！本篇博客主要说明在该数据库与node怎样建立连接并且实现增删改查等主要功能！安装mongoose我们在与数据库建立连接的过程中使用的是mongoose这个第三方包！ $ npm in...
2020-01-15 21:44:28
177
原创 服务器端渲染(SSR)和客户端渲染(CSR)的区别
常听到服务器端渲染和浏览器端渲染这兄弟俩，一直不是很理解，尤其对于我这种没有后台开发经验的小白来说，理解起来异常困难，最近花时间查了很多资料，总算弄明白了，于是整理下，加深记忆。这边文章是参考下面的文章做的总结服务器渲染后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的（模板引擎），在...
2019-12-15 22:28:27
1057
原创 vue-axios学习笔记
what is axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios的功能特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRFaxios的使用代码(带注释)...
2019-11-11 19:55:41
233
原创 vue-router路由规则
/* console.log(VueRouter); */ Vue.use(VueRouter); //留坑！ var Login = { template: ` <div>我是登录页面</div> `, } var ...
2019-11-03 11:58:34
1681
原创 vue的生命周期
什么叫做vue生命周期每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是我们说的vue的生命周期！生命周期钩子的介绍在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 底下这张图片是vue官方文档给出的一副有关生命周期中钩子函数的先后顺序图！所有的钩子函数会将this上下文绑定到vue实例中，所以可以访问数据！这也就意味着不能使用箭头函数...
2019-10-26 16:56:41
130
原创 vue过滤器以及事件监听器
上面我刚刚学习了vue父子组件之间的通信，感觉很多东西在后续的学习中也逐渐搞懂！在这片博客中需要指出上篇博客中没有注意到的一个知识点！全局组件在vue实例中共享的是组件，而并非是组件里面的数据！组件的数据可以传递，但并非直接共享！接下来分享的是过滤器，何为过滤器！过滤器,过滤东西呗.把一个值丢进过滤器,然后过滤器对此值进行过滤.返回过滤后的数据.它的用法也比较简单!底下这段代码是我写的过滤器的...
2019-10-19 17:35:07
347
原创 vue组件化以及父子组件数据的相互传递
今天看了vue组件化，感觉这东西不是特别好理解。下面这篇博客是一点小心得，之后持续更新。组件化的概念Web 中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用，页面就是有一个个类似这样的部分组成，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合...
2019-09-26 18:55:41
297
原创 安装并使用babel转码器
之前了解过babel转码器，但没去学习过。今天试着去安装使用！其中也遇到了很多问题，第一个就是对node命令太过于陌生！node多少还得了解一点！首先下载安装node，npm程序会随着node的安装默认安装！(官网下载即可)1 进入项目文件夹！2 使用npm init -y(创建生成package.json文件)3我这里是在项目文件夹里面添加转换器！命令是 npm install...
2019-09-11 18:43:15
348
原创 es6的class继承
class Parent { constructor(x, y) { this.x = x; this.y = y; this.name = 'ren'; } saynames() { consol...
2019-09-08 16:51:47
101
原创 js数据结构之链表
在经过为期10天左右的苦逼的数据结构的学习，终于在今天用js实现了单链表。学习的时候是用c语言学的，奈何c语言一般，实现起来特别难。不过它的主要思想还是可以理解的。今天看着别人的博客，自己也跟着他们去实现。我这个的话是没有头节点而是头指针，代码里面也有注释，之后希望还可以去实现树结构，再次分享，请多多指教！ //创建结点 function Node(element) { ...
2019-08-27 17:51:22
145
原创 函数预编译
今天在看面试题的时候发现自己很多东西不了解，比如函数预编译，好多题目的答案与这个函数预编译有着极大的关联。然后我就大致总结了一下预编译的顺序。以及预编译的概念。首先说一下为什么预编译！JS属于解释型语言，在执行过程中顺序执行，但是会分块先预编译然后才执行。因此在JS中存在一种变量提升的现象。搞懂预编译环节，变量提升自然而然也就懂了。然后说一下预编译的具体顺序！1 创建AO对象，执行期上下文...
2019-08-02 16:56:29
204
原创 无限轮播图
今天写了轮播图，主要的还是练手，为以后写大项目打好js基础。在写的时候呢，css花了我好大的力气，之前学过的许多属性都忘记了，好多都是查出来的。然后js部分刚开始写的时候基本上没有啥头绪，在看了人家写的开始的一点代码之后，基本上就有大致思路了。流程以及操作都是自己完成的，算是一个自主知识产权的作品吧！哈哈哈哈哈！我将3部分的代码全部放在这，希望看到的大佬能够多多指点。这是html部分<...
2019-08-01 16:15:00
122
原创 ES6中promise对象
最近在学习es6的基本语法，总感觉promise对象好像之前接触过，不过在我学习它的时候，原来之前的一切都是错觉，真它娘的抽象。然后我现在整理一下我初步学习promise的一些见解。promise语法Promise编程的核心思想是如果数据就绪(promised)，那么(then)做点什么。它也是异步编程的主要方式，同样的异步编程方式还有回调函数。异步编程我现在的理解就是一个函数的执行需要一个异...
2019-07-30 20:24:34
218
原创 map和set数据结构
今天学习了map和set数据结构，感觉比我之前学习的东西稍微好理解一些。就在这里分享一下自己的心得！set数据结构ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。只要是这个数据结构具有interator接口，都可作为参数传递。 let str = ['r', 'j', 'l', 'r'];...
2019-07-30 17:40:38
166
原创 iterator接口和for...of...遍历
iterator接口的目的Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for…of循环（详见下文）。当使用for…of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。接下来展示我写的最简单的接口的使用方法let arr = [1, 2...
2019-07-29 17:54:54
304
原创 关于this指向问题的探究
从学习js以来，遇到了很多问题，js有很多需要掌握的地方。其中一个较难的点就是this的指向问题。这篇文章将会分享以下this在fuction和箭头函数内部的指向问题。无论什么时候，js都会把this放在function内部，如果函数是直接放在某个对象中的成员，那么，this的值就是这个对象。如果函数不是某个对象成员那么就设置为全局对象。 var obj = { age...
2019-07-28 10:48:11
121
原创 简易选项卡
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>简易选项卡</title> <style> * { ...
2019-07-26 18:40:38
197
原创 浏览器素养篇
DOM树遵循深度优先解析原则解析与加载是异步的，加载的过程并不影响解析的过程，比较形象的就是img的引用。css树 (样式结构体)渲染树(renderTree) （浏览器是根据渲染树绘制页面的）1 渲染树每个节点都有自己的样式。2 会剔除掉display:none;head之类的不需要绘制的节点3渲染树上的每一个节点都会被当作是一个盒子，具有内容填充。回流和重绘回流，也叫重排...
2019-07-23 16:23:56
125
原创 js实现验证码登陆模块
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>JS实现生成随机验证码并验证功能</title> <style> * { ...
2019-07-23 15:54:41
469
原创 防抖与截流
防抖的定义：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。防抖debounce的代码 let count = 0; let button = document.ge...
2019-07-21 14:36:55
743
原创 一篇专门写数组和apply()和call()还有bind()方法的博客
在很多时候经常看到Array.prototype.slice.call()方法，比如Array.prototype.slice.call(arguments)，下面讲一下其原理： var divs = document.getElementsByTagName("div"); var div = Array.prototype.slice.call(divs);Arra...
2019-07-17 15:01:06
576
原创 关于js继承的方法及总结
原型(链)继承 function Parent() { this.x = 199; this.y = 299; } Parent.prototype.say = function() { console.log('say') } ...
2019-06-21 15:40:26
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人