这些鲜为人知的前端冷知识,你都GET了吗?

爱丽丝13
• 阅读 1003

背景

最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹!

前端可真是博大精深

于是突发奇想,现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容,俗话说,独乐乐不如众乐乐,大家一起来接受前端的洗礼吧!!!

论被玩坏了的前端

HTML篇

浏览器地址栏运行JavaScript代码

这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如:

javascript:alert('hello from address bar :)');  

将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。

需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码,sigh~

浏览器地址栏运行HTML代码

如果说上面那条小秘密知道的人还算多的话,这条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以直接运行HTML代码!

比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容。

data:text/html,<h1>Hello, everybody!</h1>  

这些鲜为人知的前端冷知识,你都GET了吗?

浏览器秒变编辑器

这个还是在浏览器地址栏上面做文章,将以下代码复制粘贴到浏览器地址栏,运行后浏览器就变成了一个原始简单的编辑器,和window自带的notepad差不多,长见识了吧,话不多说,我们来试试。

data:text/html, <html contenteditable>  

这些鲜为人知的前端冷知识,你都GET了吗?

归根结底多亏了HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的内容成为可编辑状态。

同理,在控制台执行以下代码,同样可以将整个页面变得可以编辑。

document.body.contentEditable='true';  

这些鲜为人知的前端冷知识,你都GET了吗?

实时编写样式的输入框

同理,也是利用了HTML5中的contenteditable属性,巧妙的在body增加一个可编辑的style标签。

<body>  
  <style style="display:block; position: fixed;" contentEditable>  
    body { background: red; }  
  </style>  
</body>  

这些鲜为人知的前端冷知识,你都GET了吗?

利用a标签解析url

很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,然而处理 url 字符串是比较麻烦的,可以使用 a 标签自动解析 url。

主要方法就是在JS中创建一个a标签,然后将需要处理的URL赋值给我们新创建的a标签的href属性,然后就可以得到我们想要的东西了。

var a = document.createElement('a');  
a.href = 'https://juejin.cn/user/2796746682939054/posts';  
console.log(a.host);  

这些鲜为人知的前端冷知识,你都GET了吗?

利用这一方法,稍微进行封装一下,就可以得到一个非常实用的工具函数了,下面提供一个网上常见的封装示例。

function urlParse(url, key) {  
  var a = document.createElement('a')  
  a.href = url  
  var result = {  
    href: url,  
    protocol: a.protocol.replace(':', ''),  
    port: a.port,  
    query: a.search,  
    params: (function(){  
      var ret = {}, centArr,  
        seg = a.search.replace(/^\?/, '').replace(/^\?/,'').split('&')  
      for (i = 0, len = seg.length; i < len; i ++) {  
        if (!seg[i]) { continue }  
        centArr = seg[i].split('=')  
        ret[centArr[0]] = centArr[1]  
      }  
      return ret  
    }()),  
    hash: a.hash,  
    file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],  
    path: a.pathname.replace(/^([^\/])/, '/$1'),  
    relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],  
    segments: a.pathname.replace(/^\//, '').split('/')  
  }  
  a = null  
  return key ? result[key] : result  
}  

H5 有新的 API URL 也可以快速的处理一个链接

var url = new URL('https://www.baidu.com/')  
url.hash  
...  

带有 Id 属性的元素,会创建全局变量

在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量,这意味着document.getElementById像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写,毕竟常规代码出乱子的机会要小得多。

<div id="test"></div>  
<script>  
    console.log(test)  
</script>  

这些鲜为人知的前端冷知识,你都GET了吗?

script标签保存任意信息

我们可以通过将script标签的type属性设置为'text',然后就可以在里面保存任意信息,后面在js中获取信息也十分的方便。

<script type="text" id="template">  
 <h1>欢迎关注公众号:猴哥说前端</h1>  
</script>  
var text = document.getElementById('template').innerHTML  

CSS篇

文字模糊效果

只需要添加以下两行代码,即可达到将文字模糊处理的目的。

