色香蕉精品国产综合,国产一区二区三区精彩视频,天堂资源中文最新版在线一区

就如同我們剛開始介紹的用 Singleton.getInstance 創(chuàng)建實例對象一樣，雖然這種方式實現(xiàn)了惰性單例，但是正如我們剛開始說的那樣這并不是一個好的實現(xiàn)方式。下面就來介紹一個好的實現(xiàn)方式。
遮罩層相信大家對它都不陌生。它在開發(fā)中比較常見，實現(xiàn)起來也比較簡單。在每個人的開發(fā)中實現(xiàn)的方式不盡相同。這個最好的實現(xiàn)方式還是用單例模式。有的人實現(xiàn)直接在頁面中加入一個div然后設(shè)置display為none，這樣不管我們是否使用遮罩層頁面都會加載這個div，如果是多個頁面就是多個div的開銷；也有的人使用js創(chuàng)建一個div，當(dāng)需要時就用將其加入到body中，如果不需要就刪除，這樣頻繁地操作dom對頁面的性能也是一種消耗；還有的人是在前一種的基礎(chǔ)上用一個標(biāo)識符來判斷，當(dāng)遮罩層是第一次出現(xiàn)就向頁面添加，不需要時隱藏，如果不是就是用前一次的添加的。
我們發(fā)現(xiàn)在開發(fā)中并不會單獨使用遮罩層，遮罩層和彈出窗是經(jīng)常結(jié)合在一起使用，前面我們提到過登陸彈窗使用單例模式實現(xiàn)也是最適合的。那么我們是不是要將上面的代碼拷貝一份呢？當(dāng)然我們還有好的實現(xiàn)方式，那就是將上面單例中代碼變化的部分和不變的部分，分離開來。
在上面的實現(xiàn)中將單例模式的惰性實現(xiàn)部分提取出來，實現(xiàn)了惰性實現(xiàn)代碼的復(fù)用，其中使用apply改變改變了fn內(nèi)的this指向，使用 || 預(yù)算簡化代碼的書寫。
ES6中的單例模式ES6創(chuàng)建對象
ES6中創(chuàng)建對象時引入了class和constructor用來創(chuàng)建對象。下面我們來使用ES6的語法實例化蘋果公司
ES6中創(chuàng)建單例模式
蘋果這么偉大的公司明顯有且只有一個, 就是喬爺爺創(chuàng)建的那個, 哪能容別人進(jìn)行復(fù)制？所以appleCompany應(yīng)該是一個單例, 現(xiàn)在我們使用ES6的語法將constructor改寫為單例模式的構(gòu)造器。
ES6的靜態(tài)方法優(yōu)化代碼
ES6中提供了為class提供了static關(guān)鍵字定義靜態(tài)方法，我們可以將constructor中判斷是否實例化的邏輯放入一個靜態(tài)方法getInstance中，調(diào)用該靜態(tài)方法獲取實例，constructor中只包需含實例化所需的代碼，這樣能增強(qiáng)代碼的可讀性、結(jié)構(gòu)更加優(yōu)化。
實現(xiàn)登陸彈框
登陸彈框在項目中是一個比較經(jīng)典的單例模式，因為對于大部分網(wǎng)站不需要用戶必須登陸才能瀏覽，所以登陸操作的彈框可以在用戶點擊登陸按鈕后再進(jìn)行創(chuàng)建。而且登陸框永遠(yuǎn)只有一個，不會出現(xiàn)多個登陸彈框的情況，也就意味著再次點擊登陸按鈕后返回的永遠(yuǎn)是一個登錄框的實例。
現(xiàn)在來梳理一下我登陸彈框的流程，在來進(jìn)行代碼的實現(xiàn)：
給頂部導(dǎo)航模塊的登陸按鈕注冊點擊事件登陸按鈕點擊后JS動態(tài)創(chuàng)建遮罩層和登陸彈框遮罩層和登陸彈框插入到頁面中給登陸框中的關(guān)閉按鈕注冊事件, 用于關(guān)閉遮罩層和彈框上面的登陸框的實現(xiàn)中，我們只創(chuàng)建了一個Login的類, 但是卻實現(xiàn)了一個并不簡單的登陸功能。在第一次點擊登陸按鈕的時候，我們調(diào)用Login.getInstance()實例化了一個登陸框，且在之后的點擊中，并沒有重新創(chuàng)建新的登陸框，只是移除掉了”display: none”這個樣式來顯示登陸框，節(jié)省了內(nèi)存開銷。
總結(jié)
單例模式雖然簡單，但是在項目中的應(yīng)用場景卻是相當(dāng)多的。單例模式的核心是確保只有一個實例，并提供全局訪問。就像我們只需要一個瀏覽器的window對象, jQuery的$對象而不再需要第二個。由于JavaScript代碼書寫方式十分靈活, 這也導(dǎo)致了如果沒有嚴(yán)格的規(guī)范的情況下，大型的項目中JavaScript不利于多人協(xié)同開發(fā)，使用單例模式進(jìn)行命名空間，管理模塊是一個很好的開發(fā)習(xí)慣，能夠有效的解決協(xié)同開發(fā)變量沖突的問題。靈活使用單例模式，也能夠減少不必要的內(nèi)存開銷，提高用于體驗。

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

引入外部css文件的方式 js移除div里面內(nèi)容( 二 )