通用规范[react.js]

基本原则：结构、样式、行为分离

尽量确保jsx文件只有结构及行为逻辑，样式都放到 css 样式文件里。

文件/资源命名

在项目中，使用完整单词组合命名文件，可以提高可读性。例如：SalesReasult.jsx。

省略外链资源 URL 协议部分

引入资源使用相对路径，不要指定资源所带的具体协议— http:,https（除非这两者协议都不可用），使 URL 成为相对地址，避免Mixed Content 问题。

减少标签数量

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。有时，需要通过迭代和重构来使HTML变得更少。

写注释

As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
As long as necessary（如有必要，尽量详尽）：复杂/重要逻辑书写合理详尽的注释。

命名

项目命名，全部采用小写方式，以下划线分隔。（电销：client_new）

目录命名，全部采用小写方式，以下划线分隔。有复数结构时，要采用复数命名法。（components）

jsx文件命名、组件命名，帕斯卡命名法。(SalesProcess.jsx)

Less 文件命名，全部采用小写方式，以下划线分隔。（index.less）

变量, 使用驼峰命名：

私有属性、变量和方法以下划线 _ 开头。 let _privateVari = 2;
常量, 使用全部字母大写。 let PI = 3.1415926;
boolean 类型的变量使用 is 或 has 开头。 let isXingYun = false; let hasApplyId = true;

Type

常量用const声明，变量用let，避免用var声明变量带来变量提升问题。

二元和三元操作符

操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。

let x = a ? b : c;
let y = a ?
    longButSimpleOperandB : longButSimpleOperandC;
let z = a ?
        moreComplicatedB :
        moreComplicatedC;

let x = foo.bar().
    doSomething().
    doSomethingElse();

三元操作符 ( ? : )替代逻辑不复杂 if 条件判断语句

二元操作符 ( && 和 ||)替代逻辑不复杂 if 条件判断语句。

利用二元布尔操作符短路性质, 只有在必要时才会计算到最后一项。

不要扩充内置原型

函数长度

1.建议一个函数的长度控制在 50 行以内。低耦合，高内聚原则。将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。特定算法等不可分割的逻辑允许例外。 2.不要在循环内部声明函数； 3.不要在同个作用域下声明同名变量；

组件开发规范

每个组件单独存放到一个文件里面。

提炼出公共的组件单独存放，避免重复冗余代码。

避免修改外部传入的对象。

单一原则，一个组件只做一件事。

组件的样式尽可能使用相对单位定义。

例如通过对外部font-size的设置，达到对组件整体缩放的效果；提炼出公共的颜色设置，达到对全局的颜色统一设置。

弹出类内容（如下拉框、Tips等）要考虑是否会溢出祖先容器造成出现滚动条或者被截断问题。

组件更新必须符合向下兼容。

样式规范

Less 和 Sass

命名，less中的变量、函数以中划线分隔命名

Less，每个模块应该有一个单独的less, 然后每个最外层的父类 className 应该写在第一位，所有子Node的样式都写在里面，这样是为了避免命名冲突。

属性声明顺序：（减少浏览器reflow（回流），提升浏览器渲染dom的性能）

1.定位属性：position display float left top right bottom overflow clear z-index

2.自身属性：width height padding border margin background

3.文字样式：font-family font-size font-style font-weight font-varient color

4.文本属性text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

操作符 为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。

margin: 10px 0 (@variable * 2) 10px

嵌套避免不必要的嵌套。因为虽然可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

LESS嵌套最多不能超过5层，CSS选择器不要超过3层。

代码组织 代码按一下顺序组织：

@import
变量声明
样式声明 模块化 每个模块必须是一个独立的样式文件，文件名与模块名一致；模块样式的选择器必须以模块名开头以作范围约定；

选择器任何超过3级的选择器，需要思考是否必要，是否有无歧义的，能唯一命中的更简短的写法。

避免使用通用选择器
避免使用标签或 class 选择器限制 id 选择器
避免使用标签限制 class 选择器
避免使用多层标签选择器，使用 class 选择器替换，减少css查找
避免使用子选择器

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

清除浮动，建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 !important ，除公共样式之外，在业务代码中尽量不能使用 !important

前端开发规范总结-react.js