所以在调研一圈后，我准备用 Vite-SSG 把官网重新来过，前后花了两周左右的时间，本文记录着开发过程中的思考和总结，要点主要有

• 为什么 SPA 应用不应该用于搭建项目官网?
• SSG 项目的结构是怎样的，如何配置页面的路由？
• 如何搭建多语言的静态站，编写支持多语言的页面组件，以及使用 lang / hreflang 为页面指定不同的语言版本？
• 如何用 unhead 库为每个页面配置不同的 html 头部元信息，优化搜索引擎收录？
• 如何优雅处理 404 问题，避免 soft 404 对搜索收录的影响？

为什么不应该用SPA开发官网?

这里我们先收窄一下定义，把【官网】定义为一个介绍性质为主的网站，比如产品介绍，定价方案，关于我们等等，而不是一个直接交互的动态产品（比如各种各样的 2C 内容平台，社交平台），对于动态产品而言使用 SPA 其实无妨，如果想优化搜索收录可以定期把一些固定的 profile 页面或者文章页面提交给搜索引擎

所以就是一个原因，SEO。这是老生常谈的问题，SPA 一般只会生成单个 index.html，爬取你网站上的任何 URL 都只会返回同样的内容，其中还往往不包括即将渲染出的文本，关键词和链接等信息，这就导致搜索引擎呈现的结果一塌糊涂，不仅如此，在 Twiiter, Discord 等社交媒体直接抓取链接元信息（标题，描述，插图）并渲染的平台上，你的每个网页都只会呈现一样的信息

对于一个需要在互联网上获客的项目，我们都不应该忽视来自搜索引擎的流量，尤其是国际化的项目。即使我们来到了 AIGC 纪元，以 ChatGPT 为代表的大模型训练语料获取仍然以爬取网页数据为主，这时你的项目各页面如果能够提供清晰的，包含足够准确的关键词和信息的，符合 Web 规范的 HTML 结果，你的项目或文档也有可能会被 AI 收录并整合到它们的输出结果中，所以我认为对网页结构和渲染的优化其实就是可以统称为 Agent Optimization，即【对来自搜索引擎或大模型的】网络爬取优化，依然十分重要

合适的姿势是？

SSR（服务端渲染） / SSG（服务端生成） 都是介绍性官网开发的合适姿势，对于不需要太多渲染逻辑的静态页面来说，SSG 就足矣，你只需要把生成出来的 HTML 扔到任何页面托管网站上都可以直接提供访问，对 CDN 也足够友好，如果自己喜欢折腾也可以搞自己的服务器来部署，我自己就是使用 nginx 来部署 SSG 生成的静态页面作为 CDN 的回源

SSG 项目结构

与 SPA 应用相比，SSG 项目最主要的区别是：路由与对应的页面模板是固定的，并且在构建阶段会直接生成每个页面的 html 文件，而不是像 SPA 一样只生成一个 index.html

反映到 Vue 项目的文件结构上，SPA 应用往往需要一个 router 文件来定义 vue-router 的路由和对应的组件，而 SSG 应用则可以把每个页面的路由和对应的 Vue 页面组件直接定义在一个文件夹中（往往命名为 pages）

所以 Vite-SSG 项目的 main.js 一般长这个样子：

import { ViteSSG } from "vite-ssg";
import { createPinia } from "pinia";
import App from "./App.vue";
import routes from "~pages"; // 导入 routes 配置

const pinia = createPinia();

export const createApp = ViteSSG(
  App,
  {
    routes
  },
  ({ app }) => {
    app.use(pinia);
  }
);

我们用 vite-ssg 定义的 ViteSSG 来代替 Vue 默认的 createApp，在导入路由时，我们使用了

import routes from '~pages';

这是来自 vite-plugin-pages 插件的支持，你可以直接把一个文件夹下的 Vue 组件转化为对应的页面路由，只需要在 vite.config.ts 中配置

// Plugins
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import Pages from 'vite-plugin-pages'

export default defineConfig({
     plugins: [
        Pages({
          dirs: resolve(__dirname, "src/pages"),
          extensions: ["vue"]
        }),
        ...
      ],
      ...
})

处理多语言页面路由

如果你的官网需要给来自世界各地的用户介绍你们的项目，多语言就基本上是一个必选项了，我们以支持中文与英文为例，其他的语言支持方式可以依此类推

之前我对于多语言的处理是根据 IP 属地返回语言然后前端直接设置语言，并没有反应到 URL 上，这其实是一种 Bad Practice，对于用户访问的时候看到的是什么语言版本的页面完全不可控（因为他们可能使用了代理），用户在分享页面时他的受众也是同理，搜索引擎也无法完全抓取所有的语言版本（因为 Google 的爬虫主要在美国），所以 Google 也在 文档 中说明很不建议这样的做法

对于 SSG 的页面路由，我的多语言实现实践是：为每个页面实现一个通用的页面组件，其中定义一个属性 lang，组件中展示的所有文字都可以根据这个 lang 属性选择对应的语言版本，由于页面的属性在 SSG 构建时会直接传入，所以会生成不同语言版本的 HTML 页面文件，一个最简化的页面组件示例如下

<script setup>
const props = defineProps({
  lang: {
    type: String,
    default() {
      return 'en'
    }
  },
})

const messages = {
  zh: {
    title: '构建数字世界的基础设施'
  },
  en: {
    title: 'Building the infrastructure of the digital world'
  },
}

const msg = messages[props.lang];
</script>

<template>
  <div>
    {{ msg.title }}
  </div>
</template>

接下来我们就可以搭建我们多语言页面的文件夹结构了，你可以选择把不同的语言都作为不同的子路由，比如

/pages
    /en
        index.vue
    /zh
        index.vue
    /ja
        index.vue
    /..

这样访问 /en 会进入英文页面，访问 /zh 会进入中文页面

还有一种方式是选择一种语言作为默认语言，如英语，然后将它的子路由置于与其他语言目录平行的位置，比如

/pages
    /zh
        index.vue
    /ja
        index.vue
    index.vue     # en

我的项目采用了第二种模式，因为我想让官网的域名是可以直接访问和链接的，保持简洁，所以我对它的路由是这样规划的

/pages
    /zh
        index.vue ------ 首页（中文）
        about.vue ------ 关于我们（中文）
        solutions.vue -- 解决方案（中文）
    index.vue    ------- 首页（英语）
    about.vue ---------- 关于我们（英语）
    solutions.vue ------ 解决方案（英语）

按照 JavaScript 的惯例，index 就会被处理为与它的目录一致的路由，其他的名称会根据名称分配路由

其中，每个语言的页面组件都可以直接引入它对应的通用页面组件，然后将 lang 属性传入通用页面组件中，比如 /zh/about.vue 是中文的 “关于我们” 页面组件

<script setup>
import About from "@/views/About.vue";
import AppWrapper from "@/components/AppWrapper.vue";
</script>

<template>
  <AppWrapper lang="zh" route="about">
     <About lang="zh"></About>
  </AppWrapper>
</template>
12345678910

其中 @/views/About.vue 是 “关于我们” 页面的通用组件，我们传入了 lang="zh"，而 AppWrapper 是我编写的一个通用的页面骨架组件，包含着每个页面都需要的顶栏，底栏，边栏等页面架构

语言切换

对于支持多语言的官网，我们可以需要在其中添加一个让用户主动切换语言的按钮，它的逻辑也非常简单，只需要将用户展示一个支持的语言列表，然后每个语言按钮都能将用户切换到对应的页面路由，比如

<template>
    <v-menu open-on-click>
      <template v-slot:activator="{ props }">
        <v-btn v-bind="props">
          <v-icon>mdi-translate</v-icon>
        </v-btn>
      </template>
      <v-list color="primary">
        <v-list-item
          v-for="(l, i) in languages"
          :to="getLanguageRoute(l.value)"
          :active="lang === l.value"
          :key="i"
        >
          <v-list-item-title>{{ l.text }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
</template>

<script setup>
  const props = defineProps({
    lang: {
      type: String,
      default(){
        return 'en'
      }
    },
    route: {
      type: String,
      default(){
        return ''
      }
    }
  });

  const languages = [{
    value: 'en',
    text: 'English'
  }, {
    value: 'zh',
    text: '中文'
  }];

  function getLanguageRoute(l){
    if(l === 'en'){
      return '/' + props.route;
    }
    if(!props.route){
      return `/{l}`
    }
    return `/{l}/` + props.route
  }
</script>

还是以上面的 About 页面为例，如果用户目前处于xxx.com/about 路由（英语），而点击了 中文 语言，就需要被引导到 xxx.com.com/zh/about 页面，从用户视角看来，页面的结构完全一致，只不过语言从英语切换到了中文

使用 unhead 为页面注入元信息

对于静态页面而言，<head> 中的头信息与页面元信息非常重要，它决定着搜索引擎收录的索引与关键词，也决定着页面链接在社交媒体分享时渲染的信息，一般来说 Vue 的页面组件只是编写 <body> 中的元素，但只需要使用一个名为 unhead 的库，你就可以为不同的页面编写不同的头信息了，比如以下是我在 UtilMeta 中文首页的页面组件中编写的元信息

<script setup>
import { useHead } from '@unhead/vue'

const title = '官网';
const description = '官网description';

useHead({
  title: title,
  htmlAttrs: {
    lang: 'zh'
  },
  link: [
    {
      hreflang: 'en',
      rel: 'alternate',
      href: 'https://xxx.com'
    }
  ],
  meta: [
    {
      name: 'description',
      content: description,
    },
    {
      property: 'og:title',
      content: title
    },
    {
      property: 'og:image',
      content: 'https://xxx.com/img/zh.index.png'
    },
    {
      property: 'og:description',
      content: description
    }
  ],
})

import Index from '@/views/Index.vue'
import AppWrapper from "@/components/AppWrapper.vue";

</script>

<template>
  <AppWrapper lang="zh">
    <Index lang="zh"></Index>
  </AppWrapper>
</template>

其中重要的属性有

• title：页面的标题，直接影响着用户在浏览器中看到的页面标题与搜索引擎收录的网页中的标题
• htmlAttrs.lang：可以直接在 html 根元素中编辑语言属性 lang 的值
• hreflang：通过插入含有 hreflang 属性的 <link> 元素，你可以为页面指定不同的语言版本，这里我们就指定了首页的英文版本的链接，这样的属性能够更好地为搜索引擎的多语言呈现提供便利
• meta.description：元信息中的描述，
• og:* 按照社交媒体渲染链接所通用的 Open Graph 协议 规定的属性，可以决定着你在把链接分享到如 Twitter(X), Discord 等社交媒体或聊天软件中时，它们的标题，描述和插图

元信息的注入应该是页面级的，也就是对于不同语言的页面，你也应该注入该语言版本的元信息

部署静态网站

优雅处理 404

在 SSG 静态页面中，我们的网站支持的路由是预先定义和生成好的，其他的路径访问都应该直接返回 404，但为了给用户更好的体验，一般常见的做法是单独制作一个 404 Notfound 页面，在访问路径没有页面时展示给用户，让他能方便地转回首页或其他页面，比如 UtilMeta 官网的 404 页面如下

使用 Vite-SSG 实现这样的效果并不困难，你只需要在 pages 文件夹中增加两个组件

• 404.vue
• [...all].vue

这两个组件中的内容都是相同的，都放置着 404 页面的组件代码，[...all].vue 会作为所有没有匹配到路由的页面请求的返回页面，而 404.vue 会输出一个显式的路由 404.html，方便在 nginx 中直接进行重定向

完成我们的 SSG 页面开发后，我们可以调用下面的命令将页面构建出对应的 HTML 文件

vite-ssg build
1

对于我的 UtilMeta 官网而言，生成的文件如下

/dist
    /zh
        about.html
        py.html
        solutions.html
    404.html
    zh.html
    about.html
    index.html
    py.html
    solutions.html

接着，你就可以将这些静态文件上传到页面托管服务或者自行搭建的静态服务器上即可提供访问了，我搭建 UtilMeta 官网的静态服务器使用的 nginx 配置如下

server{
    listen 80;
    server_name utilmeta.com;
    rewrite ^/(.*)//1 permanent;

    location ~ /(css|js|img|font|assets)/{
        root /srv/utilmeta/dist;
        try_files uri =404;
    }
    location /{
        root /srv/utilmeta/dist;
        index index.html;
        try_filesuri uri.htmluri/index.html =404;
    }

    error_page 404 403 500 502 503 504 /404.html;

    location = /404.html {
        root /srv/utilmeta/dist;
    }
}

配置中监听 80 而非 443 端口是因为我的官网作为静态站，官网需要的静态资源已经全部托管给 CDN 了（包括 SSL 证书），这里的 nginx 配置的是 CDN 的回源服务器，所以提供 HTTP 访问就 ok 了

nginx 配置中 rewrite ^/(.*)//1 permanent 的作用是将目录的访问映射到对相应 HTML 文件的访问，比如将 xxx.com/zh/ 映射到 xxx.com/zh，否则 Nginx 会出现 403 Forbidden 的错误

因为 vite-ssg 默认的生成策略会把位于目录路径的 index.vue 文件生成为与目录同名的 html 文件，而不是放置于目录中的 index.html 文件，所以如果不进行 rewrite 去掉路径结尾的 / 的话，xxx.com/zh/ 就会直接访问到 /zh/ 目录上，这对于 nginx 来说是禁止的行为

值得注意的是，对于 404 页面的返回，最好需要伴随着一个真正的 404 响应码（Status Code），而不是使用 200 OK 的响应（那样一般称为软 404），因为对于搜索引擎而言，只有检测到 404 响应码，才会把这个路由视为无效，而不是判断返回页面中的文字，尤其当你的站点进行翻新时，老站点的一些路由就会失效了，如果它们一直留在搜索引擎的结果中误导用户，也会给访客造成很大的困扰

在上面的 nginx 配置中，我们把所有 try_files 指令最后都附上了 =404 ，也就是在匹配不到任何文件时生成 404 的响应码，然后使用 error_page 把包括 404 在内的常见的错误或故障响应码的错误页面指定为 /404.html ，也就是我们之前编写的 404 页面，这样我们就解决了软 404 的问题，所有无法匹配的路径都会返回正确的 404 响应码以及制作好的 404 页面

总结

总结一下我们学到和完成的东西

• 用 Vite-SSG 编写一个 SSG 官网项目，了解了 SSG 项目的页面路由方式
• 编写可复用的多语言的 SSG 页面组件，通过路由切换实现语言切换功能
• 使用 unhead 为每个页面注入头部元信息，使得每个页面在搜索引擎与社交媒体上都能正确美观地展示
• 优雅处理静态页面的 404 问题，避免软 404，提高页面收录质量和用户体验

实现一个 SEO 友好的响应式多语言官网 (Vite-SSG) 我的踩坑之旅最先出现在JokerChor | 阿楚 | chor。

在前端开发中，尤其是国际化的项目，常常需要支持多语言并配置多个入口。Vite 作为现代化的前端构建工具，提供了极高的灵活性和性能支持，能够非常方便地实现多语言和多入口的配置。本文将详细介绍如何在 Vite 中配置多语言和多入口。例如 xxx.com/、xxx.com/en-us/等。

一、项目需求

假设我们有一个支持多语言的网站，需要根据用户的语言自动加载不同的入口。我们可以通过 Vite 来实现以下功能：

• 假设支持 en-us（英文）和 zh-cn（中文）两种语言。
• 配置多个入口文件（每一种语言拥有单独的入口html）。
• 根据不同的语言动态加载相应的资源文件。

二、安装和初始化 Vite 项目

首先，创建一个新的 Vite 项目并初始化基本配置。

选择一个适合的模板，如 Vue、React 或 Vanilla 项目，之后安装所需的依赖。

npm create vite@latest my-multi-language-project
cd my-multi-language-project
npm install

多语言相关配置这里不做讲述 主流的可以用（i18n）

三、配置多入口

Vite 允许你为多个页面配置不同的入口。我们可以通过在 vite.config.js 中配置 build.rollupOptions.input 来设置多个入口。
1. 修改 Vite 配置
在 vite.config.js 中，我们可以为多个页面设置入口配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        "zh-cn": path.resolve(__dirname, 'index.html'),
        "en-us": path.resolve(__dirname, 'en-us.html')
      }
    }
  }
})

