- 博客(20)
- 收藏
- 关注
RSS订阅原创 rollup学习---自定义rollup实现+tree-shaking+插件
webpack打包非常繁琐，打包体积比较大rollup主需要用来打包js库vue、react、angular都在用rollup作为打包工具前置知识1.magic-string一个操做字符串和生成source-map的工具，由 Rollup 做者编写。expressvar MagicString = require('magic-string')let myString = new MagicString('export var name = "小明"')console.log(my..
2022-03-24 23:44:25
1187
原创 webpack学习--自定义webpack、loader、plugin
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具前端开发中遇到的问题：需要通过模块化的方式来开发使用高级特性，加快开发效率或者安全性，比如 es6+，ts开发脚本逻辑，sass、less编写样式代码监听文件的变化，并且反映到浏览器上，提高开发效率需要将代码进行压缩，合并以及其他相关的优化打包工具需要具备的能力：（以实现模块化为目标）能后将散落的模块打包到一起能够编译代码中的新特性能够支持不同种类的前端资源模块webpack 不同环境的预设配置.
2022-03-20 19:34:23
763
原创 vite学习——原理剖析+手写实现+插件
一、vite的使用vite是一个开发构建工具，开发过程中它利用浏览器native ES Module特性按需导入源码，预打包依赖。特点： 启动快，更新快
2022-03-16 17:52:59
2906
1
原创 从零开始认识Fiber
帧大多数设备屏幕的刷新频率为60次/秒页面帧数（FPS）小于60时，会感觉到页面卡顿每帧的时间大约是16.66毫秒每帧的包括：样式计算、布局、绘制JavaScript引擎和页面渲染引擎在同一个渲染线程，GUI渲染和JavaScript执行两者是互斥的任务执行时间过长，浏览器会推迟渲染一个帧：Fiber把渲染更新过程拆分成多个子任务，每次只做一小部分，做完看是否还有剩余时间，如果有继续下一个任务；如果没有，挂起当前任务，将时间控制权交给主线程，等主线程不忙的时候在继续执行。通过Fi
2021-06-30 18:12:01
739
1
原创 React的 setState 批量更新的原理
React的 setState 批量更新的原理背景关于React 中的setState，我们常常会看见一个问题，“React中的setState是同步还是异步的？”我们经常会这样答：可异步，可同步；这篇文章就来解释一下其中的原因现象我们先看看，在什么样的场景中是异步的：class App extends React.Component{ constructor(props){ super(props); this.btnClick = this.btnCLi
2021-06-27 14:15:08
1709
1
原创 搜索算法——遍历
一、深度优先和广度优先深度优先遍历：对每一个可能的分支路径深入到不能再深入为止，而且每个结点只能访问一次广度优先遍历：从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。1、深度优先： 采用的是堆栈的形式, 即先进后出，深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点//深度优先 function byDeepth(data) { let result = []
2021-06-23 17:00:55
4181
原创 如何看待开源
如何看待开源一、什么是开源二、开源能得到什么三、开源相对于闭源（专有）的优势四、开源的理念（特点）五、开源的影响什么是开源开源指的是那些源代码或源设计可以被大众审查、修改和增强开源是一种精神：我希望把我的东西能够分享出去让更多的人去使用它。开源的理念（特点）1、完全自主 开源的原生动力：所有程序员都喜欢源码。可以在一个无拘无束的、自由自在的环境下，干自己喜欢做的事 &n
2021-06-09 17:48:14
1796
3
原创 单页面路由的实现方式
前端路由主要由两种方式实现：hash方式 ：location.hash+hashchange事件history api：history.pushState()+popState事件hash方式实现路由跳转一个demo本地可直接使用，另外我也部署在了http://wangkehan.com/hash可以直接查看<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-06-09 17:22:54
777
原创 前端在项目初期需要做什么？
端在项目初期需要做什么？主要分四个方面项目相关项目背景通过项目背景了解当前业务痛点，想通过我们的产品达到什么样的效果。项目价值、愿景实现怎样的功能，达到怎样的业务需要等项目阶段和周期安排负责的开发任务是具有阶段性的，分为几个阶段，几次迭代，每个时间段需要做什么，有什么样的产出，是不是在业务流程上面达成共识。这个很重要。在进行任务排期的时候也会考虑。团队相关主要是对于团队内部的人员熟悉和每次会议的汇报形式和内容形式的了解。有利于后期的协作。前端相关架构相关主要
2021-06-08 15:53:10
1618
原创 React 的 Context API
写在前面上下文(Context) 提供了在组件之间共享这些值的方法，而不必在树的每个层级显式传递一个 prop 。普通传递import React, { Component } from 'react'class Grandpa extends Component { state = { info: 'GrandPa组件的信息', } render() { return ( <div> <Father info={this.
2021-01-27 16:42:54
220
原创 React源码阅读（四） —— React.createRef()、forwardRef()
refs三种使用用法ref 获取组件或是dom节点实例 一般对于函数 不能获取函数的实例 如果需要获取函数的ref 则React.forwardRef方法1.字符串dom节点上使用 获取真实的dom节点 //使用步骤： <input ref="stringRef" /> this.refs.stringRef //值：节点实例对象<input />类组件上使用 获取引用类组件的实例 //使用步骤 <Child
2020-12-29 11:06:06
438
原创 React源码阅读（三） —— Component，PureComponent
一、Component代码位置：import {Component, PureComponent} from './ReactBaseClasses';// 设置props,context，refs，updater等属性function Component(props, context, updater) { this.props = props; // 父子传递数据 this.context = context; // 爷孙传递数据 //子到父传递数据 节点实例挂载进来 this
2020-11-26 10:40:28
164
原创 React学习（二）—— 组件渲染
React学习（二）—— 组件化开发在react中的组件，有函数式组件和class类组件两种一、函数组件一般在开发中，函数组件我们会这样写：function Home () { return ( <div title="123"> <h3 className="title" > hello, react</h3> </div> )}将一个jsx对象return出去看一下，这个函数组件在渲染时，都有什么样
2020-11-21 15:06:53
514
原创 React源码阅读（二) ——render
一、ReactDom.rendertips:对源码中的代码删除_DEV_分支已经得到创建好的React元素，通过ReactDom.render函数把React元素转换为我们最终想要的DOM我们会这样使用：ReactDom.render( React.createElement(App), document.getElementById('root') );在源码中：render( element: React$Element<any>, // 虚拟dom对象
2020-11-08 12:09:33
366
原创 React源码阅读（一）——creatElement
一、React.createElement(type,config[…children])源码分析在react中，通过createElement进行虚拟dom的创建，createElement接收三个参数，（类型，属性，子类）= （type, config, children）export function createElement(type, config, children) { // type的值可能为 function， text，div等 let propName; // 提
2020-11-01 15:25:56
368
原创 React学习（一）—— jsx与虚拟dom渲染
React源码学习（一）——jsx与虚拟dom渲染一、react使用一个简单的react项目渲染，初始时会有以下几部分内容：import React from './react'; // react apiimport ReactDOM from 'react-dom'; // react 渲染dom的方法const ele = ( // jsx <div > <h3 className="title"> hello, react</h3>
2020-10-17 16:05:01
248
原创 前端小题（长期更新）
前端小题1.我们现在要实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景色function sleep(duration){return new Promise(function(reslove){setTimeont(reslove, duration)})}async function changeColor(duration, color) {documet.getElementById(‘light’).style.background =
2020-08-25 16:32:17
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人