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.【推荐】使用模块时避免使用变量代替的应该是链式语法