2. 创建多个 HTML 文件
   根据我们的需求，默认语言入口是 index.html，英文入口是 en-us.html。我们需要创建这两个 HTML 文件：

public/
– index.html
– products.html

每个 HTML 文件可以引入不同的脚本和样式表，确保页面有独立的入口。

四、路由配置

以vue3 为例

import {createRouter, RouteRecordRaw, createWebHistory} from "vue-router";
const routes: RouteRecordRaw[] = [
  {
    path: "/:lang?", // 动态语言参数，`?` 表示可选
    children: [
      {path: "", component: () => import("@/views/home/index.vue")}, // 默认首页
      {path: "news-list", component: () => import("@/views/newsList/index.vue")}, // 新闻页
    ]
  }
];
const router = createRouter({
  history: createWebHistory(), // 使用history路由模式
  routes
});
router.beforeEach((_to, _from, next) => {
  next();
});
export default router;

注意：路由跳转时在需要跳转的地方，使用 router.push 并动态添加语言前缀：

  const lang = xxx; // 获取当前语言
  const path = '/news-list'
  router.push(`/{lang}{path}`); // 动态添加语言前缀

五、nginx 配置

为了实现 xxx.com/、xxx.com/en-us/ 的路由结构，需要在服务器端配置location。

server {
  location / {
    try_files uriuri/ /index.html;
  }

  location /en-us {
    try_files uriuri/ /en-us/index.html;
  }
}

六、构建部署和测试

npm run build

分别访问 xxx.com/、xxx.com/en-us/

Vite 打包多语言与多入口配置最先出现在JokerChor | 阿楚 | chor。

1. Vite SSG 项目安装和配置指南
   • 1. 项目基础介绍和主要编程语言
   • 2. 项目使用的关键技术和框架
   • 3. 项目安装和配置的准备工作和详细安装步骤

Vite SSG 项目安装和配置指南

1. 项目基础介绍和主要编程语言

项目基础介绍

Vite SSG（Static Site Generation）是一个用于在 Vite 上为 Vue 3 项目提供静态站点生成的开源工具。它允许开发者将 Vue 3 应用程序静态化，从而提高页面加载速度和 SEO 优化。

主要编程语言

该项目主要使用 TypeScript 和 JavaScript 进行开发。

2. 项目使用的关键技术和框架

关键技术和框架

• Vue 3: 用于构建用户界面的渐进式 JavaScript 框架。
• Vite: 一个快速的构建工具，专为现代 Web 项目设计。
• Vue Router: 用于 Vue 3 的路由管理。
• @unhead/vue: 用于管理文档头部标签的 Vue 插件。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保你的开发环境满足以下要求：

• Node.js 版本 >= 14
• npm 或 yarn 包管理器

详细安装步骤

第一步：安装 Vite SSG 和相关依赖

打开终端并导航到你的项目目录，然后运行以下命令来安装 Vite SSG 和必要的依赖：

npm install -D vite-ssg vue-router @unhead/vue

第二步：配置 package.json

在 package.json 文件中，更新 scripts 部分以使用 Vite SSG 进行构建：

// package.json
{
  "scripts": {
    "dev": "vite",
-   "build": "vite build"
+   "build": "vite-ssg build"

    // OR if you want to use another vite config file
+   "build": "vite-ssg build -c another-vite.config.ts"
  }
}

第三步：配置 src/main.ts

在 src/main.ts 文件中，使用 ViteSSG 来创建应用程序实例：

// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
import routes from './router'

// `export const createApp` is required instead of the original `createApp(App).mount('#app')`
export const createApp = ViteSSG(
  // 根组件
  App,
  // vue-router 选项
  { routes },
  ({ app, router, routes, isClient, initialState }) => {
    // 安装插件等
  },
)

第四步：配置路由

在 src/router/routes.ts 文件中，定义你的路由配置：

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
]

export default routes

第五步：运行开发服务器

运行以下命令启动开发服务器：

npm run dev

第六步：构建项目

运行以下命令来构建静态站点：

npm run build

总结

通过以上步骤，你已经成功安装并配置了 Vite SSG 项目。现在你可以开始开发和构建你的 Vue 3 静态站点了。

https://github.com/antfu-collective/vite-ssg

vite-ssg vue单页面项目打包多页面站点最先出现在JokerChor | 阿楚 | chor。

浏览器添加网页

粘贴代码至网页，点击保存

将书签拖拉到常用位置

查看效果

再次点击去除效果

查看页面结构神器，查看页面结构小技巧，UI走查必备神器最先出现在JokerChor | 阿楚 | chor。

混合模式 mix-blend-mode: difference

CSS3 新增了一个很有意思的属性 — mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

神奇的 CSS，让文字智能适配背景颜色最先出现在JokerChor | 阿楚 | chor。

使用 JavaScript 最合理的方式。

注意: 这个指南假定你正在使用 Babel，并且需要你使用 babel-preset-airbnb 或与其等效的预设。同时假定你在你的应用里安装了 带有 airbnb-browser-shims 或与其等效的插件的 shims/polyfills。

这个指南支持的其他语言翻译版请看 Translation。

其他风格指南：

• ES5 (已废弃)
• React
• CSS-in-JavaScript
• CSS & Sass
• Ruby

目录

• Airbnb JavaScript 风格指南() {
  • 类型
  • 引用
  • 对象
  • 数组
  • 解构
  • 字符串
  • 函数
  • 箭头函数
  • 类与构造函数
  • 模块
  • 迭代器与生成器
  • 属性
  • 变量
  • 提升
  • 比较运算符与相等
  • 块
  • 控制语句
  • 注释
  • 空格
  • 逗号
  • 分号
  • 类型转换与强制转换
  • 命名规范
  • Get-Set 访问器
  • 事件
  • jQuery
  • ECMAScript 5 兼容性
  • ECMAScript 6+ (ES 2015+) 风格
  • 标准库
  • 测试
  • 性能
  • 资源
• };

类型

• 1.1 基本类型: 你可以直接获取到基本类型的值
  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

  const foo = 1;
  let bar = foo;
  
  bar = 9;
  
  console.log(foo, bar); // => 1, 9
  

  • 由于 Symbols 和 BigInts 不能被正确的 polyfill。所以不应在不能原生支持这些类型的环境或浏览器中使用他们。

• 1.2 复杂类型: 复杂类型赋值是获取到他的引用的值。
  • object
  • array
  • function

  const foo = [1, 2];
  const bar = foo;
  
  bar[0] = 9;
  
  console.log(foo[0], bar[0]); // => 9, 9
  

引用

• 2.1 所有的赋值都用 const，避免使用 var。eslint: prefer-const, no-const-assign
  

  为什么？因为这个能确保你不会改变你的初始值，重复引用会导致 bug 并且使代码变得难以理解。

  // bad
  var a = 1;
  var b = 2;
  
  // good
  const a = 1;
  const b = 2;
  

• 2.2 如果你一定要对参数重新赋值，使用 let，而不是 var。eslint: no-var
  

  为什么？因为 let 是块级作用域，而 var 是函数级作用域。

  // bad
  var count = 1;
  if (true) {
  count += 1;
  }
  
  // good, use the let.
  let count = 1;
  if (true) {
  count += 1;
  }
  

• 2.3 注意：let 和 const 都是块级作用域， 而 var 是函数级作用域

  // const 和 let 都只存在于它被定义的那个块级作用域。
  {
  let a = 1;
  const b = 1;
  var c = 1;
  }
  console.log(a); // 引用错误
  console.log(b); // 引用错误
  console.log(c); // 打印 1
  

  上面的代码里，a 和 b 的定义会报引用错误，这是因为 a 和 b 是块级作用域， 而 c 的作用域是在函数里的。

对象

• 3.1 使用字面值创建对象。eslint: no-new-object

  // bad
  const item = new Object();
  
  // good
  const item = {};
  

• 3.2 使用计算属性名创建一个带有动态属性名的对象。
  

  为什么？因为这可以使你在同一个地方定义所有对象属性。

  function getKey(k) {
  return `a key named ${k}`;
  }
  
  // bad
  const obj = {
  id: 5,
  name: "San Francisco",
  };
  obj[getKey("enabled")] = true;
  
  // good
  const obj = {
  id: 5,
  name: "San Francisco",
  [getKey("enabled")]: true,
  };
  

• 3.3 用对象方法简写。eslint: object-shorthand

  // bad
  const atom = {
  value: 1,
  
  addValue: function (value) {
    return atom.value + value;
  },
  };
  
  // good
  const atom = {
  value: 1,
  
  // 对象的方法
  addValue(value) {
    return atom.value + value;
  },
  };
  

• 3.4 用属性值缩写。eslint: object-shorthand
  

  为什么？这样写更简洁，且可读性更高。

  const lukeSkywalker = "Luke Skywalker";
  
  // bad
  const obj = {
  lukeSkywalker: lukeSkywalker,
  };
  
  // good
  const obj = {
  lukeSkywalker,
  };
  

• 3.5 将你的所有缩写放在对象声明的前面。
  

  为什么？因为这样能更方便地知道有哪些属性用了缩写。

  const anakinSkywalker = "Anakin Skywalker";
  const lukeSkywalker = "Luke Skywalker";
  
  // bad
  const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
  };
  
  // good
  const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
  };
  

• 3.6 只对那些无效的标示使用引号 ''。eslint: quote-props
  

  为什么？通常我们认为这种方式主观上更易读。不仅优化了代码高亮，而且也更容易被许多 JS 引擎优化。

  // bad
  const bad = {
  foo: 3,
  bar: 4,
  "data-blah": 5,
  };
  
  // good
  const good = {
  foo: 3,
  bar: 4,
  "data-blah": 5,
  };
  

• 3.7 不要直接调用 Object.prototype上的方法，如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf。eslint: [no-prototype-builtins](htt
  ps://eslint.org/docs/rules/no-prototype-builtins)

  为什么？在一些有问题的对象上，这些方法可能会被屏蔽掉，如：{ hasOwnProperty: false } 或空对象 Object.create(null)。 在支持 ES2022 的现代浏览器中，或者被做过类似 https://npmjs.com/object.hasown 的兼容情况下， Object.hasOwn 也会被用作 Object.prototype.hasOwnProperty.call 的替代品。

  “`javascript
  // bad
  console.log(object.hasOwnProperty(key));

  // good
  console.log(Object.prototype.hasOwnProperty.call(object, key));

  // better
  const has = Object.prototype.hasOwnProperty; // 在模块作用域内做一次缓存。
  console.log(has.call(object, key));

  // best
  console.log(Object.hasOwn(object, key)); // 只能在支持 ES2022 的浏览器中使用

  /* or <em>/
  import has from 'has'; // https://www.npmjs.com/package/has
  console.log(has(object, key));
  /</em> or */
  console.log(Object.hasOwn(object, key)); // https://www.npmjs.com/package/object.hasown

  “`

• 3.8 对象浅拷贝时，更推荐使用扩展运算符（即 ... 运算符），而不是 Object.assign。获取对象指定的几个属性时，用对象的 rest 解构运算符（即 ... 运算符）更好。eslint: prefer-object-spread
  • 这一段不太好翻译出来， 大家看下面的例子就懂了。^.^

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 改了 `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good es6 扩展运算符 ...
const original = { a: 1, b: 2 };
// 浅拷贝
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

// rest 解构运算符
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

数组

• 4.1 用字面量创建数组。eslint: no-array-constructor

  // bad
  const items = new Array();
  
  // good
  const items = [];
  

• 4.2 用 Array#push 代替直接向数组中添加一个值。

  const someStack = [];
  
  // bad
  someStack[someStack.length] = "abracadabra";
  
  // good
  someStack.push("abracadabra");
  

• 4.3 用扩展运算符做数组浅拷贝，类似上面的对象浅拷贝。

  // bad
  const len = items.length;
  const itemsCopy = [];
  let i;
  
  for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
  }
  
  // good
  const itemsCopy = [...items];
  

• 4.4 用 ... 运算符而不是 Array.from 来将一个可迭代的对象转换成数组。

  const foo = document.querySelectorAll(".foo");
  
  // good
  const nodes = Array.from(foo);
  
  // best
  const nodes = [...foo];
  

• 4.5 用 Array.from 将一个类数组对象转成一个数组。

  const arrLike = { 0: "foo", 1: "bar", 2: "baz", length: 3 };
  
  // bad
  const arr = Array.prototype.slice.call(arrLike);
  
  // good
  const arr = Array.from(arrLike);
  

• 4.6 用 Array.from 而不是 ... 运算符去做 map 遍历。 因为这样可以避免创建一个临时数组。

  // bad
  const baz = [...foo].map(bar);
  
  // good
  const baz = Array.from(foo, bar);
  

• 4.7 在数组方法的回调函数中使用 return 语句。如果函数体由一条返回一个表达式的语句组成，并且这个表达式没有副作用， 这个时候可以忽略 return，详见 8.2。eslint: array-callback-return

  // good
  [1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
  });
  
  // good 函数只有一个语句
  [1, 2, 3].map((x) => x + 1);
  
  // bad - 没有返回值， 因为在第一次迭代后 acc 就变成 undefined 了
  [
  [0, 1],
  [2, 3],
  [4, 5],
  ].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  });
  
  // good
  [
  [0, 1],
  [2, 3],
  [4, 5],
  ].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
  });
  
  // bad
  inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === "Mockingbird") {
    return author === "Harper Lee";
  } else {
    return false;
  }
  });
  
  // good
  inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === "Mockingbird") {
    return author === "Harper Lee";
  }
  
  return false;
  });
  

• 4.8 如果一个数组有很多行，在数组的 [ 后和 ] 前断行。请看下面示例：

  // bad
  const arr = [
  [0, 1],
  [2, 3],
  [4, 5],
  ];
  
  const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
  ];
  
  const numberInArray = [1, 2];
  
  // good
  const arr = [
  [0, 1],
  [2, 3],
  [4, 5],
  ];
  
  const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
  ];
  
  const numberInArray = [1, 2];
  

解构

• 5.1 用对象的解构赋值来获取和使用对象某个或多个属性值。eslint: prefer-destructuring
  

  为什么？ 解构使您不必为这些属性创建临时引用，并且避免重复引用对象。重复引用对象将造成代码重复、增加阅读次数、提高犯错概率。在一个块级作用域里，解构对象可以在同一个地方给解构字段赋值，而不需要读整个的代码块看它到底用了哪些字段。

  // bad
  function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
  
  return `{firstName}{lastName}`;
  }
  
  // good
  function getFullName(user) {
  const { firstName, lastName } = user;
  return `{firstName}{lastName}`;
  }
  
  // best
  function getFullName({ firstName, lastName }) {
  return `{firstName}{lastName}`;
  }
  

• 5.2 用数组解构。eslint: prefer-destructuring

  const arr = [1, 2, 3, 4];
  
  // bad
  const first = arr[0];
  const second = arr[1];
  
  // good
  const [first, second] = arr;
  

• 5.3 多个返回值用对象的解构，而不是数组解构。
  

  为什么？你可以在后期添加新的属性或者变换变量的顺序而不会破坏原有的引用。

  // bad
  function processInput(input) {
  // 然后就是见证奇迹的时刻
  return [left, right, top, bottom];
  }
  
  // 调用者需要想一想返回值的顺序
  const [left, __, top] = processInput(input);
  
  // good
  function processInput(input) {
  // oops，奇迹又发生了
  return { left, right, top, bottom };
  }
  
  // 调用者只需要选择他想用的值就好了
  const { left, top } = processInput(input);
  

字符串

• 6.1 字符串应使用单引号 '' 。eslint: quotes

  // bad
  const name = "Capt. Janeway";
  
  // bad - 模板字符串应该包含插入文字或换行
  const name = `Capt. Janeway`;
  
  // good
  const name = "Capt. Janeway";
  

• 6.2 超过 100 个字符的字符串不应该用字符串连接成多行。
  

  为什么？字符串折行增加编写难度且不易被搜索。

  // bad
  const errorMessage =
  "This is a super long error that was thrown because \
    of Batman. When you stop to think about how Batman had anything to do \
    with this, you would get nowhere \
  fast.";
  
  // bad
  const errorMessage =
  "This is a super long error that was thrown because " +
  "of Batman. When you stop to think about how Batman had anything to do " +
  "with this, you would get nowhere fast.";
  
  // good
  const errorMessage =
  "This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.";
  

• 6.3 当需要动态生成字符串时，使用模板字符串而不是字符串拼接。eslint: prefer-template template-curly-spacing
  

  为什么？模板字符串更具可读性、多行语法更简洁以及更方便插入变量到字符串里头。

  // bad
  function sayHi(name) {
  return "How are you, " + name + "?";
  }
  
  // bad
  function sayHi(name) {
  return ["How are you, ", name, "?"].join();
  }
  
  // bad
  function sayHi(name) {
  return `How are you, {name}?`;
  }
  
  // good
  function sayHi(name) {
  return `How are you,{name}?`;
  }
  

• 6.4 永远不要使用 eval()，该方法有太多漏洞。eslint: no-eval

• 6.5 不要使用不必要的转义字符。eslint: no-useless-escape
  

  为什么？反斜线可读性差，因此仅当必要时才使用它。

  // bad
  const foo = "'this' is \"quoted\"";
  
  // good
  const foo = "'this' is \"quoted\"";
  
  //best
  const foo = `my name is '${name}'`;
  

函数

• 7.1 使用命名函数表达式而不是函数声明。eslint: func-style func-names
  

  函数表达式： const func = function () {}

  函数声明： function func() {}

  为什么？函数声明会发生提升，这意味着在一个文件里函数很容易在其被定义之前就被引用了。这样伤害了代码可读性和可维护性。如果你发现一个函数又大又复杂，且这个函数妨碍了这个文件其他部分的理解性，你应当单独把这个函数提取成一个单独的模块。不管这个名字是不是由一个确定的变量推断出来的，别忘了给表达式清晰的命名（这在现代浏览器和类似 babel 编译器中很常见）。这消除了由匿名函数在错误调用栈产生的所有假设。 (讨论)

  译者注：这一段可能不是很好理解，简单来说就是使用函数声明会发生提升（即在函数被声明之前就可以使用）；使用匿名函数会导致报错难以定位错误。常见错误范例 这一段英文原文在这。

  // bad
  function foo() {
  // ...
  }
  
  // bad
  const foo = function () {
  // ...
  };
  
  // good
  // lexical name distinguished from the variable-referenced invocation(s)
  // 函数表达式名和声明的函数名是不一样的
  const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
  };
  

• 7.2 把立即执行函数包裹在圆括号里。eslint: wrap-iife
  

  立即执行函数：Immediately Invoked Function expression = IIFE。
  为什么？一个立即调用的函数表达式是一个单元 – 把它和它的调用者（圆括号）包裹起来，使代码读起来更清晰。
  另外，在模块化世界里，你几乎用不着 IIFE。

  // immediately-invoked function expression (IIFE)
  (function () {
  console.log("Welcome to the Internet. Please follow me.");
  })();
  

• 7.3 不要在非函数块（if、while 等）内声明函数。把这个函数分配给一个变量。浏览器会允许你这样做，但不同浏览器的解析方式不同，这是一个坏消息。eslint: no-loop-func

• 7.4 注意：ECMA-262 中对块（block）的定义是： 一系列的语句。但是函数声明不是一个语句， 函数表达式是一个语句。

  // bad
  if (currentUser) {
  function test() {
    console.log("Nope.");
  }
  }
  
  // good
  let test;
  if (currentUser) {
  test = () => {
    console.log("Yup.");
  };
  }
  

• 7.5 不要用 arguments 命名参数。他的优先级高于每个函数作用域自带的 arguments 对象，这会导致函数自带的 arguments 值被覆盖。

  // bad
  function foo(name, options, arguments) {
  // ...
  }
  
  // good
  function foo(name, options, args) {
  // ...
  }
  

• 7.6 不要使用 arguments，用收集参数语法 ... 代替。eslint: prefer-rest-params
  

  为什么？... 明确你想用哪个参数。而且收集参数是真数组，而不是类似数组的 arguments。

  // bad
  function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join("");
  }
  
  // good
  function concatenateAll(...args) {
  return args.join("");
  }
  

• 7.7 用默认参数语法而不是在函数里对参数重新赋值。

  // really bad
  function handleThings(opts) {
  // 不！我们不该修改 arguments
  // 第二：如果 opts 的值为 false, 它会被赋值为 {}
  // 虽然你想这么写，但是这个会带来一些微妙的 bug。
  opts = opts || {};
  // ...
  }
  
  // still bad
  function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
  }
  
  // good
  function handleThings(opts = {}) {
  // ...
  }
  

• 7.8 避免默认参数的副作用。
  

  为什么？他会令人迷惑不解，比如下面这个，a 到底等于几，这个需要想一下。

  var b = 1;
  // bad
  function count(a = b++) {
  console.log(a);
  }
  count(); // 1
  count(); // 2
  count(3); // 3
  count(); // 3
  

• 7.9 把默认参数赋值放在最后。eslint: default-param-last

  // bad
  function handleThings(opts = {}, name) {
  // ...
  }
  
  // good
  function handleThings(name, opts = {}) {
  // ...
  }
  

• 7.10 不要用函数构造器创建函数。eslint: no-new-func
  

  为什么？以这种方式创建函数将类似于字符串 eval()，存在漏洞。

  // bad
  const add = new Function("a", "b", "return a + b");
  
  // still bad
  const subtract = Function("a", "b", "return a - b");
  

• 7.11 函数定义部分要有空格。eslint: space-before-function-paren space-before-blocks
  

  为什么？统一性好，而且在你添加/删除一个名字的时候不需要添加/删除空格。

  // bad
  const f = function () {};
  const g = function () {};
  const h = function () {};
  
  // good
  const x = function () {};
  const y = function a() {};
  

• 7.12 不要修改参数. eslint: no-param-reassign
  

  为什么？操作参数对象对原始调用者会导致意想不到的副作用。就是不要改参数的数据结构，保留参数原始值和数据结构。

  // bad
  function f1(obj) {
  obj.key = 1;
  }
  
  // good
  function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, "key") ? obj.key : 1;
  }
  

• 7.13 不要对参数重新赋值。eslint: no-param-reassign
  

  为什么？参数重新赋值会导致意外行为，尤其是对 arguments。这也会导致优化问题，特别是在 V8 引擎里。

  // bad
  function f1(a) {
  a = 1;
  // ...
  }
  
  function f2(a) {
  if (!a) {
    a = 1;
  }
  // ...
  }
  
  // good
  function f3(a) {
  const b = a || 1;
  // ...
  }
  
  function f4(a = 1) {
  // ...
  }
  

• 7.14 使用拓展运算符调用多参数的函数。eslint: prefer-spread
  

  为什么？这样更清晰，你不必提供上下文（即指定 this 值），而且你不能轻易地用 apply 来组成 new。

  // bad
  const x = [1, 2, 3, 4, 5];
  console.log.apply(console, x);
  
  // good
  const x = [1, 2, 3, 4, 5];
  console.log(...x);
  
  // bad
  new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]))();
  
  // good
  new Date(...[2016, 8, 5]);
  

• 7.15 调用或者编写一个包含多个参数的函数的缩进，应该像这个指南里的其他多行代码写法一样——即每行只包含一个参数，每行逗号结尾。

  // bad
  function foo(bar, baz, quux) {
  // ...
  }
  
  // good 缩进不要太过分
  function foo(bar, baz, quux) {
  // ...
  }
  
  // bad
  console.log(foo, bar, baz);
  
  // good
  console.log(foo, bar, baz);
  

箭头函数

• 8.1 当你一定要用函数表达式（在回调函数里）的时候，使用箭头函数。 eslint: prefer-arrow-callback, arrow-spacing
  

  为什么？箭头函数中的 this 与定义该函数的上下文中的 this 一致，这通常才是你想要的。而且箭头函数是更简洁的语法。

  什么时候不用箭头函数：如果你的函数逻辑较复杂，你应该把它单独写入一个命名函数里头。

  // bad
  [1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
  });
  
  // good
  [1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
  });
  

• 8.2 如果函数体由一个没有副作用的 表达式 语句组成，删除大括号和 return。否则，使用大括号和 return 语句。 eslint: arrow-parens, arrow-body-style
  

  为什么？语法糖，当多个函数链在一起的时候好读。

  // bad map 没有 return
  [1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  `A string containing the {nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map((number) => `A string containing the{number + 1}.`);
  
  // good
  [1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map((number, index) => ({
  [index]: number,
  }));
  
  // 没有明显的存在副作用的 return 语句
  function foo(callback) {
  const val = callback();
  if (val === true) {
    // 当 callback 返回 true 时在这里执行
  }
  }
  
  let bool = false;
  
  // bad
  foo(() => (bool = true));
  
  // good
  foo(() => {
  bool = true;
  });
  

• 8.3 如果表达式涉及多行，把他包裹在圆括号里以提高可读性。
  

  为什么？这样能清晰地显示函数的开始位置和结束位置。

  // bad
  ["get", "post", "put"].map((httpMethod) =>
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
  );
  
  // good
  ["get", "post", "put"].map((httpMethod) =>
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
  );
  

• 8.4 在箭头函数参数两头，总是使用小括号包裹住参数，这样做使代码更清晰且一致. eslint: arrow-parens
  

  为什么？当你想要添加或删除参数时改动最小。

  // bad
  [1, 2, 3].map((x) => x * x);
  
  // good
  [1, 2, 3].map((x) => x * x);
  
  // bad
  [1, 2, 3].map(
  (number) =>
    `A long string with the {number}. It’s so long that we don’t want it to take up space on the .map line!`
  );
  
  // good
  [1, 2, 3].map(
  (number) =>
    `A long string with the{number}. It’s so long that we don’t want it to take up space on the .map line!`
  );
  
  // bad
  [1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
  });
  
  // good
  [1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
  });
  

• 8.5 避免箭头函数（=>）和比较操作符（<=, >=）混淆. eslint: no-confusing-arrow

  // bad
  const itemHeight = (item) =>
  item.height <= 256 ? item.largeSize : item.smallSize;
  
  // bad
  const itemHeight = (item) =>
  item.height >= 256 ? item.largeSize : item.smallSize;
  
  // good
  const itemHeight = (item) =>
  item.height <= 256 ? item.largeSize : item.smallSize;
  
  // good
  const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height <= 256 ? largeSize : smallSize;
  };
  

