詳解用函數(shù)式編程對JavaScript進(jìn)行斷舍離
我和JavaScript
從1997年網(wǎng)景的Navigator 3瀏覽器開始就開始使用JavaScript。當(dāng)時,JavaScript還只能做一些很簡單的事情。我記得最酷的就是用JavaScript實(shí)現(xiàn)mouseover特性,在那個時候已經(jīng)算得上是高科技了!當(dāng)鼠標(biāo)移過去之后,文本內(nèi)容就神奇的改變了。因?yàn)楫?dāng)時都是pre-DHTML,你根本不需要隱藏或則顯示DOM元素。
關(guān)于DHTML
DHTML是Dynamic HTML的簡稱,就是動態(tài)的html(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用),是相對傳統(tǒng)的靜態(tài)的html而言的一種制作網(wǎng)頁的概念。所謂動態(tài)HTML(Dynamic HTML,簡稱DHTML),其實(shí)并不是一門新的語言,它只是HTML、CSS和客戶端腳本的一種集成,即一個頁面中包括html+css+javascript(或其它客戶端腳本),其中css和客戶端腳本是直接在頁面上寫而不是鏈接上相關(guān)文件。
在那個時候,JavaScript的演化很慢,主要應(yīng)用在表單驗(yàn)證。因此,不像今天這么火爆,并沒有引起太多的關(guān)注??梢哉f只是一個錦上添花的附加物,你需要確保在瀏覽器禁用JavaScript之后,你的應(yīng)用依然可以正常使用。再往后,框架一個接著一個出現(xiàn):jQuery,Knockout, Angular, React, Vue, 等等。
同樣,JavaScript也在加速演化。我們才使用ES6不久,現(xiàn)在人們幾乎已經(jīng)跳過ES7,開始討論ES8了。
并且,我們有很多替代品,比如TypeScript,CoffeScript,ClojureScript, ELM,等等。
我們已經(jīng)被太多的框架和語言所淹沒,很難去跟蹤和掌握所有的語言和框架。
錯誤路線
當(dāng)JavaScript逐漸成熟,面向?qū)ο缶幊?OOP)的概念也滲入進(jìn)來,而且我曾經(jīng)很喜歡。
我開始嘗試所有不同的方法來創(chuàng)建類,我最終也可以正確的使用繼承。我對自己說:JavaScript開始真的像一個語言了!
但是,直到多年以后我發(fā)現(xiàn)OOP是JavaScript引入的最糟糕的一個設(shè)計(jì)!
我嘗試將我對C#的理解帶入到JavaScript中去。一開始充滿期待,但是后來發(fā)現(xiàn)真的太復(fù)雜,太燒腦了。
這主要是因?yàn)镴avaScript的原型繼承和C#不一樣,我已經(jīng)習(xí)慣于每天編寫類似于console.log(this)這樣飄逸的代碼。但是現(xiàn)在呢?如果我一不小心沒按照規(guī)則來,那將會給我?guī)碡瑝?。私有方法和私有值必須要在名字前面加上下劃線,甚至必須用閉包來保證私有性。
因此,不僅OOP導(dǎo)致了很多問題,同時也由于添加OOP帶來了很多新的問題。
函數(shù)式編程
一開始我并不理解。我可以閱讀并理解這些用函數(shù)式編寫的代碼,但是不知道為什么!最終,我強(qiáng)迫我自己去學(xué)習(xí)它。
函數(shù)式語言給了我一個全新的視角,讓我從一個完全不同的方式去看待編程。
一開始會感到不自然,需要時間去適應(yīng)。所有的定義都是基于函數(shù),值不可更改,無狀態(tài)。我用函數(shù)式的思維去解決問題。因?yàn)椴皇煜?,我花了更長的時間去學(xué)習(xí)。漸漸地,我熟練掌握了使用函數(shù)式的方法去編程。并且,我也知道所有代碼這樣編寫的內(nèi)在含義。
我的代碼更加簡潔了,而且容易復(fù)用。漸漸的,我以前使用的那些語言特性從代碼中消失了,我的代碼看上去完像是用另一個語言編寫。我還在用JavaScript嗎?
1. 不再使用var
我用const替代了var。通過函數(shù)式的設(shè)計(jì),我的函數(shù)都是純(pure)的。不會再去對一個變量進(jìn)行值的變更操作,同樣也是為了確保不會對其操作。
我會檢查代碼確保每一個var,甚至let,所有聲明都使用const。
2. 沒有for循環(huán)
在學(xué)習(xí)程序語言的時候,我們一開始就會學(xué)到for循環(huán)。但是自從學(xué)習(xí)了函數(shù)式編程,我將for循環(huán)都改成了使用filter, map和reduce來實(shí)現(xiàn)。對于那些需要一些額外計(jì)算的需求,我會使用遞歸或則第三方庫比如lazy.js。
如今我的代碼里面完全沒有for循環(huán)了,如果你看到了,告訴我我會把它消除。
3. if也可以被簡化
我開始停止在if里面編寫大塊大塊的代碼。我將里面的邏輯抽取出來單獨(dú)放在一個函數(shù)中。這樣,我們就可以將if用三元算子(a?b:c)來簡化。
如今我的代碼里面幾乎沒有if語句。為了方便其他開發(fā)者理解我的代碼,我很少使用它。
4. 和switch說拜拜
同樣,我也不喜歡用switch,而是尋找一個函數(shù)式的寫法。
我也很喜歡用Ramda的cond算子來替代swtich。
5. 不在擔(dān)心this
對的,你沒有聽錯!我們也可以完全消除this。
函數(shù)式的JavaScript可以讓你完全拋棄使用煩人的this
現(xiàn)在只有數(shù)據(jù)和函數(shù),甚至數(shù)據(jù)不過是函數(shù)的一種特殊表達(dá)形式,你再也不需要this了。我開始將對象理解為函數(shù)式語言中狀態(tài)(state)和函數(shù)。我甚至不需要把狀態(tài)或則函數(shù)和對象綁定到一起,就像OOP中那樣。
面向?qū)ο蟮脑O(shè)計(jì)不是必須的
現(xiàn)在往回看,我發(fā)現(xiàn)面型對象編程帶來的復(fù)雜度真的是不必要的。我可以使用函數(shù)式語言實(shí)現(xiàn)同樣的功能,完成相同的任務(wù)。而且,代碼更加輕簡,因?yàn)椴辉谛枰獙⑦@些復(fù)雜的對象傳來傳去。只有數(shù)據(jù)和函數(shù),而且因?yàn)楹瘮?shù)沒有和對象綁定,更加容易復(fù)用。我不在需要擔(dān)心傳統(tǒng)的原型繼承帶來的所有的問題,JavaScript設(shè)計(jì)的并不好。
JavaScript缺乏私有、公有、內(nèi)部或則被保護(hù)這類訪問控制器也不再是一個問題。訪問控制器是用來解決由于引入面向?qū)ο缶幊潭O(shè)計(jì)的。在函數(shù)式的JavaScript中,這些問題不復(fù)存在。
總結(jié)
我的代碼現(xiàn)在看上去完全不同。它包含了很多純函數(shù),我將它們做成不同的ES6模塊。這些函數(shù)可以被使用來構(gòu)建更加復(fù)雜的函數(shù)。很大一部分函數(shù)都是很簡單的一行l(wèi)ambda表達(dá)式。
現(xiàn)在我看待軟件的思維也變了:輸入是一個數(shù)據(jù)流,然后程序作用到該數(shù)據(jù)流上對數(shù)據(jù)進(jìn)行各種操作,然后返回新的數(shù)據(jù)。
函數(shù)式設(shè)計(jì)對程序語言的影響以及無處不在,C#中的LINQ就是一個最佳的例子。同樣Java 8也引入了函數(shù)式語言的特性。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)文字跟隨鼠標(biāo)特效
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)文字跟隨鼠標(biāo)特效,d代碼簡單易操作,感興趣的朋友可以參考下2015-08-08JS計(jì)算兩個數(shù)組的交集、差集、并集、補(bǔ)集(多種實(shí)現(xiàn)方式)
本文通過多種實(shí)現(xiàn)方式給大家介紹了JS計(jì)算兩個數(shù)組的交集、差集、并集、補(bǔ)集 的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實(shí)現(xiàn)方法(js+jquery等)
現(xiàn)在很多的獨(dú)立博客和網(wǎng)站如人人網(wǎng)等,都使用了讓側(cè)邊欄模塊隨滾動條滑動而位置固定的效果2013-03-03JavaScript遍歷數(shù)組和對象的元素簡單操作示例
這篇文章主要介紹了JavaScript遍歷數(shù)組和對象的元素簡單操作,結(jié)合實(shí)例形式分析了javascript數(shù)組與對象元素遍歷相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-07-07js自定義方法通過隱藏iframe實(shí)現(xiàn)文件下載
通過隱藏iframe實(shí)現(xiàn)文件下載,不可思議吧,但確實(shí)是可以實(shí)現(xiàn)的,不懂的看下代碼,或許可以幫助到你,而且此功能是用js實(shí)現(xiàn)的,感興趣的你可不要錯過了哈2013-02-02