我的前端
前端知识总结
逆袭的菜鸟X
求是担当
展开
-
js闭包的理解
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域在 JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁下面给出一个简单的例子displayName() 没有自己的局部变量。然而,由于闭包的特性,它可以访问到外部函数的变量。原创 2024-02-27 10:34:11 · 373 阅读 · 0 评论 -
lodash常用方法
.flow内部从左到右依次调用数组中的函数,上一次函数的返回的结果,会作为下个函数调用的入参。将字符串转换为小写字符串,标点符号被删除,文本转换为小写,空格替换为单下划线(kebabCase是转化为破折号)。创建一个数组,元素为将其拆分为指定大小的子数组(如果数组不能均匀拆分,则最后的子数组将只包含剩余的元素)。与_.set相反,删除object上对应的path上的值,删除成功返回true,否则返回false。给object上对应的path设置值,路径不存在会自动创建,索引创建成数组,其它创建为对象。原创 2023-12-07 09:42:03 · 272 阅读 · 0 评论 -
es6语法import()的使用
另外,import()函数与所加载的模块没有静态连接关系,这点也是与import语句不相同。import()类似于 Node.js 的require()方法,区别主要是前者是异步加载,后者是同步加载。上面代码中,引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在if代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,import和export命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。所以,下面的代码会报错。原创 2023-09-27 11:28:31 · 744 阅读 · 0 评论 -
JS多个HTTP请求限制最大并发数
在JavaScript中,可以使用Promise和结合的方式来实现限制最大并发数的并行请求。原创 2023-09-07 15:42:24 · 1152 阅读 · 1 评论 -
Redux在项目中的使用
reducer是一个纯函数,接收当前状态和action作为参数,并返回一个新的状态。根reducer是由多个子reducer组成的,每个子reducer负责管理应用中的一个部分状态。函数创建一个Redux store,并将根reducer传递给它。然后在组件中使用它们。以上就是使用Redux的详细实例步骤,包括在类组件和函数组件中的使用方式。函数将store中的状态映射到组件的props上,在需要使用Redux的函数组件中,使用。在需要使用Redux的类组件中,使用。函数包装组件,并导出包装后的组件。原创 2023-08-23 09:28:01 · 110 阅读 · 0 评论 -
ES6中Proxy的使用
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”`);},`);});上面代码对一个空对象架设了一层拦截,重定义了属性的读取(get)和设置(set)行为。这里暂时先不解释具体的语法,只看运行结果。对设置了拦截行为的对象obj,去读写它的属性,就会得到下面的结果。// 2下面是另一个拦截读取属性行为的例子。原创 2023-05-19 14:07:15 · 645 阅读 · 0 评论 -
ES6中flat与flatMap使用
数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。上面代码中,flat()的参数为2,表示要“拉平”两层的嵌套数组。原创 2023-05-19 09:07:15 · 1384 阅读 · 0 评论 -
React Fiber
在 React Fiber 架构面世一年多后,最近 React 又发布了最新版 16.8.0,又一激动人心的特性:React Hooks 正式上线,让我升级 React 的意愿越来越强烈了。在升级之前,不妨回到原点,了解下人才济济的 React 团队为什么要大费周章,重写 React 架构,而 Fiber 又是个什么概念。原创 2023-02-21 10:05:25 · 281 阅读 · 0 评论 -
window.postMessage
通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号(443 为 https 的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener),然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。转载 2023-02-17 09:43:20 · 321 阅读 · 0 评论 -
前端开发调试技巧
如图所示,我们只需要在你想再次发送的网络请求上右键,然后选择“Replay XHR”即可,Chrome就会自动为我们再次发送该请求,无需做其他的任务操作。首先同样的在你需要重复发送的请求上右键,然后选择Copy—Copy as fetch,接下来我们只需要打开控制台,然后使用我们最熟悉的Ctrl + V。正对js代码的调试,我们往往需要获取某些变量的值,于是在早期我们往往通过alert方法将变量的值通过弹窗的形式进行打印。Chrome同样也想到了这一点,并且还可以让我们自由的去设计请求参数。原创 2022-12-01 15:18:05 · 2997 阅读 · 0 评论 -
说说原型(prototype)、原型链
遍历对象属性时,每个可枚举的属性都会被枚举出来。要检查是否具有自己定义的属性,而不是原型链上的属性,必须使用hasOwnProperty方法。hasOwnProperty 是 JavaScript 中唯一处理属性并且不会遍历原型链的方法。在原型链上查询属性比较耗时,对性能有影响,试图访问不存在的属性时会遍历整个原型链。每个对象都有一个__proto__属性,并且指向它的prototype原型对象。这就是传说中的原型链,层层向上查找,最后还没有就返回undefined。我们来看看上图的关系。原创 2022-11-25 17:48:31 · 1047 阅读 · 1 评论 -
CSS实现节流防抖防止按钮重复点击
CSS实现节流防止按钮重复点击。原创 2022-11-22 13:48:55 · 474 阅读 · 0 评论 -
数据大屏React使用scale适配解决方案
这两个属性,叫做:设计稿宽高。顾名思义:就是设计师给我们出的那个设计稿是按照什么宽高比例出的设计图。换言之,我们制作视图的时候,得有个固定的宽高值。原创 2022-11-18 16:37:59 · 1744 阅读 · 0 评论 -
数据大屏vm vh适配解决方案
rem弹性布局,在html文件头部放入一大段压缩过的js代码很难受,但vw能让你的代码更纯粹.弊端之一:和根元素font-size值强耦合,系统字体放大或缩小时,会导致布局错乱;vw单位兼容性比rem稍差,ios8、安卓4.4及以上才完全支持。按照设计稿的尺寸,将px按比例计算转为vw和vh,转换公式如下。rem的优点:移动端rem布局比vw主流的原因 兼容性。弊端之二:html文件头部需插入一段js代码。原创 2022-11-18 14:37:38 · 749 阅读 · 0 评论 -
数据大屏rem适配解决方案-flexible
rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是我们。前端常说的适配单位rem。因为rem的特性相对长度单位,常被用来做移动适配,pc端页面不推荐使用rem。这里就可以设置vscode插件。原创 2022-11-17 17:40:14 · 1711 阅读 · 0 评论 -
typescript定义对象、数组、函数
前面我们提到,输入多/少的参数式不被允许的,这在接口定义中也存在着这个限制,同样的,我们也可以使用?用接口(interface)表示数组。「类型 + 方括号」表示法。传统的定义函数的输入与输出。用接口定义函数的输入与输出。原创 2022-11-10 14:17:00 · 2924 阅读 · 0 评论 -
前端开发环境配置
前端环境搭建nvm、node、npm、yarn原创 2022-11-08 16:32:17 · 321 阅读 · 0 评论 -
typescript中设置别名paths
我的项目使用的是roadhog编译,根目录添加webpack配置webpack.config.js,在配置文件中自动读取了tsconfig中path的属性来给webpack设置别名,避免多位置配置alias。发现我的vscode编辑器已经能识别这个路径了,当我按下ctrl点击路径的时候,也自动跳转到了a.ts文件,再运行npm run start报错如下。原因:typescript根本不会对别名进行处理,只能借助第三方编译工具,例如babel,webpack。原创 2022-10-28 13:24:32 · 897 阅读 · 0 评论 -
typescript项目中引入汉字转拼音js
使用方法引入ts项目中报错如下解决ts中引入js报错问题pinyin.js源码如下原创 2022-07-12 11:22:48 · 1419 阅读 · 0 评论 -
React中使用hook实例
父子组件相互调用,传值原创 2022-06-22 16:20:21 · 283 阅读 · 0 评论 -
es6中class封装小程序内嵌h5分享实例
小程序内嵌h5分享封装原创 2022-06-09 16:12:06 · 161 阅读 · 0 评论 -
html中添加水印效果
1、引入 watermark.js<script type="text/javascript" charset="UTF-8" src=" watermark.js"></script>2、设置水印localStorage.setItem("index_name", "ceshi")localStorage.setItem("index_mobile", "9527")3、watermark.jsDate.prototype.format = function (原创 2022-05-13 10:25:39 · 4642 阅读 · 0 评论 -
微信支付点金计划商家小票
1、参考资料点金计划管理文档:商家小票管理文档:微信点金pdf文档: 微信点金计划,开通商家小票,微信支付完成后页面跳转2、实战(1)引入SDK<!-- 商家小票 --><script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>(2)发送事件通知onIframeRea原创 2022-05-13 10:09:48 · 731 阅读 · 2 评论 -
js如何创建一个指定长度的数组并填充内容
const array = new Array(100).fill('')Array.from(new Array(100).keys())let arr = Array.from({length:100}, (_v,k) => k);console.log(arr);原创 2022-01-21 10:05:56 · 2965 阅读 · 0 评论 -
H5复制文字到系统
copyText(text) { let input1 = document.createElement("input"); // 直接构建input input1.value = text; // 设置内容 document.body.appendChild(input1); input1.select(); // 选择实例内容 document.execCommand("Copy"); // 执行复制 document.body.removeChild(i原创 2021-12-21 14:51:32 · 238 阅读 · 0 评论 -
JS校验身份证号码格式
/* 校验身份证号 */export function checkIdCard(id) { var flag = true; //转换大小写 id = id.toUpperCase(); var arrVerifyCode = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2]; var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // var Checker原创 2021-12-21 14:46:08 · 494 阅读 · 0 评论 -
基于Dav快速搭建React开发框架
1、 dva-cli安装 dva-cli,具体教程 快速上手dva2、改写上面示例中的Products.js将函数组件改成React类组件import React from "react";import { connect } from "dva";import ProductList from "../components/ProductList";class Products extends React.Component { constructor(...args) {原创 2021-12-03 16:00:43 · 2777 阅读 · 0 评论 -
使用html2canvas实现JS截图
1、安装npmnpm install html2canvasimport html2canvas from 'html2canvas';更多信息了解官网2、核心代码// 生成快照convertToImage = (container, options = {}) => { // 设置放大倍数 const scale = window.devicePixelRatio; // 传入节点原始宽高 const _width = container.offs原创 2021-12-03 13:54:00 · 527 阅读 · 0 评论 -
html文本过长及数字不换行问题处理
1、HTML中数字和字母不换行显示在HTML中标签中的数字和字母默认是不换行的,如果要将他们换行,在CSS中添加”word-wrap: break-word;” 即可解决语法:word-wrap: normal|break-word;normal : 单词默认是不能断开的,长单词就会溢出break-word : 会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句。如果需要,词内换行使用(word-break)即可语法:word-break:break-all;不会把原创 2021-11-09 14:47:20 · 4570 阅读 · 0 评论 -
js实现自定义事件管理器
事件管理器实现const events={}class Event { constructor(){ this.events={} } on(eventName,callBack){ if(this.events[eventName]) { this.events[eventName].push(callBack) } else { this.events[eventName]=[callBack] }原创 2021-04-25 17:30:05 · 438 阅读 · 0 评论 -
剖析ES类的Generator函数语法与异步应用
Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同1、基本使用function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloWorldGenerator();hw.next()// { value: 'hello', done: false }hw.next()// { value: 'world', don原创 2021-04-21 17:22:33 · 179 阅读 · 0 评论 -
前端中框架配置中常用配置属性学习
package.json 其实还有很多属性可以配置的,这里就介绍一个 homepage 属性的作用。homepage 的作用是设置应用的跟路径,我们的项目打包后是要运行在一个域名之下的,有时候可能是运行在跟域名下,也有可能运行在某个子域名下或或域名的某个目录下,这时候我们就需要让我们的应用知道去哪里加载资源,这时候就需要我们设置一个跟路径,而且有时候我们的资源会部署在 CDN 上,你必须告诉打包工具你的CDN地址是什么。比如我们用 create-react-app 开发的 React 应用,以及 Vue原创 2021-02-19 17:19:01 · 936 阅读 · 0 评论 -
React中拓展Jquery组件
1、实现import $ from "jquery";;(function (WB) { WB.extend({ //插件名称 wbalert: function() { alert('我是一个插件'); } });})($);export default $2、使用import WB from "./wbjquery"componentDidMount() { (WB as any).wbal原创 2021-01-26 18:22:35 · 158 阅读 · 1 评论 -
H5移动端拉起地图定位全总结
1、跳转高德H5页面并标注位置官方地址事例:https://m.amap.com/navi/?dest=116.470098,39.992838&destName=阜通西&hideRouteIcon=1&key=您申请的Key2、H5在iOS打开APP并定位高德iosamap://poi?sourceApplication=ipark+&name=%@&百度地图baidumap://map/geocoder?address=%@&src=i原创 2020-11-12 16:07:22 · 1816 阅读 · 1 评论 -
H5网站SEO前端处理优化
1、TDK优化新网站一定要提前想好TDK,这将对SEO起到非常重要的左右,因为搜索引擎首先抓取的就是这个。TDK指的是什么呢?T:title 网站的标题,包含网站名称和网站的定位关键词,不宜太长。D:description 网站简介,最好保持在50字以内。K:keywords 网站关键词,最好保持在2-30字以内。TDK在页面头部的meta标签,还有一些其他的,比如:author 网站的作者等等。代码如下:<head> <title>w3h5 - 前端资源原创 2020-09-27 15:55:01 · 1843 阅读 · 1 评论 -
JS实现字符串转DOM并渲染
方法:function parseDom(arg) { var objE = document.createElement("div"); objE.innerHTML = arg; return objE.childNodes;};使用:var obj=parseDom('<div id="div_1" class="div1">Hello World!</div>');结果:使用jquery更简单$(template)...原创 2020-09-23 15:21:34 · 5802 阅读 · 0 评论 -
React开发使用蚂蚁组件ImagePicker图片翻转问题
项目是react使用的是antd-mobile和es6开发,iOS中上传图片被旋转了90度,这里解决后记录下1、exif获取图片信息并旋转首先使用exif对图片进行了翻转,上传的图片好了.import * as exif from "exif-js"; selectFileImage(files: { file: any; orientation: number; url: string; info: WebUploader.File }[], type: string, index: numb原创 2020-09-10 17:48:11 · 719 阅读 · 1 评论 -
前端面试问题及答案整理
1、call、apply区别相同点:都是重定向this指针的方法。不同点:call和apply的第二个参数不相同,call是若干个参数的列表。apply是一个数组手写一个call方法// 在这之前需要重新认识一下call方法的执行操作let mock = { value : 1 };function mockNum(){ console.log('value',this.value)}mockNum.call(mock) // 改变了函数中this的指向,当前this指向了mock对象原创 2020-08-27 15:54:43 · 257 阅读 · 0 评论 -
使用create-react-app创建ts项目
1、项目安装运行create-react-app 你的项目名 --typescript npm start2、项目首页import React from 'react';import logo from './logo.svg';import './App.css';import Arrowlist from './home';const App: React.FC = () => { return ( <div className="App">原创 2020-08-19 15:22:51 · 8574 阅读 · 0 评论 -
React及Vue简单项目模板(不使用npm包)
React.html<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <scri原创 2020-08-18 11:29:42 · 569 阅读 · 0 评论