color: transparent;  
text-shadow: #111 0 0 5px;  

这些鲜为人知的前端冷知识,你都GET了吗?

正常文字VS模糊文字,是不是很酷,哈哈哈。

毛玻璃效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性。但是要做一个好的毛玻璃效果,需要注意很多细节。下面提供一个简单示例:

.blur {  
    display: block;  
    width: 300px;  
    height: 300px;  
    margin: 100px auto;  
    filter: blur(10px);  
}  

<img src="./img/test.png" class="blur" alt="">  

这些鲜为人知的前端冷知识,你都GET了吗?

图片是我养的可爱的蓝胖子(●'◡'●)

多重边框

在css中,我们可以利用重复指定box-shadow来达到多个边框的效果。

/*CSS Border with Box-Shadow Example*/  
div {  
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);  
    height: 200px;  
    margin: 50px auto;  
    width: 400px  
}  

这些鲜为人知的前端冷知识,你都GET了吗?

CSS中也可以做简单运算

在日常开发中,我们时常会遇到这样的需求:

左侧或者右侧宽度固定,然后剩余部分自动充满。

可能很多小伙伴会想到用flex布局,通过设置flex:1;使其自动充满,当然这个做法也是对的,但是我们还有更为简便的方法,那就是利用css的calc函数,示例代码如下:

.container{  
 width: calc(100% - 50px);  
}  

calc() 函数用于动态计算长度值。

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);

  • 任何长度值都可以使用calc()函数进行计算;

  • calc()函数支持 "+", "-", "*", "/" 运算;

  • calc()函数使用标准的数学运算优先级规则;

JS篇

两个变量值的交换

一般两个变量值交换,大家首先想到的可能是通过一个中间变量进行转换,但是其实还有更快的写法,代码如下:

var a=1, b=2  
a=[b, b=a][0]  

浮点数快速向下取整

JavaScript中是没有整型概念的,但利用好位操作符可以轻松处理,同时获得效率上的提升。

|0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。

(12.4 / 4.13) | 0  
// => 3  
~~(12.4 / 4.13)  
// => 3  

生成随机字符串

生成随机字符串,我们第一想到的,可能是先定义一个字符串数组,然后通过随机取数组中的字符进而拼接成一个随机长度的字符串。

但是下面还有一个更简单的方法,代码如下:

function generateRandomAlphaNum(len) {  
    var rdmString = "";  
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));  
    return rdmString.substr(0, len);  
}  

主要是利用了toString() 方法的特性

这些鲜为人知的前端冷知识,你都GET了吗?

什么情况下a === a - 1

咋一看,这个全等式怎么看都是false,但是万物存在既有理,接下来,让我们看看哪些情况下该等式是成立的呢。

第一种情况就是Infinity,或者可以说是正负Infinity。

👉🏻 知识点: 在 JavaScript 里,Infinity是一个 Number 类型的字面量,表示无穷大。当一个 Number 类型的值,在运算过程中超过了所能表示的最大值,就会得到无穷大。

let a = Infinity;  

console.log(a === a - 1); // true  

let b = -Infinity;  

console.log(b === b - 1);  // true  

那么还有没有其他情况下也成立呢?或者说换成a == a-1又有哪些情况成立呢?欢迎各位大佬关注公众号进群讨论。

恶搞篇

CSS恶搞

大家猜测一下,如果在代码中加上一下样式,会是一个什么效果?

{  
    cursor: none !important;  
}  

这些鲜为人知的前端冷知识,你都GET了吗?

(图片来源于网络,如有侵权请联系我删除)

console.log恶搞

Chrome的console.log是支持对文字添加样式的,甚至log图片都可以。于是可以重写掉默认的log方法,把将要log的文字应用到CSS的模糊效果,这样当有人试图调用console.log()的时候,出来的是模糊不清的文字。好冷,我表示没有笑。

var _log = console.log;  
console.log = function() {  
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');  
};  
console.log('你是逗逼吗')  

这些鲜为人知的前端冷知识,你都GET了吗?

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
1年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue