Codog

webpack的代码分割，可以将编译结果分为几个“块”输出，加载最少的js代码的同时又满足的功能需求，也适合于路由组件

常见方式：

• 多入口

多入口，便会编译出多个输出文件，但单页应用一般为一个入口。

• 配置webpack，自动将三方库打单独打包

1
2
3
4
5
6
7
8
9

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
  // ...
}

这样如果某三方库被多个组件引用，那么它就会被单独打包，也保证组件功能代码简洁

• 动态引入

使用import()方法，webpack会自动进行代码分割，如果想指定输出文件名，可以添加webpack注释：

1

import(/* webpackChunkName: 'common' */'./route1').then()

webpack已基本成为前端资源构建的默认工具

以webpack@4版本说明：

https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html

https://web.dev/samesite-cookies-explained/

https://juejin.im/post/5e718ecc6fb9a07cda098c2d

响应式图片——一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片

构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句，可以重写调用构造函数时返回的值。(此时instanceOf判读失效；且如果返回基本类型，则会忽略并返回新对象实例)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://juejin.im/entry/5a2dfea351882555cc41cd0e

CSS方式：

columns布局

1
2
3
4

.masonry {
  column-count: 5;
  column-gap: 0;
}

flex布局

1
2
3
4
5
6

.masonry {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: 800px;
}

grid布局

块元素

特点：

• 如果为设置宽度，则会自动充满父容器
• 可以设置margin, padding
• 如果未设置高度，则会自动适应内部元素的高度
• 会自动单独占一行
• 忽略vertical-align属性
• 。。。

常见元素：div, p, form, header, ul, li, h1~h6等

行内元素

特点：

• 跟随文档内容，不会自动换行
• 受white-space控制
• 忽略纵向margin，但横向margin及任意方向padding会生效
• 无法设置宽度和高度
• 受vertical-align控制
• 。。。

常见元素：a, span, i, em, b等

还可以设置行内块元素：display: inline-block，这样既可以设置宽高，元素也会默认一行展示。

https://juejin.im/post/5ce126eaf265da1bb564c8a5

1. toLocaleString方法

1
2
3
4

> 10154545450.42.toLocaleString('en-US')
< "10,154,545,450.42"
> (-1234567.8912).toLocaleString('en-US')
< "-1,234,567.891" // 注意小数位最多3位

2. 正则匹配

1
2
3
4
5
6
7

const numberWithCommas = (x) => {
  // 小数部分单独处理
  var parts = x.toString().split(".");
  // 或者 replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return parts.join(".");
}

3. 转为字符串数组处理

可能写的有点啰嗦😷

1
2
3
4
5
6
7
8
9
10
11
12
13

function format(number) {
  const negative = number < 0
  const parts = Math.abs(number).toString().split(".")
  parts[0] = parts[0].split('').reverse().reduce((res, cur, index) => {
    return `${cur}${index && (index % 3 === 0) ? ',' : ''}${res}`
  }, '')
  return (negative ? '-' : '') + parts.join('.')
}

format(12345.32433532) // 12,345.32433532
format(-12345.32433532) // -12,345.32433532
format(21341234) // 21,341,234
format(9) // 9