网易面经（1）

最新推荐文章于 2021-04-18 19:56:33 发布

whi_sper-

最新推荐文章于 2021-04-18 19:56:33 发布

阅读量168

点赞数

分类专栏：面经整理文章标签：前端面经

本文链接：https://blog.csdn.net/weixin_41688305/article/details/97401094

版权

面经整理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、网易面经（1）

1. jsonP原理

JSONP，JSON with Padding

因为Ajax只能请求同一个域下的数据和资源，而在实际开发中有很多跨域请求的需要，这是就可以使用jsonP技术，jsonP技术利用 script 标签可以跨域链接资源的特性。（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。

为了便于客户端使用数据，产生了JSONP技术，该协议的一个要点是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据。下面举个例子：

<script type="text/javascript">
	// 得到航班信息查询结果后的回调函数
	var flightHandler = function(data){
		alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets+ ' 张。');
	};
	// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
	var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
	// 创建script标签，设置其属性
	var script = document.createElement('script');
	script.setAttribute('src', url);
	// 把script标签加入head，此时调用开始
	document.getElementsByTagName('head')[0].appendChild(script);
</script>

jQuery怎么实现jsonP调用?

jsonP和ajax原理完全不一样，但jQuery把他们封装成了同一个函数 $.ajax()

$.ajax({
  type: 'get',
  async: false,
  url: 'http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998',
  dataType: 'jsonp',
  jsonp: 'callback',//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
  jsonpCallback: 'flightHandler',//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  success: function (json) {
    alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。')
  },
  error: function () {
    alert('fail')
  }
})

2. CSS3垂直居中

(1) css3的transform

.ele{
/*设置元素绝对定位*/
    position:absolute;
/*top 50%*/
    top: 50%;
/*left 50%*/
    left: 50%;
/*css3   transform 实现*/
    transform: translate(-50%, -50%);
}

(2) flex盒子布局

.ele{
/*弹性盒模型*/    
    display:flex;
/*主轴居中对齐*/
    justify-content: center;
/*侧轴居中对齐*/    
    align-items: center;  
 }

(3) display的table-cell

.box{
/*让元素渲染为表格单元格*/
    display:table-cell;
/*设置文本水平居中*/
    text-align:center; 
/*设置文本垂直居中*/
    vertical-align:middle;     
}

(4) margin

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

3.清除浮动

（1）额外标签法（在最后一个浮动标签后，新加一个空标签，给其设置clear：both；）

<style>
	.clear{
        clear:both;
    	}
</style>
<body>    
    <div class="fahter">       
    	<div class="big">big</div>       
    	<div class="small">small</div>       
    	<div class="clear">额外标签法</div>    
	</div>    
<div class="footer"></div>
</body>

优点：通俗易懂，方便
缺点：添加无意义标签，语义化差

（2）父级添加overflow属性

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

（3）使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

（4）使用before和after双伪元素清除浮动

 .clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

优点：代码更简洁
缺点：用zoom:1触发hasLayout.

4.CSS3的新特性

CSS3 是*层叠样式表（Cascading Style Sheets）*语言的最新版本，旨在扩展CSS2.1。
它带来了许多期待已久的新特性，例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀（vendor-prefixed），应避免在生产环境中使用，或极其谨慎地使用，因为将来它们的语法和语义都有可能被更改。

圆角 border-radius:25px;
阴影 box-shadow: 10px 10px 5px #888888;
渐变

#grad {                
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */                
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */                
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */                
  background: linear-gradient(to right, red , blue); /* 标准的语法 */                
}

文本效果 text-shadow、box-shadow、text-overflow（CSS3文本溢出属性指定应向用户如何显示溢出内容）、
word-wrap（CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字）、
word-break（指定换行规则）word-break: keep-all; word-break: break-all;
字体 @font-face（自定义web字体）
2D转换、3D转换
过渡 transition

div {
	transition: width 1s linear 2s; /*过渡效果需要等待两秒后才开始*/
	-webkit-transition:width 1s linear 2s;/* Safari */
} 
div:hover { 
	width:300px; 
}

动画 animation @keyframes

div	{
	animation: myfirst 5s;
	-webkit-animation: myfirst 5s; /* Safari and Chrome */
}  

@keyframes myfirst	{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

多列 column-count（属性指定元素的列数应分为多少）；column-gap（属性指定列之间的差距）
column-rule（属性设置列之间的宽度，样式和颜色）：column-rule:3px outset #ff00ff;
column-rule-color、column-rule-style、column-rule-width、
column-span （指定一个元素应该横跨多少列）column-width（指定列的宽度）
column（指定列的宽度和数量）：columns:100px 3;
图片 eg: img { max-width: 100%; height: auto; }响应式布局
按钮 .button{...}
框大小 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。如果在元素上设

置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中

.div1 {
    width: 300px;
    height:100px;
    border: 1px solid blue;
   box-sizing: border-box;
}
.div2 {
    width: 300px;
   height: 100px;
    padding: 50px;
   border: 1px solid red;
    box-sizing: border-box;
} /*两个div一样大*/

弹性盒子 Flexible Box 或 flexbox，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
多媒体查询、多媒体查询实例

5.箭头函数的特点

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
箭头函数不能作为构造函数，不能使用new
箭头函数本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。箭头函数中要想接收不定参数，应该使用rest参数…解决
箭头函数通过call和apply调用，不会改变this指向，只会传入参数
箭头函数没有原型属性

elements.map(function(element) { 
	return element.length; 
}); // 返回数组：[8, 6, 7, 9]
// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
	return element.length;
}); // [8, 6, 7, 9]
// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
	return element.length;
}); // [8, 6, 7, 9]
// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

whi_sper-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网易面经（1）

一、网易面经（1）1. jsonP原理JSONP，JSON with Padding因为Ajax只能请求同一个域下的数据和资源，而在实际开发中有很多跨域请求的需要，这是就可以使用jsonP技术，jsonP技术利用为了便于客户端使用数据，产生了JSONP技术，该协议的一个要点是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSO...
复制链接

扫一扫

专栏目录