es6 字符串 對象 拓展 及 less 的語法

　　es6 字符串

　　對頁面渲染的幾種方式：字符串拼接　　文檔碎片　　dom操做　　模板　　

　　es6 又提供了一種新的對頁面渲染的方式：字符串模板（高級版的字符串拼接）

　　　　模板字符串標識符是 反引號 （ `` ） 英文狀態下 tab 上面的鍵，字符串直接寫，遇到變量寫在 ${} 內；

　　　　var name="hello world";

　　　　案例：var sd=` 這種寫法真好 ${name} `;　　// 這種寫法還會把空格保留下來 ，可是當模板用的話，注意： js 語句 在 `` 中並不友好

　　es6 對象

　　es6 容許將變量和函數做爲對象的屬性和方法

　　案例：

　　　　var name="zhangsan";

　　　　function fn(){

　　　　　　console.log(123)

　　　　}

　　　　var obj={

　　　　　　name:name,    // 可省略爲 name 　　第一個name 屬性，第二個name 變量

　　　　　　fn:fn,　　　　  // 可省略爲 fn　　　　第一個 fn 屬性，第二個是 fn 函數

　　　　　　[name]:name　// 第一個[name] 表明了 name 變量，第二個name 表明了 name 變量

　　　　}

　　　　console.log(obj.name);　　// zhangsan　　　

　　　　obj.fn();　　　　// 123  

　　以上案例的注意點：

　　1. 當變量名和屬性名相同的時候才能省略

　　2. 將一個變量值寫成對象的屬性，必定要加 [] ， 若是不加 [] 屬性，就是 name ，加上 [name] 就是 name 變量的屬性值 

　　對象的兩個關鍵字　　set　　get

　　get 表明取值　　set 表明存值

　　案例：

　　　　var obj={

　　　　　　haha:"zhangsan",

　　　　　　get name(){　　　　// get name 是一個取值的方法 名字必須是 name ，不能隨便取名　　

　　　　　　　　return name　　// get 關鍵字 當 obj.name 是時候就會觸發這個函數，可是的是什麼，name 的屬性就是什麼

　　　　　　},

　　　　　　set name(val){　　　// set name 是一個存值的方法 名字必須是 name，不能隨便取名 

　　　　　　　　name=val;　　　// val  當給 name 賦值的時候，就會觸發這個方法 

　　　　　　　　return name;

　　　　　　}

　　　　}

　　　　console.log(obj.name); 　　// 會觸發 get name

　　　　obj.name="lisi";　　// 會觸發 set name 

　　　　console.log(obj.name);

　　

　　less 

　　變量：

　　　　使用 @ 符 定義變量，用 : 賦值

　　　　　　案例：@w:100px;

　　　　定義類：案例

　　　　　　　　@.po:red;　　// 前者變量　　後者類名

　　　　　　　　@{.po}{　　// 這裏的 po 就表明了 red 這個類

 

　　　　　　　　}

 

　　混入：將一個選擇器混到另外一個選擇器中

　　　　案例：

　　　　　　.po{

　　　　　　　　position:absolute;

　　　　　　}

　　　　　　.p{

　　　　　　　　.po;　　　　// 在每一個 less 語法後面都要加 ; 號，　　引入方式同名便可

　　　　　　　　left:10px;

　　　　　　}

　　　　　　另外一種寫法

　　　　　　.po(){

　　　　　　　　position:absolute;

　　　　　　}

　　　　　　div{

　　　　　　　　.po()

　　　　　　}

　　　　　　一個是帶（） 一個是不帶（） 這兩種寫法的區別是什麼？

　　　　　　　　帶（） 表明編譯後的 css樣式，不會在定義的時候顯示出來，只會在使用的時候顯示出來

　　　　　　　　不帶（） 表明編譯後的 css樣式，會在定義的時候顯示出來，只會在使用的時候顯示出來

　　嵌套：

　　　　主要是：css 後代，子代，僞類

　　　　less 實現 後代寫法

　　　　　　div{

　　　　　　　　p{

　　　　　　

　　　　　　　　}

　　　　　　}

　　　　less 實現 子代寫法

　　　　　　div{

　　　　　　　　>p{

 

　　　　　　　　}

　　　　　　}

　　　　less 實現僞類寫法

　　　　　　div{

　　　　　　　　&:hover{　　　　// & 關鍵字，是一個鏈接符，表明當前父類的選擇器 

 

　　　　　　　　}

　　　　　　}

　　函數的默認值；

　　　　.div($w:100px,$h:100px,$bg:red){　　// 默認值，形參默認值寫法 ，能夠在調用的時候不傳值，若是沒有默認值的話，在調用的時候，必須輸入值，不然就會報錯

　　　　　　width:$w;

　　　　　　height:$h;

　　　　　　background:$bg;

　　　　}

　　導入：@import "路徑"　　引入其餘的 less 文件

　　循環：是迭代循環，函數內部調用函數自己　還須要使用的函數 when()

　　案例：

　　　　.loop(@n) when(@n>0){　　//使用遞歸的方法進行循環，這種寫法叫迭代　　when 做爲條件判斷

　　　　　　width:(100px*@n);

　　　　　　.loop((@n)-1);　　　　// 若是咱們對變量使用()的話，他會認爲變量是 n-1 就會報錯，由於沒有這個變量，因此咱們使用 () 括起來；

　　　　}

　　　　div{

　　　　　　.loop(5)

　　　　}

　　繼承：extend 讓一個選擇器去繼承另外一個選擇器，就是讓咱們實現 並級選擇器

　　爲何使用並級選擇器；當咱們裏面的樣式相同的時候，若是咱們進行 複製，粘貼操做的話，無疑是增長了咱們的代碼量；使用並級的話能夠減小咱們的代碼量（但也減不了多少行）

　　　　寫法：

　　　　　　html 結構

　　　　　　<div class="cla">

　　　　　　　　<div class="dd"></div>

　　　　　　</div>

　　　　　　.div{　　　　// 這個 div  咱們實現一個上下左右居中的效果

　　　　　　　　position:absolute;

　　　　　　　　top:0;

　　　　　　　　left:0;

　　　　　　　　right:0;

　　　　　　　　bottom:0;

　　　　　　　　margin:auto;

　　　　　　　　width:200px;

　　　　　　　　height:200px;

　　　　　　　　background:pink;

　　　　　　}

　　　　extend 的兩種引入方式

　　　　第一種：

　　　　　　.cla{

　　　　　　　　width:400px;

　　　　　　　　height:400px;

　　　　　　　　position:relative;

　　　　　　　　background:green;

　　　　　　　　.dd:extend(.div){}　　// 這個代碼塊裏，就繼承了 .div 定義的代碼

　　　　　　}

　　　　第二種：

　　　　　　.cla{

　　　　　　　　width:400px;

　　　　　　　　height:400px;

　　　　　　　　position:relative;

　　　　　　　　background:green;

　　　　　　　　.dd{

　　　　　　　　　　&:extend(.div all);　　　　// 這種寫法是和第一種寫法同樣的效果　　all 表明繼承了跟 .dd 相關的全部選擇器

　　　　　　　　}

　　　　　　}