面试分享:2018阿里巴巴前端面试总结(题目+答案

面试分享:2018阿里巴巴前端面试总结(题目+答案)

2018/04/14 · 基础技术 · 面试

原文出处: 梦魇小栈   

脑子混了记得不多了,记得多少就记录多少吧。。。。

 

前端面试题,面试题

 

 1.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言

最主要的不同:

     XHTML 元素必须被正确地嵌套。

     XHTML 元素必须被关闭。

   标签名必须用小写字母。

     XHTML 文档必须拥有根元素

2、简述一下src与href的区别:

href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

4、 form中的action属性和method属性的含义是什么?method常用值有哪些?

action属性用于指定form表单提交的后台程序地址;method属性用于指定form表单提交的方法。

method的常用值有:get和post

5、 表单元素新增的属性有哪些?

required: 必填项目

placeholder:提示信息,点击input内容时会消失

pattern:校验正则表达式

antofocus:自动获得焦点

aotucomplete:自动完成

6.向指定服务器提交数据的方法有哪些?

   Ajax  表单Form  

   URL?参数 

   AngularJS的$HTTP

JQ Ajax: $.POST(,,)  $.GET(,,)  $.Ajax({})

JS Ajax: 5步。(参考25题)

7、写一个function,清除字符串前后的空格。(兼容所有浏览器)

function trim(str) {

   if (str && typeof str === "string") {

            return str.replace(/(^s*)|(s*)$/g,"");   //去除前后空白符

           }

8、如何消除一个数组里面重复的元素?

var arr1 =[1,2,2,2,3,3,3,4,5,6],

 var arr2 = [ ];

    for(var i = 0; i< arr1.length; i++){

        if(arr2.indexOf(arr1[i]) < 0){

         arr2.push(arr1[i]);

        }

}

document.write(arr2); // 1,2,3,4,5,6

9、请描述一下cookies,sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

10、cookie和session的区别是什么?

   Cookie 保存在客户端本机;

   Session保存在服务器端;

  联系:session的id存在cookie中。

11.页面导入样式时,使用link和@import有什么区别?

1).link属于XHTML标签,而@import是CSS提供的;

2).页面被加载的时,link会同事被加载,而@import引用的CSS会等到页面被加载完再加载;

3).import只有在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

4).link 方式的样式的权重>@import的权重

12.简单描述下定位Position:

Relative:相对定位。相对于自身原有位置定位,原DOM空间会保留;

Absolute:绝对定位。相对于第一个非static定位的祖先元素进行定位,会删除原DOM空间;

Fixed:固定定位器窗口进行定位; 会删除DOM空间

Static: 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。

Inherit:规定从父元素继承 position 属性的值。

13.display有哪些值?说明他们的作用。

  block         象块类型元素一样显示。

  none          缺省值。象行内元素类型一样显示。

  inline-block    象行内元素一样显示,但其内容象块类型元素一样显示。

  list-item     象块类型元素一样显示,并添加样式列表标记。

  table         此元素会作为块级表格来显示

  inherit       规定应该从父元素继承 display 属性的值

14、jquery中如何将数组转化为json字符串,然后再转化回来?

$.parseJSON

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用:$(array).stringify();

15.JSON 的了解?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

如:{"age":"12", "name":"back"}

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON对象转换为JSON字符串:

var last=obj.toJSONString();

var last=JSON.stringify(obj);

16、什么是响应式设计?响应式设计的基本原理是什么?

   根据不同设备的屏幕大小、分辨率、方向等,统一网站展示为不同效果。

   移动优先。可以使用JS跳转不同手机站和PC站,可以使用MediaQuery检测不同设备的属性展示不同的CSS,可以使用各种响应式前端框架。

   优点:用户体验好,尤其是手机端。

   缺点:包含大量冗余代码,开发成本较大(但是远低于开发手机站+PC站的模式)

17. visibility:hidden和display:none的区别?

使用display:none隐藏以后,元素的空间被释放,其余元素可以占用空间;

使用visibility:hidden仅仅是看不见,但是元素的空间依然占据,别的元素无法使用。

18、 列举数组相关的常用方法

