JavaScript
关注
分享
扫一扫
文章平均质量分 81
涵盖js各个开发中常见的问题
前端纸飞机
潇潇暮雨子规啼
展开
-
应用到vscode
随着ChatGPT的热度持续上升，我们也不得不深刻认识到，这已经势不可挡了。我们必须去接受它，甚至是拥抱它。私信我可以获取最新包今天呢，我们要介绍的是vscode的一款插件，叫做。原创 2023-05-30 22:47:33 · 1321 阅读 · 1 评论 -
常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every
MDN上说：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。every() 方法用于检测数组所有元素是否都符合指定条件（函数提供）。some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。forEach是ES5中操作数组的一种方法，主要功能是遍历数组。注意： every() 不会对空数组进行检测。注意： some() 不会对空数组进行检测。原创 2022-09-15 09:17:15 · 3109 阅读 · 0 评论 -
企业微信小程序从开发调试到发布的全流程
企业微信小程序和普通微信小程序两者的关系可以理解为企业微信小程序就是把普通小程序丢进了企业微信这个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 · 10011 阅读 · 7 评论 -
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 · 3505 阅读 · 7 评论 -
前端开发规范
一、构建项目目录目录结构的统一化，可读性，分模块、组件构建，严禁构建杂乱无章，毫无可读性而言的项目目录。了解开发当前项目所需的框架，工具、插件，功能，兼容性，分辨率等问题做好准备工作，做到心中有数。目录结构整齐划一，方便日后的维护和其他同事的阅读。1.root根目录按照职能划分src 源代码（逻辑）doc 文档dep 第三方依赖包test 测试2.src源代码根据业务逻辑进行文件夹划分common 公共资源imglogo.pngsprites.pngcs原创 2021-11-01 17:00:52 · 1301 阅读 · 2 评论 -
一文教你如何学习TypeScript
在看这篇文章之前，我是强烈推荐TypeScript 入门教程这本书的。因为这本书它是：从 JavaScript 程序员的角度总结思考，循序渐进的理解TypeScript。文章来源也是该书，但听我一句话：踩过坑才代表会了。【建议收藏】希望你看这本书之前已经具备了以下技能：熟练使用JavaScript开发日常项目一、什么是TypeScript？1、TypeScript词解Typed JavaScript at Any Scale。添加了类型系统的 JavaScript，适用于任何规模的项.原创 2021-10-29 17:00:56 · 4860 阅读 · 0 评论 -
详细了解如何在npm上发布自己的包？
大家好，我是纸飞机，想必大家都在项目中经常会使用npm install、yarn add、cnpm install等安装包的命令吧。那么大家好奇过，这些包都是怎么来的吗？不用迷茫，本篇文章就为你揭秘他们到底怎么来的并且手把手教你做一个属于你自己的一个可以npm安装的组件库。????无论是npm、yarn还是cnpm他们都有一个统一的名字：JavaScript包管理工具。顾名思义都是用来管理包的，用户将包发在线上随时可用。并且cnpm和npm本就是同宗同源，他们的命令都大致相同，只是cnpm对国内有好些。原创 2021-10-27 15:06:36 · 2931 阅读 · 10 评论 -
前后端跨域常用解决方案
因为浏览器有同源策略,所以我们无法跨域请求,但相应的我们也有几套成熟的解决方案。一.前端方案1.jsonp跨域https://blog.youkuaiyun.com/qq_32442973/article/details/1201002392.反向代理服务跨域i:什么叫反向代理?反向代理指的是在前端的服务器环境中， 短暂的开启一个后端服务器， 由后端服务器进行数据请求， 然后在将结果返回给前端ii:使用工程化工具自带的 反向代理服务(webpack)iii:使用第三方提供的反向代理服务(gulp中的ht原创 2021-10-26 18:27:35 · 1038 阅读 · 0 评论 -
手把手教你如何使用NodeJs和JavaScript开发微信公众号
大家作为前端可能活多或少的都写过结合微信jsdk开发的微信h5网页，对授权登录这块以及部分sdk可能都有通过后台接口来调用，那么大家有没有想过，这些后台接口都是怎么写的呢？那么今天这篇文章就带大家来了解下是如何写的！一、准备注册微信订阅号注册小程序测试号sunny-ngrok工具安装及注册账号注意：sunny-ngrok的原型是ngrok，不过ngrok是国外的，sunny-ngrok是国内的一个私服，速度更快了，主要作用是域名转发，模拟公网ip和端口，甚至可以配置给客户在公网上展示项目.原创 2021-10-24 11:03:18 · 4484 阅读 · 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 · 1373 阅读 · 2 评论 -
你知道前端开发常用的几种设计模式吗？
设计模式概览设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。设计模式可以分为三大类：结构型模式(Structural Patterns):通过识别系统中组件间的简单关系来简化系统的设计。 创建型模式(Creational Patterns):处理对象的创..原创 2021-10-21 17:16:40 · 2440 阅读 · 2 评论 -
CSS 各种百分比是基于什么工作的?
大家有没有对 CSS 中的百分比是如何工作的感兴趣？有没有想过，为什么它有时会乱七八糟，没啥头绪？反正我是有，所以今天分享这篇文章，对自己来说是加深理解，同时也希望对大家有所帮助。什么百分比？作为百分比，显然应该有一个目标作为参考源，这个参考一般是父元素。 这是正确的，但并不涵盖所有情况。 最正确的答案应该是包含块(containing block)，即包含我们元素的块且它不必是直接的父元素。看看下面的例子：代码如下：<!DOCTYPE html><html lang=".原创 2021-10-18 18:11:16 · 3671 阅读 · 18 评论 -
uni-app自定义摄像头拍照添加人物框
一、效果二、知识预备原创 2021-10-15 18:08:10 · 7851 阅读 · 8 评论 -
那些年我们前端面试中经常被问到的题！
1.const的值什么时候可以修改 对于基本类型来说const定义的就是一个常量,一旦被赋值(初始化)就不可以修改。定义一个常量但是不赋值(初始化),会报错:Missing initializer in const declaration;如果修改一个常量则会报错:Assigment to constant variable。对于数组和对象这样的引用类型来说发现确实被修改了,name这该怎么解释呢???实际上,const在赋值(初始化)了一个引用类型的时候,它只是保证引用类型的指针.原创 2021-10-13 10:18:17 · 2833 阅读 · 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 · 3707 阅读 · 6 评论 -
前端需要写自动化测试吗？那又该怎么写呢？【建议收藏】
为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化测试代码：修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码重构困难代码质量差，参差不齐增加自动化测试后：我们为核心功能编写测试后可以保障项目的可靠性强迫开发者编写更容易被测试的代码，提高代码质量编写的测试有文档的作用，方便维护开发速度有所变慢原创 2021-10-11 13:04:42 · 1732 阅读 · 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 · 4046 阅读 · 8 评论 -
React中的状态管理---Redux
我们以todolist中增加代办事项这个功能为例:为了开发规范一点我们要采取reducer的分片写法,即一个类型数据一个模块不使用react-redux书写规范生产安装reduxyarn add redux在src目录下建立store目录建立index.js和reducer.jsindex.jsimport { createStore } from 'redux'import reducer from './reducer'const store =.原创 2021-10-10 12:30:23 · 1929 阅读 · 2 评论 -
React中的状态管理---Mobx
Mobx的介绍 Mobx是一个功能强大，上手非常容易的状态管理工具。redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。 Mobx流程图Mobx使用流程创建项目npx create-react-app mobx进入项目cd mobx项目抽离yarn eject安装mobx mobx-reactyarn add mobx mobx-react注意： 如果git冲突 解决： 我们要原操作先放到本地.原创 2021-10-09 16:11:26 · 2235 阅读 · 1 评论 -
超详细的前端自动化测试教学！【建议收藏】
为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化测试代码：修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码重构困难代码质量差，参差不齐增加自动化测试后：我们为核心功能编写测试后可以保障项目的可靠性强迫开发者编写更容易被测试的代码，提高代码质量编写的测试有文档的作用，方便维护开发速度有所变慢原创 2021-10-09 10:03:34 · 3725 阅读 · 4 评论 -
一篇超详细的vue项目前端自动化测试教学！
为什么需要写前端自动化目前开发前端代码过程中，由于种种原因，可能会导致工程时间不够，所以无法去写自动化测试代码。但也因此会出现来说说为什么前端自动化测试如此重要！前端代码在不加自动化测试前：修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码无法重构代码质量差增加自动化测试后：我们为核心功能编写测试后可以保障项目的可靠性强迫开发者编写更容易被测试的代码，提高代码质量编写的测试有文档的作用，方便维护对比两种效应：不加写的快，但不原创 2021-10-08 17:01:44 · 4054 阅读 · 18 评论 -
React的生命周期(16版本的)
在React中,生命周期有4个阶段,每个阶段又由不同的钩子函数组成。初始化运行中(更新阶段)销毁错误处理初始化在组件初始化阶段就会执行 ,由以下几个钩子函数构成constructorstatic getDerivedStateFromProps()componentWillMount()/UNSAFE_componentWillMountrender()componentDidMount()constructor在组件挂载之前执行，调用super(props),用来将父.原创 2021-09-28 13:27:32 · 1841 阅读 · 2 评论 -
❤️十分钟快速学会使用Nodejs全栈开发微信公众号【建议收藏】
一、准备注册微信订阅号注册小程序测试号sunny-ngrok工具安装及注册账号注意：sunny-ngrok的原型是ngrok，不过ngrok是国外的，sunny-ngrok是国内的一个私服，速度更快了，主要作用是域名转发，模拟公网ip和端口，甚至可以配置给客户在公网上展示项目。地址：http://www.ngrok.cc/,进去后注册开通隧道，有免费的。记住：一个微信号只能注册一种微信产品，但是可以管理多个。这是我的隧道：(免费的如果启动不了就直接用这个吧)使用sunny-ngro原创 2021-09-26 09:31:18 · 7425 阅读 · 39 评论 -
手把手教你在 Vue 中使用 JSX，不怕学不会！【建议收藏】
学习这篇文章希望您已经具备以下知识：vue.js的基本使用对前端三件套(html、css、js)已经可以熟练使用了文末有配套demo代码：点我直达JSX是什么JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。（个人建议灵活度强的部分组件可以用JSX来代替，整个项目JSX属实没必要）XM.原创 2021-09-20 20:00:20 · 17869 阅读 · 51 评论 -
2021年的几次面试让我死磕了17道JS手写题！
1、浅拷贝、深拷贝的实现浅拷贝// 1. ...实现let copy1 = {...{x:1}}// 2. Object.assign实现let copy2 = Object.assign({}, {x:1})深拷贝javascript深拷贝和浅拷贝以及实现方法(推荐)_纸飞机博客-优快云博客_js浅拷贝和深拷贝的区别深拷贝和浅拷贝的区别？浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用。深拷贝： 创建一个新的对象和数组，将原对象的各项属.原创 2021-09-18 08:44:19 · 12005 阅读 · 44 评论 -
❤️一个聊天室案例带你了解Node.js+ws模块是如何实现websocket通信的！
1、项目结构分析项目目录分析：client文件夹：客户端配置 server.js：给客户端的静态服务器 WebSocketServer.js：服务端配置文件2、操作步骤准备package.json需要执行以下命令才能得到：npm init -y需要两个依赖包：npm install ws --save-devnpm install express --save-dev步骤1：服务端构建（WebSocketServer.js)// 步骤1,服务端c原创 2021-09-13 17:37:51 · 9511 阅读 · 65 评论 -
❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️
目录一、什么是jsonp?二、原生js中jsonp的使用三、jquery中jsonp的使用四、总结一、什么是jsonp?简单点,jsonp其实就是一个跨域解决方案。当然它和json没有半毛钱关系!浏览器处于安全考虑,制定了同源策略,即同协议、同主机名、同端口。其中有任何一项不同即为不同源。举几个栗子:http://www.baidu.com和http://www.baidu.com:8080,端口不同 10.0.13.1和10.0.13.2,主机名不同 http:/原创 2021-09-11 17:04:48 · 12102 阅读 · 176 评论 -
详解如何在npmjs上上传和更新属于自己的组件库
大家好，我是纸飞机，想必大家都在项目中经常会使用npm install、yarn add、cnpm install等安装包的命令吧。那么大家好奇过，这些包都是怎么来的吗？不用迷茫，本篇文章就为你揭秘他们到底怎么来的并且手把手教你做一个属于你自己的一个可以npm安装的组件库。????无论是npm、yarn还是cnpm他们都有一个统一的名字：JavaScript包管理工具。顾名思义都是用来管理包的，用户将包发在线上随时可用。并且cnpm和npm本就是同宗同源，他们的命令都大致相同，只是cnpm对国内有好些原创 2021-09-10 08:34:20 · 5009 阅读 · 10 评论 -
❤️npm常用命令以及npm publish常见问题处理方法❤️
一、npm常用命令1、安装配置命令# 查看 npm 的版本 npm -v //6.4.0 << 安装成功会返回版本号# 查看各个命令的简单用法npm -l # 查看 npm 命令列表npm help# 查看 npm 的配置npm config list -l2、npm init创建初始化npm initnpm init用来初始化生成一个新的package.json文件。它会向用户提问一系列问题，如果觉得不用修改默认配置，一路回车就可以了。尾缀带原创 2021-09-08 21:36:37 · 6351 阅读 · 18 评论 -
前端项目中package.json到底是什么，又充当着什么作用呢？一文来带你了解package.json！
大家好，我是纸飞机，想必大家都在项目中经常看见package.json、package-lock.json、node_modules这三剑客，那么他们到底是什么呢？又有什么作用呢？今天就来带你们理一遍！一、引读在大家的印象中，说明书具有哪些要素？例如一盒药。就像这份说明书，它有：药品名称、成分、类别等等说明！package.json同样如此，所以可以毫不夸张的说，它也是一份说明书！那么我们的package.json到底说明了什么呢？下面就进入正题为您一一讲解。二、package.js.原创 2021-09-07 09:33:35 · 9165 阅读 · 82 评论 -
如使用原生js自定义右键菜单
1、右键菜单触发的基本过程实现自定义右键菜单我们首先需要了解以下内容：浏览器默认的右键菜单触发的基本过程单击右键，菜单出现 菜单出现，鼠标箭头一直在菜单左上角 再换个位置点击右键，原菜单消失，新菜单出现在指定位置 点击左键，中键，菜单消失以上为大致实现过程，不全面，仅供参考也许文字过于抽象，我们来看看代码吧：2、HTML结构<!--start右键菜单的结构--><div id="rightmenu" class="rightmenu">原创 2021-09-06 19:59:24 · 1645 阅读 · 3 评论 -
原生js制作选项卡详解，适合无基础的人学习
当我们学习js学习到一定程度的时候难免会有些枯燥，乏味，这个时候可能就需要写一点真正能动有用的东西来提升下兴趣了，在日常网页开发中,轮播图,导航栏,选项卡这三个是必不可少的，今天就给大家带来一个关于原生js制作选项卡的方法。知识点:选择器，for循环，事件(event)，this的指向。选项卡：点击第n个按钮切换到第n个选项栏，并且给该按钮和选项栏添加样式，清除其他部分的样式，上图：1、选项卡HTML结构<div class="tab"> <ul class="b原创 2021-09-06 15:56:51 · 2069 阅读 · 11 评论 -
怎么微信WeixinJSBridge.invoke支付成功居然不跳转？还把我页面给关了！这篇文章就告诉你What should I do！
问题产生背景公司原先是独立商户号没有那么多要求，故采用的是wx.chooseWXPay调起支付的，此支付一直未有任何问题。但近日因为部分业务的需求，需要用第三方支付，第三方支付的文档里要求使用WeixinJSBridge.invoke来调起支付！并且支付自上次封装后，就再也没有去瞅它～问题实际情况当支付完成后，到了该界面，无论是返回，还是点完成，他都直接关闭了页面，无论在支付成功回调里做啥，都无效。支付失败和取消支付的回调都正常。故确定了代码无问题，去查看了资料。原因：资料上看是原创 2021-09-05 10:26:18 · 11956 阅读 · 49 评论 -
❤️一起谈一谈js中的宏任务和微任务！
前面面试的文章中我们说过一道关于宏任务和微任务的题：setTimeout(function(){ console.log('1')}); new Promise(function(resolve){ console.log('2'); resolve();}).then(function(){ console.log('3')}); console.log('4')试问一下上面代码的执行顺序是啥？有小伙伴可能会答：2，4，1，3估摸着是这么想的：我难道不原创 2021-09-03 10:59:12 · 6315 阅读 · 127 评论 -
2021年这些js相关的前端面试题真的值得收藏
1. 实用js写红绿灯的效果？<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li></ul>ul { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform:原创 2021-09-01 11:13:57 · 3032 阅读 · 5 评论 -
前端高效开发不得不知道的一些JavaScript库！
往往一个公司的配置是1前端对3后端，倘若你没有些高效手段，那么加班就是你的家常便饭。不想加班？不妨来了解下这些库...原创 2021-08-30 20:48:05 · 11150 阅读 · 36 评论 -
真实DOM操作和虚拟DOM操作的比较
<div></div> <script> let box=document.getElementsByTagName('div');//获取DIV元素 // time和timeEnd结合使用可以计算中间区域的耗时 //DOM操作 console.time('a')...原创 2019-04-21 19:31:56 · 1583 阅读 · 3 评论 -
前端异步解决方案大全(2021版)
JavaScript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,再执行下一个任务)。这种模式执行简单，但随着日后的需求，事务，请求增多，这种单线程模式执行效率必定低下。只要有一个任务执行消耗了很长时间，在这个时间里后面的任务无法执行。常见的浏览器无响应(假死)，往往就是因为某一段Javascript代码长时间运行(比如死循环)，导致整个页面卡在这个地方，其他任务无法执行。(弊端)为了解决这个问题，javascript语言将任务执行模式分成同步原创 2021-08-29 20:14:27 · 9397 阅读 · 131 评论 -
高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换(推荐)
已经结合高德地图api实现了定位,用户拖拽选址,搜索选址,搜索记录,城市切换等功能，小伙伴可以自行下载案例，案例可直接运行原创 2020-12-15 11:34:17 · 5668 阅读 · 30 评论 -
vue通过driver.js来实现用户引导提示
安装driver.jsyarn add driver.js引入import Driver from 'driver.js' // import driver.jsimport 'driver.js/dist/driver.min.css' // import driver.js css使用外部建立一个steps,jselement代表元素的id（指定区域的盒子一定要带上定义的id），其余参数根据个人喜好而定。const steps = [ { element: '#data-原创 2020-08-01 14:35:02 · 1984 阅读 · 4 评论