前端干货
文章平均质量分 67
前端程序猿dzf
记录程序猿开发的一点一滴
展开
-
虚拟列表实现原理
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 · 4793 阅读 · 0 评论 -
下拉刷新原理
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 · 1340 阅读 · 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 · 2998 阅读 · 0 评论 -
自研开发小工具
脚手架工具一个比较轻便的命令行工具,功能包含一键提交代码,一键替换配置,一键合并代码等(如果遇到冲突,要手动解决),后续会持续丰富他的功能点。安装教程 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 · 253 阅读 · 0 评论 -
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 · 405 阅读 · 0 评论 -
将你的项目上传到 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 · 885 阅读 · 0 评论 -
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 · 1741 阅读 · 0 评论 -
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 · 1220 阅读 · 0 评论 -
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 · 650 阅读 · 0 评论 -
腾讯云搭建个人网站技术记录
1、 为什么用腾讯云可能价格方便相对不是很贵,自己用,差不多配置就够了,新人购买不是很贵的,所以就用了。域名注册也是在腾讯注册了 注册一年试试。 (以上非广告,自用而已)2、新建部署的项目比如我用hexo搭建的个人网站项目, 具体可以参考hexo入门其实我搭建了hexo, 然后网上找了个archer主题, 我可以放在github page, 也可以放在腾讯云服务器 , 我2个地方都放了试试。3、 简单介绍下放github-page过程3.1 创建 比如dengzhifeng.github.原创 2020-12-10 15:23:19 · 236 阅读 · 0 评论 -
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 · 423 阅读 · 0 评论 -
观察者模式和订阅者模式
简单的订阅者模式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 · 225 阅读 · 0 评论 -
高阶函数介绍-函数柯里化、切片编程
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 · 154 阅读 · 0 评论 -
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 · 806 阅读 · 2 评论 -
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 · 544 阅读 · 0 评论 -
webpack构建流程(简化版,大概思路)
1、构建流程初始化参数, 从配置文件和shell语句读取和合并参数,得出最终的参数。开始编译:用上一步得到的参数初始化Compiler对象。加载所有配置的插件。执行对象的run方法开始编译。确定入口:根据配置中的entry找出所有的入口文件。编译模块:从入口文件出发,调用所有配置的Loader对模块进行编译,再找到该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过本步骤的处理完成模块编译:经过上一步使用Loader编译完所有模块后,得到了每个模块翻译后的最终内容以及他们之间的依赖关系原创 2020-09-21 16:03:42 · 646 阅读 · 0 评论 -
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 · 1171 阅读 · 0 评论 -
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 · 2037 阅读 · 6 评论 -
wepy小程序之redux使用记录
1、首先创建store文件夹分别有 actions、reducers、types 文件夹 里面做对应得分类以下以某一个文件夹为例展示1.1 、types/baseInfo.js主要定义 常量类型export const HOMEROUTEROPTIONS = 'HOMEROUTEROPTIONS';export const BASEOPTIONINFO = 'BASEOPTIONINFO';export const TEMPORARYOPTION= 'temporaryOption原创 2020-08-13 11:31:45 · 225 阅读 · 0 评论 -
关于前端学习路线的一些建议
入题我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 CSS&HTML&JavaScript 了。但这三大件一直都是前端的根本,这一点从未改变。而这三大件中 JavaScript 又是重中之重。接下来我会结合我的一点经验,给出前端学习路线的一些具体建议。目录三大件学习CSS & HTML关于 CSS(3) 你需要了解的一些知识点HTML(5) 你需要了解的一些知识点CSS & HTML &am原创 2020-05-12 11:17:10 · 333 阅读 · 0 评论