push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列举字符串相关的常用方法

indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20、常见的浏览器内核有哪些?

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核:Netscape6及以上版本,FireFox(火狐),MozillaSuite/SeaMonkey等

Presto内核:Opera7及以上。      [Opera内核原为:Presto,现为:Blink;]

Webkit内核:Safari(苹果自带的浏览器),Chrome(谷歌)等。   [ Chrome的:Blink(WebKit的分支)]

21.title与h1的区别、b与strong的区别、i与em的区别?

   title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响;

  strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:<strong>会重读,而<b>是展示强调内容。

  i内容展示为斜体,em表示强调的文本;

22、网页验证码是干嘛的,是为了解决什么安全问题。

  区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水;

  有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

23.对前端工程师这个职位你是怎么样理解的?

a. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

b. 参与项目,快速高质量完成实现效果图,精确到1px;

c. 与团队成员,UI设计,产品经理的沟通;

d. 做好的页面结构,页面重构和用户体验;

e. 处理hack,兼容、写出优美的代码格式;

f. 针对服务器的优化、拥抱最新前端技术。

24、什么是闭包(closure),为什么要用它?

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。可以把闭包简单理解成“定义在一个函数内部的函数”

闭包的特性:

1.函数内再嵌套函数

2.内部函数可以引用外层的参数和变量

3.参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引

 <ul id="test">

    <li> index = 0</li>

    <li> index = 1</li>

    <li> index = 2</li>

    <li> index = 3</li>

</ul>

<script type="text/javascript">

    var nodes = document.getElementsByTagName("li");

    for(i = 0;i<nodes.length;i+= 1){

      nodes[i].onclick = function(){

      console.log(i+1);        //不用闭包的话,值每次都是4

        }(i);

    }

</script>

25、Ajax是什么?如何创建一个Ajax?

ajax全称为:Asynchronous javascript and XML,即异步的JavaScript和xml,也称页面无刷技术。这里的异步可以简单的理解为:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。

如何创建一个Ajax?

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

26.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

27.(设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

回答出概念即可,下面是几个要点

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

mousedown事件触发后,开始拖拽

mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

mouseup时,拖拽结束

28、 apply, call和bind有什么区别?

三者都可以把一个函数应用到其他对象上,注意不是自身对象.apply,call是直接执行函数调用,bind是绑定,执行需要再次调用.

apply和call的区别是apply接受数组作为参数,而call是接受逗号分隔的无限多个参数列表,

代码演示

    function Person() {

    }

    Person.prototype.sayName() { alert(this.name); }

    var obj = {name: 'michaelqin'}; // 注意这是一个普通对象,它不是Person的实例

    1) apply

    Person.prototype.sayName.apply(obj, [param1, param2, param3]);

    2) call

    Person.prototype.sayName.call(obj, param1, param2, param3);

    3) bind

    var sn = Person.prototype.sayName.bind(obj);    

    sn([param1, param2, param3]); // bind需要先绑定,再执行

   sn(param1, param2, param3); // bind需要先绑定,再执行

29、iframe有那些缺点?

*iframe会阻塞主页面的Onload事件;

*搜索引擎的检索程序无法解读这种页面,不利于SEO;

*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript

动态给iframe添加src属性值,这样可以绕开以上两个问题。

30、如何解决ajax跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

自己的做法:

jQuery中ajax的使用

$.ajax({

dataType:’jsonp’

})

 

 

 

 

 

 

http://www.bkjia.com/HTML5/1218094.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1218094.htmlTechArticle前端面试题,面试题 1.xhtml 和 html 有什么区别 HTML 是一种基本的 WEB 网页设计语言, XHTML 是一个基于 XML 的置标语言 最主要的不同: XHTML...

使用css实现一个持续的动画效果

animation:mymove 5s infinite; @keyframes mymove { from {top:0px;} to {top:200px;} }

1
2
3
4
5
animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

主要考:animation 用法

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

使用js实现一个持续的动画效果

最开始的思路是用定时器实现,最后没有想的太完整,面试官给出的答案是用requestAnimationFrame

  • 定时器思路
