1.如何實現計數器
- 背景:點擊按鈕實現計數器功能 ====> 點擊按鈕實現累加
- 從以下4種方式選擇最優的一個方案
1.1使用全局變量
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
var count = 0;
oBtn.onclick = function() {
count++;
spanNum.innerHTML = count;
}
//利用全局變量不銷毀的原理,把需要累加的數字定義為全局的變量
//弊端:在項目中為了防止全局變量之間的沖突,我們一般是禁止或者減少使用全局變量的
1.2 自己形成一個不銷毀的私有作用域來保存我們需要累加的數字
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
(function() {
var count = 0;
oBtn.onclick = function() {
count++;
spanNum.innerHTML = count;
}
})()
//此處再次分析一下為什么私有作用域不銷毀
//1、自執行函數執行形成了一個私有作用域A, oBtn.onclick = function() {}
//2、oBtn.onclick 在oBtn對象中
//3、oBtn.onclick = function() {} 私有作用域A中的function(引用類型的數據)被外部變量接收 ===>不銷毀
//如果對這塊有疑問 可以看上篇文章 JS作用域和內存分析 https://juejin.im/post/5c1aff9df265da61736a3dc5
1.3 經典自執行函數(原理同1.2)
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
oBtn.onclick = (function() {
var count = 0;
return function() {
count++;
spanNum.innerHTML = count;
}
})
//這塊代碼最有迷惑性的就是使用了自執行函數賦值給onclick,還有里邊的var count = 0;
//你一定認為 每點擊一次btn,會執行一次自執行函數,count 會重新變成0 無法做到累加的效果
//但是在給onclick賦值時,自執行函數就執行了,返回了一個引用類型的函數 function() { count++; spanNUm.innerHTML = count}
//重點注意: 是賦值的時候 不是點擊的時候
//賦值 只會在頁面重新加載的時候執行一次 所以 var count = 0;只會執行一次 不會清空上次的累加值
//以后每次點擊 真正執行的是 function() { count++ ; spanNum.innerHTML = count} 所以count不會被清空
//看這個文章(JS this指向 https://juejin.im/post/5c1b6c3551882573d9066241) 最后一道練習題 收獲會很大
- 1.2和1.3的弊端:有一個不銷毀的私有作用域,所以會占用那么一小丟內存
1.4 利用innerHTML方式處理
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
oBtn.onclick = function() {
//spanNum.innerHTML 獲取頁面中的內容返回的是一個字符 需要轉為數字進行計算
spanNum.innerHTML++;//++ 自動轉為數字
}
//利用innerHTML的方式處理:每一次點擊的時候都先到頁面中獲取最新的值,然后累加,最后把累加的結果重新放回去
//弊端:每一次都需要把頁面中的內容先轉為數字,然后再累加,累加完再重新添加回去,當重新添加的時候,瀏覽器都要
//重新渲染一下
1.5 利用自定義屬性存儲(推薦)
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
oBtn.count = 0; //count既不是全局變量 也不是私有變量 只是oBtn的私有屬性
oBtn.onclick = function() {
spanNum.innerHTML = ++ this.count;
//count保持不變 不銷毀 --->在上次的結果上進行累加
}
- 動力: 這是我的學習筆記(來源于視頻),您能從中得到收獲和進步,是我分享的動力,幫助別人,自己也會更快樂
- 期望: 不喜勿噴,謝謝合作！如果涉及版權請及時聯系我,馬上刪除!
