DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 《JavaScript函數式編程》讀後感
《JavaScript函數式編程》讀後感
編輯:關於JavaScript     

本文章記錄本人在學習 函數式 中理解到的一些東西,加深記憶和並且整理記錄下來,方便之後的復習。

在近期看到了《JavaScript函數式編程》這本書預售的時候就定了下來。主要目的是個人目前還是不理解什麼是函數式編程。在自己學習的過程中一直聽到身邊的人說面向過程編程和面向對象編程,而函數式就非常少。為了自己不要落後於其他同學的腳步,故想以寫筆記的方式去分享和記錄自己閱讀中所汲取的知識。

js 和函數式編程

書中用了一句簡單的話來回答了什麼是函數式編程:

函數式編程通過使用函數來將值轉換為抽象單元,接著用於構建軟件系統。
我覺得一定有同學看了這一句還是不怎麼動什麼是函數式編程,且為什麼要使用函數式編程。後面的很多例子都使用到了Underscore。

以函數為抽象單元

抽象方法是指隱藏了細節的函數。舉一個書中的例子,一個檢測輸出年齡值的函數(主要是關於錯誤和警告的報告):

function parseAge(age) {
  if (!_.isString(age))
    throw new Error("Expecting a string");
  var a;
  console.log("Attempting to parse an age");

  a = parseInt(age, 10);
  if (_.isNaN(a)) {
    console.log(["Could not parse age: "].join());
    a = 0;
  }

  return a;
}

上面的函數判斷我們是不是輸入一個年齡,且必須是字符串形式。接著就是來運行這個函數:

parseAge("42"); //=> 42
parseAge(42); //=> Error:Expecting a string
parseAge("hhhh"); //=> 0

上面的parseAge函數工作正常沒有什麼問題。如果我們要修改輸出錯誤=信息和警告的呈現方式、那麼就需要修改相應的代碼行,以及其他地方的輸出模式。書中給的方法是通過將它們抽象成不同的函數來實現:

function fail(thing) {
  throw new Error(thing);
}

function warn(thing) {
  console.log(["WARNING:", thing].join(''));
}

function note(thing) {
  console.log(["NOTE:", thing].join(''));
}

接著就是使用上面的函數,去重構parseAge這個函數。

funciton parseAge(age) {
  if (!_.isString(age))
    fail("Expecting a string");
  var a;

  note("Attempting to parse an age");
  a = parseInt(age, 10);

  if (_.isNaN(a)) {
    warn(["Could not parse age:", age].join(""));
    a = 0;
  }

  return a;
}

把報告錯誤的代碼都放到不同的函數裡去,且重構後的parseAge和之前的也沒有多大的變化。但是不同的就是現在報告錯誤、信息和警告的想法已經被抽象化。錯誤、信息和警告的報告結果也是完全被修改了。

這麼做是,由於行為包含在單一的函數中,所以函數可以被能夠提供類似行為的新函數取代,或直接被完全不同的行為取代。

封裝和隱蔽

這個標題很容易理解,舉個例子。像我們經常使用iife來避免全局的污染,這就是一個封裝和隱蔽的很好例子。通過使用iife來隱蔽自己的寫的一些變量和方法,目的就是不去污染全局的環境。這也是使用閉包的方式來隱蔽數據。

因為閉包也是一種函數。且和現在在學習函數式編程有莫大的關系。但是也不要忘記了之前學習的面向對象式封裝,畢竟這兩者不能說誰更加的好。但是都掌握了也不是一件什麼壞事。一句老話:看需求。

以函數為行為單位

隱藏數據和行為(通常不方便於快速修改)只是一種講函數作為抽象單元的方式。另一種方式就是提供一種簡單地存儲方式和傳遞基本行為的離線散單元。

書中一個小栗子,通過使用js語法來索引數組中的一個值:

var arr = ['a', 'b', 'c'];
arr[1] //=> b

雖然上面索引數組中的中的一個值很簡單,但並沒有辦法可以在不把它放到函數裡的前提下,獲取這個行為並根據需要來使用他/她。寫一個簡單函數nth,用來索引數組中的一個值:

function nth(a, index) {
  return a[index];
}

接著運行:

nth(arr, 1); //=> b
運行成功,但是如果傳入一個空對象時,就會報錯了。因此,如果想圍繞nth來實現函數抽象,我們或許會設計下面的聲明:nth返回一個存儲在允許索引訪問的數據類型中的有效袁術。這段聲明的關鍵在於索引數據的類型的概念。或許需要一個函數來判斷類型:

function isIndexed(data) {
  return _.isArray(data) || _.isString(data);
}

接著繼續完善nth函數。isIndexed函數是一個提供了判斷某個數據是否為字符串或者數組的抽象。

function nth(a, index) {
  if (!_.isNumber(index)) 
    fail("Expected a number as the index");
  if (!isIndexed(a))
    fail("Not supported on non-indexed type");
  if ((index < 0) || (index > a.length - 1))
    fail("Index value is out of bounds");

  return a[index];
}

從index抽對象構建nth函數抽象的方式一樣,也可以以同樣的方式來構建一個second抽象:

function second(a) {
  return nth(a, 1);
}

函數second允許在一個不同但相關的情況下,正確的使用nth函數:

second(arr); //=> b
通過上面的栗子,就知道。我們可以把每一步都抽象成一個函數,把每一個參數都抽象出來。雖然這樣寫感覺定義了許多函數。不過這樣更加容易理解每一項的功能和流程。

數據抽象

JavaScript 的對象原型模型是一個豐富且基礎的數據方案。
因為js沒有類的原因,就有了許多模擬類的方法,且在ES6上也出現了class關鍵字。盡管類有許多長處,但很多的時候js應用程序的數據需求幣類中的簡單的要多。

基於類的對象系統的一個有理的論據是實現用戶界面的歷史使用。
js中的對象和數組已經能夠滿足我們對數據的操作了,且Underscore也是重點也是如何處理數組和對象。

實施和使用的簡易性是使用js的核心數據結構進行數據建模的目的。這並不是說面向對象或者基於類的方法就完全沒有用。處理集合為中心的函數式方式更加適合處理與人有關的數據,而面向對象的方法最適合模擬人。

js函數式初試

在開始函數式編程前,需要先定義兩個常用且有用的函數:

function existy(x) {
  return x != null
}

function truthy(x) {
  return (x !== false) && existy(x);
}

existy函數旨在定義事物之前的存在。js中就有兩個值可以表示不存在:null和undefined。
truthy函數用來判斷一個對象是否應該認為是true的同義詞。

我們可以在很多地方使用到這兩個函數,其實函數式理念來自於它們的使用。有些同學可能已經熟悉了許多js實現中的map forEach等方法。且Underscroe也提供了許多類似的方法,這也許就是選擇Underscroe來輔助學習函數式編程的原因。

簡單說下就是:

一個對”存在“的抽象函數的定義。
一個建立在存在函數之上的,對”真“的抽象函數定義。
通過其他函數來使用上面的兩個函數,以實現更多的行為。

加速

大概了解了函數式編程之後。你可能會想這函數式編程不是很慢嗎?比如前面獲取數組索引,有必要定義一個函數來專門獲取嗎?直接用arr[index]絕對比那些函數來的快。

var arr = [1, 2, 3, 4, 5];

// 最快
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 較慢
_.each(arr, function (val, index) {
  console.log(index);
});

但是我們在寫代碼的時候可能不會考慮的那麼深,也許使用函數的確比原生要慢一些。但是大多數情況下也不會去在乎那麼點時間,且現在有強大的v8引擎,大部分情況下的他都能很高效的編譯和執行我們的js代碼。所以我們沒有必要在還沒有寫出正確的代碼前考慮運算速度。

如果是我來選擇的話,可能會更加關注與代碼的風格。那種寫法寫的舒服看的舒服就使用哪一種,當然也是要保證基本的運算速度下,以不至於慢的離譜。看的舒服的代碼比跑的快的代碼可能更加有成就感。

總結

看完了第一章也是可以小結一下js的函數式編程。下面引用書上的總結:

確定抽象,並為其構建函數。
利用已有的函數來構建更加復雜的抽象。
通過將現有的函數傳給其他的函數來構建更加復雜的抽象。
單是構建抽象還是不夠的,如果能夠把強大的數據抽象結合來實現函數式編程效果會更加好。

後面的章節讀後感會慢慢的分享給大家,敬請關注。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved