✏️
ougege
  • README
  • Docs
    • index
    • Articles
      • AI
        • 体验Chrome AI
        • 体验Cloudflare Workers AI
        • 体验deepseek
      • CSS
        • CSS优化-PurgeCSS
        • 实用效果
        • 开发常用样式
      • Deepin
        • deepin20安装mysql
        • deepin使用tensorflow入门机器学习
        • deepin安装cuda和cuDNN
        • deepin安装lamp
        • deepin安装nvidia驱动
        • deepin安装oh my Zsh
        • deepin安装p7zip
        • deepin换源
        • 安装deepin系统后要做的事
      • Docker
        • CI/CD搭建配置
        • deepin搭建docker环境
        • docker安装和使用gitlab
        • docker搭建nginx+php环境
      • Essay
        • IOS申请邓白氏编码
        • Markdown-Mermaid
        • Markdown Use
        • webview白屏的问题查找和修复
        • 前端开发对接问题和解决办法汇总
        • 国务院机构改革方案
        • 国家级智库
        • 实用网站推荐
        • 常用Markdown数学公式语法
        • 强烈推荐前端要安装的vscode扩展
        • 新建销售计划-页面卡死问题分析
        • 海淘入坑手册
        • 竞品研究
        • 足球知识速成
      • Git
        • GitBook安装和常用命令
        • GitKraken免费版本
        • Git安装和配置
        • Git异常处理
        • Git Worktree使用
        • 前端工程化相关的实用git命令
      • JS
        • ESM模块导出方式对比
        • Emoji多端统一处理
        • JS发布订阅模式
        • JS性能优化
        • JS标准内置对象
        • JS链式调用原理
        • Promise介绍和使用
        • Range的使用
        • Vue+Oauth登录实现
        • Vue实现富文本插入Emoji
        • chrome扩展入门
        • es5新特性
        • es6常用特性
        • es常用片段
        • uniapp使用eslint校验代码
        • 与移动端通信
        • 优秀js库moment
        • 使用vue-socketio
        • 实现一个中间件
        • 小程序webview调试
        • 常用snippets
        • 常用正则
        • 常用的设计模式
        • 微信jssdk封装使用
        • 浏览器宏任务和微任务
        • 浏览器的5种Observer
        • 深入理解赋值、浅拷贝、深拷贝
        • 解析vue指令clickoutside源码
        • 键盘事件与KeyBoardWrapper交互
        • 高德地图常用方法封装
        • 高阶函数片段
      • Network
        • 使用Lighthouse分析前端性能
        • 前后端启用https
        • 宝塔nginx安装ngx_brotli
        • 比较gz与br加载速度
        • 浏览器https提示不安全
        • 浏览器提示HSTS
        • 简单使用tcpdump
        • 静态资源gzip优化
      • Node
        • CommonJS模块导出方式对比
        • Taro command not found 多平台解决方案
        • koa使用和API实现
        • node安装报错Unexpected-token
        • 使用nvm和nrm
        • 使用uniapp给小程序添加云函数
        • 使用verdaccio搭建本地npm仓库
        • 使用vue-cli搭建vue项目
        • 安装Node.js和npm配置
        • 编译成cjs和mjs的思路解析
        • 让你的npmPackage同时支持cjs和mjs
        • 通过GithubAction将内容部署到vps
      • Python
        • Python源管理
        • Python版本管理
        • mitmproxy抓包
        • 微信公众平台开发爬坑经历
      • Shell
        • Ubuntu安装deepin桌面环境
        • Ubuntu安装flatpak软件
        • Ubuntu安装wireshark
        • Ubuntu常见问题汇总
        • dell G3装系统无法识别第二块硬盘
        • linux下virtualbox用gho还原系统
        • mysql常用命令
        • navicat连接一键集成环境的mysql
        • nginx常用命令
        • pm2常用命令
        • virtualbox虚拟机和宿主机互相复制粘贴
        • vps内资源通过mega快传到本地
        • vps报错temporary failure in name resolution
        • vscode修改文件监控数
        • windows+linux双系统引导修复
        • zsh常用插件和命令
        • 一键搭建ChatGPT web版
        • 使用V2ray,CloudFlare Warp解锁GPT
        • 使用vscode进行java开发
        • 利用zx和SSHKey发布代码到服务器
        • 反爬虫一些方案总结和尝试
        • 安装1Panel
        • 安装Bt面板
        • 安装Ubuntu22.04后要做的事
        • 无显示器linux设置默认分辨率
        • 特别实用的shell命令
        • 解决linux安装xmind缺少依赖报错
      • Standards
        • CSS格式化之stylelint
        • CSS规范
        • HTML规范
        • JS规范
        • commit规范
        • 使用husky+commitlint规范代码提交
        • 使用semantic-release自动管理版本号
        • 命名规范
        • 图片规范
        • 版本编号规范
      • Wall
        • 科学上网-Cloudflare-Pages
        • 科学上网-Cloudflare-Warp
        • 科学上网-Geph
        • 科学上网-RackNerd
        • 科学上网-Slicehosting
        • 科学上网-Surfshark
        • 科学上网-Tor
        • 科学上网-XX-NET
        • 科学上网-heroku
        • 科学上网-shadowsock
        • 科学上网-v2ray使用
        • 科学上网-v2ray搭建
        • 科学上网-浏览器代理
        • 科学上网-让终端走代理
      • Windows
        • SourceTree破解免登录(windows版)
        • git bash交互提示符不工作
        • nexus 7 2013 wifi 刷机
        • tree命令生成文件目录
        • 利用charles抓包app
        • 安装Openssl
        • 安装msi文件报错2503和2502
        • 神器vimium使用说明
        • 自用host
        • 解决win10扩展出来的屏幕模糊
        • 解决安装Adobe Air时发生错误
    • Snippets
      • zsh
        • docker
        • extract
        • git-commit
        • git
        • mysql-macports
        • npm
        • nvm
        • pip
        • pm2
        • systemd
        • ubuntu
        • vscode
