js函式實現

// call實現

// 思路：將要改變this指向的方法掛到目標this上執行並返回
function.prototype.
mycall
=function
(context)
context=context||window;
context.fn=
this
;let arg=
[...arguments]
.slice(1
);let result=context.fn(
...arg)
;delete context.fn;
return result;
}function.prototype.
=function
(context)
context=context||window;
context.fn=
this
;let result;
console.
log(arguments)
if(arguments[1]
)else
delete context.fn;
return result;
}//bind
function.prototype.
mybind
=function
(context)
let _this=
this
;let arg=
[...arguments]
.slice(1
);console.
log(arg,arguments,_this)
return
functionf(
)else}}
// promise實現
// 未新增非同步處理等其他邊界情況
// ①自動執行函式，②三個狀態，③then 
function
promises()
,function()
)}promises.prototype.
then
=function()
if(this
.status==
'reject'
&&arguments[1]
)}//測試用例
var mm=
newpromises
(function
(resolve,reject));
//上面的第乙個arguments[0]
mm.then
(function
(success)
,function()
);//123
//ok
var obj=
;functiona(
)a.mycall
(obj,
'aaa'
,'bbb',17
)//事件監聽
class
eventemiter
//監聽事件
addlistener
(type,fn)
}//觸發事件
emit
(type)
}//測試
let emiter=
neweventemiter()
;emiter.
addlistener
('age'
,age=>
)emiter.
emit
('age',25
)//路由實現
class
route
;//當前hash
this
.currenthash='';
this
.freshroute=
this
.freshroute.
bind
(this);
//監聽
window.
addeventlistener
('load'
,this
.freshroute,
false);
window.
addeventlistener
('hashchange'
,this
.freshroute,
false);
}//儲存
storeroute
(path,cb);}
//更新
freshroute()
else}}
var t=
newroute()
;t.storeroute
(location.hash,
function()
)//實現懶載入
"./imgs/default.png" data=
"./imgs/1.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/2.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/3.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/4.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/5.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/6.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/7.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/8.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/9.png" alt=
"">
<
/li>
"./imgs/default.png" data=
"./imgs/10.png" alt=
"">
<
/li>
<
/ul>
let imgs = document.
queryselectorall
('img'
)// 可視區高度
let clientheight = window.innerheight || document.documentelement.clientheight || document.body.clientheight
function
lazyload()
}}// addeventlistener('scroll', lazyload) or setinterval(lazyload, 1000)

js實現拖拽函式

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。onmousedown 滑鼠按下事件 onmousemove 滑鼠移動事件 onmouseup 滑鼠抬起事件 拖拽狀態 0滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 html 123 4 css...

js實現防抖函式和節流函式

含義 防抖函式指的是在特定的時間內沒有再次觸發，才得以進行接下來的函式執行 用途 當window.onresize不斷的調整大小的時候，為了避免不斷的重排與重繪，可以用防抖函式設定在onresize完成後一段時間內不再有視窗大小變動，此時再進行dom的重排重繪 function debounce f...

js中實現單分派泛函式

有這樣乙個函式，我們根據傳入的第乙個引數型別不同，以不同方式執行相同操作 單分派泛函式 我們來看乙個簡單的例子 function show value else if value instanceof date else if value instanceof number value instan...