• 8.6 使箭头函数体有一个清晰的返回。 eslint: implicit-arrow-linebreak

  // bad
  (foo) => bar;
  
  (foo) => bar;
  
  // good
  (foo) => bar;
  (foo) => bar;
  (foo) => bar;
  

类与构造函数

• 9.1 使用 class 语法。避免直接操作 prototype。
  

  为什么？class 语法更简洁更易理解。

  // bad
  function Queue(contents = []) {
  this.queue = [...contents];
  }
  Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
  };
  
  // good
  class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
  }
  

• 9.2 用 extends 实现继承。
  

  为什么？它是一种内置的方法来继承原型功能而不破坏 instanceof。

  // bad
  const inherits = require("inherits");
  function PeekableQueue(contents) {
  Queue.apply(this, contents);
  }
  inherits(PeekableQueue, Queue);
  PeekableQueue.prototype.peek = function () {
  return this.queue[0];
  };
  
  // good
  class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
  }
  

• 9.3 方法可以返回 this 来实现链式调用。

  // bad
  Jedi.prototype.jump = function () {
  this.jumping = true;
  return true;
  };
  
  Jedi.prototype.setHeight = function (height) {
  this.height = height;
  };
  
  const luke = new Jedi();
  luke.jump(); // => true
  luke.setHeight(20); // => undefined
  
  // good
  class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }
  
  setHeight(height) {
    this.height = height;
    return this;
  }
  }
  
  const luke = new Jedi();
  
  luke.jump().setHeight(20);
  

• 9.4 自己写 toString() 方法是可以的，但需要保证它可以正常工作且没有副作用。

  class Jedi {
  constructor(options = {}) {
    this.name = options.name || "no name";
  }
  
  getName() {
    return this.name;
  }
  
  toString() {
    return `Jedi - ${this.getName()}`;
  }
  }
  

• 9.5 如果没有特别定义，类有默认的构造方法。一个空的构造函数或只是代表父类的构造函数是不需要写的。 eslint: no-useless-constructor

  // bad
  class Jedi {
  constructor() {}
  
  getName() {
    return this.name;
  }
  }
  
  // bad
  class Rey extends Jedi {
  // 这种构造函数是不需要写的
  constructor(...args) {
    super(...args);
  }
  }
  
  // good
  class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = "Rey";
  }
  }
  

• 9.6 避免重复定义类成员。eslint: no-dupe-class-members
  

  为什么？重复定义类成员只会使用最后一个被定义的 —— 重复本身也是一个 bug.

  // bad
  class Foo {
  bar() {
    return 1;
  }
  bar() {
    return 2;
  }
  }
  
  // good
  class Foo {
  bar() {
    return 1;
  }
  }
  
  // good
  class Foo {
  bar() {
    return 2;
  }
  }
  

• 9.7 除非外部库或框架需要使用特定的非静态方法，否则类方法应该使用 this 或被写成静态方法。
  作为一个实例方法表明它应该根据实例的属性有不同的行为。eslint: class-methods-use-this

  // bad
  class Foo {
  bar() {
    console.log("bar");
  }
  }
  
  // good - this 被使用了
  class Foo {
  bar() {
    console.log(this.bar);
  }
  }
  
  // good - constructor 不一定要使用 this
  class Foo {
  constructor() {
    // ...
  }
  }
  
  // good - 静态方法不需要使用 this
  class Foo {
  static bar() {
    console.log("bar");
  }
  }
  

模块

• 10.1 使用（import/export）模块而不是非标准的模块系统。你可以随时转到你喜欢的模块系统。
  

  为什么？模块化是未来，让我们现在就开启未来吧。

  // bad
  const AirbnbStyleGuide = require('./AirbnbStyleGuide');
  module.exports = AirbnbStyleGuide.es6;
  
  // ok
  import AirbnbStyleGuide from './AirbnbStyleGuide';
  export default AirbnbStyleGuide.es6;
  
  // best
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
  

• 10.2 不要用 import 通配符， 即 * 这种方式。
  

  为什么？这确保你有单个默认的导出。

  // bad
  import * as AirbnbStyleGuide from "./AirbnbStyleGuide";
  
  // good
  import AirbnbStyleGuide from "./AirbnbStyleGuide";
  

• 10.3 不要直接从 import 中直接 export。
  

  为什么？虽然只写一行很简洁，但是使用明确 import 和明确的 export 来保证一致性。

  // bad
  // filename es6.js
  export { es6 as default } from './AirbnbStyleGuide';
  
  // good
  // filename es6.js
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
  

• 10.4 一个路径只 import 一次。eslint: no-duplicate-imports
  

  为什么？多行导入同一路径将使代码变得难以维护。

  // bad
  import foo from "foo";
  // … 其他导入 … //
  import { named1, named2 } from "foo";
  
  // good
  import foo, { named1, named2 } from "foo";
  
  // good
  import foo, { named1, named2 } from "foo";
  

• 10.5 不要导出可变的东西。eslint: import/no-mutable-exports
  

  为什么？变化通常都是需要避免，特别是当你要输出可变的绑定。虽然在某些场景下可能需要这种技术，但总的来说应该导出常量。

  // bad
  let foo = 3;
  export { foo };
  
  // good
  const foo = 3;
  export { foo };
  

• 10.6 在一个单一导出模块里，用 export default 更好。eslint: import/prefer-default-export
  

  为什么？鼓励使用更多文件，每个文件只导出一次，这样可读性和可维护性更好。

  // bad
  export function foo() {}
  
  // good
  export default function foo() {}
  

• 10.7 把 import 放在其他所有语句之前。eslint: import/first
  

  为什么？因为 import 会被提升到代码最前面运行，因此将他们放在最前面以防止发生意外行为。

  // bad
  import foo from "foo";
  foo.init();
  
  import bar from "bar";
  
  // good
  import foo from "foo";
  import bar from "bar";
  
  foo.init();
  

• 10.8 多行 import 应该缩进，就像多行数组和对象字面量一样。eslint: object-curly-newline
  

  为什么？花括号与样式指南中每个其他花括号块遵循相同的缩进规则，逗号也是。

  // bad
  import { longNameA, longNameB, longNameC, longNameD, longNameE } from "path";
  
  // good
  import { longNameA, longNameB, longNameC, longNameD, longNameE } from "path";
  

• 10.9 在 import 语句里不允许 Webpack loader 语法。eslint: import/no-webpack-loader-syntax
  

  为什么？一旦用 Webpack 语法在 import 里会把代码耦合到模块绑定器。最好是在 webpack.config.js 里写 webpack loader 语法

  // bad
  import fooSass from "css!sass!foo.scss";
  import barCss from "style!css!bar.css";
  
  // good
  import fooSass from "foo.scss";
  import barCss from "bar.css";
  

• 10.10 import JavaScript 文件不用包含扩展名
  eslint: import/extensions

  为什么? 使用扩展名重构不友好，而且让模块使用者去了解模块的实现细节是不合适的。

  // bad
  import foo from "./foo.js";
  import bar from "./bar.jsx";
  import baz from "./baz/index.jsx";
  
  // good
  import foo from "./foo";
  import bar from "./bar";
  import baz from "./baz";
  

迭代器与生成器

• 11.1 不要用迭代器。使用 JavaScript 高级函数代替 for-in、 for-of。eslint: no-iterator no-restricted-syntax
  

  为什么？这强调了我们不可变的规则。 处理返回值的纯函数比处理副作用更容易。

  用数组的这些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / … , 用对象的这些方法 Object.keys() / Object.values() / Object.entries() 去产生一个数组，这样你就能去遍历对象了。

  const numbers = [1, 2, 3, 4, 5];
  
  // bad
  let sum = 0;
  for (let num of numbers) {
  sum += num;
  }
  sum === 15;
  
  // good
  let sum = 0;
  numbers.forEach((num) => (sum += num));
  sum === 15;
  
  // best (use the functional force)
  const sum = numbers.reduce((total, num) => total + num, 0);
  sum === 15;
  
  // bad
  const increasedByOne = [];
  for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
  }
  
  // good
  const increasedByOne = [];
  numbers.forEach((num) => {
  increasedByOne.push(num + 1);
  });
  
  // best (keeping it functional)
  const increasedByOne = numbers.map((num) => num + 1);
  

• 11.2 现在暂时不要使用生成器。
  

  为什么？生成器目前不能很好地转换为 ES5 语法。

• 11.3 如果你一定要用生成器，或者你忽略 我们的建议，请确保它们的函数标志空格是得当的。eslint: generator-star-spacing
  

  为什么？function 和 * 是同一概念关键字 – *不是function的修饰符，function* 是一个和function 不一样的独特结构。

  // bad
  function* foo() {
  // ...
  }
  
  // bad
  const bar = function* () {
  // ...
  };
  
  // bad
  const baz = function* () {
  // ...
  };
  
  // bad
  const quux = function* () {
  // ...
  };
  
  // bad
  function* foo() {
  // ...
  }
  
  // bad
  function* foo() {
  // ...
  }
  
  // very bad
  function* foo() {
  // ...
  }
  
  // very bad
  const wat = function* () {
  // ...
  };
  
  // good
  function* foo() {
  // ...
  }
  
  // good
  const foo = function* () {
  // ...
  };
  

属性

• 12.1 访问属性时使用点符号。eslint: dot-notation

  const luke = {
  jedi: true,
  age: 28,
  };
  
  // bad
  const isJedi = luke["jedi"];
  
  // good
  const isJedi = luke.jedi;
  

