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 里可以直接寫頁面的代碼,不需要新建整體頁面
編碼規(guī)范:
前端規(guī)范
(一)HTML規(guī)約
1.【強制】HTML元素標簽一律小寫死相。
2.【強制】HTML元素都必須正確結束嗅辣。
3.【強制】不得為id、class選擇器添加類型選擇器進行限定。
4.【推薦】選擇器的嵌套層級應不大于3級胰柑，位置靠后的限定條件應盡可能精確缭黔。
5.【推薦】盡量不在HTML中直接使用STYLE。
說明：多數情況下践险，頁面中直接使用STYLE，會導致樣式不易管理吹菱、不能復用巍虫，并會使頁面結構較亂，因此不建
議在頁面中直接使用STYLE鳍刷。
6.【推薦】合理運用多種HTML標簽占遥、標簽語義化
說明：
每一種HTML標簽均有其使用場景，應該靈活的在不同場景下使用適當的標簽倾剿，例如顯示無序列表時筷频，使用ul更
加合理，而不是在任何時候前痘，僅僅使用div凛捏、a等幾種標簽；
不要使用純樣式標簽芹缔，如b(文本加粗)坯癣、font(規(guī)定字體格式)、u(下劃線文本)最欠、i(規(guī)定斜體文本)等示罗，使用css代替；
此外芝硬，標簽的合理使用蚜点，會使得頁面結構更加清楚；
(二)CSS編碼規(guī)約
1.【強制】頁面的私有樣式必須包含在頁面的私有樣式命名空間里面拌阴，私有樣式必須
全部小寫绍绘，以下劃線“_”分割單詞，盡量使用有意義的單詞命名迟赃，例如：
“meesage_title”陪拘。
2.【強制】公共樣式必須包含在公共樣式文件中，統(tǒng)一以中劃線“-”分割纤壁。
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代碼解耦宜岛，即行為與表現(xiàn)分離，嚴格保持結構（標記）功舀，
表現(xiàn)（樣式）萍倡，和行為（腳本）分離,并盡量讓這三者之間的交互保持最低限度。
13.【強制】屬性選擇器或屬性值用雙引號（“”）辟汰，而不是單引號（“）括起來列敲。
14.【強制】URI值（url()）不要使用引號。
15.【推薦】一般情況下ID不應該被用于樣式帖汞，并且ID的權重很高戴而，所以不使用ID解決
樣式的問題，而是使用class翩蘸。
正例
.content>.title{
font-size:2em;
}
反例
content>.title{
font-size:2em;
}
16.【建議】盡量少用選擇器所意。
17.【嚴禁】使用內聯(lián)樣式
說明：
對開發(fā)者來說，樣式與html分離鹿鳖，有助于后期更改一個新的樣式（也可以說新的主題扁眯，很多ui框架都是直接切
換主題的）
對瀏覽器來說，樣式文件由于是單獨文件翅帜，可以在本地建立一個緩存姻檀，有利于加快訪問網頁。
對服務器來說涝滴，如果樣式文件瀏覽器減少加載绣版，那么服務器就可以減少下載流量胶台，可以節(jié)約服務器帶寬。
(三)JavaScript編碼規(guī)
1.【強制】變量命名規(guī)范
駝峰式命名杂抽，駝峰式命名法由小寫字母開始诈唬，后續(xù)每個單詞首字母都大寫。
命名方法：小駝峰式命名法缩麸。
命名規(guī)范：前綴應當是名詞铸磅。(函數的名字前綴為動詞，以此區(qū)分變量和函數)杭朱。
命名建議：盡量在變量名字中體現(xiàn)所屬類型阅仔，如:length、count等表示數字類型弧械；而包含name八酒、title表示為字
符串類型。
正例
varmaxCount=10;
vartableTitle='LoginTable';
反例
varsetCount=10;
vargetTitle='LoginTable';
2.【強制】函數命名規(guī)范
命名方法：小駝峰式命名法刃唐。
命名規(guī)范：前綴應當為動詞羞迷。
命名建議：可使用常見動詞約定
例：是否可閱讀
functioncanRead(){
returntrue;
}
例：獲取名稱
functiongetName(){
returnthis.name;
}
3.【強制】常量命名規(guī)范
命名方法：名稱全部大寫。
命名規(guī)范：使用大寫字母和下劃線來組合命名画饥，下劃線用以分割單詞衔瓮。
例：
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.【推薦】使用模塊時避免使用變量代替的應該是鏈式語法
