... .。前端规范整理( 三 )。" />

江苏龙网

  1. 主页 > 生活百科 > >

前端规范整理( 三 )

前端


推荐：
<div class="modulename"><div class="modulename_info"><div class="modulename_son"></div><div class="modulename_son"><div class="modulename_son_user"><img src=https://www.isolves.com/it/cxkf/bk/2021-12-02/"" >

...
...
...
模块命名
全站公共模块：以 mod_ 开头
<div class="mod_yours"></div>业务公共模块：以 业务名_mod_ 开头
<div class="paipai_mod_yours"></div>常用命名推荐
注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
<div class="ad"></div>这种广告的英文或拼音类名不应该出现
另外，敏感不和谐字眼也不应该出现，如：
<div class="fuck"></div><div class="jer"></div><div class="sm"></div><div class="gcd"></div><div class="ass"></div><div class="KMT"></div>...JS规范React&JSX 书写规范
基本规则
命名规范
如果使用 JavaScript，则文件扩展名为 .js；如果使用 TypeScript，则文件扩展名为 .tsx
如果是组件文件，则使用 PascalCase，如 MyComponent.js
如果组件是一个目录，则组件主入口命名为 index，如 index.js
React 组件使用 PascalCase，组件实例使用 CamelCase，eslint: react/jsx-pascal-case
// bad import reservationCard from './ReservationCard'// good import ReservationCard from './ReservationCard'// bad const ReservationItem = <ReservationCard />// good const reservationItem = <ReservationCard />对齐
遵循以下JSX语法的对齐风格，eslint: react/jsx-closing-bracket-location
// bad <Foo superLongParam='bar'anotherSuperLongParam='baz' /> // good <FoosuperLongParam='bar'anotherSuperLongParam='baz'/> // if props fit in one line then keep it on the same line <Foo bar='bar' />// children get indented normally<FoosuperLongParam='bar'anotherSuperLongParam='baz'><Quux /></Foo> // bad{showButton &&<Button />}// bad {showButton &&<Button />} // good{showButton && (<Button />)}// good {showButton && <Button />}空格
自闭合的标签前要加一个空格，eslint: no-multi-spaces, react/jsx-tag-spacing
// bad<Foo/> // bad <Foo/>// good<Foo />不要在 JSX 的花括号里边加空格，eslint: react/jsx-curly-spacing
// bad<Foo bar={ baz } />// good<Foo bar={baz} />引号
JSX 属性要使用单引号，与其他普通 JS 保持一致
// bad<Foo bar="bar" />// good<Foo bar='bar' /> // bad <Foo style={{ left: "20px" }} />// good <Foo style={{ left: '20px' }} />属性
属性名使用 CamelCase
// bad <FooUserName='hello'phone_number={12345678} />// good <FoouserName='hello'phoneNumber={12345678}/>当属性值为true时可以省略，eslint:react/jsx-boolean-value
// bad <Foohidden={true}/>// good <Foohidden/>// good <Foo hidden />避免使用数组的索引作为 key 属性值, 建议使用稳定的ID，eslint:react/no-array-index-key
原因：不使用稳定的 ID 会对性能产生副作用并且组件状态会出问题，是一种反模式
为所有的非必需属性定义使用 defaultProps 明确的默认值
Refs
避免使用字符串引用，请使用回调函数作为引用，eslint: react/no-string-refs
// bad <Fooref='myRef' />// good <Fooref={ref => { this.myRef = ref }} />


推荐阅读


上一篇：requests 让接口测试如此简单

下一篇：6个实用的 Python 自动化脚本，你学会了吗？