这些不为人知的前端冷知识，你都GET了吗？

时间  2020-12-02
标签 javascript css html 前端 html5 java web 数组 浏览器 网络 栏目 JavaScript 繁體版
原文   原文链接

背景

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

前端可真是博大精深css

因而突发奇想，现分类整理出来分享给你们，也补充了一些平时的积累和扩展了一些内容，俗话说，独乐乐不如众乐乐，你们一块儿来接受前端的洗礼吧！！！html

论被玩坏了的前端前端

HTML篇

浏览器地址栏运行JavaScript代码

这个不少人应该仍是知道的，在浏览器地址栏能够直接运行JavaScript代码，作法是以javascript:开头后跟要执行的语句。好比：html5

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

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

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

浏览器地址栏运行HTML代码

若是说上面那条小秘密知道的人还算多的话，这条秘笈知道的人就要少一些了，在非IE内核的浏览器地址栏能够直接运行HTML代码！数组

好比在地址栏输入如下代码而后回车运行，会出现指定的页面内容。浏览器

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

浏览器秒变编辑器

这个仍是在浏览器地址栏上面作文章，将如下代码复制粘贴到浏览器地址栏，运行后浏览器就变成了一个原始简单的编辑器，和window自带的notepad差很少，长见识了吧，话很少说，咱们来试试。网络

data:text/html, <html contenteditable>

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

同理，在控制台执行如下代码，一样能够将整个页面变得能够编辑。

document.body.contentEditable='true';

实时编写样式的输入框

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

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

利用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);

利用这一方法，稍微进行封装一下，就能够获得一个很是实用的工具函数了，下面提供一个网上常见的封装示例。

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>

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;

正常文字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="">

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

多重边框

在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
}

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() 方法的特性

什么状况下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;
}

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

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('你是逗逼吗')

参考：

一、What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?

二、45 Useful JavaScript Tips, Tricks and Best Practices

三、10 Small Things You May Not Know About Javascript

四、W3school

五、前端鲜为人知的一面--前端冷知识集锦

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程