前端纸飞机-CSDN博客

原创政策因子条件列表类型

这个属于车牌类型独有，他的数据字典结构只有一层，但页面上表现和车辆种类一致，原因是代码中自己套了一层。目前选项是本地写死得，传参拼接了carOwner这些东西，形式是多选+输入。指定除外的特殊类型，由一个输入搜索框加checkbox组成。指定除外得特殊一种，多选下拉加 checkbox。指定除外得特殊一种，一个输入框内容用，分割。区间得特殊一种，多选下拉加区间范围。区间得特殊一种，时间范围。

2023-08-14 08:50:05 227

原创【章节4】原项目升级到webpack5并进行配置优化全流程

以升了wepack5 再做commit 预处理的方案，也可以先commit 预处理再来升webpack5，我这是后者。基础工程：https://gitee.com/huqinggui/webpack5_base.gitclone 下来后需要切换到webpack4-d2分支项目体积越大越能看见差异，最好是编译几分钟以上的项目，如果是1分钟以内的就没必要升级webpack5了（需要用到webpack5联邦模块的例外），我这个工程我大概构建速度20s，代码量几乎没有。

2023-06-03 23:24:07 1597 4

原创【MAC】nvm安装和使用

这些代码的作用是定义一个变量$NVM_DIR，然后检查该目录下是否存在nvm.sh脚本文件，并在文件存在的情况下调用它。touch命令将创建一个空的.bash_profile文件（如果不存在），而open命令将打开该文件以供编辑。这样的话只有你本次打开的终端里可用，如需要让nvm在终端初始化时自动启动。为此，可以遵循以下步骤。现在您应该可以在任何位置使用nvm命令。可以通过nvm ls命令查看是否有用。这个命令将应用您所做的更改。

2023-05-31 22:32:17 1179

原创应用到vscode

随着ChatGPT的热度持续上升，我们也不得不深刻认识到，这已经势不可挡了。我们必须去接受它，甚至是拥抱它。私信我可以获取最新包今天呢，我们要介绍的是vscode的一款插件，叫做。

2023-05-30 22:47:33 1149 1

原创【章节3】Webpack5 对比 Vite，孰强孰弱？

Webpack5是Webpack的最新版本，带来了很多新功能和性能优化，例如预取和预加载、模块热替换、持久化缓存等。如果项目需要开发体验好，建议使用Vite；Vite的打包速度比Webpack更快，这是由于Vite采用了ES6模块的方式，因此可以使用浏览器本身的解析器来加载模块，而Webpack需要先把所有的模块打包成一个大文件，再进行解析。Webpack拥有更为庞大的生态系统和插件库，因此可以为不同的需求提供更加专业的解决方案。Vite是一个现代化的构建工具，旨在提供快速的开发体验和高性能的构建结果。

2023-05-29 23:01:11 1985

原创【章节2】husky + 自动检测是否有未解决的冲突 + 预检查debugger + 自动检查是否符合commit规范

husky的作用以及husky的常用钩子husky的钩子在.husky下就是对应的文件，这些是自动执行的，需要啥就建啥简单脚本写法，print 和 echo两者差异lint-staged 和 commit规范 commitlint 的作用和用法npx husky add 用法debugger不可以进仓库。

2023-05-28 15:07:03 1433 1

原创【章节1】git commit规范 + husky + lint-staged实现commit的时候格式化代码

git commit规范要熟知和养成习惯lint-staged的作用和配置husky的作用和怎么写一个简单的脚本以上希望大家都能掌握，下一章节再见👋！

2023-05-28 02:47:33 2135 3

原创修改后的代码只进行了git add操作不小心给他恢复了怎么找回来

