关于前端:记一次编写-web-开发规范过程

安裝 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. 当标签没有子元素的时候，始终应用自闭合的标签 如：<Component />；

1. 在自闭标签之前留一个空格，如：<Component />；

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