• 12.2 当使用变量获取属性时用方括号 []。

  const luke = {
  jedi: true,
  age: 28,
  };
  
  function getProp(prop) {
  return luke[prop];
  }
  
  const isJedi = getProp("jedi");
  

• 12.3 做幂运算时用幂操作符 ** 。eslint: prefer-exponentiation-operator。

  // bad
  const binary = Math.pow(2, 10);
  
  // good
  const binary = 2 ** 10;
  

变量

• 13.1 使用 const 或 let 声明变量。不这样做会导致全局变量。我们想要避免污染全局命名空间。地球超人也这样警告我们（译者注：可能是一个冷笑话）。 eslint: no-undef prefer-const

  // bad
  superPower = new SuperPower();
  
  // good
  const superPower = new SuperPower();
  

• 13.2 为每个变量声明都用一个 const 或 let。eslint: one-var
  

  为什么？这种方式很容易去声明新的变量，你不用去考虑把 ; 调换成 ,，或者引入一个只有标点的不同的变化（译者注：这里说的应该是在 Git 提交代码时显示的变化）。这种做法也可以是你在调试的时候单步每个声明语句，而不是一下跳过所有声明。

  // bad
  const items = getItems(),
  goSportsTeam = true,
  dragonball = "z";
  
  // bad
  // （与前面的比较，找一找错误）
  const items = getItems(),
  goSportsTeam = true;
  dragonball = "z";
  
  // good
  const items = getItems();
  const goSportsTeam = true;
  const dragonball = "z";
  

• 13.3 把const 和 let 分别放一起。
  

  为什么？在你需要分配一个新的变量，而这个变量依赖之前分配过的变量的时候，这种做法是有帮助的。

  // bad
  let i,
  len,
  dragonball,
  items = getItems(),
  goSportsTeam = true;
  
  // bad
  let i;
  const items = getItems();
  let dragonball;
  const goSportsTeam = true;
  let len;
  
  // good
  const goSportsTeam = true;
  const items = getItems();
  let dragonball;
  let i;
  let length;
  

• 13.4 在你需要的地方声明变量，但是要放在合理的位置。
  

  为什么？let 和 const 都是块级作用域而不是函数级作用域。

  // bad - 不必要的函数调用。
  function checkName(hasName) {
  const name = getName();
  
  if (hasName === "test") {
    return false;
  }
  
  if (name === "test") {
    this.setName("");
    return false;
  }
  
  return name;
  }
  
  // good
  function checkName(hasName) {
  if (hasName === "test") {
    return false;
  }
  
  // 在需要的时候分配
  const name = getName();
  
  if (name === "test") {
    this.setName("");
    return false;
  }
  
  return name;
  }
  

  
  

• 13.5 不要使用链式声明变量。 eslint: no-multi-assign

  为什么？链式声明变量会创建隐式全局变量。

  // bad
  (function example() {
  // JavaScript 将这一段解释为
  // let a = ( b = ( c = 1 ) );
  // let 只对变量 a 起作用; 变量 b 和 c 都变成了全局变量
  let a = (b = c = 1);
  })();
  
  console.log(a); // undefined
  console.log(b); // 1
  console.log(c); // 1
  
  // good
  (function example() {
  let a = 1;
  let b = a;
  let c = a;
  })();
  
  console.log(a); // undefined
  console.log(b); // undefined
  console.log(c); // undefined
  
  // `const` 也是如此
  

• 13.6 不要使用一元自增自减运算符（++， --）. eslint no-plusplus
  

  为什么？根据 eslint 文档，一元增量和减量语句受到自动分号插入的影响，并且可能会导致应用程序中的值递增或递减的静默错误。 使用 num + = 1 而不是 num ++ 或 num ++ 语句也是含义清晰的。 禁止一元增量和减量语句还会阻止您无意地预增/预减值，这也会导致程序出现意外行为。

  // bad
  
  const array = [1, 2, 3];
  let num = 1;
  num++;
  --num;
  
  let sum = 0;
  let truthyCount = 0;
  for (let i = 0; i < array.length; i++) {
  let value = array[i];
  sum += value;
  if (value) {
    truthyCount++;
  }
  }
  
  // good
  
  const array = [1, 2, 3];
  let num = 1;
  num += 1;
  num -= 1;
  
  const sum = array.reduce((a, b) => a + b, 0);
  const truthyCount = array.filter(Boolean).length;
  

• 13.7 在赋值的时候避免在 = 前/后换行。 如果你的赋值语句超出 max-len，那就用小括号把这个值包起来再换行。eslint operator-linebreak.
  

  为什么？在 = 附近换行容易混淆这个赋值语句。

  // bad
  const foo = superLongLongLongLongLongLongLongLongFunctionName();
  
  // bad
  const foo = "superLongLongLongLongLongLongLongLongString";
  
  // good
  const foo = superLongLongLongLongLongLongLongLongFunctionName();
  
  // good
  const foo = "superLongLongLongLongLongLongLongLongString";
  

• 13.8 不允许有未使用的变量。eslint: no-unused-vars
  

  为什么？一个声明了但未使用的变量更像是由于重构未完成产生的错误。这种在代码中出现的变量会使阅读者迷惑。

  // bad
  
  const some_unused_var = 42;
  
  // 写了没用
  let y = 10;
  y = 5;
  
  // 变量改了自己的值，也没有用这个变量
  let z = 0;
  z = z + 1;
  
  // 参数定义了但未使用
  function getX(x, y) {
  return x;
  }
  
  // good
  function getXPlusY(x, y) {
  return x + y;
  }
  
  const x = 1;
  const y = a + 2;
  
  alert(getXPlusY(x, y));
  
  // 'type' 即使没有使用也可以可以被忽略， 因为这个有一个 rest 取值的属性。
  // 这是从对象中抽取一个忽略特殊字段的对象的一种形式
  const { type, ...coords } = data;
  // 'coords' 现在就是一个没有 'type' 属性的 'data' 对象
  

提升

• 14.1 var 声明会被提前到离他最近的作用域的最前面，但是它的赋值语句并没有提前。const 和 let 被赋予了新的概念 暂时性死区 (TDZ)。 重要的是要知道为什么 typeof 不再安全。

  // 我们知道这个不会工作，假设没有定义全局的 notDefined
  function example() {
  console.log(notDefined); // => throws a ReferenceError
  }
  
  // 在你引用的地方之后声明一个变量，他会正常输出是因为变量提升。
  // 注意： declaredButNotAssigned 的值 true 没有被提升。
  function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
  }
  
  // 解释器把变量声明提升到作用域最前面，
  // 可以重写成如下例子， 二者意义相同。
  function example() {
  let declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
  }
  
  // 用 const，let就不一样了。
  function example() {
  console.log(declaredButNotAssigned); // => throws a ReferenceError
  console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
  const declaredButNotAssigned = true;
  }
  

• 14.2 匿名函数表达式和 var 情况相同。

  function example() {
  console.log(anonymous); // => undefined
  
  anonymous(); // => TypeError anonymous is not a function
  
  // 译者注，不管后面是函数、数字还是字符串，都是一样的，总结就是实际代码中最好不要用 var。
  var anonymous = function () {
    console.log("anonymous function expression");
  };
  }
  

• 14.3 已命名函数表达式提升他的变量名，不是函数名或函数体。

  function example() {
  console.log(named); // => undefined
  
  named(); // => TypeError named is not a function
  
  superPower(); // => ReferenceError superPower is not defined
  
  var named = function superPower() {
    console.log("Flying");
  };
  }
  
  // 函数名和变量名一样是也如此。
  function example() {
  console.log(named); // => undefined
  
  named(); // => TypeError named is not a function
  
  var named = function named() {
    console.log("named");
  };
  }
  

• 14.4 函数声明则提升了函数名和函数体。

  function example() {
  superPower(); // => Flying
  
  function superPower() {
    console.log("Flying");
  }
  }
  

  
  

• 14.5 变量、类、函数都应该在使用前定义。 eslint: no-use-before-define

  为什么? 当变量、类或者函数在使用处之后定义，这让阅读者很难想到这个函数引用自何处。 对于读者在遇到某个事物之前，如果能知道这个事物的来源（不论是在文件中定义还是从别的模块引用），理解起来都会清晰很多。

  // 不好的
  
  // 变量 a 使用出现在定义之前
  console.log(a); // 这样会导致 undefined，虽然变量声明被提升了， 但 a 初始化复制却还没执行
  var a = 10;
  
  // 函数 fun 使用出现在定义之前
  fun();
  function fun() {}
  
  // 类 A 使用出现在定义之前
  new A(); // 引用错误： 无法在 A 初始化之前访问它
  class A {}
  
  // `let` 和 `const` 被提升， 但是他们没有初始化变量值
  // 变量 a、 b 都被放在了 JavaScript 的暂时性死区 (Temporal Dead Zone， 指在变量被声明之前无法访问它的现象)。
  
  console.log(a); // 引用错误: 无法在 a 初始化之前访问它
  console.log(b); // 引用错误: 无法在 b 初始化之前访问它
  let a = 10;
  const b = 5;
  
  // 好的
  
  var a = 10;
  console.log(a); // 10
  
  function fun() {}
  fun();
  
  class A {}
  new A();
  
  let a = 10;
  const b = 5;
  console.log(a); // 10
  console.log(b); // 5
  

• 详情请见 JavaScript Scoping & Hoisting by Ben Cherry.

比较运算符与相等

• 15.1 用 === 和 !== 而不是 == 和 !=. eslint: eqeqeq

• 15.2 条件语句如 if 语句使用强制 ToBoolean 抽象方法来计算它们的表达式，并且始终遵循以下简单规则：
  • Objects 计算成 true
  • Undefined 计算成 false
  • Null 计算成 false
  • Booleans 计算成 the value of the boolean
  • Numbers
  • +0, -0, or NaN 计算成 false
  • 其他 true
  • Strings
  • '' 计算成 false
  • 其他 true

  if ([0] && []) {
  // true
  // 数组（即使是空数组）是对象，对象会计算成 true
  }
  

• 15.3 布尔值要用缩写，而字符串和数字要明确使用比较操作符。

  // bad
  if (isValid === true) {
  // ...
  }
  
  // good
  if (isValid) {
  // ...
  }
  
  // bad
  if (name) {
  // ...
  }
  
  // good
  if (name !== "") {
  // ...
  }
  
  // bad
  if (collection.length) {
  // ...
  }
  
  // good
  if (collection.length > 0) {
  // ...
  }
  

• 15.4 更多信息请见 Angus Croll 的 Truth, Equality, and JavaScript。

• 15.5 在 case 和 default 分句里用大括号创建一块包含词法声明的区域（例如：let、const、function 和 class）。eslint rules: no-case-declarations.
  

  为什么？词法声明在整个 switch 的代码块里都可见，但是只有当其被分配后才会初始化，仅当这个 case 被执行时才被初始化。当多个 case 分句试图定义同一个对象时就会出现问题。

  // bad
  switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
  }
  
  // good
  switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
  }
  

• 15.6 三元表达式不应该嵌套，通常是单行表达式。eslint rules: no-nested-ternary

  // bad
  const foo = maybe1 > maybe2 ? "bar" : value1 > value2 ? "baz" : null;
  
  // better
  const maybeNull = value1 > value2 ? "baz" : null;
  
  const foo = maybe1 > maybe2 ? "bar" : maybeNull;
  
  // best
  const maybeNull = value1 > value2 ? "baz" : null;
  
  const foo = maybe1 > maybe2 ? "bar" : maybeNull;
  

• 15.7 避免不必要的三元表达式。eslint rules: no-unneeded-ternary

  // bad
  const foo = a ? a : b;
  const bar = c ? true : false;
  const baz = c ? false : true;
  const quux = a != null ? a : b;
  
  // good
  const foo = a || b;
  const bar = !!c;
  const baz = !c;
  const quux = a ?? b;
  

• 15.8 用圆括号来组合多种操作符。唯一里的例外就是像 +, -, 和 ** 这种优先级容易理解的运算符。我们还是建议把 / * 放到小括号里， 因为他们混用的时候优先级容易有歧义。 eslint: no-mixed-operators
  

  为什么？这提高了可读性，并且明确了开发者的意图。

  // bad
  const foo = (a && b < 0) || c > 0 || d + 1 === 0;
  
  // bad
  const bar = a ** b - (5 % d);
  
  // bad
  // 别人会陷入(a || b) && c 的迷惑中
  if (a || (b && c)) {
  return d;
  }
  
  // bad
  const bar = a + (b / c) * d;
  
  // good
  const foo = (a && b < 0) || c > 0 || d + 1 === 0;
  
  // good
  const bar = a ** b - (5 % d);
  
  // good
  if (a || (b && c)) {
  return d;
  }
  
  // good
  const bar = a + (b / c) * d;
  

