码迷,mamicode.com
首页 > 其他好文 > 详细

几道面试题

时间:2018-10-30 13:11:16      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:number   script   col   .com   1.9   request   color   地址   style   

1、手机号、邮箱、6到11位英文数字(英文开头)的正则表达式

/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$|
^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|
^[a-zA-Z][0-9a-zA-Z]{5,10}$/

 

2、Ajax的工作原理和兼容代码

通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHTTPRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open(‘GET‘, ‘ajax.json‘, false);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200 || xhr.status === 304) {
                    alert(xhr.responseText);
                } else {
                    alert(‘请求失败!‘);
                }
            }
        }    

 

3、地址栏输入一个url回车,描述这时候开始浏览器做了什么

1.浏览器解析出主机名

2.浏览器查询这个主机名的ip地址(dns)

3.浏览器获取端口号

4.浏览器向目标ip地址发起一条tcp连接

    为了传输的可靠性,tcp协议要有三次握手过程:

    (1)首先浏览器会向服务器发起一个连接请求

    (2)服务器会对连接请求做出响应,表示同意建立连接

    (3)浏览器收到响应后,再告知对方,它知道服务器同意它建立连接了。

5.数据包在ip层传输

6.数据链路层处理网络连接的硬件部分

7.浏览器向服务器发送一条http报文

8.服务器接受客户端请求,进行一些处理,返回响应报文

  web服务器接收到请求之后,实际上会做些什么呢?

  (1)建立连接,如果接受一个客户端连接,就建立连接,如果不同意,就将其关闭。

  (2)接收请求,读取http请求报文

  (3)访问资源,访问报文中指定的资源

  (4)构建响应,创建带有首部的http响应报文

  (5)发送响应,将响应回送给客户端

9.浏览器读取http响应报文

10.浏览器关闭连接


原文:https://zhuanlan.zhihu.com/p/3510998

 

4、JS中判断数据类型的方法有几种?

最常见的判断方法:typeof

判断已知对象类型的方法: instanceof

根据对象的constructor判断: constructor

无敌万能的方法:jquery.type()

 

5、用vue实现一个图片轮播效果

<template>
  <div id="slider">
    <div class="window" @mouseover="stop" @mouseleave="play">
      <ul class="container" :style="containerStyle">
        <li>
          <img :src="sliders[sliders.length - 1].img" >
        </li>
        <li v-for="(item, index) in sliders" :key="index">
          <img :src="item.img" >
        </li>
        <li>
          <img :src="sliders[0].img" >
        </li>
      </ul>
      <ul class="direction">
        <li class="left" @click="move(600, 1, speed)">
          <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"  /></svg>          
        </li>
        <li class="right" @click="move(600, -1, speed)">
          <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"  /></svg>          
        </li>
      </ul>
      <ul class="dots">
        <li v-for="(dot, i) in sliders" :key="i" 
        :class="{dotted: i === (currentIndex-1)}"
        @click = jump(i+1)
        >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘slider‘,
  props: {
    initialSpeed: {
      type: Number,
      default: 30
    },
    initialInterval: {
      type: Number,
      default: 4
    }
  },
  data () {
    return {
      sliders:[
        {
          img:‘../../static/images/1.jpg‘
        },
        {
          img:‘../../static/images/2.jpg‘
        },
        {
          img:‘../../static/images/3.jpg‘
        },
        {
          img:‘../../static/images/4.jpg‘
        },
        {
          img:‘../../static/images/5.jpg‘
        }
      ],
      currentIndex:1,
      distance:-600,
      transitionEnd: true,
      speed: this.initialSpeed
    }
  },
  computed:{
    containerStyle() {
      return {
        transform:`translate3d(${this.distance}px, 0, 0)`
      }
    },
    interval() {
      return this.initialInterval * 1000
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init() {
      this.play()
      window.onblur = function() { this.stop() }.bind(this)
      window.onfocus = function() { this.play() }.bind(this)
    },
    move(offset, direction, speed) {
      if (!this.transitionEnd) return
      this.transitionEnd = false
      direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600
      if (this.currentIndex > 5) this.currentIndex = 1
      if (this.currentIndex < 1) this.currentIndex = 5

      const destination = this.distance + offset * direction
      this.animate(destination, direction, speed)
    },
    animate(des, direc, speed) {
      if (this.temp) { 
        window.clearInterval(this.temp)
        this.temp = null 
      }
      this.temp = window.setInterval(() => {
        if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
          this.distance += speed * direc
        } else {
          this.transitionEnd = true
          window.clearInterval(this.temp)
          this.distance = des
          if (des < -3000) this.distance = -600
          if (des > -600) this.distance = -3000
        }
      }, 20)
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1
      const offset = Math.abs(index - this.currentIndex) * 600
      const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed 
      this.move(offset, direction, jumpSpeed)
    },
    play() {
      if (this.timer) {
        window.clearInterval(this.timer)
        this.timer = null
      }
      this.timer = window.setInterval(() => {
        this.move(600, -1, this.speed)
      }, this.interval)
    },
    stop() {
      window.clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>


原文: https://juejin.im/post/5aaf0907f265da23870e9fed

 

几道面试题

标签:number   script   col   .com   1.9   request   color   地址   style   

原文地址:https://www.cnblogs.com/dawnwill/p/9876093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!