阿里电话面面经

程序员文章站 2022-08-18 10:01:24

阿里电话面面经这是前端小白琪琪子的第一篇面经总结哟~纯属记录自己的前端学习历程，其实就是把面经上的题做了解答笔记。**1.如何实现轮播图？**当看到轮播图的时候首先要想到功能需求，针对每一条需求设计代码功能需求：1.实现左右箭头点击能实现图片的切换，也就是五张图片先隐藏然后看当前要出现第几张就让他显示，其他四张隐藏2.注意的地方是当前图片是第一张或者第五张的时候我们需要加判断条件，如果当前图片是第一张的时候用户点击左箭头，我们应该要显示的是第五张图片，如果当前图片是第五张的时候用户点击右箭头，...

阿里电话面面经

这是前端小白琪琪子的第一篇面经总结哟~纯属记录自己的前端学习历程，其实就是把面经上的题做了解答笔记。

**
1.如何实现轮播图？

当看到轮播图的时候首先要想到功能需求，针对每一条需求设计代码
功能需求：1.实现左右箭头点击能实现图片的切换，也就是五张图片先隐藏然后看当前要出现第几张就让他显示，其他四张隐藏
2.注意的地方是当前图片是第一张或者第五张的时候我们需要加判断条件，如果当前图片是第一张的时候用户点击左箭头，我们应该要显示的是第五张图片，如果当前图片是第五张的时候用户点击右箭头，我们应该显示第一张
3.小圆点与左右箭头一样，当用户没有点击的时候就跟随着图片的自动轮播而改变，当用户点击其中的小圆点，就让当前的图片显示为小圆点的位置下标。
预备知识点：querySelector获取第一个，querySelectorAll获取所有
监听事件addEventListener，不会覆盖前面的事件
计时器setInterval(function(){},1000)

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>
<body>
    <div class="app">
        <div class="scroll">
            <!-- 图片展示 -->
            <img src="img/s1.jpg" alt="scrollImage" class="img current">
            <img src="img/s2.jpg" alt="scrollImage" class="img">
            <img src="img/s3.jpg" alt="scrollImage" class="img">
            <img src="img/s4.jpg" alt="scrollImage" class="img">
            <img src="img/s5.jpg" alt="scrollImage" class="img">
 
            <!-- 左右箭头的展示 -->
            <div class="lf"></div>
            <div class="lr"></div>
            
            <!-- 小圆点展示 -->
            <div class="dots">
                <span class="square"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
 
</body>
 
</html>

index.css
.app {
    width: 100%;
    margin: 50px 0;
    text-align: center;
}
 
.app .scroll {
    position: relative;
    display: inline-block;
    width: 1226px;
    height: 460px;
}
 
.app .scroll .img {
    display: none;
    width: 100%;
}
 
.app .scroll .current {
    display: block;
}
 
.scroll .lf {
    position: absolute;
    top: 50%;
    left: 10px;
    background-image: url('img/arrow.png');
    background-position: -83px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}
 
.scroll .lr {
    position: absolute;
    top: 50%;
    right: 10px;
    background-image: url('img/arrow.png');
    background-position: -123px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}
 
.dots {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 160px;
}
 
.dots>span {
    display: inline-block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 3px solid rgba(204, 204, 204, 0.2);
    border-radius: 15px;
    cursor: pointer;
}
 
.dots>span:not(:last-child) {
    margin-right: 5px;
}
 
/* 小圆点的颜色 */
.dots .square {
    background: #f46;
}