• 15.9 (??) 是一个逻辑运算符， 当运算符左侧是 null 或 undefined 时返回右侧的值， 否则返回左侧值。

  为什么? (??)这个运算符通过精确区分 null/undefined 和其他”falsy”值，从而增强了代码的清晰度和可预测性。

  // 不好的
  const value = 0 ?? "default";
  // returns 0, not 'default'
  
  // 不好的
  const value = "" ?? "default";
  // returns '', not 'default'
  
  // 好的
  const value = null ?? "default";
  // returns 'default'
  
  // 好的
  const user = {
  name: "John",
  age: null,
  };
  const age = user.age ?? 18;
  // returns 18
  

块

• 16.1 用大括号包裹多行代码块。 eslint: nonblock-statement-body-position

  // bad
  if (test) return false;
  
  // good
  if (test) return false;
  
  // good
  if (test) {
  return false;
  }
  
  // bad
  function foo() {
  return false;
  }
  
  // good
  function bar() {
  return false;
  }
  

• 16.2 if 表达式的 else和 if 的右大括号在一行。eslint: brace-style

  // bad
  if (test) {
  thing1();
  thing2();
  } else {
  thing3();
  }
  
  // good
  if (test) {
  thing1();
  thing2();
  } else {
  thing3();
  }
  

• 16.3 如果 if 语句中总是需要用 return 返回，那后续的 else 就不需要写了。 if 块中包含 return， 它后面的 else if 块中也包含了 return， 这个时候就可以把 return 分到多个 if 语句块中。 eslint: no-else-return

  // bad
  function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
  }
  
  // bad
  function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
  }
  
  // bad
  function dogs() {
  if (x) {
    return x;
  } else {
    if (y) {
      return y;
    }
  }
  }
  
  // good
  function foo() {
  if (x) {
    return x;
  }
  
  return y;
  }
  
  // good
  function cats() {
  if (x) {
    return x;
  }
  
  if (y) {
    return y;
  }
  }
  
  // good
  function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
  }
  

控制语句

• 17.1 当你的控制语句（if, while 等）太长或者超过最大长度限制的时候，把每一个（组）判断条件放在单独一行里。逻辑操作符放在行首。
  

  为什么？把逻辑操作符放在行首是让操作符的对齐方式和链式函数保持一致。这提高了可读性，也让复杂逻辑更清晰。

  // bad
  if (
  (foo === 123 || bar === "abc") &&
  doesItLookGoodWhenItBecomesThatLong() &&
  isThisReallyHappening()
  ) {
  thing1();
  }
  
  // bad
  if (foo === 123 && bar === "abc") {
  thing1();
  }
  
  // bad
  if (foo === 123 && bar === "abc") {
  thing1();
  }
  
  // bad
  if (foo === 123 && bar === "abc") {
  thing1();
  }
  
  // good
  if (foo === 123 && bar === "abc") {
  thing1();
  }
  
  // good
  if (
  (foo === 123 || bar === "abc") &&
  doesItLookGoodWhenItBecomesThatLong() &&
  isThisReallyHappening()
  ) {
  thing1();
  }
  
  // good
  if (foo === 123 && bar === "abc") {
  thing1();
  }
  

• 17.2 不要用选择操作符代替控制语句。

  // bad
  !isRunning && startRunning();
  
  // good
  if (!isRunning) {
  startRunning();
  }
  

注释

• 18.1 多行注释用 /** ... */。

  // bad
  // make() returns a new element
  // based on the passed in tag name
  //
  // @param {String} tag
  // @return {Element} element
  function make(tag) {
  // ...
  
  return element;
  }
  
  // good
  /**
  * make() returns a new element
  * based on the passed-in tag name
  */
  function make(tag) {
  // ...
  
  return element;
  }
  

• 18.2 单行注释用 //，将单行注释放在被注释区域上面。如果注释不是在第一行，那么注释前面就空一行。

  // bad
  const active = true; // is current tab
  
  // good
  // is current tab
  const active = true;
  
  // bad
  function getType() {
  console.log("fetching type...");
  // set the default type to 'no type'
  const type = this._type || "no type";
  
  return type;
  }
  
  // good
  function getType() {
  console.log("fetching type...");
  
  // set the default type to 'no type'
  const type = this._type || "no type";
  
  return type;
  }
  
  // also good
  function getType() {
  // set the default type to 'no type'
  const type = this._type || "no type";
  
  return type;
  }
  

• 18.3 所有注释开头空一格，方便阅读。eslint: spaced-comment

  // bad
  //is current tab
  const active = true;
  
  // good
  // is current tab
  const active = true;
  
  // bad
  /**
  *make() returns a new element
  *based on the passed-in tag name
  */
  function make(tag) {
  // ...
  
  return element;
  }
  
  // good
  /**
  * make() returns a new element
  * based on the passed-in tag name
  */
  function make(tag) {
  // ...
  
  return element;
  }
  

• 18.4 在你的注释前使用 FIXME 或 TODO 前缀，这有助于其他开发人员快速理解你指出的需要修复的问题， 或者您建议需要实现的问题的解决方案。 这些不同于常规注释，它们是有明确含义的。FIXME：需要修复这个问题或TODO：需要实现的功能。

• 18.5 用 // FIXME: 给问题做注释。

  class Calculator extends Abacus {
  constructor() {
    super();
  
    // FIXME: shouldn't use a global here
    total = 0;
  }
  }
  

• 18.6 用 // TODO: 去注释问题的解决方案。

  class Calculator extends Abacus {
  constructor() {
    super();
  
    // TODO: total should be configurable by an options param
    this.total = 0;
  }
  }
  

空格

• 19.1 一个缩进使用两个空格。eslint: indent

  // bad
  function foo() {
  ∙∙∙∙const name;
  }
  
  // bad
  function bar() {
  ∙const name;
  }
  
  // good
  function baz() {
  ∙∙const name;
  }
  

• 19.2 在大括号前空一格。eslint: space-before-blocks

  // bad
  function test() {
  console.log("test");
  }
  
  // good
  function test() {
  console.log("test");
  }
  
  // bad
  dog.set("attr", {
  age: "1 year",
  breed: "Bernese Mountain Dog",
  });
  
  // good
  dog.set("attr", {
  age: "1 year",
  breed: "Bernese Mountain Dog",
  });
  

• 19.3 在控制语句（if, while 等）的圆括号前空一格。在函数调用和定义时，参数列表和函数名之间不空格。 eslint: keyword-spacing

  // bad
  if (isJedi) {
  fight();
  }
  
  // good
  if (isJedi) {
  fight();
  }
  
  // bad
  function fight() {
  console.log("Swooosh!");
  }
  
  // good
  function fight() {
  console.log("Swooosh!");
  }
  

• 19.4 用空格来隔开运算符。eslint: space-infix-ops

  // bad
  const x = y + 5;
  
  // good
  const x = y + 5;
  

• 19.5 文件结尾空一行。eslint: eol-last

  // bad
  import { es6 } from "./AirbnbStyleGuide";
  // ...
  export default es6;
  

  // bad
  import { es6 } from "./AirbnbStyleGuide";
  // ...
  export default es6;
  

  // good
  import { es6 } from './AirbnbStyleGuide';
  // ...
  export default es6;↵
  

• 19.6 当出现长的方法链式调用时（>2 个）用缩进。用点开头强调该行是一个方法调用，而不是一个新的语句。eslint: newline-per-chained-call no-whitespace-before-property

  // bad
  ("#items").find(".selected").highlight().end().find(".open").updateCount();
  
  // bad("#items").find(".selected").highlight().end().find(".open").updateCount();
  
  // good
  ("#items").find(".selected").highlight().end().find(".open").updateCount();
  
  // bad
  const leds = stage
  .selectAll(".led")
  .data(data)
  .enter()
  .append("svg:svg")
  .classed("led", true)
  .attr("width", (radius + margin) * 2)
  .append("svg:g")
  .attr("transform", `translate({radius + margin}, {radius + margin})`)
  .call(tron.led);
  
  // good
  const leds = stage
  .selectAll(".led")
  .data(data)
  .enter()
  .append("svg:svg")
  .classed("led", true)
  .attr("width", (radius + margin) * 2)
  .append("svg:g")
  .attr("transform", `translate({radius + margin}, {radius + margin})`)
  .call(tron.led);
  
  // good
  const leds = stage.selectAll(".led").data(data);
  const svg = leds.enter().append("svg:svg");
  svg.classed("led", true).attr("width", (radius + margin) * 2);
  const g = svg.append("svg:g");
  g.attr("transform", `translate({radius + margin}, ${radius + margin})`).call(
  tron.led
  );
  

• 19.7 在一个代码块后下一条语句前空一行。

  // bad
  if (foo) {
  return bar;
  }
  return baz;
  
  // good
  if (foo) {
  return bar;
  }
  
  return baz;
  
  // bad
  const obj = {
  foo() {},
  bar() {},
  };
  return obj;
  
  // good
  const obj = {
  foo() {},
  
  bar() {},
  };
  
  return obj;
  
  // bad
  const arr = [function foo() {}, function bar() {}];
  return arr;
  
  // good
  const arr = [function foo() {}, function bar() {}];
  
  return arr;
  

• 19.8 不要用空白行填充块。eslint: padded-blocks

  // bad
  function bar() {
  console.log(foo);
  }
  
  // also bad
  if (baz) {
  console.log(quux);
  } else {
  console.log(foo);
  }
  
  // good
  function bar() {
  console.log(foo);
  }
  
  // good
  if (baz) {
  console.log(quux);
  } else {
  console.log(foo);
  }
  

• 19.9 不要在代码之间使用多个空白行填充。eslint: no-multiple-empty-lines

  // bad
  class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
  
    this.email = email;
  
    this.setAge(birthday);
  }
  
  setAge(birthday) {
    const today = new Date();
  
    const age = this.getAge(today, birthday);
  
    this.age = age;
  }
  
  getAge(today, birthday) {
    // ..
  }
  }
  
  // good
  class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
  }
  
  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }
  
  getAge(today, birthday) {
    // ..
  }
  }
  

• 19.10 圆括号里不要加空格。eslint: space-in-parens

  // bad
  function bar(foo) {
  return foo;
  }
  
  // good
  function bar(foo) {
  return foo;
  }
  
  // bad
  if (foo) {
  console.log(foo);
  }
  
  // good
  if (foo) {
  console.log(foo);
  }
  

• 19.11 方括号里不要加空格。 eslint: array-bracket-spacing

  // bad
  const foo = [1, 2, 3];
  console.log(foo[0]);
  
  // good，逗号分隔符后还是要空格的。
  const foo = [1, 2, 3];
  console.log(foo[0]);
  

• 19.12 花括号里加空格 。eslint: object-curly-spacing

  // bad
  const foo = { clark: "kent" };
  
  // good
  const foo = { clark: "kent" };
  

• 19.13 避免一行代码超过 100 个字符（包含空格）。注意：对于 上面，长字符串不受此规则限制，不应换行。 eslint: max-len
  

  为什么？这样确保可读性和可维护性。

  // bad
  const foo =
  jsonData &&
  jsonData.foo &&
  jsonData.foo.bar &&
  jsonData.foo.bar.baz &&
  jsonData.foo.bar.baz.quux &&
  jsonData.foo.bar.baz.quux.xyzzy;
  
  // bad
  .ajax({ method: "POST", url: "https://airbnb.com/", data: { name: "John" } })
  .done(() => console.log("Congratulations!"))
  .fail(() => console.log("You have failed this city."));
  
  // good
  const foo =
  jsonData &&
  jsonData.foo &&
  jsonData.foo.bar &&
  jsonData.foo.bar.baz &&
  jsonData.foo.bar.baz.quux &&
  jsonData.foo.bar.baz.quux.xyzzy;
  
  // better
  const foo = jsonData?.foo?.bar?.baz?.quux?.xyzzy;
  
  // good.ajax({
  method: "POST",
  url: "https://airbnb.com/",
  data: { name: "John" },
  })
  .done(() => console.log("Congratulations!"))
  .fail(() => console.log("You have failed this city."));
  

• 19.14 作为语句的花括号内也要加空格 —— { 后和 } 前都需要空格。 eslint: block-spacing

  // bad
  function foo() {
  return true;
  }
  if (foo) {
  bar = 0;
  }
  
  // good
  function foo() {
  return true;
  }
  if (foo) {
  bar = 0;
  }
  

• 19.15 , 前不要空格， , 后需要空格。 eslint: comma-spacing

  // bad
  const foo = 1,
  bar = 2;
  const arr = [1, 2];
  
  // good
  const foo = 1,
  bar = 2;
  const arr = [1, 2];
  

• 19.16 花括号跟属性间要有空格，中括号跟属性间没有空格。 eslint: computed-property-spacing

  译者注：以代码为准。

  // bad
  obj[foo];
  obj["foo"];
  const x = { [b]: a };
  obj[foo[bar]];
  
  // good
  obj[foo];
  obj["foo"];
  const x = { [b]: a };
  obj[foo[bar]];
  

• 19.17 调用函数时，函数名和小括号之间不要空格。 eslint: func-call-spacing

  // bad
  func();
  
  func();
  
  // good
  func();
  

