当前位置：移动技术网 > IT编程>开发语言>JavaScript > 阿里电话面面经

阿里电话面面经

2020年07月14日 | 移动技术网IT编程 | 我要评论

阿里电话面面经

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

**
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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

小白测试系列:badboy默认浏览器修改

badboy使用的浏览器为系统默认浏览器，如果需要更换浏览器，直接修改系统默认浏览器即可，这里推荐用最liuma... [阅读全文]
nginx网站安全漏洞修复

前言：公司项目交付之前甲方进行了安全漏洞的扫描。大部分漏洞都是因为nginx响应没有加上仿攻击的响应头。记录一下... [阅读全文]
信息收集--绕过CDN寻找真实IP

0x01 验证目标是否存在CDN1、使用世界各地ping服务，如果地址不唯一，多半是用了CDN下例是我常使用的在... [阅读全文]
TCP和UDP的优缺点及区别

TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有... [阅读全文]
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例

以vs2012为标准。转自：http://technet.microsoft.com/zh-cn/library... [阅读全文]
CTF 刷题记录（一）白云新闻搜索（手动与自动化SQL注入）

题目给出的靶机如下：解题思路首先判断这是考察哪个知识点，只有一个输入框，题目中又说到入侵，首先考虑sql注入，下... [阅读全文]
Node.js 深度调试方法解析

在 node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。node(v6.3+)集成了方便好用 v8 inspect 调... [阅读全文]
javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名1.最初的样子如下2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下3.点击停止点... [阅读全文]
从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了javascript编写贪吃蛇游戏的具体代码，供大家参考，具体内容如下游戏截图1.画出游戏界面var c=document.geteleme... [阅读全文]
js编写简易的计算器

本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下使用绑定时间触发加减乘除加：减：乘：除：源代码：<body> 第一个数... [阅读全文]

网友评论


验证码：

阿里电话面面经

2020年07月14日 | 移动技术网IT编程 | 我要评论

阿里电话面面经

您可能感兴趣的文章:

相关文章:

网友评论