前端-基础问题
文章平均质量分 85
关于JS等基础问题
李小斌96
这个作者很懒,什么都没留下…
展开
-
超详细讲解H5移动端适配 —— 移动端适配方案
目前来讲这三种方案是现在用的最多的方案,它们都有各自的优缺点。转载 2023-10-30 17:09:34 · 4737 阅读 · 0 评论 -
超详细讲解H5移动端适配 —— 前置知识
移动互联网发展至今,各种移动设备应用而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现一致,前端工程师就不得不对页面进行移动端适配了。转载 2023-10-30 15:31:43 · 283 阅读 · 0 评论 -
怎样使绝对定位的元素宽度自适应子元素
在一个大屏展示页面中,使用了全局绝对定位,元素相对于父元素(全局)进行绝对定位,元素气泡描述再次使用了绝对定位,气泡相对于元素进行绝对定位。气泡描述有两行数字描述,需要自适应宽度。原创 2023-10-30 10:02:36 · 266 阅读 · 0 评论 -
CSS 2022 新特性
允许给 @media 自定义名称了,如下定义了很多自定义 @media:: root {… } }CSS 2022 新特性很大一部分是将 HTML 原生能力暴露出来,赋能给业务自定义,不过如果这些状态完全由业务来实现,比如 Antd组件早已实现自定义下拉选项与样式,既然 HTML 没有提供自定义能力,就按照其交互用 DIV + JS 模拟一套实现出来,定制空间更大。转载 2023-01-16 17:09:30 · 294 阅读 · 1 评论 -
总结了 42 种前端常用布局方案(三)
转载自:前端大全三列布局三列布局主要分为两种:第一种是前两列定宽,最后一列自适应,这一种本质上与两列布局没有什么区别,可以参照两列布局实现。第二种是前后两列定宽,中间自适应,最终效果图如下公共 CSS 如下:body { margin: 0;}.container { height: 400px; background-color: #eebefa;}.left { height: 400px; width: 200px; background-co转载 2022-03-14 17:27:30 · 186 阅读 · 0 评论 -
总结了 42 种前端常用布局方案(二)
转载自:前端大全水平垂直居中实现水平垂直布局基本就是将上面几种方式结合使用,这里总结了 7 种常用的布局方法,其公共的 CSS 代码如下所示:body { margin: 0;}.parent { height: 500px; width: 500px; background-color: #eebefa; margin: 0 auto;}.child { height: 300px; width: 300px; background-color: #f783a转载 2022-03-14 17:01:21 · 121 阅读 · 0 评论 -
总结了 42 种前端常用布局方案(一)
转载自:前端大全对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新,实现各种布局的方式已经多得数不胜数了。本篇文章总结了 42 中 CSS 的常见布局,这 42 种布局可以细分为如下几类:水平居中垂直居中水平垂直居中两列布局三列布局等分布局Sticky Footer 布局全屏布局这些内容也正是本篇文章的目录。水平居中实现水平布局比较简单,方法也比较多,这里总结了 7 种常用的布局方法,其公共的 CSS 代码如下所示:.parent {转载 2022-03-14 11:09:58 · 213 阅读 · 0 评论 -
捕获用户在该页面停留的时长(前端监测)
转载自: 前端大全前言:为什么要做这个监测用户停留的呢?原因很简单,如果我们要分析这个页面对我们的产品有没有价格,那么用户浏览的时长是一个很关键的点,如果每个用户每天都在这个页面停留两个小时以上,那么我们会觉得这个页面的价值很高;如果一个页面一个月也没几个用户去浏览,那我们就会有疑问,这个页面对我们的产品还有价值吗?我们的产品后续还要保留它?这些需求都是可以让我们考虑是否要去获取用户停留时长这个功能的。针对哪些应用?多页面应用单页面应用(本文以vue为例子)如何去获取用户停留的时长?在监转载 2021-10-14 16:58:25 · 2028 阅读 · 0 评论 -
CSS 变量由浅入深,提升效率必备知识!
文章来自于:前端大全CSS 变量(又名自定义属性)已在 WEB 浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用,但是前端开发人员通常可能会误用或误解。简介CSS 变量是在 CSS 文档中定义的值,其目的是可重用性并减少 CSS 值中的冗余。下面是一个基本示例。.section { border: 2px solid #235ad1;}.section-title { color: #235ad1;}.section-title::before {转载 2021-06-22 16:59:42 · 252 阅读 · 0 评论 -
JavaScript 中哪一种循环最快呢?
转载自:前端大全了解哪一种 for 循环或者迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误。循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代和循环值的方法。但问题在于,我们是否真的知道那种循环或迭代最适合我们的需求。for 循环有很多变形,例如 for、for(倒序)、for…of、forEach、for…in、for…await。本文将围绕这些展开讨论。究竟哪一种循环更快?答案其实是: for(倒序)最让我感到惊讶的事情是,当我在本地计算转载 2021-05-27 11:20:43 · 161 阅读 · 0 评论 -
常用方法总结
关于es6中的函数 发现在日常工作中也是常用项,但是老是记不住,老要百度,特总结一下判断是否包含此方法不仅对 字符串生效,同样对数组也生效,对象数组不生效(仅为测试)let str = '123456'let str1 = '01'let str2 = '12'console.log(str.includes(str1)) // falseconsole.log(str.includes(str2)) // truelet arr = [1, 2, 3, 4]console.log(arr原创 2021-05-25 17:26:47 · 88 阅读 · 0 评论 -
关于 flex 布局在日常工作中的使用
前端人员大部分其实觉得样式贼简单,感觉JS才有挑战性,忽略了样式的重要性,导致写出来的页面适配性不高。其实现在常用的比较好的布局为 flex 和 grid。工作过程中,发现好多人依旧在布局的过程中死磕 position 和 float,导致页面换了分辨率就掉下来,或者就乱掉了。所以总结一下我经常在工作中常用的一些 flex 布局的用法,也是为了不用每次用到都要打开阮一峰的博客来搜索。这里也并不是说哪种好哪种不好,只是要灵活使用,不能死磕!!!(若总结出错可联系博主,仅用于学习交流)先放.原创 2021-04-30 10:46:34 · 291 阅读 · 1 评论 -
帮你彻底搞懂 JS 中的 prototype、__proto__与constructor(图解)
转载自:前端大全前言作为一名前端工程师,必须搞懂 JS 中的 prototype 、 __proto__ 、constructor 属性,相信很多初学者对这些属性存在很多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点, __proto__ 属性的两边是各自两条下划线构成(这里为了大家看清,在两下划线之间加入了一个空格: _ _proto_ _ ,读作“dunder proto”,“double underscore proto”的缩写),实际上,该属性在 ES 标转载 2021-04-19 15:32:54 · 327 阅读 · 0 评论 -
你真的了解 ES6 中的函数特性么?
以下文章来源于 前端娱乐圈,作蛙人仅用于学习交流,侵联删!前言函数是所有编程语言中重要的组成部分,在 ES6 出现之前 JavaScript 的函数语法一直没有太大的变化,从而遗留了很多问题和隐晦的做法,导致实现一些功能需要编写很多代码。函数形参默认值JavaScript 函数有一个特别的地方,就是无论在函数形参里定义了多少参数,都可以传入任意数量的参数,但是有的情况下,我们的参数只是可填,这样的话我们还在函数体内些一堆逻辑从而导致代码冗余,还好 ES6 版本出现了函数默认值。我们用 ES5 和转载 2021-03-17 14:53:21 · 175 阅读 · 0 评论 -
如何实现自适应布局的?
最近为了能够做出自适应的页面找了很多资料,大致较为有用的两类1.根据屏幕大小不同引入不同的css样式文件"css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">2.使用rem单位实现自适应布局转载自:http://caibaojian.com/web-app转载 2018-02-05 16:55:29 · 14365 阅读 · 0 评论 -
移动端宫格布局
1.使用grid布局#container{ display: grid; grid-template-columns: repeat(auto-fit, 33.3%); /* grid-template-rows: repeat(3, 300px); */ } .item { height: 100px; font-size: ...原创 2019-08-15 15:44:17 · 1456 阅读 · 0 评论 -
输入网址按回车,到底发生了什么
转载自:脚本之家仅用于自我学习,侵权删!详解输入网址点击回车,后台到底发生了什么。透析 HTTP 协议与 TCP 连接之间的千丝万缕的关系。掌握为何是三次握手四次挥手?time_wait 存在的意义是什么?全面图解重点问题,再也不用担心面试被问到。大致流程:URL解析DNS查询TCP连接服务器处理请求客户端接收HTTP报文响应渲染页面重点来了:如何理解 TCP 的三次握手和四次挥手?每次握手客户端与服务端是怎样的状态?为何挥手会出现 2MSL ,遇到大量的 Socket 处转载 2020-09-08 11:41:48 · 379 阅读 · 0 评论 -
什么时候适合使用 Map 而不是 Object
作者:前端公虾米 公号 / 黄老湿Sneaker学习研究转载自:前端大全如有侵权,请联系作者删除map到底是个啥首先我们先有请「Map」简单介绍下自己以下是通过控制台打印出来的map「Map」映射是一种经典的数据结构类型,其中数据以 「key/value」 的键值对形式存在MapObject默认值默认不包含任何职,只包含显式插入的键一个Object有一个原型,原型上的键名有可能和自己对象上设置的键名冲突类型任意String 或 Symbol长度键转载 2020-08-25 15:52:09 · 1331 阅读 · 0 评论 -
前端图片二进制
即:读《玩转前端二进制》测试及学习先上图,是关于图片在前端变化的流程 一. 选择本地图片 -> 图片预览 由流程图中可知,图片预览通常有两种方式,第一种是从本地获取图片然后预览,第二种是从网络中下载图片预览。FileReader API在支持FileReader API 的浏览器中,我们也可以利用改API方便实现 图片本地预览功能。由上图可知,该API 兼容性较好,我们可以正常使用。上测试代码 <div> <h3>选择本地图片 ->转载 2020-07-23 14:32:19 · 2270 阅读 · 0 评论 -
前端常用 60 余种工具方法
转载自 前端大全作者:vipbichttps://segmentfault.com/a/1190000022736837邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{1转载 2020-06-08 16:58:26 · 258 阅读 · 0 评论 -
base64在线预览pdf
pdf.js下载地址 http://mozilla.github.io/pdf.js/建议翻墙下载,我用公司网下载不下来。下载稳定版本,也可以使用cnd此时,可以直接打开本地的pdf文件。但是注意,pdf这类文件会跨域,所以必须放到服务器上才可以预览。直接从本地打开web/viewer.html文件放到服务器上就是http://mozilla.github.io/pdf.js/...原创 2020-01-16 10:48:00 · 20367 阅读 · 4 评论 -
对JS中的继承和封装的理解
引言:出现两次或者两次以上的代码,就需要封装。 先给出一张图解释一下构造函数和原型对象还有实例之间的关系。 方式一:工厂模式function sayName(){ alert(this.name);}function createStudent(id,name){ var stu = new Object(); stu.id = id; stu....原创 2018-04-04 14:56:16 · 654 阅读 · 0 评论 -
js闭包理解
转载自:https://blog.csdn.net/baidu_33295233/article/details/79127733 并经过自己的修改闭包是js中的一大特色,也是一大难点。简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量。闭包的三大特点为:1、函数嵌套函数2、内部函数可以访问外部函数的变量3、参数和变量不会被回收。 举例来说: fu...转载 2018-07-30 11:09:40 · 190 阅读 · 0 评论 -
前端面试题总结一
1.请描述一下cookies,sessionStorage和localStorage的区别?cookie是网站为了标示用户身份而储存在用户本地终端(client side)上的数据(通常经过加密) cookie数据始终在同源的http请求中携带(即使不需要),也会在浏览器和服务器之间来回传递 sessionStorage和localStorage不会自动把数据发给服务器,尽在本地保存 存...原创 2018-07-30 14:14:49 · 234 阅读 · 0 评论 -
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案 转载自:https://www.cnblogs.com/nanshanlaoyao/p/5964730.htmlclientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题...转载 2018-07-23 09:53:48 · 265 阅读 · 0 评论 -
SVG图像入门教程
转载自:www.ruanyifeng.com/blog/2018/08/svg.html一、概述svg是一种基于XML语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。 SVG文件可以直接插入网页,成为DOM的一部分,...转载 2018-08-09 15:33:17 · 2419 阅读 · 0 评论 -
前端利用canvas画布生成验证码
直接贴代码 js部分function randomRgbColor() { //随机生成RGB颜色 var r = Math.floor(Math.random() * 256); //随机生成256以内r值 var g = Math.floor(Math.random() * 256); //随机生成256以内g值 v...原创 2018-08-06 14:58:54 · 1618 阅读 · 0 评论 -
前端面试总结——http、html和浏览器篇
转载自:https://mp.weixin.qq.com/s/u7OL32ArPG9tveYwpobe-w1.http和httpshttps的SSL加密是在传输层实现的。(1)http和https的基本概念http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏...转载 2018-08-07 11:19:12 · 289 阅读 · 0 评论 -
html中如何直接显示html代码
百度了很多中做法,感觉很多都没有测试再胡说,特总结一下。百度说的<code>和<pre>标签,我的测试结果如下:1.<code><code> <h1>hello</h1> <h2>hello</h2> <h3>hello</h3> &...原创 2019-08-16 14:36:29 · 23697 阅读 · 5 评论