- 博客(29)
- 收藏
- 关注
RSS订阅原创 redux,thunk,saga
redux, thunk,saga学习redux概念：js容器，进行全局的状态管理特点：1、单一数据源 2、state是只读的 3、使用纯函数进行修改（reducer）action：在应用内对store进行操作的桥梁，是js对象，通过store.dispatch调用，通常通过action创建函数使用。reducer：根据接收到的action对store中的state进行操作，必须有return值。store：将action和reducer连接在一起 职责：1、
2021-01-22 12:21:44
92
原创 [Vue源码解析] 最佳实践
[Vue源码解析] 最佳实践1、列表属性和v-if、v-if-else、v-else中使用key2、路由切换组件不变这是由于两个路由用的是同一个组件，由于组件复用，而不会进行重新渲染。解决方法：在watch中监测$route的query值在router-view组件上添加key（不推荐）3、为所有路由同一添加query使用全局守卫beforeEach，有指定query才放行，没有调用next（path+query）二次跳转使用函数劫持:拦截router.history.t
2020-12-20 17:45:17
178
原创 [Vue源码解析] 生命周期
[Vue源码解析] 生命周期、指令系统、过滤器分为四个阶段：初始化阶段、模版编译阶段、挂载阶段和卸载阶段errorCaptured与错误处理：用户代码的错误会通过handleError函数唤起errorCaptured钩子函数，这个函数的作用是捕获子孙组件的错误，可返回false避免错误继续向上传播，如果全局的config.errorCaptured被定义，那么所有的错误也会发给他。初始化实例属性：initLifeCycle挂载paren,paren,paren,root,children,child
2020-12-20 17:44:42
109
原创 [Vue源码解析】全局API的实现原理~
[Vue源码解析] 全局API的实现原理1、 Vue.extend(options)用法：使用基础的Vue构造器创建一个子类，options为自定义组件选项/** * Vue.extend(options) */let cid = 1Vue.extend = function (extendOptions) { extendOptions = extendOptions || {} const Super = this const SuperId = Super.cid c
2020-12-11 16:59:17
186
原创 [Vue源码解析]生命周期相关的API
[Vue源码解析]生命周期相关的API生命周期相关的实例方法有四个，vm.forceUpdate和vm.forceUpdate和vm.forceUpdate和vm.destroy是在lifecycleMixin中挂载到Vue原型上去的，vm.nextTick是在renderMixin中挂载到Vue原型上去的，vm.nextTick是在renderMixin中挂载到Vue原型上去的，vm.nextTick是在renderMixin中挂载到Vue原型上去的，vm.mount则是在跨平台代码中挂载上去的。
2020-12-10 18:30:27
130
原创 [Vue源码解析] 事件相关的实例方法
[Vue源码解析] 事件相关的实例方法在Vue中有五个重要的函数用来向Vue的原型中挂载方法:initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)在initMixin中会向Vue构造函数的prototype属性添加_init方法，执行new Vue（）时，会调用_init方法来实现一系列初始化操作，包括整个生命周期的流程以及响应式系统流程的启动等。在stateMixin中向Vue原型
2020-12-08 18:14:21
58
原创 CSS回顾
CSS回顾（一些不常用属性快忘完了都）animationanimation: move 5s linear 2s infinite alternate Forwards paused; /** * 1、animation-name * 2、-duration * 3、-timing-function:速度,ease、ease-in、ease-out、ease-in-out、linear * 4、-delay:延迟时间 * 5、ite
2020-11-30 11:26:08
46
原创 [Vue源码解析] 代码生成器
[Vue源码解析] 代码生成器代码生成器：将AST节点转换为代码字符串，代码字符串就是我们交给渲染函数的内容。代码字符串中具有生成VNode的方法，我们先罗列出这三种方法：1、createElement，创建元素VNode，别名_c,参数1：tag名称，参数2:包含属性的对象，参数三：子节点列表2、createTextVNode, 创建文本VNode，别名_v，参数：文本3、createEmptyVNode, 创建注释VNode，别名_e，参数：文本假如有一个模版为:<div id="e
2020-11-28 17:04:16
958
原创 [Vue源码解析] 优化器
[Vue源码解析] 优化器优化器作用：在AST中找出静态子树并打上标记好处：1、每次重新渲染时，不需要为静态子树创建新节点。2、在虚拟DOM中打补丁（patching）的过程可以跳过。步骤：1、在AST中找出所有静态节点并打上标记（static：true），若当前节点为静态节点，则其所有子节点也需要为静态节点。2、在AST中找出所有静态根节点并打上标记（staticRoot：true），AST中从上往下寻找，找到静态节点则标记为静态根节点，由于1的特性，其子节点也为静态节点。判断是否是静态节点：
2020-11-28 15:47:07
92
原创 [Vue源码解析] 解析器
[Vue源码解析] 解析器解析器类型：HTML解析器、文本解析器、注释解析器原理：将模版字符串按照一定的条件循环进行切割，对切割下来的内容进行类型判断，在生产对应类型的AST节点插入到父节点上，直到切割完毕最终生成一颗AST树。逻辑概览：/** * 整体逻辑 */export function parseHTML (html, options) { while (html) { if (!lastTag || !isPlainTextElement(lastTag)) {
2020-11-28 13:12:24
268
原创 [Vue源码解析] patching算法
[Vue源码解析] patching算法pathching算法：通过对比新旧VNode的不同，然后找出需要更新的节点进行更新操作：1、创建新增节点 2、删除废弃节点 3、修改需要更新的节点创建节点的三种类型：1、元素节点（tag属性）：document.createElement 2、text属性（text属性和isComment属性为false）:document.createTextNode3、注释节点（text属性和isComment属性为true）:document.createCommen
2020-11-28 10:32:03
604
原创 [Vue源码解析] VNode类型
[Vue源码解析] VNode类型VNode类型：注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点VNode类：/** * VNode类 */ export default class VNode{ constructor (tag, data, children, text, elm, context, componentOptions, asyncFactory) { this.tag = tag this.data = data this
2020-11-26 23:13:03
536
原创 [Vue源码解析] 变化侦测相关API
[Vue源码解析] 变化侦测相关API1、vm.$watch(expOrfn, callback, {options})用法：用来观察单个数据或多个数据在Vue实例上的的变化。/** * 方法实现 * @param {*} expOrFn * @param {*} cb * @param {*} options */Vue.prototype.$watch = function (expOrFn, cb, options) { const vm = this options
2020-11-24 17:38:08
104
原创 [Vue源码解析] Array的变化侦测
[Vue源码解析] Array的变化侦测前言：数组由于具有许多原生方法对其元素进行修改，而上文中说过Object的变化侦测无法就这些方法改变的属性通知其依赖，所以需要新的方法来进行Array的变化侦测。核心思想：新建一个对象arrayMethods，称之为拦截器，用它覆盖数组的__proto__，即数组的原型对象Array.prototype，在数组更新数据时，即执行push、pop、unshift、shift、sort、reverse、splice这些方法时，执行拦截器其中的方法来通知依赖数组dep中
2020-11-23 15:01:02
169
原创 [Vue源码解析] Object的变化侦测
[Vue源码解析] Object的变化侦测含义：Vue中通过对state中Object属性的追踪，在其值变化时通知相应的组件，再让组件去寻找这一属性用到的位置作出更新，本篇文章探讨对Object属性的追踪。词义：1.observer：将对象转换为setter和getter形式。 2.dep：依赖数组，存对同一数据有依赖关系的watcher。（依赖也就是需要通知更新数据，对该属性有依赖的地方） 3.watcher：依赖。图解：代码实现：1.将object的属性转换成响应式数据（含se
2020-11-21 22:02:51
199
原创 跨域之jsonp
跨域问题：由于同源策略，跨协议、主机号、端口号其中之一便会产生跨域问题，导致请求无法发送。解决方法：主流的前端解决方法为jsonp，其他如iframe或flash（这个好像要淘汰了）未去了解。而且做项目的时候跨域问题好像一般都是后端解决，主要jsonp也就解决get请求跨域，遇见post就无能为力了。jsonp原理：运用了script标签可以跨域请求的特性，动态创建script标签发起请求，通过回调函数获取返回的参数。代码演示：function ajax(obj){ var de..
2020-11-09 16:21:21
607
原创 浅拷贝和深拷贝
1.浅拷贝通过循环，将a对象的属性和方法拷贝给b属性，但是由于拷贝时a对象内部的引用数据类型时，其值为堆里该引用数据类型的地址值，所以会造成a、b两个对象中的引用数据类型指向堆中同一块内存地址，这会造成牵一发而动全身，改动a的引用数据类型会导致b中的该值也受到牵连。var a = { name:"objectaaaaa", go:function(){ console.log("这是对象a的方法") }, another:{
2020-11-02 16:36:55
180
2
原创 js继承
对象拷贝function extend(old,new){ for(let key in old){ if(new[key]){ continue }else{ new.key = old[key] } }}2.原型继承function Person(){ this.have = 119}function Student(num,name,age){ this.num = num this.name = name ..
2020-10-29 17:30:16
56
原创 10.24算法
题：解：题解：找不重复子串的最长长度，首先对字符串每一个字符进行遍历，在遍历中计算出其每个字符对应的不重复长度，在过程中保留最大值。题：解：题解：采用两分法，两个数组合并，m+n个长度，处于新数组的右边的第一个数可以将原来的两数组各分为两个部分，暂记右边部分第一个元素为a和b，由于是合并，indexa+indexb = c.length，而且，indexa-1对应的元素必定小于indexb对应的元素，而indexb-1对应的元素也必定小于indexa对应的元素，通过这个特性不断循环寻..
2020-10-24 23:28:52
109
原创 10.23算法
题：解：题解：采用Hashmap的方法，键为数组value，值为其index，通过对其gap键对数组进行遍历寻找，找出其与target差值的下标题：解：题解：这题主要难在是链表操作，值不断相加，通过sun创建新节点直到最长的链表循环完毕为止，通过add标记是否进位，特别注意在循环最后还有一次进位没有计算需要警惕。...
2020-10-23 21:13:58
70
原创 react-router-dom路由
react-router-dom路由1、下载npm install --save react-router-dom2、在index.js中导入routerimport {HashRouter,Browser} from 'react-router-dom'使用HashRouter包裹根组件3、通过NavLink标签进行路由转换import React from 'react';import {NavLink,Route,Switch} from 'react-router-dom'im
2020-05-22 20:05:38
99
原创 canvas学习笔记
canvas 学习笔记canvas不建议在样式中设置尺寸，会导致画布中内容同步放大。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TihUgnoN-1589252734175)(C:\Users\86177\AppData\Roaming\Typora\typora-user-images\image-20200506211420624.png)]默认宽度1px，默认颜色黑色，线条存在粗细不一问题：对齐的点是线的中心位置 会把线分成两个0.5排序，显示的是
2020-05-12 11:06:21
213
原创 上传图片到服务端
客户端上传图片到后端前端为vue,后端为node客户端代码1.1 template中：<input type='file' multiple='multiple' ref='selectfile' @change='onload' /> <--! multiple表示可传多个图片 -->1.2 script中：onload(){ var pic...
2020-04-25 22:49:23
222
原创 Node环境中mongoDB数据库增删改查
MongoDB数据库增删改查增加数据var admin = new User({ username:'admin', password:'123456', email:'admin@admin.com'})admin.save(function(err,ret){ if(err){ console.log('保存失败') }else{...
2020-04-21 19:22:18
273
原创 Node环境下连接mongoDB数据库
mongoose基本模板var mongoose = require('mongoose')//连接mongoDB数据库mongoose.connect('mongodb://localhost/test',{useMongoClient:true});mongoose.Promise = global.Promise;//创建一个模型//就是在设计数据库//mongoose在代码中...
2020-04-21 19:21:27
95
原创 Node环境中连接Mysql数据库
node连接Mysql下载mysql包npm i mysql代码样式var mysql = require('mysql')//1.创建连接var connection = mysql.createConnection({ host:'localhost', user:'me', password:'secret', database:'my_db'...
2020-04-21 19:20:29
149
原创 最基础的回调函数
封装异步API(使用回调函数)以保存学生信息的异步API为实例最基础的回调函数，存在回调地狱的问题，另有promise、async&await回调函数exports.save=function (student,callback){ //挂载暴露异步API fs.readFile(dbPath,'utf8',function(err,data){ //读入文件数据 ...
2020-04-21 19:19:28
117
原创 nodejs环境中路由模块提取
node中路由模块的提取1.app.js文件配置app.js入口模块中需添加以下语句导入及配置路由模块var router = require('./router') //文件路径查找再把路由容器导入到app服务中app.use(router)2.在路由模块配置路由信息并挂载到module.exports上路由模块文件信息大致如下var fs = requ...
2020-04-21 19:16:34
249
原创 React学习Day#1=>React状态提升
React状态提升应用场景当多个子组件需要反映相同的变化数据，此时进行状态提升，将该数据提升至父组件中以简化操作。举例示范以人民币与美元换算为例两个input输入框（子组件），一个框中输入人民币，另一个框自动换算为美元。父组件：import React from 'react'import Child1 from './a.jsx'import Child2 from...
2020-04-21 19:14:33
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人