Powered by GitBook
On this page
  • 语言规范
  • 代码规范
  • 参考

Was this helpful?

  1. Docs
  2. Articles
  3. Standards

JS规范

语言规范

  1. 类型

    • 基本类型 ::: tip 字符串 ::: ::: tip 数值 ::: ::: tip 布尔类型 ::: ::: tip null ::: ::: tip undefined :::

      const foo = 1
      let bar = foo
      
      bar = 9
      
      console.log(foo, bar) // 1, 9
    • 复杂类型 ::: tip object ::: ::: tip array ::: ::: tip function :::

      const foo = [1, 2, 3]
      const bar = foo
      
      bar[0] = 9
      
      console.log(foo[0], bar[0]) // 9, 9
  2. 引用 const 和 let 都是块级作用域,var 是函数级作用域

    // 对所有引用都使用 const,不要使用 var
    const a = 1
    const b = 2
    
    // 如果引用是可变动的,则使用 let
    let count = 1
    if (count < 10) {
      count += 1
    }
  3. 对象

    // 请使用字面量值创建对象
    const a = {}
    
    // 别使用保留字作为对象的键值,这样在 IE8 下不会运行
    const a = {
      defaults: {},
      common: {}
    }
    
    // 请使用对象方法的简写方式
    const job = 'FrontEnd'
    const item = {
      job
    }
    
    // 对象属性值的简写方式要和声明式的方式分组
    const job = 'FrontEnd'
    const department = 'JDC'
    
    const item = {
      job,
      department,
      sex: 'male',
      age: 25
    }
  4. 数组

    // 请使用字面量值创建数组
    const items = []
    
    // 向数组中添加元素时,请使用 push 方法
    items.push('test')
    
    // 使用拓展运算符 ... 复制数组
    itemsCopy = [...items]
    
    // 使用数组的 map 等方法时,请使用 return 声明,如果是单一声明语句的情况,可省略 return
    [1, 2, 3].map(x => {
      const y = x + 1
      return x * y
    })
    
    [1, 2, 3].map(x => x + 1)
    
    const flat = {}
    [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
      const flatten = memo.concat(item)
      flat[index] = flatten
      return flatten
    })
    
    inbox.filter((msg) => {
      const { subject, author } = msg
      if (subject === 'Mockingbird') {
        return author === 'Harper Lee'
      }
    
      return false
    })
  5. 解构赋值

    // 当需要使用对象的多个属性时,请使用解构赋值
    function getFullName (user) {
      const { firstName, lastName } = user
    
      return `${firstName} ${lastName}`
    }
    
    function getFullName ({ firstName, lastName }) {
      return `${firstName} ${lastName}`
    }
    
    // 当需要使用数组的多个值时,请同样使用解构赋值
    const arr = [1, 2, 3, 4]
    const [first, second] = arr
    
    // 函数需要回传多个值时,请使用对象的解构,而不是数组的解构
    // 如果是数组解构,那么在调用时就需要考虑数据的顺序
    const [top, xx, xxx, left] = doSomething()
    function doSomething () {
      return { top, right, bottom, left }
    }
    
    // 此时不需要考虑数据的顺序
    const { top, left } = doSomething()
  6. 字符串

    // 字符串统一使用单引号的形式 ''
    const department = 'JDC'
    
    // 字符串太长的时候,请不要使用字符串连接符换行 \,而是使用 +
    const str = '凹凸实验室 凹凸实验室 凹凸实验室' +
    '凹凸实验室 凹凸实验室 凹凸实验室' +
    '凹凸实验室 凹凸实验室'
    
    // 程序化生成字符串时,请使用模板字符串
    const test = 'test'
    const str = `ab${test}`
  7. 函数

    // 请使用函数声明,而不是函数表达式 ''
    function foo () {
      // do something
    }
    
    // 不要在非函数代码块中声明函数
    let test
    if (isUse) {
      test = () => {
        // do something
      }
    }
    
    // 不要使用 arguments,可以选择使用 ...
    // arguments 只是一个类数组,而 ... 是一个真正的数组
    function test (...args) {
      return args.join('')
    }
    
    // 不要更改函数参数的值
    function test (opts = {}) {
      // ...
    }
  8. 原型

    // 使用 class,避免直接操作 prototype
    class Queue {
      constructor (contents = []) {
        this._queue = [...contents]
      }
    
      pop () {
        const value = this._queue[0]
        this._queue.splice(0, 1)
        return value
      }
    }
  9. 模块

    // 使用标准的 ES6 模块语法 import 和 export
    import Util from './util'
    export default Util
    
    // 更优
    import { Util } from './util'
    export default Util
    
    // 不要使用 import 的通配符 *,这样可以确保你只有一个默认的 export
    import Util from './util'
  10. 迭代器

    // 不要使用 iterators
    const numbers = [1, 2, 3, 4, 5]
    let sum = 0
    numbers.forEach(num => sum += num)
    
    // 更优
    const sum = numbers.reduce((total, num) => total + num, 0)
  11. 对象属性

    // 使用 . 来访问对象属性
    const joke = {
      name: 'haha',
      age: 28
    }
    
    const name = joke.name
  12. 变量声明

    // 请使用 const、let 关键字,避免全局命名空间的污染
    const demo = new Demo()
    
    // 将所有的 const 和 let 分组
    const b
    const d
    let a
    let c
    let e
  13. Hoisting

    // var 存在变量提升的情况,即 var 声明会被提升至该作用域的顶部,但是他们的赋值并不会
    // 匿名函数的变量名会提升,但函数内容不会
    function example () {
      console.log(anonymous)  // => undefined
    
      anonymous()
    
      var anonymous = function () {
        console.log('test')
      }
    }
    
    // 命名的函数表达式的变量名会被提升,但函数名和函数函数内容并不会
    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. 分号

    // 我们遵循 Standard 的规范,不使用分号
    const test = 'good'
    (() => {
      const str = 'hahaha'
    })()
  15. 标准特性 为了代码的可移植性和兼容性,我们应该最大化的使用标准方法,例如优先使用 string.charAt(3) 而不是 string[3]

  16. for-in 循环 推荐使用 for in 语法,但是在对对象进行操作时,容易忘了检测 hasOwnProperty(key) ,所以我们启用了 ESLint 的 guard-for-in 选项

