Skip to main content

JavaScript

现代前端开发必须要了解的事物​

JS 模块​

以前依靠各种打包产出通用(降级)的JS代码，不太需要了解 JS 模块的机制。

现代浏览器已经原生支持 JS 模块了，没有理由不去了解了：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

TypeScript​

日常对 TS 最大的感知，是使用 TS 开发的框架或类库，能为我们提供参数类型提示等等。

虽然日常开发时很少用，但至少要会 TS 语法，能看懂各个框架的代码。

JS 技巧​

获取函数的传入参数​

每个函数里，都有个内置变量叫 arguments 可以取得所有传入参数，例如 arguments[0] 获取第一个传参。

注意 arguments 是个对象，不是数组 { '0': '传参值', '1': '参数值' }。 参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments

判断数组​

typeof 一个数组得到的是 object，因此不可行。

正解：

Object.prototype.toString.call([])
'[object Array]'

判断字符串开头​

String.prototype.startsWith()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

判断数组是否存在指定元素​

['A', 'B'].includes('C') // false
['A', 'B'].includes('B') // true

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

快速将某个文件夹临时当成 package 使用​

只需几个步骤，很简单。只适用开发环境做快速试验。

  1. 建立一个入口文件 index.js 并在里面 export 出想要用的东西。
  2. 在该目录下手动建立个含 module 的 package.json。
{
  "module": "index.js"
}
  1. 修改要用到该临时 package 的项目的 packae.json 文件。
{
  "devDependencies": {
    "NameYourPackage": "file:/the/relatived/path"
  }
}
  1. npm install 生效。

JSX 里面可传入数组形式的 CSS 类列表​

Vue SFC 的模板语法原生支持该功能，但 JSX 需要自己实现。

注意要去除空项，否则 join(' ') 无差别转化后会有很多不符预期的空格，不严谨不美观。

<div class={[
  'abc',
  active ? 'active' : null
].filter(i => i).join(' ')}
></div>

移动端的 click/mousedown 事件有延迟，应改用 touchstart​

需要同时监听两个事件指向同一个处理函数，并且防止该函数被重复触发。

由于 touchstart 是最先触发的，给它加 'preventDefault()' 即可中断后续 mousedown/click 事件的触发。

注意，此时的 touchstart 事件依然会冒泡到父级元素。

当然，本元素事件触发链条被中断了，父级元素的 mousedown/click 自然也不会被触发。

总结，点击事件最全的写法如下（Vue 为例）：

<template>
  <div @touchstart.prevent="handler" @mousedown="handler"></div>
</template>

保持这样的写法，定制出最适合自己的跨PC端/移动端的事件机制。

注：由于 touchstart 是最先触发（最快）的，因此浏览器给该事件自带了防抖效果。“拼手速，1秒看你能点多少次按钮”之类的小游戏，你的按钮事件就不能用 touchstart 了。此时可用 mouseDown 代替。