面试记录1

头像
韦磊
    阅读 5 分钟

    面试记录

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

    <ul>
  <li>标签1</li>
  <li>标签2</li>
  <li>标签3</li>
</ul>

var li = document.querySelectorAll('li');
var bind = function (i) {
  li[i].onclick = function () {
    console.log(i);
  };
};
for (var i = 0; i < li.length; i++) {
  // 使用闭包 i会一直在内存中保存着 所以有三个i 都在各自的作用域链上
  // 不使用闭包 i就是全局的i 点击的时候已经为3了
  bind(i);
}

    如果不使用闭包 就将var i 改为 let 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 < 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：拖拽组件

    <template>
<div id="div" style="position: absolute">
  我可以被拖动
</div>
</template>

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();
};
    html
    韦磊
    90 声望11 粉丝

    沉稳，踏实，坚持，这正是我所欠缺的

    « 上一篇
    Vue实战经验
    下一篇 »
    面试记录2

    引用和评论

    推荐阅读
    头像
    2019年终总结

    韦磊阅读 1.3k

    0 条评论
    得票最新