Less⼊门以及⼀些前端⾯试题
css变量Less⼊门以及⼀些前端⾯试题
Less是什么？
Less （Leaner Style Sheets 的缩写） 是⼀门向后兼容的 CSS 扩展语⾔。这⾥呈现的是 Less 的官⽅⽂档（中⽂版），包含了 Less 语⾔以及利⽤ JavaScript 开发的⽤于将 Less 样式转换成 CSS 样式的 Less.js ⼯具。
因为 Less 和 CSS ⾮常像，因此很容易学习。⽽且 Less 仅对 CSS 语⾔增加了少许⽅便的扩展，这就是 Less 如此易学的原因之⼀。如何安装？
对于初学者来说，不会⽤node来安装，可以直接在Visual Studio Code编辑器⾥下载Easy LESS插件。
装好了插件我们就可以写less代码了（当我们再Visual Studio Code装好插件时，保存时会⾃动⽣成⼀个css⽂件）
less的使⽤⽅法如图：
less变量赋值
@Color : blue;
@backgroundColor : pink;
.box{
color: @Color;
background - color: @backgroundColor;
}
.box1{
color: @Color;
background - color: @backgroundColor;
}
.box2{
color: @Color;
background - color: @backgroundColor;
}
.box3{
color: @Color;
background - color: @backgroundColor;
}
.box4{
color: @Color;
background - color: @backgroundColor;
}
当我们编写css样式的时候，如果需要⼤篇幅的使⽤相同的样式，这个时候我们就可以利⽤less的声明
变量的⽅式来赋值，再将这个变量当做样式的值。⽽且当我们需要更改样式时，也只需要改变赋值的变量的值即可。！注意：声明变量时前⾯⼀定要加@符号！
less封装函数
less还可以像js⼀样的来封装函数，需要时可以直接调⽤。
.borderRadius(@px){
border - radius : @px;
}
.box5{
.borderRadius(10px)
}
less与sass的异同
相同点：
sass和less都是Css的预处理语⾔，他们引⼊了mixins，参数，嵌套规则，运算，颜⾊，名字空间，作⽤域，JavaScript赋值等加快了css开发效率，当然这两者都可以配合gulp和webpack等前端构建⼯具使⽤。
差异：
1. less定义变量⽤“@”，saxx⽤“$”
/*less*/
@width：100px;
.box{
width:@width;
}
/*sass*/
$变量名：值
$width：100px;
.box{
width:$width;
}
如果变量包含字符串则写在 #{}之中
$c:color;
.box{
border-#{$c}:red;
}
2. 处理⽅式不同
Less和Sass的主要不同就是他们的实现⽅式。
Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
⾯试题
原⽣js⼊⼝函数(load)和jq的⼊⼝函数(( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) ，(document).ready(function () {})，(document).ready(function())，(function () {}))有什么区别？
①执⾏时间不⼀样；原⽣js必须要等到页⾯上包括图⽚的所有元素加载完成之后才能执⾏；
jq是DOM结构绘制完毕后就会执⾏。
②编写个数不同；原⽣js不能同时写多个，如果写多个只会执⾏⼀个；
jq可以写多个，并且都可以执⾏。
③jq有简写，原⽣js不能简写。
ajax的优缺点：
优点：
①不⽤刷新就能更新数据（即局部更新）；
②异步与服务器通信；
③前端和后端负载平衡；
④基于标准被⼴泛⽀持；
⑤界⾯与应⽤分离；
缺点：
①使浏览器的back(回退)和history(历史)功能失效；
②因为跨域，可能存在安全问题；
③对搜索引擎⽀持较弱；
④对移动端⽀持较差。
⑤客户端代码冗余。
闭包是什么，有什么缺点？
闭包：⼀个函数内部函数在作⽤域外部被访问，即将函数内部与函数外部建⽴关系的桥梁。
优点：
①避免造成全局污染，
②函数外部能够访问到函数内部的变量
缺点：
使⽤过多的闭包，可能会造成内存泄漏。！！闭包本⾝不是造成内存泄漏的原因。
说说你对this的理解?
this是⼀个关键字，它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。
①作为纯粹的函数调⽤，this指向全局对象
②作为对象的⽅法调⽤，this指向调⽤对象
③作为构造函数被调⽤，this指向新的对象（new会改变this的指向）
④作为箭头函数被调⽤，this指向他外层⽗级作⽤域上下⽂。（即⽗级的运⾏环境）
事件委托原理，以及事件委托的好处？
事件委托：利⽤浏览器的冒泡机制，将⼦级元素的事件函数编写在⽗级元素上，以此实现来⽤⽗级管理⼦级集合的事件。优点：
①可以⼤量节省内存占⽤，减少事件注册。
②新增⼦元素不需要再次绑定事件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。