Attack on Life ⚔️

Personal blog

发表于 更新于 本文字数： 2k 阅读时长 ≈ 3 分钟
本文介绍关于闭包认知，包括使用场景、实现细节等，以提高关于闭包认知的效率。

最近在梳理JS基础，觉得闭包这个知识点并不清晰，研究了会儿，所谓踏雪有痕，这里MARK下。

什么是闭包

函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成 闭 包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。

摘自MDN

注意

阅读全文 »

发表于 更新于 本文字数： 904 阅读时长 ≈ 2 分钟
本文介绍关于懒加载原理，包括使用场景、实现细节等，以提高关于懒加载原理的效率。

最近在做Web前端性能优化-体积瘦身。
如今的框架都已经成熟的封装了功能，似乎傻瓜使用即可。但只知其一造成的问题就是一旦遇到任何问题就只能哑巴巴的等待所谓的升级和论坛寻求中帮助，惨不忍睹。

因此这里对懒加载，简单梳理下。

实现原理

  1. 无论是React.lazyLoad，Angular的loadChildren，使用上都是使用的动态导入import()

  2. TS下之所以可以这么写，是因为TypeScript的支持，JS下可以这么写，是因为Webpack的支持，当然TS编译后还是JS进行的webpack的继续打包。

  3. import()最终的结果是

    . import的资源单独文件，这样体积就从原先的main中去掉
    . 同时执行import的主文件多了一段code就是，当触发import时，动态创建script标签，请求chunkJS资源。

没错，就这么简单。

阅读全文 »

发表于 更新于 本文字数： 380 阅读时长 ≈ 1 分钟
本文介绍关于花式console，包括使用场景、实现细节等，以提高关于花式console的效率。

技术人员习惯性查看网页console，我们会发现有些网页会输出一些炫酷的console信息，当然国内基本上都是招聘。但一直有个疑问怎么做到的呢。

趁着周末研究了会儿，这里mark下。

举例子

先贴几个例子。

比如百度的

阅读全文 »

发表于 更新于 本文字数： 663 阅读时长 ≈ 1 分钟
本文介绍关于HTML空格显示问题，包括使用场景、实现细节等，以提高关于HTML空格显示问题的效率。

实际WEB中看到有些人习惯这么控制一些字符实体来空格展示hello world,个人觉得并不好，这里来简单解释下。

 

因为HTML是标签语言，也就是代码，HTML中有些字符是保留字符空格，大于，小于号，就类似于正则中的/ . 都是保留字符，但有时我们想要这些字符的文本展示，怎么做呢，HTML给出的方案是输入字符实体，比如空格就是 。

注意

  • 这是一个英文空格
  •  的全称是non-breaking space
  • 实体名称对大小写敏感！
阅读全文 »

发表于 更新于 本文字数： 991 阅读时长 ≈ 2 分钟
本文介绍关于浏览器原生支持JS Base64，包括使用场景、实现细节等，以提高关于浏览器原生支持JS Base64的效率。

最近在MR代码时发现有人这么写btoa,郁闷了一下，原来这个是原生的Base64编码，好吧，个人JS基础存在盲区，这里补充下。

浏览器原生支持base64编码解码

1
2
console.log(window.btoa('hello')); // aGVsbG8=
console.log(window.atob('aGVsbG8=')); // hello

a to b如何记忆

  • “a” for “ASCII”
  • “b” for “binary”
阅读全文 »
0%