发现了很多乱码名字的文件并且没有后缀，你没有猜错，这些就是git add 过得文件，我们手动改后缀是可以查看内容的（找到文件再改）一份干净的代码在main.js里加了一行console.log(666)，并且只进行了git add。然后我们去项目的.git下找到这个目录 .git\lost-found\other。这个文件呢，就是最后add的那个文件了，我们直接复制过去就恢复更改了！我们看那个改变的main.js 文件大小，2.我们可以直接改文件后缀，然后打开即可。也就是说可能是这几个，我们怎么确认呢，

2022-12-26 09:31:44 2638 4

原创需求开发到一半需要改别的分支的bug该怎么办呢？（git stash 和 git commit）

在实际开发中，经常我们会遇到需求开发到一半，别的分支有bug急需解决的情况，这个时候我们改怎么办呢？有的人会说可以先提交当前分支的代码再切换到别的分支改bug，当然这样是没问题的，但是呢，在项目文件特别多的时候，我们改需求好不容易找到的文件位置，这个时候代码一提交，我们就无法看见下面的内容，导致于我们改完bug切换回来就很难分辨我们改了哪些文件了！所以这个时候我们会用上 git stash 或者 git commit我们先看看git commit 怎么暂存代码的。

2022-11-23 13:52:46 1517 4

原创 vue3的自定义指令

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。在某个场景下，需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。//!第四个参数 prevNode 只在beforeUpdate和updated才有！// 当指令绑定的元素的父组件销毁前调用。 } , unmounted() {} , // 当指令与元素解除绑定且父组件已销毁时调用。

2022-09-23 01:25:47 1734 5

原创多人协作多版本开发冲突的正确解决姿势

多人版本开发工作流程：https://blog.csdn.net/qq_32442973/article/details/125717959。

2022-09-17 09:57:40 1078

原创常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every

MDN上说：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。every() 方法用于检测数组所有元素是否都符合指定条件（函数提供）。some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。forEach是ES5中操作数组的一种方法，主要功能是遍历数组。注意： every() 不会对空数组进行检测。注意： some() 不会对空数组进行检测。

2022-09-15 09:17:15 2936

原创企业中多分支多人协作的git工作流程

线上合并代码到develop分支，开发人员有权限，自己线上合并即可，然后jekins构建项目，结合你本地运行代码，你和后端就可以联调了（你本地调，后端看你发布到开发环境的代码构建后的地址）也是边测试边修复bug，注意这里修复的bug要重走测试，测试环境测过了，再发预生产，预生产环境测完了，产品测试，产品觉得ok了，就验收，开始合并到生产环境。边测边修复bug，直到测试完成，测试说可以，再将代码发到预生产，这个作为前端一般是没有权限合并的，只能提交合并申请后由开发组长来完成，然后交测试发布预生产。......

2022-07-17 15:21:04 1713 4

原创前端面试题梳理

加了删除线的优先级较低，不常问，但也有的问。HTML相关面试题1.HTML5 有哪些新特性？canvas，语义话标签（header，footer等），媒体播放（audio，video），增强表单控件form（calendar、date、time、email、url、search），iframe，本地存储（localStorage，sessionStorage），html5拖拽（drag），2.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?3.内元素有哪些？块级元素.

2022-05-29 21:43:02 1129 1

原创企业微信小程序从开发调试到发布的全流程

企业微信小程序和普通微信小程序两者的关系可以理解为企业微信小程序就是把普通小程序丢进了企业微信这个app里运行，企业微信小程序的发布依赖普通微信，需要先按照普通微信的发布流程进行发布，再去企业微信平台进行绑定小程序到工作台。企业微信小程序的api和普通微信小程序的api企业微信小程序api：https://developer.work.weixin.qq.com/document/path/92455普通微信小程序api：https://developers.weixin.qq.com/minipr

2022-05-10 11:09:24 8479 7

原创 Vue的服务端渲染

