web前端部分知识点总结

78 阅读 0 评论 52 点赞

我是靠谱客的博主背后八宝粥，最近开发中收集的这篇文章主要介绍web前端部分知识点总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. px、em与rem的区别？
px（像素）
px这个单位用的非常多，我们大多数人都很熟悉了吧。px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。
px是固定长度单位，不随其它元素的变化而变化
<div class="center"> 用px单位设置元素的宽高和文本的字体大小</div>
.center{border:1px solid red;width:200px;height:100px;font-size:30px;}
em（相对长度单位）
em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，它是相对于当前对象内文本的字体尺寸；一般浏览器默认1em=16px，通过设置font-size大小来代表如：16px*0.625=10px，其则代表1em=10px，直接上代码(注释的样式为浏览器默认（1em=16px）的长宽)
em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
<div class="embox"><span> 用em相对长度单位来设置文本的字体大小</span></div>
//样式 .embox { border:1px solid red; width:200px; height:100px; font-size:30px; } .em { font-size:0.5em; } /*30px x 0.5 = 15px*/
rem（css3新增的相对长度单位）
rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。
rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化
<div class='rembox'> 用rem相对长度单位来设置文本的字体大小</span></div>
//样式 .rembox { border:1px solid red; width:300px; height:100px; font-size:30px; } .rem { font-size:0.5rem; } /*16px x 0.5 = 8px*/ px用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位一般来说：1em = 1rem = 16 px
2. css3新增特性?
border-radius 圆角
box-shadow 阴影
text-shadow 文字特效
text-decoration 文字渲染
gradient 线性渐变
transform 旋转 scale 缩放 translate定位 skew动画 animation 动画
3. 页面中实现一个圆
<div class='center'></div>
.center{ width:200px; height: 200px; border-radius：50%; background-color:red; }
4.常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
5. js中display none 与 visibility: hidden不同?
(1)、作用不同
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即5261在网页中不占任何的位置。
(2)、使用后HTML元素有所不同
visibility:hidden，使用该属性4102后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它1653仍具有高度、宽度等属性值。
display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
(3)、定义专不同
visibility 属性指定一个元素是否是可见的。
display这个属属性用于定义建立布局时元素生成的显示框类型。
6. js的同源策略?
我们都知道JavaScript可以操作web文档的内容，试想，如果不对这一点加以限制，那么JS可以做的事情就太多了，危险性也太高，所以就针对它可以操作哪些文档的内容有了一个限制，这个限制就是同源策略。
同源策略在什么情况下会起作用呢？当web页面使用多个元素或者打开其他浏览器窗口的时候，这一策略就会起作用。
同源策略的含义：脚本只能读取和所属文档来源相同的窗口和文档的属性。
这里就涉及到了一个浏览器如何判断两者是否同源已经如何判断脚本来源的问题。
注意一点：脚本本身的来源并不作为判断是否同源的依据，而是将脚本所属文档的来源作为判断依据。
1. 判断脚本来源
例如：文档A中通过script的src引用了一个外部脚本，这个脚本时google提供的，也是从google的主机上加载到文档A中的，那么这个脚本的所属文档是谁呢，答案是文档A。
2. 判断是否同源
理解了脚本来源，接着理解怎么判断是否同源：如果两个文档在协议、主机以及载入文档的URL端口这三点中有一点不同，就认为他们不同源。
同源策略固然在安全性上有了很大提高，但这种做法属于“宁可错杀三千，不可放过一个”。如果一个多域名站点需要在不同的子域之间共享属性，同源策略就会变得很烦人了。以下介绍三种实现“不严格的同源策略”的方法：
1. 使用Document对象的domain属性
默认情况下，属性domain存放的是载入文档的服务器的主机名。这一属性是可写的。
如果两个窗口包含的脚本把domain设置为了相同的值，那么这两个窗口就不再受同源策略的约束，它们就可以相互读取对方的属性。
2. 跨域资源共享（Cross-Origin Resource Sharing）
这种方法用新的“Origin：”请求头和新的响应头“Access-Control-Allow-Origin”来扩展HTTP。
3. 跨文档消息（Cross-Document Messaging）
允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，不管来源是否相同。
调用window对象的postMessage()方法，可以异步传递消息事件到窗口的文档里。这种方法仅仅是一种消息传递技术。
7. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解？
(1)、bind
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：bind(type,[data],function(eventObject))；
特点：
　　(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。
　　(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。
实例如下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3之后】
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：live(type, [data], fn);
特点：
(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。
(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。
(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；
实例如下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定义和用法：将监听事件绑定在就近的父级元素上
语法：delegate(selector,type,[data],fn)
特点：
　　(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。
　　(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。
实例如下：
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});
(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】
定义和用法：将监听事件绑定到指定元素上。
语法：on(type,[selector],[data],fn)
实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。
说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。
总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()
8. 小程序的wxss和css有哪些不一样的地方?
尺寸单位rpx
使用@import标识符来导入外联样式，@import后需要导入外联样式的相对路径，例如
/** index.wxss **/
@import './base.wxss';

.container{
color: red;
}
1
2
3
9. vue和jQuery的区别？
jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
10. vue中v-if和v-for的优先级?
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中,
所以，不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。
11.vue组件中data为什么必须是一个函数？
因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。