记一次编写 web 开发规范过程

• [TOC]

• 安裝 ESLint

• ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码

• React 书写规范

• 1. 一个文件声明一个组件，尽管可以在一个文件中声明多个 React 组件，但是最好不要这样做；推荐一个文件声明一个 React 组件，并只导出一个组件；
• 1. 使用 JSX 表达式： 不要使用 React.createElement 的写法；
• 1. 函数组件和 class 类组件的使用场景： 如果定义的组件不需要 state，建议将组件定义成函数组件，否则定义成 class 类组件。
• 1. 组件名称和定义该组件的文件名称建议要保持一致；
• 1. 组件名称： 应该推荐使用大驼峰命名;
• 1. 属性名称： React DOM 使用小驼峰命令来定义属性的名称，而不使用 HTML 属性名称的命名约定；
• 1. style 样式属性： 采用小驼峰命名属性的 JavaScript 对象；
• 1. 不要再 render 中寫方法並使用；
• 1. 組件中使用通過 mapStateToProps 關連 models 中的方法或變量時，如果不再使用所關連的方法或者變量要及時刪除；

• JSX 写法注意

• 1. 当标签没有子元素的时候，始终使用自闭合的标签 如：；
• 1. 在自闭标签之前留一个空格，如：；
• 1. 当组件跨行时，要用括号包裹 JSX 标签；
• 1. 如果组件的属性可以放在一行（一个属性时）就保持在当前一行中，当大于一行时多行属性采用缩进并且关闭标签要另起一行；
• 1. key 属性设置：当元素没有确定 id 的时候，万不得已才可以使用元素索引 index 作为 key；

• HTML 书写规范

• 1. 注意標簽格式縮進 使用 VSCode 開發較多，一般設置為 2，在開發新項目中會在項目中添加 VSCode config（不要輕易修改，如果要修改請和團隊商討）。
• 1. 结构、表现、行为三者分离，避免内联，使用 link 将 CSS 文件引入，并置于 head 中。使用 script 将 js 文件引入，并置于 body 底部。
• 1. 内容类型决定使用的语义标签。
• 1. 加强“资源型”内容的可访问性和可用性，如：给 img 添加 alt 属性。
• 1. 加强“不可见”内容的可访问性，如：背景图上的文字应该同时写在 HTML 中，并使用 CSS 使其不可见，有利于搜索引擎抓取你的内容，也可以在 CSS 失效的情况下看到内容。

• CSS 书写规范

• 1. 根据新建样式的适用范围暂时分为二级：公共样式/组件样式.尽量通过继承和层叠重用已有样式。不要轻易改动公共样式 CSS。改动后，要经过全面测试。
• 1. 多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。
• 1. 使用 z-index 属性尽量 z-index 的值不要超过 150（通用组的除外），页面中的元素内容的 z-index 不能超过10（提示框等模块除外但维持在 150 以下），不允许直接使用 999~9999 之间大值。
• 1. 尽量避免使用 CSS Hack，Web 项目现在以 Chrome 适配为标准，其次是 Safari ，由于一些浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的 Hack，并且注释标明。
• 1. 现在的项目 UI 都是在 Zeplin 上的，使用 Zeplin 样式时不要直接复制，而是提取可用的样式进行书写，有些样式已经在公共样式中进行统一配置。
• 1. 不要在标签上直接写样式。
• 1. 不推荐在 CSS 中使用 expression（大概意思是可以在样式中书写 js 代码）
• 1. 非特殊情况不准在 CSS 中使用 @import
• 1. 非必要情况不准在 CSS 中使用 !important，而是使用选择器。
• 1. 不推荐在 CSS 中使用 * 选择符
• 1. 不要将 CSS 样式写为单行。
• 1. 避免使用行内（inline）样式
• 1. 避免使用 * 设置 {margin: 0; padding: 0;}
• 1. 使用 after 或 overflow 的方式清浮动
• 1. 减少使用影响性能的属性，position:absolute/float:left 如这些定位或浮动属性.减少在 CSS 中使用滤镜表达式和图片 repeat,尤其在 body 当中,渲染性能极差, 如果需要用 repeat 的话，图片的宽或高不能少于 8px。

• JavaScript 书写规范

• 1. 類型和變量
• • 代碼中保證：變量顯式聲明作用域
• • 代碼中盡量保證：對所有的引用使用 const， 不要使用 var。對於需要使用可變動的引用， 使用 let 代替 var
• • 代碼中保證：將所有的 const 和 let 分組
• 1. 變量的解構賦值
• • 代碼中保證：使用解構存取和使用多屬性對象
• • 代碼中保證：將數組成員賦值給變量時，使用數組解析
• • 代碼中保證：需要回傳多個值時使用對象解構
• 1. String 部分
• • 代碼中保證：長度超過 80 的字符串應該使用字符串連接換行
• • 代碼中保證：構建字符串時， 使用字符串模板而不是字符串連接
• • 代碼中保證：數組遍歷採用 for/of, 對象遍歷採用 Object.keys/values/entries
• 1. 數組及屬性
• • 代碼中保證：使用擴展運算符 ... 複製數組
• • 代碼中保證：使用 . 來訪問對象的屬性， 只有屬性是動態的時候使用 [ ]
• 1. 對象
• • 代碼中保證： 单行定义的对象，最后一个成员不以逗号结尾，單行對象個數小於等於 3 個
• • 代碼中保證： 多行定义的对象，最后一个成员以逗号结尾
• 1. 模塊
• • 代碼中保證：代碼中使用 ES6 標準的模塊（import/export）方式， 而不使用非標準的模塊加載器
• • 代碼中保證：不使用通配符 * 的 import
• • 代碼中保證：不從 import 中直接 export
• • 代碼中保證：文件只輸出一個類時文件名必須和類名完全保持一致
• 1. 箭頭函數
• • 代碼中保證：不保存this的引用， 使用箭頭函數或 Function.bind
• • 代碼中保證：當必須使用函數表達式（或傳遞一個匿名函數）時， 使用箭頭函數
• • 代碼中保證：一個函數適用一行寫出並且只有一個參數時省略花括號、圓括號和 return
• 1. 代碼風格
• • 代碼中保證：導出的默認函數使用駝峰命名、文件名與函數完全一致
• • 代碼中保證：導出單例、函數庫、空對象時使用帕斯卡式命名
• • 代碼中保證：本地的調試 log 和 debugger 在 push 代碼的時候已經確認刪除，保證代碼的整潔，以及控制台的整潔
• • 代碼中保證：书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据项目需求原生开发, 以避免网上 down 下来的代码造成的代码污染（沉冗代码 || 与现有代码冲突 || …）
• • 代碼中保證：命名语义化, 不允许使用汉字拼音，应该使用英文单词，在适当的时候可以使用缩写
• • 代碼中保證：代码结构明了, 加适量注释（注意當代碼修改時同時修改注釋）提高函数重用率
• • 代碼中保證：任何时候都应该使用严格模式的条件判断 ===
• 1. 存取器
• • 代碼中保證：屬性的存取函數不是必須的， 需要存儲函數時使用 get 方法和 set 方法。 如果屬性是布爾值， 存取函數使用 isVal() 或 hasVal()
• • 代碼中保證：創建 get() 和 set() 函數保持一致
• 1. 函數部分
• • 代碼中保證： 不使用 arguments, 選擇用 rest 語法 ... 替代
• • 代碼中保證： 使用函數聲明代替函數表達式
• • 代碼中保證： 直接給函數的參數指定默認值， 不使用一個變化的函數參數
• • 代碼中保證： 直接給函數參數賦值時， 會避免副作用
• • 代碼中保證： 立即执行函数可以写成箭头函数的形式
• • 代碼中保證： 使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this