源码分析
关注
分享
扫一扫
敲出真谛
这个作者很懒，什么都没留下…
展开
-
读TAPABLE源码后，认识了这几个钩子
思想很重要原创 2022-08-11 20:47:17 · 428 阅读 · 0 评论 -
node 学习笔记 2 （fs模块，文件和文件夹的遍历）
1.深度优先function preDeep(dir, cb) { console.log(dir) fs.stat(dir, function (err, statObj) { console.log(statObj) if (statObj.isFile()) { console.log('object', dir, cb) fs.unlink(dir, cb) } else {原创 2021-12-09 22:56:39 · 890 阅读 · 0 评论 -
node 学习笔记 1 commonjs规范
comminjs规范中的require简单实现原创 2021-12-07 10:18:17 · 237 阅读 · 0 评论 -
React 学习笔记 17（useShouldComponentUpdate）
封装hooks,实现通过比较状态来实现是否更新组件（原始react中是没有类似比较状态更新组件的）import {useState,useRef} from "react"function useShouldComponentUpdate(initialValue, shouldUpdate) { // 满足条件后通过调用 setState 方法更新组件 const [, setState] = useState(initialValue) // 自定义（状态） c原创 2021-11-16 10:44:30 · 460 阅读 · 0 评论 -
React 学习笔记 13 （Redux-saga）
redux-saga是react中解决异步最常用的中间件，它与redux-thunk相比，处理异步是接近纯函数的思维，只派发一个普通对象。我们逐步拆解它的effects1.delayconst delay = function (ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(true) }, ms) })}2.take/** *原创 2021-08-09 20:17:05 · 193 阅读 · 0 评论 -
React 学习笔记 12 （路由的实现原理）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hash路由</title></head><body> <div id=".原创 2021-06-01 16:14:57 · 313 阅读 · 0 评论 -
React 学习笔记 11 （React-Redux的实现原理）
Redux-Redux是一个连接React和Redux的库，我们都知道Redux是可以不依赖React的，我们在使用的时候需要手动派发action,自己实现订阅函数，而React-Redux的存在就是可以替我们实现这些繁琐的事情。更易于使用1.导出// index.jsimport Provider from './Provider';import connect from './connect';export { Provider, connect}2.创建上下文原创 2021-05-22 15:57:54 · 157 阅读 · 0 评论 -
React 学习笔记 10 （React.PureComponent原理）
React的这个API，具有浅层比较的功能，可以提高性能，减少不必要的页面渲染。实现也是比较简单，就是实现了一个浅层比较函数import React, { Component } from 'react'export default class PureComponent extends Component { isPureComponent = true //传入新的属性对象和状态对象，然后返回一个是否需要更新的boolean值 shouldComponentUpdate(ne原创 2021-05-14 11:19:12 · 172 阅读 · 1 评论 -
React 学习笔记 9 （React.CreateRef 源码简单实现）
1.React是不建议我们直接操作DOM的，如果我们在开发中还确实有必要要操作DOM,为此，特提供了ref这个API供我们使用。简单来时随着React版本的不断更新，我们操作DOM有三种方式可实现，第一种和第二种随便版本的迭代，逐渐地退出了历史的舞台，现在第三中的hooks用法是主流。第一种 ref是一个字符串class Sum extends React.Component{ add = ()=>{ let numA = this.refs.numA.value; .原创 2021-05-02 22:26:06 · 187 阅读 · 0 评论 -
React 学习笔记 8 （React.createContext源码简单实现）
1.获取上下文对象，提供Provider和Consumer方法，可以跨组件传递信息，一般用在React-redux中function createContext() { class Provider extends React.Component { static value; constructor(props) { super(props);//{value:xx} Provider.value = props原创 2021-04-28 20:15:18 · 287 阅读 · 0 评论 -
React 学习笔记 7 （React.createElement简单实现）
1.什么是React元素是React应用的最小单位，它描述了你在屏幕上看到的内容，React元素的本质是一个普通的JS对象，ReactDOM会保证浏览器中的DOM和你的React元素一致。2.使用babel转化生产元素的背后故事function createElement(type,config={},...children){ return { type, props: {...config,children}}}...原创 2021-04-27 17:03:20 · 652 阅读 · 0 评论 -
React 学习笔记 6 （combineReducers源码简版实现）
一个项目只有一给仓库，状态也只能有一个，但是组件会非常之多，我们为了每个组件的共享状态便于统一管理，需要将多个reducer进行合并export default function combineReducers(reducers) { const reducerKeys = Object.keys(reducers);// [counter1,counter2] return function (state = {}, action) { const nextState原创 2021-04-21 22:14:47 · 205 阅读 · 0 评论 -
React 学习笔记 5 （bindActionCreators源码简版实现）
绑定action的创建者export default function bindActionCreators(actionCreators, dispatch) { function bindActionCreator(actionCreator) { // dispatch(actionCreator()) return (...args) => dispatch(actionCreator(...args)) } if (typeof原创 2021-04-21 10:11:15 · 177 阅读 · 0 评论 -
React 学习笔记 4（React -router-dom 源码解析）
1.BrowserRouter与HashRouter对比： HashRouter最简单，不需要服务器端渲染，靠浏览器的# 的来区分path就可以，BrowserRouter需要服务器端对不 同的URL返回不同的HTML。 BrowserRouter使⽤HTML5 history API（ pushState， replaceState和popstate事件），让⻚⾯的UI于URL同 步。 HashRouter不⽀持location.key和location原创 2021-04-08 16:10:31 · 182 阅读 · 0 评论 -
React学习笔记 3 （Rudux,Redux-logger,Redux-thunk）源码实现
1.myReduxexport function createStore(reducer, enhancer) { if (enhancer) { return enhancer(createStore)(reducer) } // 保存状态 let currentState = undefined; // 回调函数 let currentListeners = []; function getState() {原创 2021-04-01 21:07:21 · 413 阅读 · 0 评论 -
Koa源码解析
1.myKoa.js概述：Koa 是⼀个新的 web 框架， 致⼒于成为 web 应⽤和 API 开发领域中的⼀个更⼩、更富有 表现⼒、更健壮的基⽯。 koa是Express的下⼀代基于Node.js的web框架 koa2完全使⽤Promise并配合 async 来实现异步const http = require("http")const context = require('./context')const request = require('./request')const resp原创 2021-03-19 20:14:43 · 265 阅读 · 0 评论 -
Vue相关面试题
1.Vue的data为什么是个函数？Vue组件可能存在多个实例，如果使用对象形式的data,则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的;采用函数形式定义，在initData时会将 其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。...原创 2021-03-16 23:29:04 · 126 阅读 · 0 评论 -
组件开发（二）仿ant-design-vue实现自定义CusTable组件
仿照antd-vue实现的自定义table组件，包含以下基本点1.边框 2.斑马纹 3.全选 4.排序 5.固定表头一.总体效果二.基本代码1.父组件<!-- Discription: table组件, author: ydj, Date: 2021-01-14 09:36:34 --><template> <div> <h1>仿antd-vue实现自定义表格</h1> <span>.原创 2021-01-14 20:14:02 · 705 阅读 · 0 评论 -
检测数据类型方法
方法一 /** * * @param {*} target * 判断类型 */ sayType(target) { const typeList = { "[object String]": 'object - String', "[object Array]": 'array', "[object Object]": 'object',原创 2021-01-12 15:16:01 · 396 阅读 · 0 评论 -
组件开发（一）仿element的Message组件
仿照elemet-ui的Message组件，实现自己的Message组件1.效果如下2. 基本代码message.jsimport MessageComponent from './Message.vue';import Vue from 'vue';// 单例模式let instance;let getVueInstance = () => { instance = new Vue({ render: h => h(MessageCompone原创 2021-01-06 17:39:30 · 668 阅读 · 0 评论 -
手写ajax源码
Q: 什么是ajaxA: 异步的javascript和xml(Asynchronous Javascript And XML )Q: readyState有几种状态，各个状态各代表什么含义????有5中状态，各状态的含义如下 0 请求未初始化（代理被创建，但是尚未调用open()方法） 1 服务器连接已建立（open方法已经被调用） 2 请求已接收（send方法已经被调用，并且头部和状态已经可获得） 3 请求处理中（下载中，responseText 属性已经包原创 2020-11-04 20:35:04 · 137 阅读 · 0 评论 -
jQuery源码仿写
虽然现代前端已经是MVVM框架的天下，但是在jQuery中的一些设计模式和思想还是值得我们借鉴和学习的。本文主要分实现了一些开发中使用比较频繁的方法和函数。由于能力有限，如有不妥的地方还请多多指教。class Jq { constructor(arg, root) { if (typeof root === 'undefined') { this['prevObject'] = [document]; } else {原创 2020-10-24 10:19:03 · 242 阅读 · 0 评论 -
手写Object.create
Object.create = function(obj){ const fNop = function(){}; fNop.prototype = obj; return new fNop()}const obj = { name: 'ydj', sex: 'male', age: 20}const p1 = Object.create(obj);console.log(p1)原创 2020-09-25 19:54:57 · 369 阅读 · 0 评论 -
手写 instanceof
function myInstanceof(obj, pro) { obj = obj.__proto__; pro = pro.prototype; while (obj) { if (obj === pro) return true; // 一直向原型链上查找 直到结果为 null ,跳出循环 obj = obj.__proto__; } return false;}console.log(myInstanc.原创 2020-09-24 21:03:57 · 522 阅读 · 0 评论 -
手写await
function run(genF) { // 返回值是Promise return new Promise((resolve, reject) => { const gen = genF(); function step(nextF) { let next; try { // 执行该函数获取一个有着value和done两个属性的对象 nex.原创 2020-09-24 20:31:44 · 185 阅读 · 0 评论 -
手写new实现
function myNew() { const obj = {}; // 获取数组中的第一项为当前的类名即为构造函数 const constructor = [].shift.call(arguments); // 1. 原型继承 obj.__proto__ = constructor.prototype; // 2. 继承构造函数实例上的属性 const result = constructor.apply(obj, arguments); .原创 2020-09-23 20:36:18 · 169 阅读 · 0 评论 -
js 数组常用方法源码实现
pushconst array = [1, 2, 3, 4]// console.log(array.push(5,6,7))// console.dir(array)/* 手写push源码实现 1.在数组的末尾添加 2.可以一次添加多项不同类型的数据 3.返回数组的长度 */Array.prototype.myPush = function () { for (let i = 0; i < arguments.length; i++) {原创 2020-09-04 19:42:55 · 958 阅读 · 1 评论