0

新的宽高比(aspect-ratio)CSS属性

在响应式网页设计中,保持一致的宽高比,即所谓的长宽比,对于防止布局的累积偏移至关重要。现在,有了Chromium 88、Firefox 87和Safari技术预览版118中推出的新宽高比属性,有了更直接的方法来实现这一目标。长宽比长宽比最常见的表示方式是两个整数和一个冒号,尺寸为:宽:高,或x:y。摄影最常见的长宽比是4:3和3:2,而视频和最近的消费类相机则倾向于16:9的长宽比。具有相同长宽比的两个图像。一个是634 x 951像素,另一个是200 x 300像素。两者的长宽比均为2:3随着响应式设计的到来,对于Web开发人员而言,保持宽高比已变得越来越重要,尤其是当图像尺寸不同且元素大小...

阅读全文>>

0

前端如何实现队列

前言队列对于我们来说再简单不过了,就是排队呀,咱们今天看看怎么使用js 实现队列的思想,简单容易理解,可以看看偶1.定义队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表。进行插入操作的端称为队尾,进行删除操作的端称为队头。队列 先进先出2.队列的实现2.1 对列的方法enqueue 从队列尾部添加一个元素dequeue 从队列头部删除一个元素head 返回头部的元素 不是删除size 返回队列的大小clear 清空队列isEmpty 判断队列是否为空tail 返回队列尾节点2.2 实现...

阅读全文>>

0

Serverless 文件上传优化

前言当开发者需要搭建一个 Web 应用或移动端程序时,可以使用云函数作为后端服务,由 API 网关接收客户端请求,并触发云函数处理。这样的 Serverless 架构具备简单便捷、可弹性扩展、高可用等优势,正成为越来越多人的共同选择。但开发者在搭建应用时,难免会遇到上传文件的场景,如 App 上传用户头像、个人博客文章图片、网站评论图片,这些都需要上传文件到后端。如果您的业务托管在主机上,上传文件往往不受限制,可使用 multipart/form-data 方式直接上传文件;但在 Serverless架构下,由于 API 网关和云函数之间只支持传输 JSON 数据,使用传统方式上传文件较为困难...

阅读全文>>

0

表格设计:掌握表格设计方法

编辑导读:如何对海量的信息进行统计,最常见的方法就是进行表格整理。表格是职场人士最常用到的工具之一,是数据呈现的载体。本文从设计的角度,对如何进行表格设计展开分析,希望对你有帮助。在我的上一篇文章中,详细的对【表单设计】进行了总结,沉淀了表单设计中需要注意的体验问题,今天按照同样思路对【表格】 进行整理,这是我写的第二篇文章,希望能对大家有帮助。首先了解下表格的构成:顶栏、表格主体、底栏。顶栏: 对表格信息进行概括,包含标题、筛选、搜索、操作按钮等功能表格主体:承载数据内容,由 行 和 列 构成底栏:主要用于设置当页条数及放置分页器关于表格的文章有很多,这边我仅仅针对表格内部(即表格主体)与大...

阅读全文>>

0

前端iframe的属性及优缺点解析

一、什么是 iframeiframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)<iframe src="URL"></iframe>二、iframe 的常用属性1、width定义 iframe 的宽度2、height定义 iframe 的高度3、name规定 iframe 的名称4、frameborder规定是否显示边框,值为 0(不显示)和 1(显示)5、scrolling规定是否在 iframe 中显示滚动条,值为 yes、no、auto6、src设置 iframe 的地址(页面/图片)7、srcdoc...

阅读全文>>

0

前端小技巧:学会用FormData对象收集表单数据

1.FormData对象有什么用?我们先看一个小例子:html代码:<form action="/postForm" id="form"> <input type="text" id="username" name="username"> <input type="password" id="password" name="password"> <input type="button" value="submit" onclick="mysubmit()"> </form> 需求:是获取form表单中的用户名和密码并包装成一个对...

阅读全文>>

0

从源码窥探Webpack4原理

随着多终端设备的迅速普及,Web前端开发的复杂性和应用场景日益扩大,Webpack在前端构建演变的工程化浪潮中担当起了针对不同应用场景打包的大任。 如今,Webpack可谓是JavaScript社区最伟大的项目之一。本文力争从源码层面窥探Webpack的实现原理。文中出示了核心的代码块并注释了相应的path,如果你也想揭开Webpack神秘的面纱,那就打开一份源码跟随本文一起享受一次秃头的快乐。Webpack本质Webpack的本质是什么呢?可能有的同学已经知道了,Webpack本质上一种基于事件流的编程范例,其实就是一系列的插件运行。Webpack主要使用Compiler和Compilati...

阅读全文>>

0

Mint UI-饿了么出品的开源、轻量的移动端 UI 组件库

一款轻量化的移动端 UI 组件库,风格中性,css3动效性能优秀,支持按需加载。关于 Mint UIMint UI 是饿了么前端团队出品的移动端 UI 组件库,基于 Vue 2.0 构建,继桌面 UI 组件库 Element UI 后又一个优秀的开源 UI 组件库,包含丰富的 CSS 和 JS 组件,能够快速构建出风格统一的页面,提升开发效率。Mint UI 组件库特性UI 设计风格中性,不需要改样式就能适应很多产品项目轻量化。依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化,即便引入全部组件,压缩后的文件体积也仅有 30kb 左右(gzip)性能优秀。各种动效采用 CSS3...

阅读全文>>

0

开源协作Web编辑器

在现代Web系统大流行时代,一款功能强大而切支持协作的Web的富文本编辑器是系统的最关键的组成部分。一款可真正在生产环境中使用的即插即用编辑器,可以能够解决我们实时协作问题:通过浏览器编辑结构化文档,并在屏幕上显示彼此的更改,从而使相隔数千里的用户能够进行协作编辑。本文我们就来介绍一些这样的Web编辑器。TinyMCETinyMCE是一款轻量级所见即所得开源Web编辑器,基于LGPL license发布可以更好的用于商业产品中。TinyMCE支持AJAX,具有配置简便,加载速度快的特点。TinyMCE的使用方法非常简单,只需在Html页面中增加两行即可: <script src="tin...

阅读全文>>

0

前端内存泄漏及完善的解决方案

最近收到测试人员的反馈说我们开发的页面偶现卡死,点击无反应的情况,特别是打开页面较久的时候发生概率较高。打开任务管理器,看到内存占有率已经很高了,初步判断可能存在内存泄漏的情况。下面排查内存泄漏的原因。系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。当内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。Chrome 限制了浏览器所能使用的内存极限(64 位为 1.4GB,32 位为 1.0GB)引起内存泄漏的原因1、意外的全局变量由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中,全局对象就是 window 对象。变量在窗口关闭或...

阅读全文>>