大前端
文章平均质量分 52
大唐荣华
爱技术,爱生活
展开
-
lowCode 的实现原理
整体架构相对简单,核心就是定义一套标准的数据规范,提供一个编辑器去编辑这个数据,同时提供一个解释器去解析该数据,然后渲染出页面。页面都是由组件递归嵌套而来(DOM树), 基础公共逻辑采用Mixin封装,同时方便接入扩展能力。原创 2023-05-09 17:15:24 · 1535 阅读 · 1 评论 -
浏览器滚动到底部页面加载问题
浏览器滚动到底部页面加载问题原创 2022-09-18 13:31:49 · 2464 阅读 · 0 评论 -
项目使用Swiper4兼容小于IE11方案
兼容IE原创 2022-09-18 12:28:33 · 1233 阅读 · 0 评论 -
常见前端性能优化的35种方法总结
常见前端网页性能优化方法总结汇总转载 2022-06-06 17:05:58 · 6627 阅读 · 1 评论 -
低代码平台调研结果
调研要求:项目活跃度技术栈:react低代码功能点和业务切合度低代码平台调研项目一、百度aims百度aims 体验地址:https://aisuda.github.io/amis-editor-demo/#/edit/0优点:2019年开源最早,关注量最多的国内低代码开源,最近更新一周之内;使用时间较长,在百度内部经过实践考验;内置组件丰富;项目活跃度较高,github 10.9k star, gitee 2.6k star 有交流群;技术栈:ts+react;缺原创 2022-05-31 19:44:58 · 2197 阅读 · 0 评论 -
兼容ie方案:浏览器报Set未定义
报错原因:由于项目中使用了Swiper4,其内部的css样式使用了display:flex ,不支持IE11之前的版本。项目会在IE11之前的浏览器报Set未定义,导致项目中的很多功能失效。具体解决找到对应问题页面,引入下面代码:<script src="https://ss.xgo-img.com.cn/pc/js/ieTipModal.js"></script><link rel="stylesheet" href="//ss.xgo-img.com.cn/pc/原创 2022-04-26 11:38:55 · 1126 阅读 · 0 评论 -
前端安全问题总结
XSS攻击Cross-Site Scripting(跨站脚本攻击)简称 XSS,是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行。利用这些恶意脚本,攻击者可获取用户的敏感信息如 Cookie、SessionID 等,进而危害数据安全。所以,网页上哪些部分会引起XSS攻击?简单来说,任何可以输入的地方都有可能引起,包括URL!常见的注入方法在 HTML 中内嵌的文本中,恶意内容以 script 标签形成注入。在内联的 JavaScript 中,拼接的数据突破了原本的原创 2022-03-23 17:40:28 · 4696 阅读 · 0 评论 -
pdf在线预览解决方案——pdf.js使用
业务背景在C端的前端项目中,针对用户会有多种规则需要展示,之前的处理方案是将这些规则写成一个个的静态页面,用户来访问这些页面。但如果这些规则需要变更的话,就需要前端修改对应的规则页面的文案,重新发版。为了避免这种因为规则文案修改而频繁发版的情况,现改用pdf方式来渲染,只需要在后台上传、配置需要展示的pdf规则文件,前端通过动态获取文件url在线预览pdf规则。实现方式针对pdf的渲染,为了更好的兼容ie浏览器和m端,采用了PDF.js库。PDF.js 由 Mozilla 提供支持。目标是创建一个通原创 2022-03-10 20:26:40 · 1773 阅读 · 0 评论 -
渲染出现的 [Object object] 错误
可能原因是 String + Object导致Object是转换为String,默认结果就成了 [Object object]。可能的解决方案:在自定义对象定义toString()并返回任何你想要在输出中看到的。使用JSON.stringify(obj)将其转换为更有用的东西,这当然会在循环引用存在的情况下中断。...原创 2022-02-07 11:40:06 · 6230 阅读 · 0 评论 -
React dangerouslySetInnerHTML api 的介绍与使用
使用场景:在 react 项目中,当后端接口返回的一个字段里有HTML字符实体的情况下,是不会转换成对应样式的。比如& g t; 就不会显示成>,< b r > 也不会进行换行。这时候用 dangerouslySetInnerHTML就可以正常渲染混有 DOM字符串。举例:<div dangerouslySetInnerHTML = {{ __html: 接口传来的数据}} />如果是直接调用渲染接口中的值,则是以上的写法,如果仅仅是显示固定的内容,用如原创 2022-01-05 17:38:55 · 778 阅读 · 0 评论 -
react 手写优化实现 antd 倒计时功能组件( 附源码)
react 手写优化antd 倒计时功能组件原创 2021-12-20 17:50:15 · 1007 阅读 · 0 评论 -
react 实现dom打印功能 附代码
react 实现dom打印功能 附代码原创 2021-12-17 17:29:30 · 880 阅读 · 1 评论 -
antd pagination onchange 事件不触发,pagination onchange分页请求内容不正确。
1.antd pagination onchange 事件不触发背景:无论是 table 内配置还是单独引入pagination组件, 均为正常使用。但是分页成功,onchange 事件却不触发。首先项目中其余页面也有用到分页组件,一切正常。这样就排出了antd 版本的影响。然后在前端调试antd 源码,发现 total 值的类型不对。因为这个值是从后端直接取回赋值,后端传回来的类型是一个string(实际是因为http传输造成的转换)。坑的地方就是,还能够成功分页,而且控制台并无报错提示,很不友好原创 2021-11-24 10:56:15 · 4526 阅读 · 0 评论 -
react for循环中setState失效或者多添加data[i]的问题
代码 const [addvalue, setAddvalue] = useState("") const [plainOptions, setplainOptions] = useState(defaultplainOptions) const add = () => { if (addvalue) { const bigdata = addvalue.split(" ") for (let i = 0; i &原创 2021-11-08 17:17:09 · 1499 阅读 · 0 评论 -
react+ts 项目:ts(2322),类型“Readonly<{}>”上不存在属性“day”。ts(2339) 解决办法
React - 类型“Readonly<{}>”上不存在属性父组件传值报错子组件接收数据报错排查代码后发现, 只要将 .tsx 换成 .jsx 之后发现问题就不存在了。 于是将问题定位在了 TypeScript 上。所以只需要将子组件接受的 props 和 state 的类型定位成 any 这个问题就可以解决。...原创 2021-10-22 11:30:51 · 7937 阅读 · 2 评论 -
git pull 报错 ,error: 您对下列文件的本地修改将被合并操作覆盖
1.git stash 本地代码暂存缓存区2.git pull 暂存后就可以拉取新的代码3.git stash pop 把暂存区代码取出4.合并修改冲突原创 2021-10-18 16:08:01 · 1522 阅读 · 0 评论 -
关于package.json、 package-lock.json 和 yarn.lock 的安装问题
package.json 是记录项目依赖包的版本文件。当我们新 clone 一个项目后,需要根据里面记载的信息下载对应的版本依赖到node_modules 文件夹。package-lock.json,yarn.lock 是保证项目包依赖版本稳定的安全文件 。一般情况,用npm、和yarn 都可以下载对应的依赖,但是会有一些特殊诡异的情况。这时候我们需要观察:如果拉下来的项目中有package-lock.json,我们就要用npm 或者cnpm 安装 (注意有时node版本也会有影响)如果原项目中有原创 2021-09-29 14:31:48 · 4285 阅读 · 0 评论 -
速来围观,一分钟快速了解 BFF
BFF,既Backend For Frontend。 中文翻译过来的意思是前端的后端。关于前后端日常描述:后端同学追求的服务下沉,解耦,微服务化。一条message 需要几个接口返回。[前端:能给组装一下吗?, 后端:都返你了,自己拼一下吧…别人也这么用的…]前端追求用户体验 [前端:少一次http请求,多写个接口难吗? 后端:没必须浪费时间在重写,不差这个一个请求…]总结: 前端和后端同学都说的各自有道理,就看谁有时间来处理了,那到底有没有一种解决场景可以化解这种尴尬的场景,于是就有了BFF,1原创 2021-09-07 17:17:42 · 7229 阅读 · 0 评论 -
react+ts 项目:引入antd select组件联动 ,ts7053、ts2741报错解决
相关组件:ts7053解决办法:数据生命时定义类型any,即可解决截图中全部报红。ts2741any大法+ 增加option 的 value值定义。原创 2021-08-31 15:45:40 · 673 阅读 · 0 评论 -
Canvas 和 SVG 的区别对比
区别SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要原创 2021-06-01 17:56:30 · 175 阅读 · 0 评论 -
webpack中,hash、 chunkhash、 contenthash的区别
Hash(哈希)一般是结合CDN缓存使用的,如果文件内容发生改变,那么对应文件的哈希值也会改变,对应的HTML引用的URL地址也会跟着改变。这样触发CDN服务器从源服务器上拉取对应数据,进而行地缓存的更新。值内容hash计算与整个项目的构建相关;chunkhash计算与同一 chunk 内容相关;contenthash计算与文件内容本身相关;...原创 2021-05-11 16:49:01 · 114 阅读 · 0 评论 -
变量提升和同名函数
代码示例:function test(a){ console.log(a); function a (){ } var a = "AAAA"; console.log(a);}在这段代码在中,首先进行的是 a 函数的声明和定义,然后进行变量 a 的变量提升,所以第一次输出的 a 并不是输出 undefined ,而是 a 函数。解析因为在 JavaScript 中的函数是一等公民,函数声明的优先级最高,会被提升至当前作用域最顶端。所以第一次调用时实际执行了下面定义的函数声明,然后第二次原创 2021-04-26 11:38:28 · 192 阅读 · 0 评论 -
关于 CSS 定位的表格对比
CSS 的定位值staticrelaticeabsolutefixed特性默认值,没有定位相对定位:相对于自身进行定位。1.不设置偏移量的时侯,对元素没有任何影响 2.它可以提升层级关系绝对定位: a.无父级元素定位时,以浏览器的左上角为基准。 b.有父级元素的情况下,父级设置相对定位,子级设置绝对定位 (是以父盒子为基进行定位)。这就是所调的页面布局“父相子绝” 特点是:1提升层级 2脱离标准流固定定位:设置固定定位之后当前元素不会发生改变,可以做小广告页面布局原创 2021-04-25 19:05:02 · 134 阅读 · 0 评论 -
从 MongoDB 中获取数据的流程
使用 apollo-datasource-mongodb 包将 MongoDB 数据映射到 GraphQL 数据层使用 mongoose 来进行 MongoDB 的驱动,开启连接服务导入 MongoDB 中的数据 schema方式一:直接在 resolver 中操作数据库数据 在 GraphQL 的 resolver 中使用导入的数据 Schema 来操作数据库中的数据(增删改查)方式二:使用 data Sources 来映射数据方式一的 resolver 与数据库耦合太强,原创 2021-04-20 18:28:28 · 1568 阅读 · 0 评论 -
简述 Apollo server 的基本使用。
第一步:导入 apollo-serverconst { ApolloServer, gql } = require("apollo-server");第二步:定义 schema 和 resolver// 定义schemaconst typeDefs = gql` type Query { foo: String }`;// 定义resolverconst resolver = { // 所以schema中Query内部的字段都会调用这里的Query对象内部对应的方.原创 2021-04-19 13:57:55 · 1124 阅读 · 0 评论 -
简述Graphql (结合 Express )的使用体验
导入 graphql.js(GraphQL 使用 JavaScript 实现的版本)const { graphql, buildSchema } = require("graphql");导入 express 和 express-graphql,express-graphql 是 graphql 用于与 express 结合使用的中间件包const express = require("express");const { graphqlHTTP } = require("express-graph原创 2021-04-19 11:50:54 · 328 阅读 · 3 评论 -
JavaScript数据结构与算法之树的实现
树形结构是一种非线性数据结构。树中的每个部分称为结点,结点间存在分支结构与层次关系。・每个树形结构都具有一个根结点。・根据结点之间的关系,也存在父结点、子结点、兄弟结点的概念。不含子结点的结点称为叶节点。子树:对某个结点与其后代结点的整体称呼。由于存在父子关系,树中的结点形成多级结构,称为层级。根节点层级为1,向下依次递增。树中最深结点的层级称为树的高度深度:树中最深的一个节点的层级...原创 2021-04-15 19:14:06 · 163 阅读 · 0 评论 -
2021年4月-北京-作业帮面试题(已offer)
一面1.做没做过 混合开发2.怎末调试 移动端3.性能优化4.websocket5.现常做截取url 参数6.现常做 eventloop 执行次序题二面:1.原型原型链 this 闭包2.vue 传值3.vue2 / vue34.es6 用到的新特性5.动画6.结合项目问了一大堆7.前端性能优化8.知不知道 keep-alive9.结合项目说说登陆注册 如何保存登陆状态等等10.结合项目说商品长列表 如何优化 下拉刷新 数据如何存储优化点聊聊11.前端存储12.es6原创 2021-04-15 18:58:24 · 912 阅读 · 0 评论 -
2021年4月-北京-百度面试题(已offer)
一面:介绍项目,项目中得难点如何克服的输入url到浏览器整个过程发生了什么?对this的了解(涉及到作用域,箭头函数,bind,call,apply)原型原型链的理解以及作用问到有没有用过vue,让说了vue的生命周期,和react的比较性能优化(必问)浏览器缓存react 组件之前传值和状态管理实现一个函数,入参为一个数字数组,返回值为数组中出现次数最多的那个数字二面:介绍项目promise理解webpack 了解多少,原理是什么,怎么优化的http和https的区别了原创 2021-04-14 14:18:39 · 312 阅读 · 0 评论 -
JavaScript数据结构与算法之链表的实现
链表是一种有序的数据结构。它是一种更好的数据存储方式优化数组的存储功能。链表中的每个部分称为节点。链表可以从首、尾、中间的任意位置进行数据存储。链表的元素在内存中不必是连续的空间。优点:添加和删除时不会导致元素的位移。缺点:不可以快速根据索引定位元素。数组存储有序数列。在内存中占有一段连续的空间。添加、移除会导致后续元素的位移,性能开销大。eg:array.push() >>> array.unshift()对比:获取、修改元素时,数组效率高。添加、删除元素时,链表效率高。原创 2021-04-08 19:29:58 · 136 阅读 · 0 评论 -
JavaScript数据结构与算法之队列的实现
队列是一种遵循先进先出原则的有序集合。添加新元素的一端称为队尾,另一端称为队首。类似于我们现实生活中的排队。队列的实现我们需要实现以下功能:enqueue()入队方法dequeue()出队方法top()获取队首值size()获取队列的元素个数clear()清空队列代码class Queue { constructor() { //用于存储队列数据 this.queue = []; this.count = 0; }原创 2021-04-07 11:58:15 · 133 阅读 · 0 评论 -
在数据封装与解封装过程中,针对应用层、传输层、网络层、数据链路层、物理层5层分别做了什么事?
数据封装:在网络中传输数据需要对其进行封装,也就是加入网络参考模型中各层对应的头部信息,这些头部信息的主要作用是用来帮助中间传输系统将数据传输到一个正确的目的地,它不是为了给接收方看的。数据的封装过程传输层的传输是端到端的,类似于我们将信封交到邮递员手上;数据链路层主要负责本地区域的传输,类似邮递员将信封交到邮局;而网络层的传输是点到点的,类似信封被邮局发出去在不同城市间传输;所有的数据要转换成物理信号比特流在物理层传输。数据解封装 :而到接收方那边时,他不关心这个数据是如何发送过来的,对接收方来说数.原创 2021-04-02 19:56:36 · 5155 阅读 · 0 评论 -
Nodejs 中流操作的优势及流的分类
优势: 相对于使用其他的数据处理方法,流基本上提供了两个主要优点:内存效率: 无需加载大量的数据到内存中即可进行处理。时间效率: 当获得数据之后即可立即开始处理数据,这样所需的时间更少,而不必等到整个数据有效负载可用才开始fs与流都可以处理文件,为什么还要用流?fs 模块处理文件的缺点:将文件的数据全读到内存中,再把数据写到文件内,这样做会大量占用内存。而流(stream)是 Node.js 中处理流式数据的抽象接口,是一组有序的,有起点和终点的字节数据传输手段。可以实现将数据从一个地方流动到原创 2021-04-02 18:03:54 · 573 阅读 · 0 评论 -
Nodejs文件操作 api 总结
1、fs.stat(path, [options],callback)返回表示文件各方面信息的对象。该方法用于检测文件的状态,可以借此来判断某个文件是否存在。path参数传入该文件的绝对物理路径,该callback回调函数有两个参数err和stats。其中err为错误信息参数,stats为一个文件状态对象。2、fs.writeFile(path,data[,options],callback)该方法可用于往指定文件当中写入内容,该内容会覆盖文件当中原有的内容。若传入的文件路径当中的文件不存在,则先完成原创 2021-04-02 17:45:32 · 225 阅读 · 0 评论 -
Nodejs 简述Buffer的使用,包含多重创建方式、实例方法及静态方法
Buffer 是用来处理缓冲区的专用API,用于创建缓冲区,操作缓冲区数据的场景。主要用于操作二进制数据流,其用法与数组非常相似。在 Nodejs 中处理二进制流就需要用到 Buffer。Buffer 实例一般用于表示编码字符的序列,比如 UTF-8 、 UCS2 、 Base64 、或十六进制编码的数据。 通过使用显式的字符编码,就可以在 Buffer 实例与普通的 JavaScript 字符串之间进行相互转换。一、创建方式:new Buffer(size) 创建一个指定大小的bufferB.原创 2021-04-02 16:55:47 · 1129 阅读 · 1 评论 -
Nodejs的特点以及使用场景总结
一、NodeJS的优缺点node的主要特点:它是一个Javascript运行环境依赖于Chrome V8引擎进行代码解释异步事件驱动非阻塞I/O轻量、可伸缩,适于实时数据交互应用单进程,单线程(这里指主线程)性能出众优点:高并发(最重要的优点)适合I/O密集型应用缺点:不适合 CPU 密集型应用;CPU 密集型应用给 Node 带来的挑战主要是:由于 JavaScript 单线程的原因,如果有长时间运行的计算(比如大循环),将会导致 CPU 时间片不能释放,使得后续原创 2021-03-31 16:24:31 · 1153 阅读 · 1 评论 -
2021年3月-广州-腾讯面试题(已offer)
一面:算法+基础介绍现在的项目项目中的难点。怎么解决这个问题的?跨域相关的。你平时都怎么处理跨域问题?http 相关的 2.0 对比 1.1 的提升在哪?Xss相关的有没有安全方面的处理。输入URL到渲染的全部过程。二面 框架方面大文件上传断点续传的问题;介绍项目顶目中有没有什么觉得自己做的还不错的东西;react hooks 使用的注意事项;react 如何提升性能;vue 数据请求可不可以放在 created 中。三面场景问答介绍项目,觉得项目中哪些点是自己满意的。原创 2021-03-25 16:57:25 · 264 阅读 · 2 评论 -
2021年3月-杭州-阿里本地生活基础面试题
一、z-index的层级关系及css中的层叠上下文层叠上下文(stacking context),是HTML中一个三维的概念。在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺,我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴上就“高人一等”,最终表现就是它离屏幕观原创 2021-03-25 16:33:19 · 713 阅读 · 0 评论 -
2021年3月- 杭州-阿里阿里妈妈事业群-电话面面试题
阿里妈妈事业群-电话面判断是不是数组Array.isArray(a)a instanceof Arraya.constructor === ArrayoBject.prototype.toString.call(a) === '[object Array]'你提到instanceof就聊一聊instanceofInstanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上例如在表达式 left instanceof right 中 会沿着 left原创 2021-03-25 15:11:58 · 290 阅读 · 0 评论 -
表格对比 slice(),splice(),split(),substring(),substr()
slice()splice()split()substring()substr()作用从已有的数组中返回选定的元素向/从数组中添加/删除项目,然后返回被删除的项目。(该方法会改变原始数组 )用于把一个字符串分割成字符串数组用于提取字符串中介于两个指定index之间的字符在字符串中抽取从start下表开始的指定书目的字符。使用范围Array 和 StringArrayStringStringString语法obj.slice(start, end)...原创 2021-03-24 16:52:12 · 146 阅读 · 0 评论