美文网首页
前端经典手写笔试题

前端经典手写笔试题

作者: 我的西瓜瓜 | 来源:发表于2019-02-22 10:47 被阅读0次

    一 请手写拖拽实现

        // 前提条件 元素需要绝对定位,设置left和top属性
        (function () {
            let oDrag = document.getElementById('drag')
            oDrag.onmousedown = (e) => {
                let disx = e.clientX - oDrag.offsetLeft
                let disy = e.clientY - oDrag.offsetTop
                document.onmousemove = (e) => {
                    oDrag.style.left = e.clientX - disx + 'px'
                    oDrag.style.top = e.clientY - disy + 'px'
                }
                document.onmouseup = () => {
                    document.onmousemove = null
                    document.onmousedown = null
                }
            }
        })();
    

    二 请手写es6和es5的面向对象代码实现

        // 面向对象
        (function () {
            // es6的面向对象
            class Person {
                constructor(name, age) {
                    this.name = name
                    this.age = age
                }
                showName() {
                    console.log(this.name)
                }
            }
            // 实例化Person
            let student = new Person('王宏', '36')
            student.showName()
            // 继承
            class Worker extends Person {
                constructor(name, age) {
                    super(name, age)
                }
                // 添加Worder自己特有的方法
                showAge() {
                    console.log(this.age)
                }
            }
            // 实例化Worker
            let coder = new Worker('廖峰', '40')
            coder.showName()
            coder.showAge()
    
            // es5的面向对象
            function Animal(name, color) {
                this.name = name
                this.color = color
            }
            Animal.prototype.showName = function () {
                console.log(this.name)
            }
            // 实例化Animal对象
            let dragon = new Animal('龙', '金色')
            dragon.showName()
    
            // 继承
            function Tiger(name, color) {
                Animal.call(this, name, color)
            }
            Tiger.prototype = new Animal()
            Tiger.prototype.constructor = Tiger
    
            let smallTiger = new Tiger('小老虎', '灰色')
    
            smallTiger.showName()
        })();
    

    三 请手写tab选项卡

        // tab选项卡
        (function () {
            let oBtnBox = document.getElementsByClassName('btn-box')[0]
            let oContentBox = document.getElementsByClassName('content-box')[0]
            let aBtnItem = oBtnBox.getElementsByTagName('button')
            let aContentBox = oContentBox.getElementsByTagName('div')
            let len = aBtnItem.length
            // 其实用let,那么不需要自定义索引,只用i即可
            for (let i = 0; i < len; i++) {
                aBtnItem[i].idx = i
                aBtnItem[i].onclick = function () {
                    for (let j = 0; j < len; j++) {
                        aBtnItem[j].className = ''
                        aContentBox[j].className = 'hide'
                    }
                    aBtnItem[this['idx']].className = 'active'
                    aContentBox[this['idx']].className = ''
                }
            }
        })();
    

    四 请手写ajax的getf方法实现

        // 手写ajax get
        function get(url, fn) {
            let url = 'api/getlist'
            let xhr = XMLHttpRequest()
            xhr.open('GET', url, true)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    fn(xhr.responseText)
                }
            }
            xhr.send()
        }
    

    五 请手写ajax的post方法实现

        // 手写ajax post
        function post(url, data, fn) {
            let url = 'api/getlist'
            let xhr = XMLHttpRequst()
            xhr.open('POST', url, true)
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    fn(xhr.responseText)
                }
            }
            xhr.send(data)
        }
    

    六 请手写jsonp的实现

        // 手写jsonp
        function jsonp(url = '', fn) {
            let fnName = Math.random().toString().slice(2)
            window[fnName] = function (data) {
                fn(data)
            }
            let script = document.creatElement('script')
            script.src = '/api/getlist?cb=' + fnName
            document.body.appendChild(script)
        }
    

    七 请实现递归阶乘函数

        // 手写递归 阶乘
        function jc(n) {
            if (n === 1) {
                return 1
            }
            return n * jc(n - 1)
        }
    

    八 请实现深拷贝对象的函数实现(不考虑函数的拷贝)

        // 深拷贝对象
        function clone(obj) {
            var newObj = obj instanceof 'Array' ? [] : {} // 这种方法obj不能写实体对象,不能直接写{a:12}
            // var newObj = Object.protoType.toString.call(obj).slice(8,-1)
            if (typeof obj === 'object' && typeof obj !== 'null') {
                for (let key in obj) {
                    if (typeof obj[key] === 'object' && typeof obj[key] !== 'null') {
                        newObj[key] = clone[obj[key]]
                    } else {
                        newObj[key] = obj[key]
                    }
                }
            } else {
                return obj
            }
            return newObj
        }
    

    相关文章

      网友评论

          本文标题:前端经典手写笔试题

          本文链接:https://www.haomeiwen.com/subject/oamsyqtx.html