• 19.18 在对象的字面量属性中， key 和 value 之间要有空格。 eslint: key-spacing

  // bad
  const obj = { foo: 42 };
  const obj2 = { foo: 42 };
  
  // good
  const obj = { foo: 42 };
  

• 19.19 行末不要空格。 eslint: no-trailing-spaces

• 19.20 避免出现多个空行。 在文件末尾只允许空一行。文件开始处不要出现空行。eslint: no-multiple-empty-lines

  // bad - multiple empty lines
  const x = 1;
  
  const y = 2;
  
  // bad - 2+ newlines at end of file
  const x = 1;
  const y = 2;
  
  // bad - 1+ newline(s) at beginning of file
  
  const x = 1;
  const y = 2;
  
  // good
  const x = 1;
  const y = 2;
  

逗号

• 20.1 不要前置逗号。eslint: comma-style

  // bad
  const story = [once, upon, aTime];
  
  // good
  const story = [once, upon, aTime];
  
  // bad
  const hero = {
  firstName: "Ada",
  lastName: "Lovelace",
  birthYear: 1815,
  superPower: "computers",
  };
  
  // good
  const hero = {
  firstName: "Ada",
  lastName: "Lovelace",
  birthYear: 1815,
  superPower: "computers",
  };
  

• 20.2 额外结尾逗号: 要 eslint: comma-dangle
  

  为什么？这使 git diffs 更简洁。此外，像 Babel 这样的转换器会删除转换代码中的额外的逗号，这意味着你不必担心旧版浏览器中的 结尾逗号问题。

  // bad - 没有结尾逗号的 git diff
  const hero = {
     firstName: 'Florence',
  -    lastName: 'Nightingale'
  +    lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing']
  };
  
  // good - 有结尾逗号的 git diff
  const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing'],
  };
  

  // bad
  const hero = {
  firstName: "Dana",
  lastName: "Scully",
  };
  
  const heroes = ["Batman", "Superman"];
  
  // good
  const hero = {
  firstName: "Dana",
  lastName: "Scully",
  };
  
  const heroes = ["Batman", "Superman"];
  
  // bad
  function createHero(firstName, lastName, inventorOf) {
  // does nothing
  }
  
  // good
  function createHero(firstName, lastName, inventorOf) {
  // does nothing
  }
  
  // good (注意，逗号不应出现在使用了 ... 操作符后的参数后面)
  function createHero(firstName, lastName, inventorOf, ...heroArgs) {
  // does nothing
  }
  
  // bad
  createHero(firstName, lastName, inventorOf);
  
  // good
  createHero(firstName, lastName, inventorOf);
  
  // good  (注意，逗号不应出现在使用了 ... 操作符后的参数后面)
  createHero(firstName, lastName, inventorOf, ...heroArgs);
  

分号

• 21.1 要分号！ eslint: semi
  

  为什么？当 JavaScript 遇到没有分号结尾的一行，它会执行 自动插入分号 这一规则来决定行末是否加分号。如果 JavaScript 在你的断行里错误的插入了分号，就会出现一些古怪的行为。当新的功能加到 JavaScript 里后， 这些规则会变得更复杂难懂。清晰的结束语句，并通过配置代码检查去检查没有带分号的地方可以帮助你防止这种错误。

  // bad - 抛出异常
  const luke = {};
  const leia = {}[(luke, leia)].forEach((jedi) => (jedi.father = "vader"));
  
  // bad - 抛出异常
  const reaction = "No! That’s impossible!"(
  (async function meanwhileOnTheFalcon() {
    // 处理 `leia`, `lando`, `chewie`, `r2`, `c3p0`
    // ...
  })()
  );
  
  // bad - 将返回 `undefined` 而不是下一行的值。由于 ASI，当 `return`单独出现在一行时，这种情况会一直出现。
  function foo() {
  return;
  ("search your feelings, you know it to be foo");
  }
  
  // good
  const luke = {};
  const leia = {};
  [luke, leia].forEach((jedi) => {
  jedi.father = "vader";
  });
  
  // good
  const reaction = "No! That’s impossible!";
  (async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
  })();
  
  // good
  function foo() {
  return "search your feelings, you know it to be foo";
  }
  

  更多.

类型转换与强制转换

• 22.1 在语句开始执行强制类型转换。

• 22.2 字符串: eslint: no-new-wrappers

  // => this.reviewScore = 9;
  
  // bad
  const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"
  
  // bad
  const totalScore = this.reviewScore + ""; // 将会执行 this.reviewScore.valueOf()
  
  // bad
  const totalScore = this.reviewScore.toString(); // 不保证返回 string
  
  // good
  const totalScore = String(this.reviewScore);
  

• 22.3 数字: 用 Number 做类型转换，parseInt 转换 string 应总是带上基数。 eslint: radix
  

  为什么？函数 parseInt 会根据指定的基数将字符串转换为数字。字符串开头的空白字符将会被忽略，如果参数基数（第二个参数）为 undefined 或者 0 ，除非字符串开头为 0x 或 0X（十六进制），会默认假设为 10。这个差异来自 ECMAScript 3，它不鼓励（但是允许）解释八进制。在 2013 年之前，一些实现不兼容这种行为。因为我们需要支持旧浏览器，所以应当始终指定进制。

  译者注：翻译的可能不是很好，总之使用 parseInt() 时始终指定进制数（第二个参数）就可以了。

  const inputValue = "4";
  
  // bad
  const val = new Number(inputValue);
  
  // bad
  const val = +inputValue;
  
  // bad
  const val = inputValue >> 0;
  
  // bad
  const val = parseInt(inputValue);
  
  // good
  const val = Number(inputValue);
  
  // good
  const val = parseInt(inputValue, 10);
  

• 22.4 请在注释中解释为什么要用移位运算和你在做什么。无论你做什么狂野的事，比如由于 parseInt 是你的性能瓶颈导致你一定要用移位运算。说明这个是因为 性能原因。

  // good
  /**
  * parseInt 是代码运行慢的原因
  * 用 Bitshifting 将字符串转成数字使代码运行效率大幅提升
  */
  const val = inputValue >> 0;
  

• 22.5 注意: 用移位运算要小心。数字是用 64-位表示的，但移位运算常常返回的是 32 为整形source)。移位运算对大于 32 位的整数会导致意外行为。Discussion. 最大的 32 位整数是 2,147,483,647:

  2147483647 >> 0; //=> 2147483647
  2147483648 >> 0; //=> -2147483648
  2147483649 >> 0; //=> -2147483647
  

• 22.6 布尔: eslint: no-new-wrappers

  const age = 0;
  
  // bad
  const hasAge = new Boolean(age);
  
  // good
  const hasAge = Boolean(age);
  
  // best
  const hasAge = !!age;
  

命名规范

• 23.1 避免用一个字母命名，让你的命名有意义。eslint: id-length

  // bad
  function q() {
  // ...
  }
  
  // good
  function query() {
  // ...
  }
  

• 23.2 用小驼峰命名法来命名你的对象、函数、实例。eslint: camelcase

  // bad
  const OBJEcttsssss = {};
  const this_is_my_object = {};
  function c() {}
  
  // good
  const thisIsMyObject = {};
  function thisIsMyFunction() {}
  

• 23.3 用大驼峰命名法来命名类。eslint: new-cap

  // bad
  function user(options) {
  this.name = options.name;
  }
  
  const bad = new user({
  name: "nope",
  });
  
  // good
  class User {
  constructor(options) {
    this.name = options.name;
  }
  }
  
  const good = new User({
  name: "yup",
  });
  

• 23.4 不要用前置或后置下划线。eslint: no-underscore-dangle
  

  为什么？JavaScript 没有私有属性或私有方法的概念。尽管前置下划线通常的概念上意味着私有，事实上，这些属性是完全公有的，因此这部分也是你的 API 的内容。这一概念可能会导致开发者误以为更改这个不会导致崩溃或者不需要测试。如果你想要什么东西变成私有，那就不要让它在这里出现。

  // 不好的
  this.__firstName__ = "Panda";
  this.firstName_ = "Panda";
  this._firstName = "Panda";
  
  // 好的
  this.firstName = "Panda";
  
  // 好的， 在支持 WeakMaps 环境中可用
  // 见 https://compat-table.github.io/compat-table/es6/#test-WeakMap
  const firstNames = new WeakMap();
  firstNames.set(this, "Panda");
  

• 23.5 不要保存引用 this，用箭头函数或 函数绑定——Function#bind。

  // bad
  function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
  }
  
  // bad
  function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
  }
  
  // good
  function foo() {
  return () => {
    console.log(this);
  };
  }
  

• 23.6 export default 导出模块 A，则这个文件名也叫 A.*， import 时候的参数也叫 A。 大小写完全一致。

  // file 1 contents
  class CheckBox {
  // ...
  }
  export default CheckBox;
  
  // file 2 contents
  export default function fortyTwo() { return 42; }
  
  // file 3 contents
  export default function insideDirectory() {}
  
  // in some other file
  // bad
  import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
  import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
  import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
  
  // bad
  import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
  import forty_two from './forty_two'; // snake_case import/filename, camelCase export
  import inside_directory from './inside_directory'; // snake_case import, camelCase export
  import index from './inside_directory/index'; // requiring the index file explicitly
  import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
  
  // good
  import CheckBox from './CheckBox'; // PascalCase export/import/filename
  import fortyTwo from './fortyTwo'; // camelCase export/import/filename
  import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
  // ^ supports both insideDirectory.js and insideDirectory/index.js
  

• 23.7 当你 export-default 一个函数时，函数名用小驼峰，文件名需要和函数名一致。

  function makeStyleGuide() {
  // ...
  }
  
  export default makeStyleGuide;
  

• 23.8 当你 export 一个结构体/类/单例/函数库/对象 时用大驼峰。

  const AirbnbStyleGuide = {
  es6: {},
  };
  
  export default AirbnbStyleGuide;
  

• 23.9 简称和缩写应该全部大写或全部小写。
  

  为什么？名字都是给人读的，不是为了去适应计算机算法。

  // bad
  import SmsContainer from "./containers/SmsContainer";
  
  // bad
  const HttpRequests = [
  // ...
  ];
  
  // good
  import SMSContainer from "./containers/SMSContainer";
  
  // good
  const HTTPRequests = [
  // ...
  ];
  
  // also good
  const httpRequests = [
  // ...
  ];
  
  // best
  import TextMessageContainer from "./containers/TextMessageContainer";
  
  // best
  const requests = [
  // ...
  ];
  

• 23.10 你可以用全大写字母设置静态变量，他需要满足三个条件。
  1. 导出变量；
  2. 是 const 定义的， 保证不能被改变；
  3. 这个变量是可信的，他的子属性都是不能被改变的。

  为什么？这是一个附加工具，帮助开发者去辨识一个变量是不是不可变的。UPPERCASE_VARIABLES 能让开发者知道他能确信这个变量（以及他的属性）是不会变的。

  • 对于所有的 const 变量呢？ —— 这个是不必要的。大写变量不应该在同一个文件里定义并使用， 它只能用来作为导出变量。
  • 那导出的对象呢？ —— 大写变量处在 export 的最高级(例如：EXPORTED_OBJECT.key) 并且他包含的所有子属性都是不可变的。（译者注：即导出的变量是全大写的，但他的属性不用大写）

  // bad
  const PRIVATE_VARIABLE =
  "should not be unnecessarily uppercased within a file";
  
  // bad
  export const THING_TO_BE_CHANGED = "should obviously not be uppercased";
  
  // bad
  export let REASSIGNABLE_VARIABLE = "do not use let with uppercase variables";
  
  // ---
  
  // 允许但不够语义化
  export const apiKey = "SOMEKEY";
  
  // 在大多数情况下更好
  export const API_KEY = "SOMEKEY";
  
  // ---
  
  // bad - 不必要的大写键，没有增加任何语义
  export const MAPPING = {
  KEY: "value",
  };
  
  // good
  export const MAPPING = {
  key: "value",
  };
  

Get-Set 访问器

• 24.1 不需要使用属性的访问器函数。

• 24.2 不要使用 JavaScript 的 getters/setters，因为他们会产生副作用，并且难以测试、维护和理解。相反的，你可以用 getVal() 和 setVal('hello') 去创造你自己的访问器函数。

  // bad
  class Dragon {
  get age() {
    // ...
  }
  
  set age(value) {
    // ...
  }
  }
  
  // good
  class Dragon {
  getAge() {
    // ...
  }
  
  setAge(value) {
    // ...
  }
  }
  

• 24.3 如果属性/方法是 boolean， 用 isVal() 或 hasVal()。

  // bad
  if (!dragon.age()) {
  return false;
  }
  
  // good
  if (!dragon.hasAge()) {
  return false;
  }
  

• 24.4 用 get() 和 set() 函数是可以的，但是要一起用。

  class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || "blue";
    this.set("lightsaber", lightsaber);
  }
  
  set(key, val) {
    this[key] = val;
  }
  
  get(key) {
    return this[key];
  }
  }
  

事件

