2019-12 前端技术汇总

2019/12/30 周一

#滚动条自动滚动到最右侧

给scrollLeft设置一个超大的值即可

this.$nextTick(() => {
  element.scrollLeft = 10000
})

#2019/12/27 周五

#怎么清除app内嵌H5的localStorage

测试手机: iPhone8, 红米6，内嵌H5使用localStorage存储了一些数据，尝试清除

• 完全退出app 安卓、iOS都无法清除
• 退出登录 安卓、iOS都无法清除
• 使用app内置缓存清理功能 安卓、iOS都无法清除
• 使用系统的清除app数据方法：安卓清除app所有数据可以，iOS不可以(长按关机键，出现滑动关机，长按home键，直至滑动关机关闭)
• 使用H5内置的 localStorage.clear() 都可以清除，注意域名
• 删除app肯定可以清除

总结，在不删除app以及使用H5内置的清除函数的情况下，安卓可以使用系统的清除app所有数据来清除，但iOS暂未发现清除的方法。

#Symbol、BigInt不能new，而Stirng、number可以new，为什么？

BigInt('1') // 1n
new BigInt(1)
// Uncaught TypeError: BigInt is not a constructor
//     at new BigInt (<anonymous>)
//     at <anonymous>:1:1

String、BigInt都是函数，为什么一个可以new，一个不能new？函数怎么区分是new调用，还是直接调用?

复习JS高程3中 作用域安全的构造函数 (opens new window)里，在构造函数中，通过 this instanseof Person 来判断是new 调用的，还是直接调用的构造函数，这里应该也是这种情况

// 模拟实现
function A() {
  console.log(this)
  if (this instanceof A) {
    throw new Error('Uncaught TypeError: A is not a constructor')
  }
  return ''
}
// 测试
A() // window   ''
new A() // A {}  Uncaught TypeError: A is not a constructor

再复习一下class，class 创建的类型也是function，且只能通过new调用，应该函数内部也是加了类似上面的校验，当this instanceof 不等于当前class时，就直接抛异常

总结：核心问题是 this 的指向问题，一般直接调用A()时this指向window

#why do we use .html instead of .html?

参考：Why do we use .html instead of .htm? | CSS-Tricks(opens new window)

DOS was a massive operating system for PCs for a long time and it had a three-character limit on file extensions.

All HTML documents should have filenames that end with the extension .html unless the files reside on a DOS system, in which case they should have the extension .htm

DOS操作系统上文件后缀限制为3个字符，所以才会使用.htm的后缀，排除系统限制，所有的HTML文件应该使用.html的后缀名

#2019/12/26 周四

#ES2019 bigint 数据类型

ES5之前，基本数据类型有五个 boolean, string, number, null, undefined, ES6(ES2015)新增了一个symbol，ES2019 新增了 bigint 用于表示大于 2 ** 53 的数据，2 ** 53 = 9007199254740992

const x = Number.MAX_SAFE_INTEGER; // 最大的安全integer
// ↪ 9007199254740991, this is 1 less than 2^53

const y = x + 1;  
// ↪ 9007199254740992, ok, checks out

const z = x + 2
// ↪ 9007199254740992, wait, that’s the same as above!

// 不安全的integer，结果不符合预期
num = Number.MAX_SAFE_INTEGER // 9007199254740991
num + 1 // 9007199254740992
num + 2 // 9007199254740992
num + 3 // 9007199254740994
num + 4 // 9007199254740996
num + 5 // 9007199254740996
num + 6 // 9007199254740996
num + 7 // 9007199254740998
num + 8 // 9007199254741000
num + 9 // 9007199254741000
num + 10 // 9007199254741000

怎么解决上面的问题呢？ES2019使用bigint来解决这个问题，

const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
// ↪ 9007199254740991n

const maxPlusOne = previousMaxSafe + 1n;
// ↪ 9007199254740992n

const theFuture = previousMaxSafe + 2n;
// ↪ 9007199254740993n, this works now!

BigInt(1) // 1n
let theBiggestInt = BigInt(2 ** 53) // 9007199254740992n
theBiggestInt + 2 // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
9007199254740994n.toString()  // "9007199254740994"

参考：

1. tc39/proposal-bigint: Arbitrary precision integers in JavaScript(opens new window)
2. BigInts in JavaScript_ A case study in TC39.pptx(opens new window)
3. JS最新基本数据类型:BigInt(opens new window)

#2019/12/25 周三

#transform 两个动作，scale缩小后，依旧占用空间的问题

transform对某个元素使用两个及以上变换时，用空格分隔，scale缩小0.5倍后，dom占用依旧，可以用translate移动下，矫正位置。

/* 两个transform */
div {
  transform: scale(0.5) translate(-50%, -50%)
}

#charles 抓包时手机不能开vpn

charles抓包，设置了网络代理，但是电脑上还是接收不到请求，发现vpn开启了，关掉后，就可以接收到请求的数据了。

#html2canvas 移动端生成图片文字重叠的问题

text-align:center 可能会导移动端，生成图片的文字重叠的问题，改为text-align:left 或 text-align: justify 即可。

#vue性能优化 - webpack包体积优化

1. 安装 webpack-bundle-analyzer npm包

# 安装包
npm install webpack-bundle-analyzer --save-dev

2. 在package.json的scripts加入对应的命令，运行npm run report 即可build，并在dist目录生成report.html，打开就可以各个模块包对应的大小，这样就可以开始优化了

scripts: {
  "report": "vue-cli-service build --report"
}

3. 路由都弄成懒加载，js懒加载可以使用import()，如果使用import xx from ‘xx’，会直接打包到主包，就需要弄成懒加载的逻辑。但如果使用该js，怎么判断js已懒加载完？setTimeout 1s后再调用，弱网呢？怎么监听？这就需要了解懒加载的逻辑了，示例如下：

<!-- 监听是否加载完成 -->
<!-- 在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。-->
<script type="module">
  let myModule = () => import('./testModule.js')

  // testModule.js   内容 export default { a: 1, b: "test" }

  // 类似于路由组件component懒加载逻辑。myModule仅是一个函数，返回promise，需要调用时 myModule().then() 即可
  window.onload = () => {
    console.log('onload')

    // dom已加载，3秒后加载模块
    setTimeout(() => {
      console.log(myModule, typeof myModule) // () => import('./testModule.js') "function"
      // myModule() 函数执行后，返回promise
      myModule().then((res) => {
        console.log('模块加载成功', r