fp

楔子 如果平常在寫 OOP(物件導向)語言的人，應該就會很熟悉繼承(inheritance);如果有寫 ruby 的人，應該更熟悉鴨子型別(duck typing);如果在寫 FP(functional programming)的，就更熟悉組合(composition)。每個語言都有他的特性，端看怎使用而以，語言的熟悉度就在於這些手法的習性而以。 但在 javascript 中其實都可以實踐這些特性來讓不同的技術人來使用，今天就拿一些網站的 demo code 來分享。 code 先來看看標準的 es2015 的 classes & prototype Inheritance with Classes // case I prototype var Animal = function(name) { this.name = name } var Alligator = function(name) { Animal.apply(this, arguments); // Call parent constructor } Alligator.prototype = Object.create(Animal.prototype) Alligator.prototype.constructor = Alligator var jack = new Alligator("jack") // case II classes class Animal { constructor(name) { this.name = name } } class Alligator extends Animal {} const jack = new Alligator("jack") // extends class Alligator extends Animal { constructor(....

楔子 最典型的使用案例是 jQuery 時代，標準的 jQuery 格式大概就長的像下面這樣的格式 // jQuery === $ var hiddenBox = $("#banner-message") jQuery("#button-container button").on("click", function(event) { hiddenBox.show() }) 通常簡化來看就是 $(DOMelement, clickFunction)，而 clickFunction 的長相像就也是像 function (event) { // event handling } 如果是把這種格式轉換一下，大概有幾個注意的要點: 參數可以是一個函數 函數以一個參數為佳 function add (x,y) { return x + y } function addFive (x, referenceCallback) { return referenceCallback(x) } addFive(10, add) // 標準化 function highOrderFunction (x, callback) { return callback(x) } 蠻多的 js 的函數也都採用這樣的 coding style。

特徵 可以把函數當參數使用 可以使用 compose(反向) 或 pipe(正向) 的串連方式 // 建立一個標準的函數 let func = f = x => f(x) let addOne = x => x + 1 let ff = func(addOne) // f = addOne ff(1) // 1+1 pipe 就像一個水管一樣串接不同的 function const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x) pipe(x => x + 1, x => x + 2)(3) 練習看看 有了上面的東西，如何使用? 如果有興趣可以去看看 Dr.Boolean 的一些影片，擷取一些常用的工具來做使用。 const pipe = (...fns) => x => fns....