::: warning 对数组进行 for in 的时候,顺序是不固定的 :::

代码规范

  1. 单行代码块

    // 在单行代码块中使用空格
    function foo () { return true }
    if (foo) { bar = 0 }
  2. 大括号风格 在编程过程中,大括号风格与缩进风格紧密联系,用来描述大括号相对代码块位置的方法有很多。在 JavaScript 中,主要有三种风格

    // One True Brace Style: 推荐使用
    if (foo) {
      bar()
    } else {
      baz()
    }
    
    // Stroustrup
    if (foo) {
      bar()
    }
    else {
      baz()
    }
    
    // Allman
    if (foo)
    {
      bar()
    }
    else
    {
      baz()
    }
  3. 变量命名 当命名变量时,主流分为驼峰式命名( variableName )和下划线命名( variable_name )两大阵营 ::: warning 团队约定使用驼峰式命名 :::

  4. 逗号空格 逗号前后的空格可以提高代码的可读性,团队约定在逗号后面使用空格,逗号前面不加空格

    var foo = 1, bar = 2
  5. 逗号风格 逗号分隔列表时,在 JavaScript 中主要有两种逗号风格: ::: tip 标准风格 逗号放置在当前行的末尾(推荐使用) ::: ::: tip 逗号前置风格 逗号放置在下一行的开始位置 :::

    var foo = 1,
    bar = 2
    
    var foo = ['name',
                'age']
  6. 计算属性的空格

    // 约定在对象的计算属性内,禁止使用空格
    obj['foo']
  7. 函数调用

    // 约定在函数调用时,禁止使用空格
    fn()
  8. 对象字面量的键值缩进

    // 约定对象字面量的键和值之间不能存在空格,且要求对象字面量的冒号和值之间存在一个空格
    var obj = { 'foo': 'haha' }
  9. 构造函数首字母大写

    // 约定构造函数的首字母要大小,以此来区分构造函数和普通函数
    var fooItem = new Foo()
  10. 构造函数的参数

    // 约定通过 new 调用构造函数时,使用圆括号
    var person = new Person()
  11. 链式调用 链式调用如果放在同一行,往往会造成代码的可读性差,但有些时候,短的链式调用并不会影响美观。所以本规范约定一行最多只能有四个链式调用,超过就要求换行

  12. 空行 空白行对于分离代码逻辑有帮助,但过多的空行会占据屏幕的空间,影响可读性。团队约定最大连续空行数为 2

    var a = 1
    
    
    var b = 2
  13. 变量声明

    // 约定在声明变量时,一个声明只能有一个变量
    var a
    var b
    var c
  14. 代码块空格

    // 约定代码块前要添加空格
    if (a) {
      b()
    }
    
    function a () {}
  15. 函数声明的空格

    // 约定函数括号前要加空格
    function func (x) {
      // ...
    }
  16. 操作符的空格

    // 约定操作符前后都需要添加空格
    var sum = 1 + 2

参考

PreviousHTML规范Nextcommit规范

Last updated 10 months ago

Was this helpful?

JS规范
W3C
Apple Developer