于你而言，我不过是黄粱一梦，于我而言，你却是我余生所求。什么是服务端渲染？?传统的web开发体验通过express来写一个案例npm init -ynpm i express -Sconst express = require('express')const app = express()app.get('/',function(req,res){ res.send(` <html> <bod.

2022-02-25 12:26:54 7966

原创 html2canvas 在 ios13版本生成图片失效

我能做的不多，但你需要的时候，我总是在的。上图红色框中的部位为自定义的内容，剩余部分为背景图。经测试，在安卓中，能如上图保存完整，在ios13系统以上失效。解决方案：1.将html2canvas的版本调整为如下：package.json中："html2canvas": "1.0.0-rc.4",修改后删掉node_modules重新装包。2.需在生成的页面以至于上图的外层区域设置font-familyfont-family: Helvetica, Tahoma, Arial, 'P.

2022-02-17 11:10:48 3183 7

原创 ||会遇见的面试题

知足且坚定，温柔且上进。首先要知道 || 是运算符。我们平常会用它做一些判断，例如当有一个条件为真时，就会返回true，全部条件为假时，就会返回false，然而事实真的是这样返回吗？也不尽然。看下面。const res = ('' || 0 || 1 || 2)//1const res = ('' || 0 || null)//nullconst res = ('' || null || 0)//0上面三道题，输出了res的结果。第一题和后面两题的区别是后面两题 || .

2022-02-10 11:11:01 995

原创递归以及for循环里async 和 await 的用法

我宁愿你骂我，也不愿意你难过，你难过我会更担心。递归？一般便是会问以下几点1.什么是递归广义上：程序调用自身的编程技巧称为递归（ recursion），他是个算法。有几个要素：递归需要有边界条件、递归前进段、递归返回段。2.递归能够解决什么问题阶乘（面试常问），菲波拉锲数（面试常问）、等阶乘的公式是： n! = 1 * 2 * 3 * 4 * ... * (n-2) * (n-1) * n3.怎么实现一个递归//例如：计算5的阶乘 function jie(n){ i.

2022-01-18 00:07:01 5623 1

原创用flex布局局部滚动页面

示意图示意图如上图，贴合名片的那个页面了，用这个案例来演示下。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia

2021-12-21 23:13:36 2269 1

原创 js实现多选、全选、反选、取消选择（篇一）

就算全世界离开你，还有一个我来陪，我会永远站在你身边。对于上次的多选和取消选择，我来把它给补充完整，包含全选和反选。多选和取消选择效果图如下：代码如下：<template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item.

2021-12-04 13:23:02 7721 5

原创关于对象遍历的时候的一些排序问题

先看下面的代码：<template> <div class="wrap"> <div v-for="(value, key) in mapData" :key="key"> <p>key：{{key}}，价格：{{mapData[key].price}}</p> </div> </div></template><script>export default

2021-11-28 13:11:02 1760

原创 css有了css变量这个神器，我再也不需要less和sass了

用过sass或less的都知道，主要他们可以有嵌套和变量以及函数功能，其实在原生css中，已经开始逐渐支持，诚然目前只有你我熟知，而他人还处在萌芽中，了解css变量，你会发现CSS从此变得异常强大。变量的声明声明变量的时候，变量名前面要加两根连词线（–）// 局部声明body { --foo: #ed145b; --bar: #F7EFD2;}// 全局声明:root{ --foo: #ed145b; --bar: #F7EFD2;}例如上面我们申明了2个变量：–.

2021-11-12 12:25:18 5187 3

原创 css实现弧形边框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-11-08 09:16:08 8792 2

原创前端开发规范

一、构建项目目录目录结构的统一化，可读性，分模块、组件构建，严禁构建杂乱无章，毫无可读性而言的项目目录。了解开发当前项目所需的框架，工具、插件，功能，兼容性，分辨率等问题做好准备工作，做到心中有数。目录结构整齐划一，方便日后的维护和其他同事的阅读。1.root根目录按照职能划分src 源代码（逻辑）doc 文档dep 第三方依赖包test 测试2.src源代码根据业务逻辑进行文件夹划分common 公共资源imglogo.pngsprites.pngcs

2021-11-01 17:00:52 1247 2

原创一文教你如何学习TypeScript

在看这篇文章之前，我是强烈推荐TypeScript 入门教程这本书的。因为这本书它是：从 JavaScript 程序员的角度总结思考，循序渐进的理解TypeScript。文章来源也是该书，但听我一句话：踩过坑才代表会了。【建议收藏】希望你看这本书之前已经具备了以下技能：熟练使用JavaScript开发日常项目一、什么是TypeScript？1、TypeScript词解Typed JavaScript at Any Scale。添加了类型系统的 JavaScript，适用于任何规模的项.

2021-10-29 17:00:56 4720

原创 JavaScript高级学习之彩色小球球

js实现小球跟随鼠标移动相信有很多朋友们，都没有见过这个库吧，也许你知道jQuery、bootstrap等等，但是这个说实话我也是最近才用到的，Underscore.js是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象，Underscore提供了100多个函数,包括常用的: map, filter, invoke当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等。Undersco

2021-10-28 11:41:32 1468 1

原创详细了解如何在npm上发布自己的包？

大家好，我是纸飞机，想必大家都在项目中经常会使用npm install、yarn add、cnpm install等安装包的命令吧。那么大家好奇过，这些包都是怎么来的吗？不用迷茫，本篇文章就为你揭秘他们到底怎么来的并且手把手教你做一个属于你自己的一个可以npm安装的组件库。????无论是npm、yarn还是cnpm他们都有一个统一的名字：JavaScript包管理工具。顾名思义都是用来管理包的，用户将包发在线上随时可用。并且cnpm和npm本就是同宗同源，他们的命令都大致相同，只是cnpm对国内有好些。

2021-10-27 15:06:36 2778 10

原创前后端跨域常用解决方案

因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案。一.前端方案1.jsonp跨域https://blog.csdn.net/qq_32442973/article/details/1201002392.反向代理服务跨域i:什么叫反向代理?反向代理指的是在前端的服务器环境中，短暂的开启一个后端服务器，由后端服务器进行数据请求，然后在将结果返回给前端ii:使用工程化工具自带的反向代理服务(webpack)iii:使用第三方提供的反向代理服务(gulp中的ht

2021-10-26 18:27:35 989

原创手把手教你如何使用NodeJs和JavaScript开发微信公众号

大家作为前端可能活多或少的都写过结合微信jsdk开发的微信h5网页，对授权登录这块以及部分sdk可能都有通过后台接口来调用，那么大家有没有想过，这些后台接口都是怎么写的呢？那么今天这篇文章就带大家来了解下是如何写的！一、准备注册微信订阅号注册小程序测试号sunny-ngrok工具安装及注册账号注意：sunny-ngrok的原型是ngrok，不过ngrok是国外的，sunny-ngrok是国内的一个私服，速度更快了，主要作用是域名转发，模拟公网ip和端口，甚至可以配置给客户在公网上展示项目.

2021-10-24 11:03:18 4298 2

原创 React中的一个状态管理工具—Flux

Flux出现的原因Flux的出现和传统MVC有关,因为传统的MVC架构没有解决,M和V之间的交互关系为了弥补这个缺陷，人们相处了 Flux Redux Mobx 这样三种架构思维，那么React只是这三种架构的一个组成部分，那么这个组成部分充当的是 View( 视图 )注意: Flux Redux Mobx 和 MVC 是同一级别的，相比之下， vuex级别要小的多，但是他们解决的都是多组件状态共享问题:我想在Redux中使用vue , 可以吗？可以的Flux.

2021-10-22 16:37:58 1312 2

原创 mongoose连接mongodb进行数据库操作详细步骤

1.安装mongoosenpm i mongoose -S||npm install mongoose --save2.导入mongooseconst mongoose=require('mongoose')3.连接数据库//mongoose.connect('mongodb://主机名:端口/数据库名称')举例:mongoose.connect('mongodb://127.0.0.1:27017/1901')进一步做连接处理mongoose.connect('mongodb://1

2021-10-22 14:14:29 3684 3

原创你知道前端开发常用的几种设计模式吗？

设计模式概览设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。设计模式可以分为三大类：结构型模式(Structural Patterns):通过识别系统中组件间的简单关系来简化系统的设计。创建型模式(Creational Patterns):处理对象的创..

2021-10-21 17:16:40 2363 2

原创 flex弹性盒布局知识点

弹性盒中主要分为父元素和子元素父元素: flex-direction值介绍如下：row: 默认值。灵活的项目将水平显示，正如一个行一样。row-reverse: 与 row 相同，但是以相反的顺序。column: 灵活的项目将垂直显示，正如一个列一样。column-reverse: 与 column 相同，但是以相反的顺序。flex-wrap 值介绍如下:nowrap: flex容器为单行。该情况下flex子项可能会溢出容器。wrap: flex容器为多行。该情况下flex子.

2021-10-20 14:50:44 978 2

原创 CSS 各种百分比是基于什么工作的?

大家有没有对 CSS 中的百分比是如何工作的感兴趣？有没有想过，为什么它有时会乱七八糟，没啥头绪？反正我是有，所以今天分享这篇文章，对自己来说是加深理解，同时也希望对大家有所帮助。什么百分比？作为百分比，显然应该有一个目标作为参考源，这个参考一般是父元素。这是正确的，但并不涵盖所有情况。最正确的答案应该是包含块(containing block)，即包含我们元素的块且它不必是直接的父元素。看看下面的例子：代码如下：<!DOCTYPE html><html lang=".

2021-10-18 18:11:16 3618 18

原创 uni-app自定义摄像头拍照添加人物框

一、效果二、知识预备

2021-10-15 18:08:10 7260 8

原创那些年我们前端面试中经常被问到的题！

1.const的值什么时候可以修改对于基本类型来说const定义的就是一个常量,一旦被赋值(初始化)就不可以修改。定义一个常量但是不赋值(初始化),会报错:Missing initializer in const declaration;如果修改一个常量则会报错:Assigment to constant variable。对于数组和对象这样的引用类型来说发现确实被修改了,name这该怎么解释呢???实际上,const在赋值(初始化)了一个引用类型的时候,它只是保证引用类型的指针.

2021-10-13 10:18:17 2674 21

原创前端通过高德地图实现定位,拖拽选址,搜索选址,搜索记录,城市切换【推荐】

已经结合高德地图api实现了定位,用户拖拽选址,搜索选址,搜索记录,城市切换等功能，案例已经非常完善，注意定位在pc浏览器上是有偏差，需要在手机里定位才能精准到5米，文末会放上案例地址，clone下来可以本地调试和使用。预览地址：点我打开，建议手机上打开高德api申请这个不多说，需要在高德申请个key，使用的高德2.0的sdk布局说明：这里使用的vant的组件，需要引入vant，主要就是用的他的css风格，<div class="page" :style="{ height: pageHe

2021-10-12 11:55:09 3104 6

原创前端需要写自动化测试吗？那又该怎么写呢？【建议收藏】

为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化测试代码：修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码重构困难代码质量差，参差不齐增加自动化测试后：我们为核心功能编写测试后可以保障项目的可靠性强迫开发者编写更容易被测试的代码，提高代码质量编写的测试有文档的作用，方便维护开发速度有所变慢

2021-10-11 13:04:42 1622 8

原创在 Vue 中如何使用 JSX，就这么简单

学习这篇文章希望您已经具备以下知识：vue.js的基本使用对前端三件套(html、css、js)已经可以熟练使用了文末有配套demo代码：点我直达JSX是什么JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。（个人建议灵活度强的部分组件可以用JSX来代替，整个项目JSX属实没必要）XM.

2021-10-10 16:13:46 3902 8