react 开发实战

CSS:
选择器用法:
.类名 //类选择器

id名 //id 选择器

.类名 元素名 //后代选择器,包含子元素和子元素的子元素
.类名>元素名 //子元素选择器,只包含子元素
&类名 //夫选择器,选择 &+类名 的全部元素

Less:
变量:
@width: 10px;
@height: @width + 10px;

header {

width: @width;
height: @height;
}

混合:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

menu a {

color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}

嵌套:

header {

color: black;
}

header .navigation {

font-size: 12px;
}

header .logo {

width: 300px;
}
可改写为:

header {

color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

CSS:

设置一个元素覆盖在另一个元素之上:
z-index:-1;

设置元素相对于父视图水平居中:
margin: auto;

设置元素相对于父视图垂直居中:
首先给父视图一个固定高度:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
子视图设置居中:
{
position: relative; /设置position属性/
top: 50%; /相对于父视图偏移父视图高度的 50%/
transform: translateY(-50%);/相对于自己的高度向上偏移50%/
}

js:

html:
组件的首字母必须大写,否则会不显示

其他:
index.js 是每个文件夹默认的入口文件
index.js 里可以直接写页面的代码,不需要新建整体页面

编码规范:
前端规范
(一)HTML规约
1.【强制】HTML元素标签一律小写。
2.【强制】HTML元素都必须正确结束。
3.【强制】不得为id、class选择器添加类型选择器进行限定。
4.【推荐】选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。
5.【推荐】尽量不在HTML中直接使用STYLE。
说明:多数情况下,页面中直接使用STYLE,会导致样式不易管理、不能复用,并会使页面结构较乱,因此不建
议在页面中直接使用STYLE。
6.【推荐】合理运用多种HTML标签、标签语义化
说明:
每一种HTML标签均有其使用场景,应该灵活的在不同场景下使用适当的标签,例如显示无序列表时,使用ul更
加合理,而不是在任何时候,仅仅使用div、a等几种标签;
不要使用纯样式标签,如b(文本加粗)、font(规定字体格式)、u(下划线文本)、i(规定斜体文本)等,使用css代替;
此外,标签的合理使用,会使得页面结构更加清楚;
(二)CSS编码规约
1.【强制】页面的私有样式必须包含在页面的私有样式命名空间里面,私有样式必须
全部小写,以下划线“_”分割单词,尽量使用有意义的单词命名,例如:
“meesage_title”。
2.【强制】公共样式必须包含在公共样式文件中,统一以中划线“-”分割。
3.【推荐】属性书写顺序:
按功能进行分组,并以FormattingModel(布局方式、位置)>BoxModel(尺寸)>Typographic(文本
相关)>Visual(视觉效果)的顺序书写,以提高代码可读性。
FormattingModel相关属性包括:position/top/right/bottom/left/float/display/overflow等
BoxModel相关属性包括:border/margin/padding/width/height等
Typographic相关属性包括:font/line-height/text-align/word-wrap等
Visual相关属性包括:background/color/transition/list-style等
4.【强制】0和单位,省略0后面的单位,省略0开头小数点前面的0。
.test{
margin:0;
padding:0;
font-size:.8em;
}
5.【强制】长度为0时须省略单位。(也只有长度单位可省)。
正例:body{padding:05px;}//
反例:body{padding:0px5px;}//
6.【强制】RGB颜色值必须使用十六进制,全小写形式。不允许使用rgb()。带有alpha
的颜色信息可以使用rgba()。
7.【强制】颜色值可以缩写时,必须使用缩写形式。
正例:.success{background-color:#aca;}//
反例:.success{background-color:#aaccaa;}//
8.【强制】最好使用CSS预处理器,比如SCSS.
9.【强制】保持你的CSS选择器简短。
10.【强制】CSSclass命名时应该描述内容,而不是外观。
正例:class=“danger”
反例:class=“red“
11.【强制】声明完结,所有声明都要用“;”结尾。
正例
.test{
display:block;
height:100px;
}
反例
.test{
display:block;
height:100px
}
12.【强制】将您的样式与HTML代码解耦,即行为与表现分离,严格保持结构(标记),
表现(样式),和行为(脚本)分离,并尽量让这三者之间的交互保持最低限度。
13.【强制】属性选择器或属性值用双引号(“”),而不是单引号(“)括起来。
14.【强制】URI值(url())不要使用引号。
15.【推荐】一般情况下ID不应该被用于样式,并且ID的权重很高,所以不使用ID解决
样式的问题,而是使用class。
正例
.content>.title{
font-size:2em;
}
反例

content>.title{

font-size:2em;
}
16.【建议】尽量少用选择器。
17.【严禁】使用内联样式
说明:
对开发者来说,样式与html分离,有助于后期更改一个新的样式(也可以说新的主题,很多ui框架都是直接切
换主题的)
对浏览器来说,样式文件由于是单独文件,可以在本地建立一个缓存,有利于加快访问网页。
对服务器来说,如果样式文件浏览器减少加载,那么服务器就可以减少下载流量,可以节约服务器带宽。
(三)JavaScript编码规
1.【强制】变量命名规范
驼峰式命名,驼峰式命名法由小写字母开始,后续每个单词首字母都大写。
命名方法:小驼峰式命名法。
命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)。
命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字
符串类型。
正例
varmaxCount=10;
vartableTitle='LoginTable';
反例
varsetCount=10;
vargetTitle='LoginTable';
2.【强制】函数命名规范
命名方法:小驼峰式命名法。
命名规范:前缀应当为动词。
命名建议:可使用常见动词约定
例:是否可阅读
functioncanRead(){
returntrue;
}
例:获取名称
functiongetName(){
returnthis.name;
}
3.【强制】常量命名规范
命名方法:名称全部大写。
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词。
例:
varMAX_COUNT=10;
varURL='http://www.baidu.com';
4.【强制】使用外部服务(针对Angular项目)
命名方法:下划线开头,小写字母,下划线组合。
constructor(private_http:HttpService){}
编码时一定注意写好注释,尤其JS,做到主要代码、方法、参数的行行注释说明,便于其他同事了解你做此功能
的思路,避免代码的冗余,造成性能问题,尽量做到高内聚低耦合。
//单行注释
/
*
*函数说明
*@paramid{string}:查询主键
*@returnvoid
*@authorzhangyi2018-12-19
*/
5.【强制】单一职责,一个文件只定义一个组件。
6.【强制】给独立子模块使用唯一的命名。
7.【推荐】用一个命名函数而不是通过一个匿名函数作为回调函数。
8.【推荐】使用模块时避免使用变量代替的应该是链式语法

推荐阅读更多精彩内容