面試記錄1

時間 2019-11-10

原文原文鏈接

面試記錄

1：寫出輸出值

console.log(10 + 20 + '30');    // '3003'
console.log('10' + 20 + 30);    //‘102030’

2：寫出輸出值

['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]

3: 實現 add(2)(5) 7

var add = function(x) {
    return function(y) {
        return x + y;
    }        
}

4：寫出輸出值

var foo = 'hello';
var bar;
(function() {
    var bar = 'world';   
    console.log(foo + bar);    // 'hello world'
})();
console.log(foo + bar);        // 'helloundefined'

5：實現字符串的倒序

var str = 'abcde';
str = str.split('').reverse().join('');   // 'edcba'

6：綁定將來元素的事件

原生寫法javascript

document.body.onclick = function(e) {
    var e = e || window.event;
    if (e.target.nodeName.toLowerCase() === 'p') {
        console.log(11);
    };
}

setTimeout(function() {
    var p = document.createElement('p');
    var text = document.createTextNode('點我');
    p.appendChild(text);
    document.body.appendChild(p);     
}, 1000)

jquery寫法html

$(document).on('click', 'p', function() {
    console.log(11);
});
    
setTimeout(function() {
       var p = document.createElement('p');
       var text = document.createTextNode('點我');
    p.appendChild(text);
    document.body.appendChild(p);     
}, 1000);

7: 循環綁定事件,用閉包實現

<ul id='list'>
     <li class='li'>標籤1</li>
    <li class='li'>標籤2</li>
    <li class='li'>標籤3</li>
</ul>

var li = document.getElementsByClassName('li')
var bind = function(i) {
    li[i].onclick = function () {
        console.log(i);
    };        
}
for (var i = 0; i < li.length; i++) {
    bind(i);
}

8: sort(compareFunction) 對數字數組按小到大排序

compareFunction 用來指定按某種順序進行排列的函數。若是省略，元素按照轉換爲的字符串的諸個字符的Unicode位點進行排序。html5

var arr = [1, 16, 2, 21, 30];
console.log(arr.sort(function(a, b) {
    if (a>b) {
        return 1;
    } else if(a<b){
        return -1
    } else{
        return 0;
    }
}))

9: 移除選中標籤（原生JS）

<body>

<h2>我是h2</h2>
<p>我是p</p>

<script type="text/javascript">    
    document.body.onclick = function(e) {
        var h2 = document.getElementsByTagName('h2')[0];
        var p = document.getElementsByTagName('p')[0];
        if (e.target === h2 || e.target === p) {
            document.body.removeChild(e.target);
        }
    }
</script>
</body>

10：拖拽組件

<div id='div' style="position: absolute">我能夠被拖動</div>

    var getCss = function(el, key) {
      return el.currentStyle ? el.currentStyle[key]: document.defaultView.getComputedStyle(el, false)[key];
    }
    
    var param = {
      left: 0,
      top: 0, 
      currentX: 0,
      urrentY: 0,
      flag: false
    }
    var div = document.getElementById('div');
    div.onmousedown = function(e) {
        var e = e || window.event;
      param.flag = true;            
        param.left = getCss(div, 'left');
        param.top = getCss(div, 'top');
        param.currentX = e.clientX;
        param.currentY = e.clientY;
        
    }
    div.onmousemove = function(e) {
      var e = e || window.event;
        if (param.flag) {
            var disX = e.clientX - param.currentX;
            var disY = e.clientY - param.currentY;
            div.style.left = parseInt(param.left) + disX + 'px';
            div.style.top = parseInt(param.top) + disY + 'px';
            if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
    div.onmouseup = function() {
        param.flag = false;
    }

用html5的拖拽事件寫的一個類java

function Drag(el, options) {
        this.el = el;
        this.el.style.position = 'absolute';
        this._p = {
            left: 0,
            top: 0, 
            currentX: 0,
            currentY: 0
        };
        this.enable = options.enable;
    }
    Drag.prototype.dragstart = function(cb) {
      var _d = this;
        this.el.ondragstart = function(e) {
            if (_d.enable) {
                _d._p.left = getCss(_d.el, 'left');
                _d._p.top = getCss(_d.el, 'top');
                _d._p.currentX = e.clientX;
                _d._p.currentY = e.clientY;
                cb && cb(e.clientX, e.clientY);
          } else {
              console.log('拖拽功能被禁用...')
            }
        }
    };
    Drag.prototype.drag = function(cb) {
      var _d = this;
        this.el.ondrag = function(e) {
            if (_d.enable) {
                var disX = e.clientX - _d._p.currentX;
                var disY = e.clientY - _d._p.currentY;
                _d.el.style.left = parseInt(_d._p.left) + disX + 'px';
                _d.el.style.top = parseInt(_d._p.top) + disY + 'px';
                cb && cb(e.clientX, e.clientY);
            }
        }
    };
    Drag.prototype.dragend = function(cb) {
        var _d = this;
        this.el.ondragend = function(e) {
            if (_d.enable) {
                var disX = e.clientX - _d._p.currentX;
                var disY = e.clientY - _d._p.currentY;
                _d.el.style.left = parseInt(_d._p.left) + disX + 'px';
                _d.el.style.top = parseInt(_d._p.top) + disY + 'px';
                cb && cb(e.clientX, e.clientY);
            }
        }
    };
    
    //啓用拖拽功能
    Drag.prototype.begin = function(cb) {
        this.enable = true;
        console.log('拖拽功能開啓');
        cb && cb();
    };
    
    //禁用拖拽功能
    Drag.prototype.forbid = function(cb) {
        this.enable = false;
        console.log('拖拽功能關閉');
        cb && cb();
    };
    
    //切換開關
    Drag.prototype.toggle = function(cb) {
        this.enable = !this.enable;
        cb && cb();
    };