【JS】741- JavaScript 閉包應(yīng)用介紹
一、閉包的概念和特性
function makeFab () {let last = 1, current = 1return function inner() {[current, last] = [current + last, current]return last}}let fab = makeFab()console.log(fab()) // 1console.log(fab()) // 2console.log(fab()) // 3console.log(fab()) // 5
二、閉包——函數(shù)式編程之魂
在JavaScript里，我們可以像操作普通變量一樣，把函數(shù)在我們的代碼里拋來拋去，然后在某個時刻調(diào)用一下，這就是所謂的函數(shù)式編程。
function confirm (confirmText, confirmCallback, cancelCallback) {// 插入提示框DOM，包含提示語句、確認按鈕、取消按鈕// 添加確認按鈕點擊事件，事件函數(shù)中做dom清理工作并調(diào)用confirmCallback// 添加取消按鈕點擊事件，事件函數(shù)中做dom清理工作并調(diào)用cancelCallback}
function removeItem (id) {confirm('確認刪除嗎？', () => {// 用戶點擊確認, 發(fā)送遠程ajax請求api.removeItem(id).then(xxx)}, () => {// 用戶點擊取消，console.log('取消刪除')})}
三、閉包的一些例子
1. 防抖、節(jié)流函數(shù)
function debounce (func, time) {let timer = 0return function (...args) {timer && clearTimeout(timer)timer = setTimeout(() => {timer = 0func.apply(this, args)}, time)}}input.onkeypress = debounce(function () {console.log(input.value) // 事件處理邏輯}, 500)
function throttle(func, time) {let timer = 0 // 定時器標記相當于一個鎖標志return function (...args) {if (timer) returnfunc.apply(this, args)timer = setTimeout(() => timer = 0, time)}}
2. 優(yōu)雅解決按鈕多次連續(xù)點擊問題
let clickButton = (function () {let lock = falsereturn function (postParams) {if (lock) returnlock = true// 使用axios發(fā)送請求axios.post('urlxxx', postParams).then(// 表單提交成功).catch(error => {// 表單提交出錯console.log(error)}).finally(() => {// 不管成功失敗 都解鎖lock = false})}})()button.addEventListener('click', clickButton)
function singleClick(func, manuDone = false) {let lock = falsereturn function (...args) {if (lock) returnlock = truelet done = () => lock = falseif (manuDone) return func.call(this, ...args, done)let promise = func.call(this, ...args)promise ? promise.finally(done) : done()return promise}}
let clickButton = singleClick(function (postParams) {if (!checkForm()) returnreturn axios.post('urlxxx', postParams).then(// 表單提交成功).catch(error => {// 表單提交出錯console.log(error)})})button.addEventListener('click', clickButton)
let print = singleClick(function (i, done) {console.log('print is called', i)setTimeout(done, 2000)}, true)function test () {for (let i = 0; i < 10; i++) {setTimeout(() => {print(i)}, i * 1000)}}
3. 閉包模擬私有方法或者變量
function makePlayer () {let exp = 0 // 經(jīng)驗值return {getExp () {return exp},changeExp (delta, sReason = '') {// log(xxx),記錄變動日志exp += delta}}}let p = makePlayer()console.log(p.getExp()) // 0p.changeExp(2000)console.log(p.getExp()) // 2000
四、總結(jié)
1. JavaScript 重溫系列（22篇全） 2. ECMAScript 重溫系列（10篇全） 3. JavaScript設(shè)計模式 重溫系列（9篇全） 4.?正則 / 框架 / 算法等 重溫系列（16篇全） 5.?Webpack4 入門（上）||?Webpack4 入門（下） 6.?MobX 入門（上）?||??MobX 入門（下） 7. 80+篇原創(chuàng)系列匯總 回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 80+ 篇原創(chuàng)文章
評論
圖片
表情