乐趣区

平时工作和学习中总结的一些知识点3

jiezi

26、处理 retina 1px 的兼容问题

https://github.com/jonathantneal/postcss-write-svg

27、src 和 href 的区别

  • href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
  • src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
  • 在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

28、parseInt

parseInt(string, radix)
参数 描述
string 必需。要被解析的字符串。
radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以“0x”或“0X”开头，将以 16 为基数。

如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

[‘1’, ‘7’, ’11’].map(parseInt) 的结果是 [1, NaN, 3] 的原因是因为，map() 方法是向传递给他的函数中传递三个参数，分别为当前值，当前索引以及整个数组

而 parseInt 函数接收两个参数：需要转换的字符串，以及进制基数，所以，整个语句可以写作：[‘1’, ‘7’, ’11’].map((value, index, array) => parseInt(value, index, array))，array 被 parseInt 舍弃之后，得到的结果分别是：parseInt(‘1’, 0)、parseInt(‘7′, 1) 以及 parseInt(’11’, 2)，也就是上面看到的 [1, NaN, 3]。

29、cherry-pick

先切一个新的分支
git cherry-pick 某次 commit 的标识
git cherry-pick continue

30、vscode 保存时自动格式化代码

"editor.formatOnSave": true,  // 保存时自动格式化

31、阶段总结

到了什么都懂一点，但是什么都不精通的阶段

32、睡眠函数

/**
 * 睡眠函数
 *
 * @param {number} time 睡眠时间
 * @returns
 */
export const sleep = (time = 0) => {return new Promise((reslove) => {setTimeout(reslove, time)
  })
}

33、sentry 介绍

  • Sentry 是一个实时事件日志记录和汇集的平台。其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈。它分为客户端和服务端，客户端 (目前客户端有 Python, PHP,C#, Ruby 等多种语言) 就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个 web 页方便查看。Sentry 由 python 编写，源码开放，性能卓越，易于扩展，目前著名的用户有 Disqus, Path, mozilla, Pinterest 等。

34、空格和 tab

tab 在不同的系统中占位不同，所以不推荐 tab

35、PostCSS

PostCSS 是一款使用插件去转换 CSS 的工具

36、多个 select 框不能选同一个值的问题

每次选择的时候，都去遍历所有的 select 框的值，把这些值放到一个数组，把这个数组中有的值设置为 disabled

37、查询 git 历史操作

fc -il 1

38、insertAdjacentElement

句法
targetElement .insertAdjacentElement（position，element）;

参数
position
A DOMString 表示相对于的位置 targetElement; 必须匹配（不区分大小写）以下字符串之一：'beforebegin'：在 targetElement 自己之前。'afterbegin'：就在 targetElement 第一个孩子面前。'beforeend'：就在 targetElement 最后一个孩子之后。'afterend'：targetElement 自己之后。element
要插入树中的元素。返回值
插入的元素，或者 null 插入失败的元素。

39、map ()

// 不会改变原数组
// 返回一个新数组

The map() method creates a new array 
with the results 
of calling a provided function on every 
element in the calling array

40、数组中返回某个匹配的值

function testMap3(key) {
    let arr = [
      {
        key: 1,
        value: 1
      },
      {
        key: 2,
        value: 2
      },
      {
        key: 3,
        value: 3
      },
      {
        key: 4,
        value: 4
      },
    ]
    let data = arr.filter((item, index) => {return item.key === key})
    return data
  }
  console.log(testMap3(2));//[{key: 2, value: 2}]

41、移动端调试神器

<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<script>
   var vConsole = new VConsole();
</script>

移动端调试模拟 pc 端的控制台
直接在 html 页面引入 奇迹就会出现

42、try catch finaly 语句

catch 语句中不能声明变量 e, 否则会报错
finaly 语句一定会执行 一般用于释放资源
退出移动版