- 博客(30)
- 收藏
- 关注
RSS订阅原创 虚拟DOM介绍
什么是虚拟DOM为啥用虚拟DOM虚拟DOM的描述Snabbdom库使用什么是虚拟DOM一个普通的JS对象用来描述真实的DOM，那么描述真实DOM的JS对象就是虚拟DOM。为啥用虚拟DOM以一个div为例，一个div的身上有超级多的属性，而创建一个描述div的js对象的属性特别少，那么相比之下，虚拟DOM的创建要比真实DOM创建开销少的特别多。虚拟DOM可以跟踪应用程序的状态，从而达到视图与状态的同步。复制视图中可以很明显的提升渲染性能跨平台特性，不仅可以应用在浏览器平台，SSR，原生应用，.
2021-06-18 13:18:26
394
原创 react-router BrowserRouter刷新 报404问题
介绍出现问题的原因解决开发模式线上部署node服务器nginx服务器react嵌套路由（分组路由）解决方式介绍在开发中我们在使用react官方推荐的react-router的BrowserRouter时候，如果不做特殊处理，当跳转路由之后，刷新浏览器一定会报404的问题。出现问题的原因browserHistory 模式下，URL 是指向真实 URL 的资源路径，当通过真实 URL 访问网站的时候（首页），这个时候可以正常加载我们的网站资源，而用户在非首页下手动刷新网页时，由于路径是指向服务器的真实.
2021-06-02 10:32:10
2420
原创 模拟数据响应式
介绍原理模拟数据响应式Object.definePropertyProxy介绍当数据发生变化的时候，视图会自动更新。数据改变，视图随着数据的改变而做出响应。这就是数据响应式。原理我们可以利用对象的setter和getter对数据进行监测劫持，当数据发生改变的时候，在setter里面进行对应的DOM操作即可。模拟数据响应式Object.defineProperty利用ES5 提供的Object.defineProperty方法对对象的单个属性进行监测。 let data = { n.
2021-06-02 09:54:16
155
原创 基于webpack 4.x版本的源码分析
打包之后的bundle.js简要分析bundle.js 中自调用函数体内容介绍打包之后的bundle.js简要分析webpack 打包完成之后是一个自调用函数，自调用函数接收一个对象作为参数该参数可以看成是一个模块，模块对象的键就是被加载模块文件名所在的路径，模块对象的值就是一个函数，函数体中放的就是被加载的模块，我们暂且称之为模块函数模块函数一定会被调用，并且该模块函数接收module和exportsl两个参数，利用这两个参数来实现模块的加载bundle.js 中自调用函数体内容介绍.
2021-05-20 15:52:36
162
原创 前端工程化---规范化标准
为什么要去做规范化ESLint安装初始化ESlint 与webpack集成stylelint安装配置stylelint 与webpack集成prettier安装配置prettier与编辑器的集成webstormvscodegit hooks安装使用lint-staged安装使用为什么要去做规范化在开发一个大型应用之前，进行规范化标准的指定是必不可少的，千万不要嫌麻烦而忽略这项工作。否则等待你的将是一个无底洞的深渊。一个大型应用的开发不可能是你一个人独自进行，即使就算能力、精力超强，你一个人可以负责，但.
2021-04-17 20:02:35
267
原创 Rollup简单介绍
简介安装配置执行配置文件插件rollup-plugin-jsonrollup-plugin-node-resolverollup-plugin-commonjsCode Splitting多入口打包amd格式注意rollup应用场景简介是一款ES Module打包器，其作用与webpack一样，对散落在项目内的各种类型文件统一打包。相比于webpack，Rollup虽然小巧，但是没有类似于webpack的HMR功能，对开发阶段不太友好。rollup打包出来的代码非常简洁，就是依据模块的依赖顺序，先.
2021-04-15 22:19:09
383
原创 webpack 4.x 快速上手
webpack 4.x 为例安装配置项modeentryoutputmoduleloadercss-loaderstyle-loaderfile-loaderurl-loaderbabel-loader自己开发loaderpluginsclean-webpack-pluginhtml-webpack-plugincopy-webpack-plugin自己开发webpack插件devServer自动编译webpack dev serverdevtoolSource Map的介绍配置source mapdevt
2021-04-15 19:39:43
186
原创 前端模块化
模块化规范ES Module模块化规范在node中遵循CommonJS规范在浏览器端遵循ES Module规范ES Module在script标签添加type='module’属性，就可以让浏览器以ES Module的标准执行script标签内的JS代码1、 特点：ES Module自动采用严格模式，会忽略掉js文件头部的’use strict’每个ES Module 都是运行在独立的私有作用域中意思就是ES Module规范的代码中的变量，只在当前Module中有效。这样做的最大.
2021-04-07 20:42:58
136
原创 自动化构建介绍
自动化构建介绍常用的自动化构建工具Grunt使用Gulp使用FIS介绍将源代码自动化构建成生产环境下的代码，构建将那些浏览器目前不支持的特性代码转换成浏览器能够识别的代码，从而提高开发效率。常用的自动化构建工具1、Grunt 速度慢 会有磁盘读写的过程2、Gulp 速度快 因为是写入内存的过程3、FIS 百度出品 适合小白Grunt使用1、安装yarn add grunt2、根目录下创建 gruntfile.js 入口文件 ，此文件用于定义一些需要Grunt自动执行的任务
2021-04-06 22:02:29
282
原创 Plop的使用 &自定义简易脚手架
脚手架作用Yeoman的基本使用安装脚手架作用创建项目基础结构、提供项目规范和约定Yeoman的基本使用安装yarn global add yoyarn global add generator-nodegenerator-node是node模块生成器
2021-03-30 17:08:37
540
原创 JS循环中异步变同步
循环中异步边同步应用场景方式一方式二应用场景在前端进行大文件上传的时候，往往会采用分片上传的方式，而分片上传每一个文件块都需要发送一个请求给后端，同时每一个文件块都要等前一个文件块的请求成功之后才能发起自己的请求。而文件块的数量太多或者文件块的数量不定的时候，就需要采用循环的方式进行请求。此时就需要考虑到将循环中的异步请求变成同步。方式一async await 结合原始for循环实现const promise1 = new Promise((resolve, reject) => {
2021-03-30 14:11:47
3094
原创 笔记-前端工程化
工程化定义前端工程化好处工程化的具体表现工程化的细节工程化定义遵循一定的标准和规范，通过工具去提高效率降低成本的一种手段前端工程化好处解决js、css等传统语法的弊端（例如：解决使用es6新特性时的兼容性问题、使用less、sass、postCSS时遇到的运行环境不能直接支持的问题）解决无法使用模块化、组件化的问题（例如：使用模块化、组件化的方式去提高项目的可维护性，但是运行环境不能直接支持）解决重复式的机械工作（例如：部署上线需要手动压缩代码以及资源，部署过程需要手动上传代码至服务器这种比.
2021-03-29 23:29:37
62
原创 笔记---this指向
this指向总结箭头函数中的this案例案例一案例二this指向总结关于this的指向，函数内部的this只有在函数被调用的时候，内部this的指向才会被确定到底指向谁。谁调用的函数，那么函数内部的this就指向谁。当函数调用的方式严格模式下this指向是undefined，非严格模式下this指向是window箭头函数中的this箭头函数本身没有自己this，其内部this是继承于离自己最近的函数作用域中的this案例案例一const obj2 = { foo: function.
2021-03-29 17:06:25
78
原创 笔记---JavaScript性能优化（四）
JS代码优化慎用全局变量缓存全局变量通过原型对象添加附加方法避开闭包陷阱避免属性访问方法使用For循环的优化选择最优的循环方式文档碎片优化节点添加克隆优化节点操作js性能测试网站堆栈中代码执行过程慎用全局变量全局变量定义在全局执行上下文，是所有作用域链的顶端全局变量会一直存活在上下文执行栈中，直到程序退出如果在程序的某个局部作用域定义了同名的全局变量，那么会造成覆盖之前的全局变量或污染全局全局变量的执行效率要比局部变量的执行效率低。缓存全局变量应用中有不可避免的全局变量，要将其缓存到局部在局
2021-03-25 18:28:16
53
原创 笔记--JavaScript性能优化（三）
性能监测介绍Performance工具使用步骤内存问题的现象监控内存的方式任务管理器监控内存Timeline记录内存堆快照查找分离DOM分离DOM的说明案例判断是否存在频繁GCPerformance工具它是一个可以时刻监控内存的工具。使用步骤1、浏览器输入目标地址2、F12选择性能3、开启录制功能，访问具体页面4、执行用户行为后，一段时间后停止录制5、查看分析界面中记录的内存信息内存问题的现象1、页面出现延迟加载或经常性暂停（可能在频繁的出现垃圾回收）2、页面持续性出现糟糕的性能（可能
2021-03-25 10:54:15
118
1
原创 笔记---JavaScript性能优化（二）
JS V8执行引擎垃圾回收了解V8引擎V8垃圾回收策略V8内存分配新生代对象回收实现回收细节说明老生代对象回收实现老生代对象介绍回收实现标记增量优化垃圾回收V8引擎它是JS执行引擎，即时编译，内存设限。V8垃圾回收策略回收的是储存在内存中堆里面的复杂数据（object array）V8中常用的GC算法：分代回收空间复制标记清除标记整理标记增量V8内存分配如图所示：V8内存空间一分为二小空间用于存储新生代对象（64位：32M 32位：16M）新生代对象指的是存活时间较短的对象
2021-03-25 10:53:32
93
原创 笔记---javascript性能优化（一）
JS语言层面的性能优化内存管理垃圾回收GC算法引用计数算法内存管理申请内存空间使用内存空间释放内存空间垃圾回收js中内存管理是自动的对象不再被引用的时候会被认为是垃圾对象不能从根上访问到时会被认为是垃圾js中的可达对象：可以访问到的对象就是可达对象可达的标准就是从根出发是否能够被找到JS中的根可以理解为是全局变量GC算法GC就是垃圾回收GC算法：GC是一种机制，垃圾回收器完成具体的工作。工作内容就是查找垃圾，释放其所占空间，回收空间。算法就是在工作时查找和回收所遵循的规则常
2021-03-23 12:22:04
60
原创 Typescript 介绍 （前端领域的第二语言）
Typescript安装配置文件ts的原始类型ts标准库的声明ts显示中文版的错误消息ts作用域问题ts中的object类型ts 中的数组类型ts 中的元组类型ts中的枚举类型ts中的函数类型ts中的任意类型ts中的类型断言ts中的接口ts中类的访问修饰符ts中implements关键字ts中的泛型ts中的类型声明JavaScript的超集安装在项目内进行typescript的安装。yarn add typescript执行编译命令：yarn tsc ts文件名配置文件生成配置文件命令：yar
2021-03-22 19:34:29
305
原创 Flow 简单的介绍
Flow强类型与弱类型静态类型语言与动态类型语言Flow1.安装2.编译后移除注解3.Flow编辑器的开发工具插件4.Flow原始类型5.Flow数组类型6.Flow对象类型7.Flow函数类型8.Flow特殊类型强类型与弱类型强类型语言不存在隐式类型的转换，而弱类型可以静态类型语言与动态类型语言静态类型语言：变量在声明时类型是明确的，后续是不可更改的动态类型语言：变量的类型随时可以改变，其类型在运行阶段才会被确定。Flowjs的静态类型检查器，由facebook提供1.安装在项目中安装：
2021-03-22 16:28:21
483
原创 根据函数柯里化再次理解闭包
根据函数柯里化再次理解闭包概念&原理案例我所理解的闭包概念&原理函数柯里化：其原理就是利用闭包来对函数的参数进行缓存，以此来达到当函数有多个参数的时候，可以先传递一部分参数，然后返回一个新函数，新函数再去接收剩余的所有参数并返回结果。闭包：在第三版javaScript高级程序设计一书中,对闭包的解释是指有权访问另一个函数作用域中的变量的函数。案例模拟实现lodash的curry函数const curry = (fn) => { // fn 是将要变成柯里化的函数
2021-03-22 10:56:20
121
原创 变量声明和函数的提升（结合实例自己的理解）
浏览器里面有一个解析器，解析器遇到script标签时，会先进行预解析，再一行一行向下执行。预解析分为全局预解析和局部预解析。预解析的过程：都是先找var 和function，找到之后把var 声明和整个函数提前，然后解析剩下的代码。进入函数内部的预解析叫做局部预解析。以下两个实例中涉及到的知识点：1、变量的提升，在JavaScript中，定义的变量声明会提前到函数的顶部。2
2018-01-21 17:55:06
253
原创 JavaScript高级程序设计第4章（变量、作用域的问题）自己的理解
一、变量的复制1、保存基本类型值的变量：复制此变量，就是将保存的值复制给新变量。原来的变量和复制的新变量，以后对其进行操作互不影响。2、保存引用类型值的变量：复制此变量，就是将保存的能找到引用类型值的路径复制给新变量。原来的变量和复制的新变量，以后对其进行操作相互影响。二、内存分为堆和栈两个部分。其中基本类型的值保存在栈中，引用类型的值保存在堆中。变量是储存在内存中的栈中。1、保存基本类型值的变量
2018-01-19 06:27:21
142
原创 js 中的 一些简单算法（五）
1、输入某年某月某日，判断这一天是这一年的第几天。function isLeap(year) { //判断是否是闰年 if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { return true; } return false;}function getDays(ye
2018-01-17 13:16:56
159
原创 js中的一些简单算法（四）
1、拿到百位上的数字、十位上的数字、个位上的数字。思路：百位上的数字用百位除以一百并向下取整。十位上的数字用十位除以10并向下取整。个位上的数字直接取余10得到的余数就是个位上的数字。var bai = Math.floor(i / 100); 得到百位数上的数字var shi = Math.floor(i % 100 / 10); 得到十位数上的数字var ge = i % 1
2018-01-17 07:17:04
344
原创 js 中的 一些简单算法（三）
1、1000以内不能被7整除的整数之和。思路：初始整数之和为0，循环条件：1-1000以内，判断条件：不能被7整除var sum = 0;for(var i = 1; i <= 1000; i++){ if (i % 7 !== 0) { sum += i; }}console.log(sum);2、打印1到100之间的乘积。思路：初始积为1，循环条件：2-100
2018-01-17 07:16:32
584
原创 js 中的 一些简单算法（二）之 双层循环—冒泡排序
1、打印9*9乘法表思路：脑补一下乘法表的格式，9*9就是有9列、9行组成。行和列都需要由循环控制。document.write(""); //最外面放一个大框for(var i = 1; i <= 9; i++){ //控制行循环 document.write(""); for(var j = 1; j <= i; j++){ //控制列循环 document.
2018-01-16 04:00:36
2453
原创 js学习中的一些简单算法
1、求1到100的和以及平均值var sum = 0;var avg = 0;for (var i = 1; i <= 100; i++) { sum = sum + i;}avg = sum / 100;console.log(sum);console.log(avg);2、求1到100之间所有奇数和、所有偶数和。var evenSum = 0; var od
2018-01-16 03:19:35
248
原创 事件捕获
哈哈 window.onload = function () { var link = document.getElementById("link"); var box = document.getElementById("box"); var body = document.body; link.addEvent
2018-01-14 07:36:48
193
原创 事件冒泡和阻止事件冒泡
哈哈 html结构中父盒子div包裹着链接a哈哈。给body、div、a都绑定一个点击事件，如下： window.onload = function () { var link = document.getElementById("link"); var box = document.getElementById("box");
2018-01-14 07:26:03
310
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人