面试记录1

面试记录

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：绑定未来元素的事件

原生写法

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写法

$(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: 循环绑定事件,用闭包实现

     
标签1
    
标签2
    
标签3


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位点进行排序。

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

9: 移除选中标签 （原生JS）

我是h2
我是p

10：拖拽组件

我可以被拖动

    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的拖拽事件写的一个类

    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();
    };