<script>
window.addEventListener('load', function() {
 
    var leftArrow = this.document.querySelector('.lf');
    var rightArrow = this.document.querySelector('.lr');
 
    // 鼠标移动到左右箭头的位置更换图片 有灰色背景的图片
    leftArrow.addEventListener('mouseenter', function() {
        this.style.backgroundPosition = '0 0';
    });
 
    leftArrow.addEventListener('mouseleave', function() {
        this.style.backgroundPosition = '-83px 0';
    });
 
    rightArrow.addEventListener('mouseenter', function() {
        this.style.backgroundPosition = '-42px 0';
    });
 
    rightArrow.addEventListener('mouseleave', function() {
        this.style.backgroundPosition = '-123px 0';
    });
 
    // 获取图片 和 小点
    var imgs = this.document.querySelectorAll('.img');
    var dots = this.document.querySelector('.dots').querySelectorAll('span');
 
    // 给图片设置index 属性，好判断当前的图片是哪一张
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].setAttribute('data-index', i);
    }
 
    // 获取当前图片 和 图片的index（数组下标）
    var current = this.document.querySelector('.current');
    var currentIndex = current.getAttribute('data-index');
 
    // 左箭头的点击事件，点击了就返回前一张图片 
    // 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张
    leftArrow.addEventListener('click', function() {
        if (currentIndex > 0) {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            imgs[--currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        } else {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            currentIndex = 4;
            imgs[currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        }
    });
 
    // 点击右箭头下一张图片切换
    // 如果当前为第五张图片，那么切换回第一张图片
    rightArrow.addEventListener('click', changeImage);
 
    var timer = this.setInterval(changeImage, 8000);
 
    function changeImage() {
        if (currentIndex < 4) {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            imgs[++currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        } else {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            currentIndex = 0;
            imgs[currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        }
    };
 
    // 小圆点的点击事件
    for (let k = 0; k < dots.length; k++) {
        dots[k].setAttribute('data-index', k);
        dots[k].addEventListener('click', function() {
            var index = this.getAttribute('data-index');
            if (index != currentIndex) {
                imgs[currentIndex].classList.remove('current');
                dots[currentIndex].classList.remove('square');
                imgs[index].classList.add('current');
                dots[index].classList.add('square');
                currentIndex = index;
            }
 
        })
    }
 
})
</script>

解题步骤：1.首先将图片有一个设置为显示，小圆有一个设置为显示
2.获取所有圆圈，图片的元素
3.鼠标移动到左右箭头的位置更换图片，有灰色背景的图片
4.给图片设置index属性，知道哪张是哪张
5.分别给左右键加入监听事件，点击就返回当前index的图片，下一张，上一张，如果最后一张往下是第一张。第一张往前是最后一张
6.小圆的点击事件，返回index值的那张图
7.在左右键的地方有延时函数

2.Ajax的原理

什么是Ajax捏？Ajax(Asynchronous Java and XML), Asynchronous翻译为异步，是一种异步请求数据的web开发技术，Ajax与服务器交换数据，能够不重新加载整个页面只局部刷新页面。
为什么用Ajax?为了减少不必要的网络传输量，提高用户体验
原理
阿里电话面面经
Ajax是在用户与服务器之间加了一个传话者，使用户操作与服务器响应异步，不是所有的用户请求都给服务器，很多数据验证和数据处理的活传话者自己就做了，需要读取新数据的时候才需要传话者向服务器发送请求，所以是异步传输，当浏览器告诉XHR后忙自己的事，等数据来了在执行，一点也不耽误事儿
它的原理即通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，再用js操作DOM更新页面。（XmlHttpRequest是核心）
包含技术
1.使用CSS和XHTML来显示
2.使用DOM模型来交互和动态显示
3.使用XMLHttpRequest来和服务器进行异步通信
4.使用js来绑定与调用
步骤
1.创建XmlHttpRequest对象
2.注册回调方法
3.设置和服务器交互的相应参数
4.设置向服务器端发送的数据，启动和服务器端的交互
5.判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据

//创建XMLHttpRequest对象
var MyXMLHttpRequest=function (){
    var xmlHttpRequest
    if (window.XMLHttpRequest){
        xmlHttpRequest=new XMLHttpRequest()  //非IE浏览器
    }else if (window.ActiveXObject){
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP")  //IE浏览器
    }
    if (xmlHttpRequest===undefined||xmlHttpRequest===null){
        alert("XMLHttpRequest对象创建失败！")
    }else {
        this.xmlhttp=xmlHttpRequest
    }
    //用户发送请求的方法
    MyXMLHttpRequest.prototype.send=function (method,url,data,callback,failback) {
        if (this.xmlhttp!=null&&this.xmlhttp!=undefined) {
            method = method.toUpperCase() //把字符串转为大写
            if (method != "GET" && method != "POST") {
                alert("HTTP的请求方法必须为GET或者POST")
                return
            }
            if (url == null || url == undefined) {
                alert("HTTP的请求地址不能为空")
                return;
            }
            var tempxmlhttp = this.xmlhttp
            this.xmlhttp.onreadystatechange = function () {
                if (tempxmlhttp.readyState == 4) {
                    if (tempxmlhttp.status == 200) {
                        var responsText = tempxmlhttp.responseText
                        var responseXML = tempxmlhttp.responseXML
                        if (callback == undefined || callback == null) {
                            alert("没有设置处理数据的正确方法")
                            alert("返回数据：" + responsText)
                        } else {
                            callback(responsText, responseXML)
                        }
                    } else {
                        if (failback == undefined || failback == null) {
                            alert("没有设置处理数据返回失败的处理方法")
                            alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText)
                        } else {
                            failback(tempxmlhttp.status, tempxmlhttp.statusText)
                        }
                    }
                }

            }
            //解决缓存问题
            if (url.indexOf("?") >= 0) {
                url = url + "&t=" + (new Date()).valueOf()
            } else {
                url = url + "?+=" + (new Date()).valueOf()
            }
            //解决跨域问题
            if (url.indexOf("http://") >= 0) {
                url.replace("?", "&");
                url = "Proxy?url=" + url
            }
            this.xmlhttp.open(method, url, true)

            //如果是post方式，需要设置请求头
            if (method = "POST") {
                this.xmlhttp.setRequestHeader("Content-type", "application/x-www-four-urlencoded")
            }
            this.xmlhttp.send(data)
        }else {
            alert("XMLHttpRequest对象创建失败，无法发送数据！")
        }
        MyXMLHttpRequest.prototype.abort=function () {
                this.xmlhttp.abort()
        }
    }
}

每次使用Ajax编程的步骤
1.创建XMLHttpRequest对象 2.设置请求方式 3.注册回调函数 4.发送请求

//创建XMLHttpRequest对象
var xmlHttp
if (window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest()  //非IE浏览器
}else if (window.ActiveXObject){
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")  //IE浏览器
}
//设置和服务器交互的参数
var url="http://localhost:8080/1"
xmlHttp.open("POST",url,true)
//注册回调方法
xmlHttp.onreadystatechange=function () {
    if (xmlHttp.readyState==4){
        if (xmlHttp.status==200){
            var obj=document.getElementById(id)
            obj.innerHTML=xmlHttp.responseText //核心内容哦！！！这是获取后台的返回数据
        }else {
            alert("Ajax服务器返回错误！")
        }
    }
}
//设置发送请求的内容和发送报送，然后发送请求
var params="userName="+document.getElementsByTagName("usersName")[0].value+"&userPass="+document.getElementsByTagName("userPass")[0].value+"&time="+Math.random()
xmlhttp.setRequestHeader("Content-type", "application/x-www-four-urlencoded")
xmlHttp.send(params)

Ajax的优点：
1.不刷新未更新的数据，减少用户等待时间，增强体验
2.实现了与服务器的异步通信，减少不必要的数据传输，减少流量
3.前后端负载平衡，原则是按需取数据，减少冗余请求，提升站点性能
4.基于标准被广泛支持
5.使视图与数据分离，提高效率。
不足
1.去除了Back与History功能，破坏浏览器机制。
2.存在安全问题，Ajax技术如同对企业数据建立了一个直接通道，使开发者在不经意间暴露更多的数据与服务器逻辑
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制如Ajax.dll、Ajaxpro.dll等框架
5.违背URL与资源定位的初衷，在与不在Ajax技术下的同一个网址内容可能不同
6.不能很好支持移动端设备
7开发成本较高一层套一层的js文件太多冗余代码

Ajax使用场景：
1.表单驱动的交互 2.深层次的树的导航 3.快速的用户间交流响应 4.投票场景 5.对数据进行过滤和操纵相关数据 6.普通的文本输入提示和自动完成的场景
不适合的场景
1.部分简单的表单 2.搜索 3.基本的导航 4.替换大量文本 5.对呈现的操纵

https://blog.csdn.net/chenjuan1993/article/details/81626487

敬请期待加更哟~~

本文地址：https://blog.csdn.net/qq_41973183/article/details/107290414

上一篇：自愿加班不算加班吗？马云巴巴是这么说的

下一篇：【Python入门学习笔记】函数

阿里电话面面经

阿里电话面面经

211毕业，2020最新字节后端三面面经分享，算法还是让我很为难

Java面试胜经001| 阿里Java面试题118道

阿里电话面面经

阿里巴巴2019 Q2财报电话会议纪要：平均目标价为213.99美元

答复: 今天下午接到阿里的电话面试

答复: 今天下午接到阿里的电话面试

一次阿里 P7 的面经，分享给大家

八年CRUD，疫情备战三个月，三面头条、四面阿里拿offer面经分享

最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结

啃完这些Spring知识点，我竟吊打了阿里面试官（附面经+笔记）