一 请手写拖拽实现
// 前提条件 元素需要绝对定位,设置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
}