一個小故事引發的討論:JavaScript中使用函數式編程

前言

昨天的文章中提到了一個小插曲, 故事的由來是我微信中的一個"小老闆"忽然來了個不可言喻的表情(Little (small) boss "SB..."??? 哈哈 仍是簡稱小吧)。而後開始了下面的對話:

• 小: 最近TM的好煩
• 我: 怎麼了 boss
• 小: 我寫的代碼最近新增了業務 改動起來 牽一髮而動全身。心態有點小炸裂。
• 我: 具體怎麼個狀況?讓小老弟幫你排排憂。
• 小: 以前不是剛獨立負責項目嗎，從0到1實現起來感受也沒啥太大的困難。可是呢 最近在原來的基礎上新增了點新業務需求須要改動以前的代碼。就總遇到一些問題 一個函數內的全局變量改動而後功能不少都失效了 致使須要一直debug追蹤到底在哪裏使用了。。。
• 我: 我通常拿到項目/產品需求以後在寫代碼前會花大量事件思考設計 可能比例7:3甚至8:2;經驗是一方面。思考仍是很重要的。回到你的問題 就說你前期沒作好一些工做例如:編碼設計;總體模塊劃分;工程類框架(作一些單元測試,覆蓋率測試..)等等措施,今天給你聊一下具體如何解決這些小問題!!

我展開了一系列裝逼和舔的操做....

回到今天文章的主題介紹一下編程範式,以及如何在JavaScript中使用起來。

什麼是編程範式 ?

編程範式(Programming paradigm)是指計算機中編程的典範模式或方法。

編程範式主要包含：命令式編程(Imperative)、聲明式編程(Declarative)和函數式編程(Functional)...

命令式編程：

命令式編程的主要思想是關注計算機執行的步驟，即一步一步告訴計算機先作什麼再作什麼。

好比：若是你想進行一個變量與變量組合的輸出，你須要這樣告訴計算機：

1. 第一步: 建立一個變量(名字) name;
2. 第二步: 建立一個變量(問候語) greeting;
3. 第三步: console.log輸出

var name = "wlove"; //聲明
   var greeting = "hello, I'm ";//聲明
   console.log(greeting + name);//輸出 hello, I'm wolove

聲明式編程：

聲明式編程是以數據結構的形式來表達程序執行的邏輯。它的主要思想是告訴計算機應該作什麼，但不指定具體要怎麼作。日程最接近的就說網頁編程中用到的 HTML 和 CSS 都屬於聲明式編程。(解釋一下:HTML/CSS它們的編寫其實就是結構化的 不會具體告訴計算機作什麼細節內容。因此屬於聲明式編程Declarative programming;其實和不少配置文件很類似。)

最直接舉例就是SQL：

SELECT * FROM table WHERE num < 5

經過觀察聲明式編程的代碼咱們能夠發現它有一個特色是它不須要建立變量用來存儲數據。
另外一個特色是它不包含循環控制的代碼如 for， while。

函數式編程：

函數式編程和聲明式編程是有所關聯的，由於他們思想是一致的：即只關注作什麼而不是怎麼作。但函數式編程不只僅侷限於聲明式編程。

函數式編程最重要的特色是」函數第一位"，即函數能夠出如今任何地方，好比你能夠把函數做爲參數傳遞給另外一個函數，不只如此你還能夠將函數做爲返回值。很重要一點;若是你使用得當這種編程只須要考慮輸入輸出的一個流。什麼對象(原型)以及其的反作用(相互做用影響)都不須要考慮。

提及函數式編程 可能接觸別的語言的朋友 一下就會回憶起 Haskell,Clojure這些語言。其實大部分常見的編程語言都已經提供了對這種編程方式的支持;好比今天的主角JavaScript。

相比於之前的命令式編程;聲明式編程,我更偏向於使用函數式編程。首先我實驗過面向對象(原型)的方式來進行編程。很困惑或者說很痛苦;每一次的 debug至關的提神醒腦;其次函數式編程可讓代碼的邏輯更清晰更優雅;更安全。( 總之我的用起來就說很爽)

JavaScript的函數式編程幾個介紹:

提及函數式編程最基本須要考慮side effect(無反作用)和pure(純);若是按這樣去實現就能合理的解決小老闆的一個很重要的問題 debug一個變量一直跟蹤哪裏修改了...;

//例子1 純函數
function greet(name){
    return "hello I'm " + name;
}
greet("wlove") // hello I'm wlove


//例子2 非純函數  用到了外部的變量
var name = "wlove"
function _fn(name){
    return pre + str
}
greet(name)// hello I'm wlove

函數式編程還有一個特色高階函數(也是提高的一個重要知識點);函數能夠做爲一個函數的返回。

//高階函數:
function greet(greeting){
    return function(name){
        return greeting + " " + name
    };
}
var GREETING = greet("hello I' m");
GREETING("wlove"); // "hello I' m  wlove"

函數式編程還有一個須要思考的問題;若是說每次都從新生成一個Copy對象(舉個例子 若是輸入的參數是array);每次改變從新生成一個。那樣會增長空間的使用。如何解決這個問題? 你們能夠思考一下或者查閱一些資料。留言討論一下。

最後

距離上一篇文章的生活日記: 20210524 平常生活的重複。開會;學習;寫代碼;跑步;寫文章;錄視頻;逛社區...開心就完事了。

本篇文章主要是由於我特別想幫助(tian)小老闆 哈哈;也算是隨想隨寫;歡迎你們留言討論。後面評論會補充介紹如何有效解決空間問題。

聊完天以後個人小老闆就是一頓誇,可是也不知道實踐沒實踐。我得多主動跟人家聊聊天 嘿嘿

下一篇JS引擎,做爲前端到底須要認識到什麼地步,以及如何學習。