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 相关的所有选择器

　　　　　　　　}

　　　　　　}