var e = document.getElementById('e') var flag = true; var left = 0;
setInterval(() =&gt; { left == 0 ? flag = true : left == 100 ? flag
= false : '' flag ? e.style.left = ` ${left++}px` : e.style.left =
` ${left--}px` }, 1000 / 60)

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0975288217752-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0975288217752-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0975288217752-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0975288217752-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a51a0975288217752-1" class="crayon-line">
var e = document.getElementById('e')
</div>
<div id="crayon-5b8f6a51a0975288217752-2" class="crayon-line crayon-striped-line">
var flag = true;
</div>
<div id="crayon-5b8f6a51a0975288217752-3" class="crayon-line">
var left = 0;
</div>
<div id="crayon-5b8f6a51a0975288217752-4" class="crayon-line crayon-striped-line">
setInterval(() =&gt; {
</div>
<div id="crayon-5b8f6a51a0975288217752-5" class="crayon-line">
    left == 0 ? flag = true : left == 100 ? flag = false : ''
</div>
<div id="crayon-5b8f6a51a0975288217752-6" class="crayon-line crayon-striped-line">
    flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`
</div>
<div id="crayon-5b8f6a51a0975288217752-7" class="crayon-line">
}, 1000 / 60)
</div>
</div></td>
</tr>
</tbody>
</table>
  • requestAnimationFrame
    由于之前没有用过这个 API 所以是现学的。
/兼容性处理 window.requestAnimFrame = (function(){ return
window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || function(callback){
window.setTimeout(callback, 1000 / 60); }; })(); var e =
document.getElementById("e"); var flag = true; var left = 0;
function render() { left == 0 ? flag = true : left == 100 ? flag =
false : ''; flag ? e.style.left = ` ${left++}px` : e.style.left =
` ${left--}px`; } (function animloop() { render();
requestAnimFrame(animloop); })();

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6a51a0979877799923-23">
23
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a51a0979877799923-24">
24
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a51a0979877799923-1" class="crayon-line">
/兼容性处理
</div>
<div id="crayon-5b8f6a51a0979877799923-2" class="crayon-line crayon-striped-line">
window.requestAnimFrame = (function(){
</div>
<div id="crayon-5b8f6a51a0979877799923-3" class="crayon-line">
  return  window.requestAnimationFrame       ||
</div>
<div id="crayon-5b8f6a51a0979877799923-4" class="crayon-line crayon-striped-line">
          window.webkitRequestAnimationFrame ||
</div>
<div id="crayon-5b8f6a51a0979877799923-5" class="crayon-line">
          window.mozRequestAnimationFrame    ||
</div>
<div id="crayon-5b8f6a51a0979877799923-6" class="crayon-line crayon-striped-line">
          function(callback){
</div>
<div id="crayon-5b8f6a51a0979877799923-7" class="crayon-line">
            window.setTimeout(callback, 1000 / 60);
</div>
<div id="crayon-5b8f6a51a0979877799923-8" class="crayon-line crayon-striped-line">
          };
</div>
<div id="crayon-5b8f6a51a0979877799923-9" class="crayon-line">
})();
</div>
<div id="crayon-5b8f6a51a0979877799923-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6a51a0979877799923-11" class="crayon-line">
var e = document.getElementById(&quot;e&quot;);
</div>
<div id="crayon-5b8f6a51a0979877799923-12" class="crayon-line crayon-striped-line">
var flag = true;
</div>
<div id="crayon-5b8f6a51a0979877799923-13" class="crayon-line">
var left = 0;
</div>
<div id="crayon-5b8f6a51a0979877799923-14" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6a51a0979877799923-15" class="crayon-line">
function render() {
</div>
<div id="crayon-5b8f6a51a0979877799923-16" class="crayon-line crayon-striped-line">
    left == 0 ? flag = true : left == 100 ? flag = false : '';
</div>
<div id="crayon-5b8f6a51a0979877799923-17" class="crayon-line">
    flag ? e.style.left = ` ${left++}px` :
</div>
<div id="crayon-5b8f6a51a0979877799923-18" class="crayon-line crayon-striped-line">
        e.style.left = ` ${left--}px`;
</div>
<div id="crayon-5b8f6a51a0979877799923-19" class="crayon-line">
}
</div>
<div id="crayon-5b8f6a51a0979877799923-20" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6a51a0979877799923-21" class="crayon-line">
(function animloop() {
</div>
<div id="crayon-5b8f6a51a0979877799923-22" class="crayon-line crayon-striped-line">
    render();
</div>
<div id="crayon-5b8f6a51a0979877799923-23" class="crayon-line">
    requestAnimFrame(animloop);
</div>
<div id="crayon-5b8f6a51a0979877799923-24" class="crayon-line crayon-striped-line">
})();
</div>
</div></td>
</tr>
</tbody>
</table>

不足之处请指正(毕竟是现学的)顺便查了一下优势:

  • 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果
  • 解决毫秒的不精确性
  • 避免过度渲染(渲染频率太高、tab 不可见暂停等等)
    注:requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame

右边宽度固定,左边自适应

第一种:

<style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style> <body> <div class="left"></div> <div class="right"></div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

第二种

<style> div { height: 200px; } .left { float: right; width: 200px; background-color: rebeccapurple; } .right { margin-right: 200px; background-color: red; } </style> <body> <div class="left"></div> <div class="right"></div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

暂时想到了两种。

水平垂直居中

第一种

#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
}
 
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第二种

#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
}
 
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第三种

#container{ position:relative; } #center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; }

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
}
 
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四种 flex

#container{ display:flex; justify-content:center; align-items: center; }

1
2
3
4
5
#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

四种定位的区别

  • static 是默认值
  • relative 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中
  • absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
  • fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

Flex布局用的多吗?

因为项目考虑兼容 IE9 所以直接说用的不多

移动端适配怎么做的?

使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同css.

let与var的区别?

letES6 新添加申明变量的命令,它类似于 var,但是有以下不同:

  • var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
  • let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
  • let 不允许重复声明.

为什么 var 可以重复声明?(这个就不知道了)

当我们执行代码时,我们可以简单的理解为新变量分配一块儿内存,命名为a,并赋值为2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:

  • 首先编译器对代码进行分析拆解,从左至右遇见var a,则编译器会询问作用域是否已经存在叫 a 的变量了,如果不存在,则招呼作用域声明一个新的变量a,若已经存在,则忽略var 继续向下编译,这时a = 2被编译成可执行的代码供引擎使用。
  • 引擎遇见a=2时同样会询问在当前的作用域下是否有变量a,若存在,则将a赋值为2(由于第一步编译器忽略了重复声明的var,且作用域中已经有a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量a则将其赋值2,若没有找到,则招呼作用域声明一个变量a并赋值为2
    参考链接

封装一个函数,参数是定时器的时间,.then执行回调函数。

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); }

1
2
3
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

一个关于 this 指向的问题

obj = { name: 'a', getName : function () { console.log(this.name); } } var fn = obj.getName obj.getName() var fn2 = obj.getName() fn() fn2()

1
2
3
4
5
6
7
8
9
10
11
12
obj = {
    name: 'a',
    getName : function () {
        console.log(this.name);
    }
}
 
var fn = obj.getName
obj.getName()
var fn2 = obj.getName()
fn()
fn2()

差不多应该是这样,记不太清了

CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?

  • CommonJS 模块的重要特性是加载时执行,即脚本代码在 require 的时候,就会全部执行。一旦出现某个模块被”循环加载”,就只输出已经执行的部分,还未执行的部分不会输出。
  • ES6 模块是动态引用,如果使用 import 从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
  • import/export 最终都是编译为 require/exports 来执行的。
  • CommonJS 规范规定,每个模块内部,module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即 module.exports )是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。
  • export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

一行代码实现数组去重?

[...new Set([1,2,3,1,'a',1,'a'])]

1
[...new Set([1,2,3,1,'a',1,'a'])]

使用addEventListener点击li弹出内容,并且动态添加li之后有效

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

1
2
3
4
5
6
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

这个题没答出来

本文由金沙官网线上发布于Web前端,转载请注明出处:面试分享:2018阿里巴巴前端面试总结(题目+答案

您可能还会对下面的文章感兴趣: