前端程序猿dzf-CSDN博客

原创浅谈html2canvas实现浏览器截图的原理

1、什么是html2canvashtml2canvas可以直接截取特定dom元素内的所有内容并导出图片官网地址：http://html2canvas.hertzen.com/2、使用方式安装npm i html2canvas -S引入使用// vue文件  <template> <div class="c-code" v-if="showOriImg"> <div clas

2021-12-16 16:36:22 8080 1

原创 react的ref原理

1、什么是refref使用时，可以拿到对应的元素真实dom ，或者类组件的实例，或者传入React.forwardRef包装后的函数组件2、dom元素使用refimport React from './react';import ReactDOM from './react-dom';class Sum extends React.Component{ numberA numberB result constructor(props){ super(props);

2021-12-01 11:29:18 817

原创 react组件更新原理

1、setState()什么时候批量异步？非react管控时：如setTimeot等：同步、非批量的，react生命周期时，合成事件：异步批量更新2、预备知识React.createElement传参不同返回得虚拟dom的type就不一样看下面得图比如下面的 React.createElement(FunctionComponent, { name: “zhufeng” });则type就是一个类或者函数看传入的参数（看下面的外部打印）如果FunctionComponent

2021-11-12 12:42:11 2344

原创 react复盘-jsx

react复盘-jsx1、React.createElement实现原理className 代替class,class是js保留关键字所以用className写标签和调用React.createElement区别babel-jsx插件会自动编译，把 dom标签（<div className="title" style={{color:'red'}}> <span>hello</span>world </div>）转换以下语法，然

2021-11-12 12:31:54 692

原创虚拟列表实现原理

1、虚拟列表核心原理就是比如有100条数据如果全部渲染出来，那么dom结构里面对应有100个对应的dom，比如1000 10000的时候，就会开始影响页面性能，那么就要实现虚拟列表， dom结构里面永远只渲染10条或者页面可展示的条数，那么性能就会大大提升！2、实现原理function Home(props: Props) { let lessonListRef = useRef(null); useEffect(()=>{ lessonListRef.c

2021-10-28 15:16:46 4914

原创下拉刷新原理

1、借助fixed定位然后改变top做下拉移动效果.home-container{ position: fixed; top:100px; left:0; width:100%; overflow-y:auto; height: calc(100vh - 221px); background-color: #FFF;}2、核心代码，借助touchstart touchmove touchend 事件监听做处理一开始触发移动就会执行 t

2021-10-28 11:41:18 1364 1

原创拖拽组件实现原理

直接进主题：1、做拖拽组件核心是要设置组件绝对定位平且设置动态的style: left top动态变化就行<template> <div @mousedown="handleMouseDown" class="locationWidget" :class="{ active: isActive }" :style="{ 'margin-top': (widget.marginTop |

2021-10-22 16:42:14 3039

原创 nuxt服务端开发使用记录

一、初始化项目npx create-nuxt-app my-blog使用sass 自动注入功能npm install sass sass-loader @nuxtjs/style-resources安装axios 和代理 npm install @nuxtjs/axios @nuxtjs/proxy -S安装cookies插件npm i cookie-universal-nuxt -S 二、项目整体结构package.json{ "name": "my-blog", "

2021-05-18 11:30:11 501

原创浅谈vuex源码分析

vuex使用方式store/index.jsimport Vue from 'vue'import Vuex from '@/vuex'// import Vuex from 'vuex'// import logger from 'vuex/dist/logger.js'Vue.use(Vuex)// // new Vuelet store = new Vuex.Store({ state: { // state = > data name: 'zhufe

2021-05-07 11:45:27 249 1

原创浅谈vue的ssr服务端渲染

为什么使用服务器端渲染 (SSR)更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。更快的内容到达时间 (time-to

2021-04-27 17:11:19 1652 9

原创 vue的data属性数据劫持思路

vue的data属性数据劫持思路1、一开始初始化使用入口<body>  <div id="app" a=1 style="color:red;background:blue"> hello {{arr}} world </div> <script src="dist/vue.js"></script>

2021-04-13 07:10:24 483

原创 WebComponent小demo

未来组件化开发趋势WebComponent优点：原生组件，不需要框架，性能好代码少。缺点：兼容性问题组件化好处: 高内聚、可重用、可组合WebComponent一、核心三项技术Custom elements：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们 Shadow DOM：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这.

2021-04-13 07:03:48 387

原创自研开发小工具

脚手架工具一个比较轻便的命令行工具，功能包含一键提交代码，一键替换配置，一键合并代码等（如果遇到冲突，要手动解决），后续会持续丰富他的功能点。安装教程 install全局安装npm i command-cli -g功能和使用方式command-cli 可以直接在命令行工具中执行，也可以在 package.json 的 scripts 标签里面定义命令1. 自动提交代码command-cli push -m feat:更新的内容参数：–message(-m 缩写) ：后面

2021-03-26 18:13:33 274

原创 GitLab webhook触发jenkins

一. 应用场景push代码到公司的gitlab,利用gitlab的钩子触发jenkins编译.二. 设置步骤2.1 设置jeknins中的项目这一步因人而异：由于我的项目是根据参数的分支构建的， GitLab webhook触发jenkins是不传入参数的，所以我默认设置个构建分支名字origin/dev_branch2.2 设置gitlab中的项目如下图,填写url和secret token即可, 这样push代码到特定分支后,jenkins就会自动更新了.url和token就是

2021-03-26 17:31:23 434

原创将你的项目上传到 npm

1、上传准备准备一个项目，可以尝试将项目上传到 npm.org这里默认你已经安装了 node，如果没有的话需要自行安装。上传之前首先你要有一个（最好测试通过的）项目，项目中需要一个 package.json 文件（如果没有的话，npm init 初始化一个）如：{ "name": "command-cli", "version": "0.0.1", "description": "命令行工具", "main": "./bin/bundle.js",

2021-03-24 17:16:31 916

原创 Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法

Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法Jenkins 管理界面出现了反向代理设置有误的错误。后来发现是因为 Configure System 里的 Jenkins URL 地址设置的和访问地址不一致所致。我们把这两个地址设置一致就好了。现在好了...

2021-02-05 16:27:15 957

原创 Generic Webhook Trigger 自动化构建jenkins

1、概述自动触发jenkins，我们希望是根据自己需要的分支构建才自动触发，有选择性构建，而不是全部构建，故有以下插件处理，Generic Webhook Trigger ，可以根据条件做过滤处理。其实整体思路和github webhook差不多可以参考这篇文章github-webhook自动触发jenkins构建2、安装Generic Webhook Trigger插件3、配置jenkins构建触发器其余配置参考上面的文章只讲构建触发器配置勾选下面并且填入ref变量

2021-02-05 15:09:40 4230

原创 github-webhook自动触发jenkins构建

1、首页获取 GitHub 的 Personal access token点击 Developer settings点击 Personal access tokens。再点击 Generate new token.有可能要输入密码勾上 repo 和 admin:repo_hook点击 Generate token。生成之后将这个 token 保存。一定要保存，后面就看不到了，后面会用到2、配置 JenkinsGithub 服务器是用来接收giuhub的请求的，通信时用到

2021-02-05 11:57:25 1792

原创 jenkins前端构建

1、新建任务2、输入任务名和选择任务类型-自由风格3、填写general信息如果构件化参数过程-Git参数没有Git参数选项要安装git paramater插件流程如下1、进入插件管理2、搜Git Parameter Plug-In 安装（我已经安装）3、安装好后就会有这个选项了大致按这样填写，构建时可以选择分支4、下面选项也勾选下4、源码管理添加凭证大致如下：![在这里插入图片描述](https://img-blog.csdnimg.cn/202

2021-02-05 11:30:26 1240

原创 jenkin安装教程

jenkin安装教程本文是centos7系统安装jenkins1、安装java环境Jenkins是开源的,使用Java编写的持续集成的工具，在Centos上可以通过yum命令行直接安装。记录下安装的过程，方便以后查找。需要先安装Java,如果已经Java可以跳过该步骤。看到当前系统Java版本的命令:java -version如果显示Java版本号，说明已经正确安装，如果显示没有该命令，需要安装Java：用yum安装sudo yum install java该命令如果检测到J

2021-02-05 10:43:07 212

原创模块联邦实现微前端

1、简介实现微前端有single-spa、qiankun现在有新的方式，借助webpack5新特性，模块联邦实现微前端2、使用流程介绍2.1 首先有一个host项目ModuleFederationPlugin 配置介绍webpack配置let path = require("path");let webpack = require("webpack");let HtmlWebpackPlugin = require("html-webpack-plugin");+ co

2021-01-23 11:43:07 1407 5

原创 webpack5新特性记录

webpack5大致使用和webpack4相同介绍下新的特性1、启动命令不一样了webpack serve 就能启动 webpack-dev-server "scripts": { "build": "webpack", "start": "webpack serve" },packjson结构{ "name": "zhufeng-webpack5-202012", "version": "1.0.0", "description": "", "main":

2021-01-22 17:44:44 552 3

原创 react点击事件

React的jsx中, 为一个button添加onclick事件，什么时候需要bind(this)简介：在react项目中，为一个按钮等添加一个事件，有的地方会用bind(this),本文就分析一下：什么情况下需要bind(this)？为什么要用bind(this)?可以不用bind(this)吗？开门见山，先直接给出为一个button添加一个事件的正确写法：开门见山，先直接给出为一个button添加一个事件的正确写法：为一个button添加一个onclick事件的正确写法不传参数

2021-01-05 18:18:25 5387

原创 react16接入微前端到vue项目总结

1.vue主应用配置const apps = [ { name: 'react16', entry: '//localhost:3888', // 默认会加载这个html 解析里面的js 动态的执行（子应用必须支持跨域）fetch container: '#react16', activeRule: '/rfmtools/#/react16' }];registerMicroApps(apps); // 注册应用sta

2020-12-29 12:24:49 673

原创手写vue-router核心源码

1、vue-router使用规则vue-router使用时要调用Vue.use(VueRouter)使用如下：router/index.jsimport VueRouter from '@/vue-router';Vue.use(VueRouter);const routes = [ { path: '/', name: 'Home', component: Home },]const router = new VueRo

2020-12-25 11:42:42 206

原创 webpack5初体验和性能优化配置介绍

webpack5使用1.安装依赖包创建一个文件夹npm init 生成package.json文件夹然后安装依赖 cnpm webpack webpack-cli html-webpack-plugin webpack-dev-server cross-env -D新建一个webpack.config.js文件写配置新建src/inde.js 文件新建模板文件 src/index.htmlpackjson命令"scripts": { "build": "webpa

2020-12-22 14:56:16 3258

原创腾讯云搭建个人网站技术记录

1、为什么用腾讯云可能价格方便相对不是很贵，自己用，差不多配置就够了，新人购买不是很贵的，所以就用了。域名注册也是在腾讯注册了注册一年试试。 (以上非广告，自用而已)2、新建部署的项目比如我用hexo搭建的个人网站项目，具体可以参考hexo入门其实我搭建了hexo, 然后网上找了个archer主题，我可以放在github page，也可以放在腾讯云服务器，我2个地方都放了试试。3、简单介绍下放github-page过程3.1 创建比如dengzhifeng.github.

2020-12-10 15:23:19 248

转载 async/await初探原理

1、async/await实现一个async await 案例async () => { const a = await Promise.resolve(a); const b = await Promise.resolve(b); const c = await Promise.resolve(c);}那么我们要如何实现一个async/await呢，首先我们要知道，async/await实际上是对Generator（生成器）的封装，是一个语法糖。由于Generator出现不

2020-10-27 17:34:28 446

原创观察者模式和订阅者模式

简单的订阅者模式1、要有个存放订阅的事件队列2、通过on去订阅事件3、emit去触发事件const fs = require('fs'); // node的自带模块const path = require('path');const resolve = (...file) => { return path.resolve(__dirname, ...file);};console.log(resolve('../age.txt'));let eventObj = {

2020-10-27 11:29:39 243

原创高阶函数介绍-函数柯里化、切片编程

1. 高阶函数2个特点满足一个就是高阶函数1）我们给一个函数传入一个函数2) 一个函数返回一个函数1.1切片编程// 装饰器模式（对原本功能进行包装）切片编程function core(a, b, c, d) { console.log('core...', a, b, c, d);}// 每个实例都有一个原型对象， core的原型对象是他的构造函数的原型prototype 即Function.prototype// core的构造函数即Function 它所有实例都有一个

2020-10-27 11:21:25 176

原创手写promise源码介绍

手写promise源码介绍1、promise的resolve reject then函数实现2、catch函数实现3、Promise.resolve如何实现呢4、Promise.defer实现5、 Promise.all()方法实现6、 finally()方法实现1、promise的resolve reject then函数实现1.1、promise有3种状态const STATUS = { PENDING: 'PENDING', // 等待中 FUFILLED: 'FUFILL

2020-10-26 17:11:41 341 2

原创 webpack3.0升级4.0记录

webpack3.0升级4.0记录一、为什么升级webpack3.04.0有如下优点1、4.0的treeshaking，代码更轻量，减少冗余代码。2、使用了splitChunkPlugin, 告别了commonChunkPlugin，代码分割更完善了。3、引入mode参数3.1、 production参数：3.2、 development参数4、构建时间提速98%。二、安装必要依赖三、修改新的配置1、webpack.base.config.js修改2、webpack.dev.config.js修改3、web

2020-10-10 15:42:23 845 2

原创鼠标滚动触发水平滚动处理

let bind = window.addEventListener !== undefined ? 'addEventListener' : 'attachEvent', wheel = window.onwheel !== undefined ? 'wheel' : window.onmousewheel !== undefined ? 'mou

2020-10-09 16:52:30 377

原创搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen.height每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位

2020-10-09 16:49:59 152

原创【webpack】DLL plugin原理分析

DLL plugin打包步骤.dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据把基础模块独立打包出来放到单独的动态链接库李当需要导入的模块在动态链接库的时候，模块不能再次打爆，而且从动态链接库里面获取DllPlugin插件：用于打包一个个动态链接库DllReferencePlugin:在配置文件中引入DllPlugin插件打包好的动态链接库1、定义配置文件和命令 "build:dll": "webpack --config build/webpack.d

2020-09-25 17:50:19 2637

原创 webpack提高构建速度

1、费时分析// webpack.dev.confconst SpeedMeasurePlugin = require("speed-measure-webpack-plugin");const smp = new SpeedMeasurePlugin();module.exports = smp.wrap(merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev

2020-09-25 17:17:16 466

原创 webpack如何优化前端性能

1. 安装cnpm i react react-dom -Scnpm install webpack webpack-cli webpack-dev-server image-webpack-loader mini-css-extract-plugin purgecss-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react terser-webpack-plugin html-webpack-plu

2020-09-22 16:56:41 568

原创 webpack构建流程（简化版，大概思路）

1、构建流程初始化参数，从配置文件和shell语句读取和合并参数，得出最终的参数。开始编译：用上一步得到的参数初始化Compiler对象。加载所有配置的插件。执行对象的run方法开始编译。确定入口：根据配置中的entry找出所有的入口文件。编译模块：从入口文件出发，调用所有配置的Loader对模块进行编译，再找到该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过本步骤的处理完成模块编译：经过上一步使用Loader编译完所有模块后，得到了每个模块翻译后的最终内容以及他们之间的依赖关系

2020-09-21 16:03:42 678

原创 webpack热更新原理介绍

webpack热更新原理1、什么是HMR2、搭建HMR项目3、热更新流程图3、项目文件4.手写实现webpack-dev-server.js5、编写客户端更新模块webpackHotDevClient6、总结* 集成 Socket.IO介绍（只是普及和上面无关）1、什么是HMRHot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行新打爆，并将新的模块发送到浏览器端。相对于live reload 刷新页面的方案， HMR的有点在于保存应用的状态，提高开

2020-09-17 13:50:25 1248

原创 qiankun-微前端初体验

这里写自定义目录标题1、微前端2、什么是微前端2.1技术栈无关2.2独立开发、独立部署2.3增量升级2.4独立运行时3、初步简单使用介绍3.1 首先创建基座项目，即顶层项目，用来包裹各个微项目。3.2 首先创建vue微项目，可独立运行，可加载在父级项目。3.3 首先创建react微项目，可独立运行，可加载在父级项目。4、启动3个项目测试下1、微前端qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融

2020-08-18 16:39:14 2071 6

Paste_2.4.1_xclient.info.dmg

空空如也