• 25.1 当传递数据载荷给事件时（不论是 DOM 还是像 Backbone 这样有很多属性的事件）。这使得后续的贡献者（程序员）向这个事件添加更多的数据时不用去找或者更新每个处理器。例如：

  // bad
  (this).trigger("listingUpdated", listing.id);
  
  // ...(this).on("listingUpdated", (e, listingID) => {
  // do something with listingID
  });
  

  prefer:

  // good
  (this).trigger("listingUpdated", { listingID: listing.id });
  
  // ...(this).on("listingUpdated", (e, data) => {
  // do something with data.listingID
  });
  

jQuery

• 26.1 jQuery 对象用$变量表示。

  // bad
  const sidebar = (".sidebar");
  
  // good
  constsidebar = (".sidebar");
  
  // good
  constsidebarBtn = $(".sidebar-btn");
  

• 26.2 缓存 jQuery 查找。

  // bad
  function setSidebar() {
  (".sidebar").hide();
  
  // ...(".sidebar").css({
    "background-color": "pink",
  });
  }
  
  // good
  function setSidebar() {
  const sidebar =(".sidebar");
  sidebar.hide();
  
  // ...sidebar.css({
    "background-color": "pink",
  });
  }
  

• 26.3 DOM 查找用层叠式$('.sidebar ul') 或 父节点 > 子节点 $('.sidebar > ul'). jsPerf

• 26.4 用 jQuery 对象查询作用域的 find 方法查询。

  // bad
  ("ul", ".sidebar").hide();
  
  // bad(".sidebar").find("ul").hide();
  
  // good
  (".sidebar ul").hide();
  
  // good(".sidebar > ul").hide();
  
  // good
  $sidebar.find("ul").hide();
  

ECMAScript 5 兼容性

• 27.1 参考 Kangax 的 ES5 兼容性列表.

ECMAScript 6+ (ES 2015+) 风格

• 28.1 这是收集到的各种 ES6 特性的链接

1. 箭头函数——Arrow Functions
2. 类——Classes
3. 对象缩写——Object Shorthand
4. 对象简写——Object Concise
5. 对象计算属性——Object Computed Properties
6. 模板字符串——Template Strings
7. 解构赋值——Destructuring
8. 默认参数——Default Parameters
9. 剩余参数——Rest
10. 数组拓展——Array Spreads
11. Let and Const
12. 幂操作符——Exponentiation Operator
13. 迭代器和生成器——Iterators and Generators
14. 模块——Modules

• 28.2 不要用 TC39 proposals， TC39 还没有到 stage 3。
  

  为什么？ 它还不是最终版, 他可能还有很多变化，或者被撤销。我们想要用的是 JavaScript， 提议还不是 JavaScript。

标准库

标准库中包含一些功能受损但是由于历史原因遗留的工具类

• 29.1 用 Number.isNaN 代替全局的 isNaN。
  eslint: no-restricted-globals

  为什么？全局 isNaN 强制把非数字转成数字， 然后对于任何强转后为 NaN 的变量都返回 true
  如果你想用这个功能，就显式的用它。

  // bad
  isNaN("1.2"); // false
  isNaN("1.2.3"); // true
  
  // good
  Number.isNaN("1.2.3"); // false
  Number.isNaN(Number("1.2.3")); // true
  

• 29.2 用 Number.isFinite 代替 isFinite.
  eslint: no-restricted-globals

  Why? 理由同上，会把一个非数字变量强转成数字，然后做判断。

  // bad
  isFinite("2e3"); // true
  
  // good
  Number.isFinite("2e3"); // false
  Number.isFinite(parseInt("2e3", 10)); // true
  

测试

• 30.1 Yup.

  function foo() {
  return true;
  }
  

• 30.2 No, but seriously:
• 无论用哪个测试框架，你都需要写测试。
• 尽量去写很多小而美的纯函数，减少突变的发生
• 小心 stub 和 mock —— 这会让你的测试变得脆弱。
• 在 Airbnb 首选 mocha。 tape 偶尔被用来测试一些小的、独立的模块。
• 100% 测试覆盖率是我们努力的目标，即便实际上很少达到。
• 每当你修了一个 bug，都要写一个回归测试。 一个 bug 修复了，没有回归测试，很可能以后会再次出问题。

性能

• On Layout & Web Performance
• String vs Array Concat
• Try/Catch Cost In a Loop
• Bang Function
• jQuery Find vs Context, Selector
• innerHTML vs textContent for script text
• Long String Concatenation
• Are JavaScript functions like map(), reduce(), and filter() optimized for traversing arrays?
• Loading…

资源

Learning ES6

• Draft ECMA 2015 (ES6) Spec
• ExploringJS
• ES6 Compatibility Table
• Comprehensive Overview of ES6 Features

Read This

• Standard ECMA-262

Tools

• Code Style Linters
  • ESlint – Airbnb Style .eslintrc
  • JSHint – Airbnb Style .jshintrc
• Neutrino Preset – @neutrinojs/airbnb

Other Style Guides

• Google JavaScript Style Guide
• Google JavaScript Style Guide (Old)
• jQuery Core Style Guidelines
• Principles of Writing Consistent, Idiomatic JavaScript
• StandardJS

Other Styles

• Naming this in nested functions – Christian Johansen
• Conditional Callbacks – Ross Allen
• Popular JavaScript Coding Conventions on GitHub – JeongHoon Byun
• Multiple var statements in JavaScript, not superfluous – Ben Alman

Further Reading

• Understanding JavaScript Closures – Angus Croll
• Basic JavaScript for the impatient programmer – Dr. Axel Rauschmayer
• You Might Not Need jQuery – Zack Bloom & Adam Schwartz
• ES6 Features – Luke Hoban
• Frontend Guidelines – Benjamin De Cock

Books

• JavaScript: The Good Parts – Douglas Crockford
• JavaScript Patterns – Stoyan Stefanov
• Pro JavaScript Design Patterns – Ross Harmes and Dustin Diaz
• High Performance Web Sites: Essential Knowledge for Front-End Engineers – Steve Souders
• Maintainable JavaScript – Nicholas C. Zakas
• JavaScript Web Applications – Alex MacCaw
• Pro JavaScript Techniques – John Resig
• Smashing Node.js: JavaScript Everywhere – Guillermo Rauch
• Secrets of the JavaScript Ninja – John Resig and Bear Bibeault
• Human JavaScript – Henrik Joreteg
• Superhero.js – Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
• JSBooks – Julien Bouquillon
• Third Party JavaScript – Ben Vinegar and Anton Kovalyov
• Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript – David Herman
• Eloquent JavaScript – Marijn Haverbeke
• You Don’t Know JS: ES6 & Beyond – Kyle Simpson

Blogs

• JavaScript Weekly
• JavaScript, JavaScript…
• Bocoup Weblog
• Adequately Good
• NCZOnline
• Perfection Kills
• Ben Alman
• Dmitry Baranovskiy
• nettuts

Podcasts

• JavaScript Air
• JavaScript Jabber

};

JavaScript 风格指南最先出现在JokerChor | 阿楚 | chor。

1. 1. 首先是网站title的描述
2. 2. 首先谈谈具体的meta标签的问题,其实meta标签是很重要的一部分，在seo中。
3. 3. 代码层面需要优化的事项
4. 4. 网站收录事件(google,facebook)以及埋点
5. 5. 网站站点地图sitemap
6. 6. Last-Modified 和 If-Modified-Since

1. 首先是网站title的描述

• 如果是网站首页则描述该网站的内容

• 如果是商品详情页面则是针对该商品的描述

• 如果是分类页则是对所有分类的描述

<title>xxx</title>

2. 首先谈谈具体的meta标签的问题,其实meta标签是很重要的一部分，在seo中。

    <meta data-n-head="ssr" property="description" name="description"  content="有关网站的描述">
    <meta data-n-head="ssr" property="keywords" name="keywords"  content="有关网站的关键词">

3. 代码层面需要优化的事项

• 所有的img标签要加alt属性，产品列表要加产品列表索引

• 所有跳转到商品详情，店铺页面，分类页面，搜索页面都要是用a标签跳转，这样爬虫才能沿着链接爬取下一个链式页面

• 所有a标签要写完整的路径:例如：

<a href="https://buydo.com/item/a18f4cf96bc041d4979ddca4c2fd1d78.html"></a>

• 当在网站中输入错误的链接以及产品id，网站必须有正确的404,500页面以用来引导爬虫走完整个流程，而不是弹出错误的选项卡来告诉用户没有该商品之类的

4. 网站收录事件(google,facebook)以及埋点

• 去google和facebook开发者网站申请账号申请埋点事件，在自己的网站中做埋点，方便google和facebook收录自己网站内的商品和顾客购买某件商品的概率。

• nuxt+vue-ssr项目中如何做facebook和google统计以及埋点。详情请移步vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结(next.js)

5. 网站站点地图sitemap

• 站点地图应列出站点的所有静态页面,以及网站中商品的类别和产品，并且在sitemap_index中添加指向所欲站点地图页面的链接，这些都要按照xml标准。

• 关于如何在自己的项目中添加站点地图请移步nuxt.js做站点地图(sitemap.xml)详解

6. Last-Modified 和 If-Modified-Since

• 所有页面都必须设置Last-Modified 和 If-Modified-Since标头，这个对于爬虫搜索的索引和检索索引页面的速度非常重要。

前端seo优化篇最先出现在JokerChor | 阿楚 | chor。

微型生成器框架，使整个团队可以轻松创建具有统一程度的文件。提供了一种以一致的方式生成代码或任何其他类型的平面文本文件的简单方法。

我们在代码中创建结构和模式（路由、控制器、组件、帮助程序等）。这些模式会随着时间的推移而变化和改进，因此，当您需要在此处创建新的 insert-name-of-pattern-here 时，在代码库中找到代表当前“最佳实践”的文件并不总是那么容易。
使用 plop，您就有了在 CODE 中创建任何给定模式的“最佳实践”方法。可以通过键入 plop 轻松从终端运行的代码。这不仅使您不必在代码库中四处寻找要复制的正确文件，而且还将“正确的方法”变成了制作新文件的“最简单方法”。

github地址：https://github.com/plopjs/plop

实践

1. 安装

npm install --save-dev plop

2. 在项目的根目录创建plopfile.js

function notEmpty(name) {
  return (v) => {
    if (!v || v.trim === '') {
      return `{name} is required`
    }
    else {
      return true
    }
  }
}
module.exports = function (plop) {
  // 这里定义你的生成器
  plop.setGenerator('test', {
    description: '生成一个页面',
    prompts: [
      {
        type: 'input',
        name: 'dir',
        message: '请输入组件路径 比如 system/user、system/user/edit',
        validate: notEmpty('dir'),
      },
      {
        type: 'input',
        name: 'title',
        message: '请输入页面标题，允许空（比如：我的订单）',
      },
      {
        type: 'rawlist',
        name: 'level',
        message: '请输入页面等级，默认一级',
        default:0,
        choices: [
          {
            name: '一级',
            value: 1,
          },
          {
            name: '二级',
            value: 2,
          },
          {
            name: '三级',
            value: 3,
          },
          {
            name: '四级',
            value: 4,
          },
        ],
      },
      {
        type: 'checkbox',
        name: 'blocks',
        message: '路由配置:',
        choices: [
          {
            name: '是否缓存组件',
            value: 'keepAlive',
            checked: false,
          },
        ],
      },
    ],
    actions: (data) => {
      const dir
              = data.dir.indexOf('/') === 0 ? data.dir.substring(1) : data.dir
      const name = dir
      const { title, level } = data
      const actions = [
        {
          force: true,
          type: 'add',
          path: `src/pages/{name}/index.vue`,
          templateFile: 'plop-templates/page/index.hbs',
          data: {
            name,
            title,
            level,
            keepAlive: data.blocks.includes('keepAlive'),
          },
        },
      ]

      return actions
    },
  })
}

3. 配置package.json

{
    ...,
    "scripts": {
        "new": "plop"
    },
    ...
}

4. 创建模板
   

<script setup lang="ts">
definePage({
  name:"{{properCase name}}",
  meta: {
    level:{{level}},
    title:"{{title}}",
    keepAlive:{{keepAlive}}
  },
})

</script>

<template>
  <div class="{{properCase name}}">

  </div>
</template>
<style lang="less" scoped>

</style>

5. 执行plop命令

npm run new

前端工程化：plop自动生成文件（快速开发，创建模板文件）最先出现在JokerChor | 阿楚 | chor。

fnm

• 跨平台支持（macOS、Windows、Linux）
• 单文件，安装方便，即时启动
• 以速度为导向-速度最快，没有之一

使用

• windows

winget install Schniz.fnm

@echo off
:: for /F will launch a new instance of cmd so we create a guard to prevent an infnite loop
if not defined FNM_AUTORUN_GUARD (
    set "FNM_AUTORUN_GUARD=AutorunGuard"
    FOR /f "tokens=*" %%z IN ('fnm env --use-on-cd') DO CALL %%z
)

强烈推荐的一款node版本管理工具–fnm最先出现在JokerChor | 阿楚 | chor。

js浙里办 || 支付宝 || 微信环境判断最先出现在JokerChor | 阿楚 | chor。