前言:在大學時期,我用Ionic寫過一個檢視校園資訊的app,利用投放廣告盈利的方式,我賺到了一臺MacBook Pro。在之後的日子裡,無論是工作,學習還是生活,它都給我帶來極大的便捷。我至今仍心存感激。所以我對Ionic的核心框架Angular充滿好感。即使現在的工作中用react居多,但是閒暇時還是會追一追Angular的文件,寫一寫筆記。
隨著工作經驗愈發豐富,Angular越來越演變成一種信仰。我在業務編碼過程中遇到的諸多問題在Angular中均有優雅的解決方案,這點足令我震撼。所以我決定將它分為不同的章節,依次研讀。
我首先選擇了Rx,因為它不僅是Angular的核心之一,而且我覺得學習完之後可以應用到現在的工作中,兩者兼得。幸運的是,我在西湖邊發現了修煉的寶地:平湖秋月。看著盪漾的水波,想象自己是一段流,似乎就化身為Observable,與Rx心靈相通。這極大的提高了我修煉的速度。下面的章節我會將自己學到的知識記錄下來,與各位分享。
首先,我認為前端開發做好2件事情就夠了:**1.渲染介面,2.根據使用者輸入渲染介面。**其中渲染介面可以利用React之類的庫來完成,它們提供了一種從state對映到view的方式,你只需要管理好state即可,渲染view的工作丟給它們去完成。而根據使用者輸入渲染介面這部分會比較複雜,其中涉及到非同步處理,業務邏輯程式碼編寫等等。專案變得有一定規模之後,會變得比較難以維護。一個很重要的原因在於沒有一個直觀的組織程式碼的方式,讓維護者一眼看上去就知道這段程式碼想要表達什麼。
接下來,要想解決這個問題,需要好好審視一下web開發的本質。使用者點選滑鼠,觸發了一個事件,你的程式接收到之後開始做一些處理。使用者移動滑鼠,觸發了一個事件,你的程式接收到之後開始做一些處理。只要稍微一想,就會明白web開發其實就是和一系列的事件打交道,只要將這些事件以清晰的方式處理好了,我們的程式碼自然會變得清晰起來。自然的,**我們會想到觀察者模式。**我們的處理程式都是使用者事件的接收者,訂閱了使用者的事件源,等到有事件源發出通知時,我們的程式就會做出響應。本著順勢而為的哲學思想,我們應該用響應式的思想來編寫程式碼。
然後思考一個問題:我們編寫的程式碼的本質是什麼呢?**是一系列的處理函式。**既然是函式的話,我們可以對計算機說:我想要這樣,然後想要那樣,最終我想得到的結果是這樣。而不是具體的告訴計算機你應該先這樣,在那樣,最後在這樣。前者是函式式的思維,後者是命令式的思維。有點繞,舉一個直觀的例子吧:最近面試了一個實習生,讓他寫一個陣列去重的程式碼,他的實現如下:
他的思想就是告訴計算機你應該先把這個陣列遍歷一遍,然後把陣列的值當做map的鍵賦值給map,並初始化為1。然後遍歷這個map,取出它的鍵,push到陣列中。返回這個陣列。是不是感覺很麻煩。這就是命令式的思維。其實這個實現中有許多bug,比如給定陣列arr要是有數字的話,轉換後的陣列會把數字變成字串。for in也會遍歷原型鏈上的值。想一想都覺得可怕。要是用函式式的思維呢?
是不是清爽許多。這段程式碼的本質是告訴計算機:**我想要把這個陣列中除了第一個的相同的數過濾出去。**簡潔明瞭,直接告訴計算機你想要什麼就好。**組合一些現有的函式來進行語義化程式設計。只要一眼看上去就知道這段程式碼想要表達什麼。**在監聽到使用者的事件時,只需要執行一系列函式,把處理後的結果給負責渲染view的庫就OK了。
那為什麼函數語言程式設計最近才變得火熱起來呢?這是一個歷史原因。當時阿蘭圖靈和馮諾依曼祖師爺創立了計算機這門學科時,因為是開天闢地的創造。所以最早一批學者都有著其他專業背景,但主要分為2大派:電子電氣和數學。它們帶來了不同的觀點。數學家提出的程式語言模型自然具有數學氣質,優雅且易於管理,其中Lambda演算就是用純函式的組合來描述計算過程,如果一個問題能夠用一套函式組合的演算法來描述,那麼就說明這個問題是可計算的。但是當時硬體製造技術很不發達,電子元件製造成本又高,體積又大,無法在一個小晶片上放置多個元件。既然這樣,那隻好省著點用了,指令式程式設計就這樣興起了。看過《賈伯斯傳》的朋友們應該知道,當時賈伯斯和沃森為了一款遊戲減少幾個晶片的使用而耗費精力。
隨著硬體技術的進步,這些都不是問題了。所以數學家們提出的優雅的解決方案慢慢的變得流行起來。
最後,我們得到了一個結論。web開發中根據使用者輸入處理這一步的解決方案即為函數語言程式設計+響應式程式設計。而這兩者結合起來即為**函式響應式程式設計。**這正是Rx.js的思想。優雅迷人。接下來讓我們一起揭開她美麗的面紗吧n(≧▽≦)n。
後記:如果想認識一群有趣的人,經歷一些有趣的事情的話,那麼來酷家樂加入我們前端團隊吧。簡歷可以發我郵箱:chonger@qunhemail.com,我來幫你內推。另外秀一波我的無敵景觀工位: