前端开发
关注
分享
扫一扫
文章平均质量分 94
Qlly
这个作者很懒，什么都没留下…
展开
-
探索低代码的新形态（D2C、ChatGPT）
突破前后端的边界，打通全链路，是基于低代码逻辑配置的扩展，解放后端开发人员的生产力；借鉴Virtual DOM的思想，实现不同平台的渲染器，低代码不止是局限于web，而是能覆盖不同平台的各种场景；D2C优化UI层面的配置过程；P2C优化交互逻辑层面的配置过程。以构建全链路的跨平台应用为目标，通过AI处理配置过程中的大部分工作，再由用户进行少量配置，甚至不做任何配置。原创 2023-06-06 17:22:33 · 865 阅读 · 0 评论 -
React组件库实践：React + Typescript + Less + Rollup + Storybook
原先在做低代码平台的时候，刚好有搭载React组件库的需求，所以就搞了一套通用的React组件库模版。目前通过这套模板也搭建过好几个组件库。原创 2023-04-03 17:21:05 · 730 阅读 · 1 评论 -
低代码平台实践系列（一）：逻辑配置概述
作为前端开发人员，大家可能已经很熟悉现有的前端框架和工具，但是随着数字化转型的推进，越来越多的企业需要更快速、更高效地构建自己的应用程序。低代码平台可以成为我们前端开发人员解放生产力的神器。低代码平台为用户提供了可视化的界面、拖拽式的组件和自动生成的代码等功能，让用户能够更快速地创建应用程序，而无需编写大量的手动代码。原创 2023-03-15 17:19:18 · 1365 阅读 · 0 评论 -
配置可视化-基于form-render的无代码配置服务（一）
有些业务场景需要产品或运营去配置JSON数据提供给开发去使用（后面有实际业务场景的说明），原有的业务流程，非开发人员（后面直接以产品指代）把数据交给开发，再由开发去更新JSON数据。对于产品来说，直接接触JSON数据并不友好，一是搞不懂JSON；二是容易出错，影响现网数据。原创 2023-02-14 17:33:25 · 753 阅读 · 0 评论 -
【译】从500ms到1.7ms的React性能优化经历
我相信每个开发者在开发的某个阶段，都有可能需要进行性能优化。关于如何优化react中的性能，已经有很多资源和文章，这篇文章也不例外。这里分享一个我实践过的从0.5s到1.7ms的性能优化的实践和结论。......翻译 2022-08-18 17:02:57 · 432 阅读 · 0 评论 -
JSON Schema&表单UI快速生成解析
一、JSON Schema JSON（JavaScript Object Notation）是一种轻量&常见的数据交换格式，基本的数据的结构就是key-value，具有易于生成和解析的优点，通过JSON可以灵活地表达程序所需要的数据结构。 但JSON本身并没有特定的规范（本身结构也不支持注释），所以对于数据本身的描述是缺失的，比如说开发人员或者程序，就无法判断下面这份数据里面的age为string是否是符合预期的类型。{ "name": "John Doe", "mobile":原创 2022-04-08 15:51:11 · 4604 阅读 · 0 评论 -
图片格式发展与Netflix公布的下一代图片压缩格式AVIF——从700kb到20kb
一、图片格式的发展二、AVIF介绍从图片发展过程来看，AVIF（AV1 Image File Format，AV1图像文件格式）是目前最值得关注的新型图片格式。AVIF是业界最新的开源视频编码格式AV1的关键帧衍生而来的一种新的图像格式。AVIF由包括Google、Apple、Netflix在内的开放媒体联盟（Alliance for Open Media，简称AOMedia）共同开发，并于2020年上半年由Netflix公布，作为JPEG的替代方案在Netflix的实际项目中落地。三、使用原创 2020-12-18 21:37:19 · 1691 阅读 · 1 评论 -
关于koa-body上传文件的基本流程记录
一、前端upload(){ const file = document.querySelector("#file"); const fd = new FormData(); // 需要创建一个表单对象 fd.append("f",file.files[0]) axios({ method:'post', url: '/api/upload', data: fd })}二、后端app.use(koaBody({原创 2020-05-24 23:47:46 · 657 阅读 · 0 评论 -
flask+原生ajax实现上传和下载进度数值显示
注意：本文代码只提供进度数值显示，未实现进度条的显示一、下载进度<div class="schedule">0</div> <button onclick="download()">下载</button> <script> // 要设置为slow 3G才能看得到明显的效果 let schedule = d...原创 2020-04-01 22:42:14 · 2787 阅读 · 0 评论 -
JS实现apply和call
基本的思路就是，把函数暂时借用一下，执行完后就立刻删除，需要注意的是对参数的处理function Person() { this.name = "无名"}Person.prototype.print = function(age, city) { console.dir(`姓名：$ { this.name }，年龄：$ { age...原创 2020-03-19 21:14:11 · 177 阅读 · 0 评论 -
CSS3 - flex属性：flex-grow、flex-shrink和flex-basis
HTML<div class="parent"> <div class="c c1">1</div> <div class="c c2">2</div> <div class="c c3">3</div></div></div>CSS.parent { ...原创 2020-03-16 16:49:32 · 474 阅读 · 0 评论 -
JavaScript 排列组合
只针对元素非重复，且结果无序的情况。主要的思路就是用未被组合的元素（data变量内）去组合已经组合过的元素（res变量内），并把自身也放进res中const data = ['a', 'b', 'c'];function getGroup(data) { const res = []; for (let i = 0; i < data.length; i++) {...原创 2020-03-15 23:09:27 · 521 阅读 · 1 评论 -
默认情况下通过axios发送数据，Flask如何获取？
默认情况下，axios的post请求传参是json格式，如下图这种情况下，Flask需要先通过request.get_data()获取到数据，然后再通过json.loads()转换为dict格式原创 2020-01-15 17:09:27 · 1405 阅读 · 0 评论 -
js生[n,m]范围内的随机数
生成一个[n,m]范围内的随机数，即[n,n+(m-n)]，此时的(m-n)的值是可以通过随机数获取的。举例说明生成一个[30,40]的随机数let res = 30 + Math.floor(Math.random() * (40-30+1))40-30+1的原因是Math.random()可以生成一个[0,1)区间内的随机数，Math.floor()向下取整，导致取不到10这...原创 2019-11-29 20:02:10 · 279 阅读 · 0 评论 -
JavaScript 集合交集算法挑战（https://www.w3cschool.cn JavaScript高级脚本算法参考答案）
原题目链接：https://www.w3cschool.cn/codecamp/symmetric-difference.html题目：创建一个函数，接受两个或多个数组，返回所给数组的 对等差分(symmetric difference) (△ or ⊕)数组.给出两个集合 (如集合 A = {1, 2, 3} 和集合 B = {2, 3, 4}), 而数学术语 "对等差分" 的集...原创 2019-02-23 12:21:11 · 435 阅读 · 0 评论 -
JavaScript如何获取被点击的li元素是所有li元素中的第几个？
提出一个问题：如何获取被点击的li是第几个？<ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li></ul>解决思路：我们通过getEleme原创 2019-02-28 23:26:05 · 11421 阅读 · 0 评论 -
JavaScript 使用循环语句查找通讯录（https://www.w3cschool.cn JavaScript编程实战题目参考答案）
原题目链接：https://www.w3cschool.cn/codecamp/profile-lookup.html 题目：我们有一个联系人列表，里面存储着不同联系人的数组对象。函数 lookUpProfile 有两个预定义参数：firstName值和prop属性 。该函数应检查firstName是实际联系人的firstName，给定的属性（prop）是该联系人的属性。如果...原创 2019-02-19 22:58:17 · 499 阅读 · 0 评论 -
网络应用程序的架构：C/S架构、B/S架构的区别与优缺点
网络应用层架构一般分为两层架构、三层架构、N层架构。其中B/S架构、C/S架构是两层架构的代表。一、C/S架构C/S架构是Client/Server的缩写，翻译过来就是“客户端/服务器”。C/S架构的业务逻辑主要集中在客户端，而这里的“服务器”，其实可以认为是数据库服务器，因为除了提供基础的数据库服务外，服务器并没有其他的功能。常用于开发应用软件（application softwar...原创 2019-03-01 23:29:42 · 16095 阅读 · 0 评论 -
绝对定位display:absolute如何实现垂直居中？
首先设置一个父元素（.parent）和一个子元素（.child）的样式。CSS代码：.parent { position: relative; width: 200px; height: 200px; background-color: #eee;}.child { width: 70px; height: 70px; position: absolute; back...原创 2019-03-11 21:50:03 · 5085 阅读 · 0 评论 -
如何使用JavaScript计算时间间隔（以日期间隔为例），如何使用字符串类型（String）的日期计算事件间隔？
首先创建两个date对象const date1 = new Date("2019-05-01");const date2 = new Date("2019-05-04");// date1：Wed May 01 2019 08:00:00 GMT+0800 (中国标准时间)// date2：Sat May 04 2019 08:00:00 GMT+0800 (中国标准时间)然后将...原创 2019-05-04 13:57:42 · 732 阅读 · 0 评论 -
重绘（reflows）与重排（repaints）（《高性能JavaScript》随笔（二））
一、重排何时发生？简而言之，当页面布局和几何属性发生变化时就需要“重排”。添加/删除可见的DOM元素 元素位置改变 元素尺寸改变（包括：margin、padding、border等属性） 内容改变，比如：文本改变，或被另一个不同尺寸的图片替代了。 页面渲染初始化 浏览器窗口尺寸改变二、渲染树变化的排队与刷新浏览器每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行...原创 2019-05-23 16:18:20 · 278 阅读 · 0 评论 -
CSS实现元素width右方向变化、左方向变化、双向变化
改变dom元素的width值，页面上默认是向右变化（向右伸长以及向左缩短）。以下为实现双向变化和向左变化（向左伸长以及向右缩短）1、双向变化（实例）<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" con...原创 2019-08-12 17:01:30 · 9554 阅读 · 1 评论 -
纯CSS实现星级评分特效组件
参考掘金的文章：https://juejin.im/post/5d57adf5f265da03e3697e1b（作者：聪明的汤姆）HTML<form action="" onsubmit="return false"> <div class="parent"> <input type="radio" name="rate" class="...原创 2019-08-29 10:32:11 · 802 阅读 · 0 评论 -
图片加载时显示等待gif图片
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-09-16 09:46:30 · 3576 阅读 · 0 评论 -
三栏式布局：flex、绝对定位和浮动
两边的盒子宽度固定，中间盒子自适应。一、flex<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2019-09-26 11:47:09 · 578 阅读 · 0 评论 -
Sublime Text 3错误：there are no packages available for installation
首先下载一个channel_v3.json的文件下载地址：下载链接：https://packagecontrol.io/channel_v3.json（可能打不开，可以直接用网盘下载）网盘链接：https://pan.baidu.com/s/1Hw6dvpwED4dHZ34EbYRQUw 提取码: 3y6r下载完成后，将channel_v3.json放到某一个文件夹内打...原创 2019-02-16 16:51:16 · 922 阅读 · 0 评论