1.4k 1 分钟

Browser 对象中有一个 Navigator 对象,这个对象中包含所有浏览器的信息

其中,一些常用设备访问时返回的 userAgent 属性如下:

访问设备返回 userAgent 属性值
Win10 电脑Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37
iphone 手机Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1
安卓手机Mozilla/5.0 (Linux; Android 9; PAR-AL00; HMSCore 5.3.0.312; GMSCore 19.6.29) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.93 HuaweiBrowser/11.1.1.300 Mobile Safari/537.36
ipad 平板Mozilla/5.0 (iPad; CPU OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G36 Safari/601.1

7k 6 分钟

# 1. 带有多个条件的 if 语句

把多个值放在一个数组中,然后调用数组的 includes 方法。

// longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    // logic
}
// shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   // logic
}

12k 11 分钟

本文讲解如何构建一个工程化的前端库,并结合 Github Actions,自动发布到 GithubNPM 的整个详细流程。

# 示例

我们经常看到像 VueReact 这些流行的开源项目有很多配置文件,他们是干什么用的?他们的 Commit、Release 记录都那么规范,是否基于某种约定? ****

相关配置清单

  • Eslint
  • Prettier
  • Commitlint
  • Husky
  • Jest
  • GitHub Actions
  • Semantic Release

下面我们从创建一个 TypeScript 项目开始,一步一步完成所有的工程化配置,并说明每个配置含义以及容易踩的坑。

3k 3 分钟

1. 您将了解到什么是 CommonJS 规范

2. 您将了解到什么是 ESM 模块化规范

3. 如何在 NodeJs 中使用 ESM 规范

如果你正在学习 如何制作CLI工具 ,那么我建议你可以看一下我的这篇文章。

# 前言

我们知道,在 NodeJS 之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化。NodeJS 诞生之后,它使用 CommonJS 的模块化规范。从此,js 模块化开始快速发展。模块化的开发方式可以提供代码复用率,方便进行代码的管理。通常来说,一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的 js 模块化规范有 CommonJS 以及 ES6 的模块化规范。

6.7k 6 分钟

# 前言

不管什么程序语言,内存生命周期基本是一致的:

  1. 分配你所需要的内存
  2. 使用分配到的内存(读、写)
  3. 不需要时将其释放 \ 归还

所有语言 第二部分都是明确的,第一和第三部分在 底层语言 中是明确的。但在像 JavaScript 这些高级语言中,大部分都是隐含的。

注意:JavaScript 是一种高级的解释执行的编程语言,是一种属于网络的高级脚本语言。

在 Chrome 浏览器中,V8 被限制了内存的使用 (64位约1.4G/1464MB , 32位约0.7G/732MB) ,限制的主要原因是 V8 最初为浏览器而设计,不太可能遇到用大量内存的场景;更深层原因是 V8 垃圾回收机制的限制:清理大量的内存垃圾很耗时间,这样会引起 JavaScript 线程暂停执行,导致性能和应用直线下降。

JavaScript 是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时 “自动” 释放。释放的过程称为垃圾回收。

这个 “自动” 是混乱的根源,并让 JavaScript 开发者错误的感觉他们可以不关心内存管理,进而引发内存泄漏。

7.3k 7 分钟

为什么要学习内存管理以及垃圾回收算法?

JavaScript 中的内存释放是自动的,释放的时机就是某些值(内存地址)不在使用了,JavaScript 就会自动释放其占用的内存。其实大多数内存管理的问题都在这个阶段,在这里最艰难的任务就是找到那些不需要的变量。现在打高级语言都有自己垃圾回收机制,虽然现在的垃圾回收算法很多,但是也无法智能的回收所有的极端情况。

# 内存管理

不论什么样的编程语言,在代码执行的过程中都是需要给他分配内存的,有些编程语言(C、C++)需要我们自己手动管理内存,例如C语言,他们提供了内存管理的接口,比如malloc()用于分配所需的内存空间,free()用于释放之前所分配的内存空间。有的编程语言(Java、JavaScript)会自动帮我们管理内存

8.3k 8 分钟

我在一开始看到 javascript 的函数 apply 和 call 时,非常的模糊,看也看不懂,最近在网上看到一些文章对 apply 方法和 call 的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..

主要我是要解决一下几个问题:

  1. apply 和 call 的区别在哪里

  2. 什么情况下用 apply, 什么情况下用 call

  3. apply 的其他巧妙用法(一般在什么情况下可以使用 apply)

8.3k 8 分钟

不知道在座的各位有没有被问到过这样一个问题:如果页面卡顿,你觉得可能是什么原因造成的?有什么办法锁定原因并解决吗?

这是一个非常宽泛而又有深度的问题,他涉及到很多的页面性能优化问题,我依稀还记得当初面试被问到这个问题时我是这么回答的:

  1. 先会检查是否是网络请求太多,导致数据返回较慢,可以适当做一些缓存
  2. 也有可能是某块资源的 bundle 太大,可以考虑拆分一下
  3. 然后排查一下 js 代码,是不是某处有过多循环导致占用主线程时间过长
  4. 浏览器某帧渲染的东西太多,导致的卡顿
  5. 在页面渲染过程中,可能有很多重复的重排重绘
  6. emmmmmm.... 不知道了

后来了解到了,感官上的长时间运行页面卡顿也有可能是因为内存泄漏引起的

5.8k 5 分钟

2023 年,韩国房价跌穿了。

首尔房价暴跌 30%,部分区域房价跌到 40%,成交量更是暴跌 70%,银行断供数百万人。

大量的房东因还不起钱,紧急出逃。

留下的房客走投无路,甚至选择轻生。

“失去工作后,我没有收入,存款早就用光了。9000 万韩元的保证金,一直拖着不还给我。

我曾经去投诉也报过警,但政府关于全租房诈骗的对策,让人非常失望。我无法再坚持下去了。

最后,希望我的死能推动这个问题尽快解决。再见。”

韩国仁川,一位 30 岁的男子在留下遗书后,服药结束了自己年轻的生命。

短短几句话,写满了一个普通人的绝望。

3.2k 3 分钟

# 闭包

下面是一个简单的闭包

const MathTest = function (x, y) {
    var x = x;
    var y = y;
    return function () {
        return x + y;
    }
}
 var x = MathTest(3, 4); // 执行

闭包的特点:

  1. 函数内嵌套函数一个或多个子函数
  2. 内部函数可以引用外层的参数和变量
  3. 参数和变量不会被垃圾回收机制回收
  4. JavaScript 垃圾回收机制请看郑文亮先生的博客:https://www.cnblogs.com/zhwl/p/4664604.html