Duc NX’s blog

Ruby: Bỏ Chữ và Số Còn Lại Gì

2016-02-02T03:58:10+00:00

Trong CTF lần trước có bài [Codegolf] Ruby Lab với yêu cầu viết một chương trình mà không được phép sử dụng bất cứ một kí tự chữ (a, b, c…) hay số (0, 1, 2…) nào.

Mới đầu nghe đề bài thì có vẻ vô lý, nhưng khi tìm hiểu rồi mới thấy, thật đúng là không có gì là không thể với Ruby. Cùng xem sao nhé.

1. Tên biến

Trước hết, ta cần tên biến để lưu các giá trị mà chương trình cần sử dụng.

Do không được sử dụng các kí tự chữ và số, nên ta có thể sử dụng một hoặc nhiều dấu gạch dưới _ để làm tên. Ngoài ra, Ruby cho phép tên biến bắt đầu bằng $ hoặc @, vậy nên ta có thể thêm hai kí tự này phía trước những dấu _. Khi cần thì $-_ cũng có thể được sử dụng để làm tên biến.

2. Giá trị số

Khi không dùng các kí tự số, thì ta lấy các gía trị 0, 1… ở đâu?

Thật may là Ruby có một vài biến định nghĩa sẵn mà ta có thể dùng được:

$$ là biến chứa process ID của Ruby. Ta có thể đảm bảo là $$ khác 0, nên khi chia cho chính nó ta được 1. Từ đó, kết hợp cới các phép toán +, -, *, /, ** ta thu được các số khác khi cần.
$. chứa “The current input line number of the last file that was read”, nói cách khác, khi chạy chương trình thì $. có gía trị bằng 0

3. String

Để tạo ra các xâu kí tự, ta có thể lợi dụng toán tử <<: Khi toán hạng bên tay phải là một số integer, thì nó sẽ được xem như là code point và được chuyển hoá thành kí tự trước khi thêm vào String bên tay trái.

'' << 97 << 98 << 99
# "abc"

Kết hợp vợi gía trị số ở phần trước, ta có thể tạo String tuỳ ý.

4. Các cấu trúc điều khiển

Theo Structured program theorem, ta có thể viết mọi chương trình chỉ cần 3 loại cấu trúc điều khiển:

Tuần tự
Rẽ nhánh
Lặp

Với cấu trúc điều khiển tuần tự, ta đơn giản chỉ cần viết từng câu lệnh thành các dòng liên tiếp, hoặc cùng dòng thì ngăn cách nhau bởi dấu ;. Vậy nên, thứ ta cần xét ở đây chỉ còn là rẽ nhánh và lặp

4.1 Rẽ nhánh

Vì không thể dùng các kí tự chữ cái thông thường, nên câu lệnh if else quen thuộc của chúng ta bị ném ra ngoài cửa sổ. Thay vào đó, Ruby hỗ trợ Ternary operation ?:, vậy nên hãy sử dụng chúng thôi:

if condition
  do_x
else
  do_y
end

# tương đương với

condition ? do_x : do_y

4.2 Lặp

Để tạo vòng lặp mà không dùng đến các kí tự chữ và số, ta phải dựa vào đệ quy, sử dụng cú pháp lambda

Ví dụ đoạn chương trình sau in ra các số từ 1 đến 100:

n = 0
print_number = -> {
  n += 1
  puts n
  n < 100 ? print_number[] : 0
}

Có thể thấy, để tránh phải sử dụng kí tự chữ, ta tạo Proc qua cú pháp ->. Lợi dụng #[] là alias cho #call đối với Proc. Ta có thể khiến nó tự gọi đệ quy chính mình.

Kết hợp những gì vừa giới thiệu vào chương trình trên ta có:

_ = $$ / $$      # 1
__ = _ - _       # 0
@_ = _ + _       # 2
$_ = @_ + @_ + _ # 5

$__ = __
(___ = -> {      # print_number
  $__ += _       # tăng n lên 1
  puts $__
  $__ < ($_ * @_) ** @_ ? ___[] : __    # (5 * 2) ** 2 = 100
})[] # ngay lập tức gọi lambda

Đoạn chương trình trên vẫn dùng puts, vi phạm việc không được sử dụng các kí tự chữ cái. Để loại bỏ puts này, ta có phần tiếp theo.

5. Output

Như đã nói ở trên, để chương trình có thể in ra kết qủa, đoạn script bên trên đã sử dụng puts. Tuy nhiên nếu không sử dụng chữ cái thì in kết qủa thế nào đây???

Quay trở lại các biến được định nghĩa sẵn của Ruby, ta có:

$>: The default output for print, printf. $stdout by default.

Kết hợp với toán tử <<, ta có thể in kết qủa ra màn hình, ví dụ như sau:

$> << 97
# 97
$> << ('' << 97)
# 'a'

Vậy đó, ta có thể in ra chữ hay số một cách dễ dàng.

6. Input

Đã có output rồi, vậy lấy input thế nào đây?

Mặc dù có $< giống như một file ảo chứa thất cả tham số đầu vào, nhưng việc lấy dữ liệu từ $< mà không dùng kí tự chữ hay số là không thể được.

Tuy nhiên, Ruby hỗ trợ gọi system call thông qua backtick `

puts `ls`
# Music
# Pictures
# Public
# Video

Như vậy, thông qua việc gọi cat hoặc tee qua system call, ta có thể lấy được đầu vào cho chương trình, dù chương trình không có khả năng interactive

input = `tee`
input = `#{'tee'}`
input = `#{'' << 116 << 101 << 101}`

Kết luận

Áp dụng các kĩ thuật ở trên, ta có thể viết được hầu hết mọi chương trình bằng Ruby, mà không phải dùng bất cứ một kí tự chữ hay số nào.

Sau đây là một đoạn chương trình in ra chuỗi n số Fibonaci, với n tuỳ ý. Cụ thể chương trình hoạt động ra sao, các bạn cùng thử đọc xem nhé ;)

_  = $$ / $$
__ =  _ +  _
$_ = __ + __
@_ = $_ * $_ * (_ + __)
$-_ = _ + _ + _
$-_ = $-_ * $-_ + _

$__ = -> __ {
  @__ = @_ - _
  (___ = -> {
    ('' << @__ += _) == __ ? @__ - @_ : ___[]
  })[]
}

@__ = -> ___ {
  (@___ = -> {
    $. += $__[___[_ - _]]
    $. *= $_ * __ + __
    (___ = ___[_.._ - __]) == '' ? $. / ($_ * __ + __) : @___[]
  })[]
}

___ = $-_ ** __ + _
____ = `#{'' << (___ + $_ * $_ - _) << ___ << ___}`[$...$.-__]
____ = @__[____]

$___ = @___ = _
$. = _ - _
(@__ =  -> (__) {
  __ -= _
  $> << @___ << ('' << $-_)
  $_ = @___
  @___ += $___
  $___ = $_
  __ > $. ? @__[__] : $.
})[____]

Thử chạy:

$ cat n
12
$ cat n | ruby fibonaci.rb
1
2
3
5
8
13
21
34
55
89
144
233

Tham khảo

Non-Alphanumeric Ruby for Fun and Not Much Else

Closures Trong Javascript Hoạt động Như Thế Nào?

2015-12-09T08:13:24+00:00

Bài viết được dịch từ blog của tác giả Dmitry Frank.

Tôi đã dùng closures vài lần rồi. Tôi học cách dùng chúng, nhưng không hiểu rõ closures thực sự hoạt động như thế nào, thực chất điều gì xảy ra khi tôi sử dụng chúng. Mà clousre là cái gì cơ chứ? Wikipedia cũng không giúp ích gì lắm. Khi nào thì closure được tạo ra và khi nào nó bị xóa bỏ? Implement của nó trông như thế nào?

"use strict";

var myClosure = (function outerFunction() {

  var hidden = 1;

  return {
    inc: function innerFunction() {
      return hidden++;
    }
  };

}());

myClosure.inc();  // returns 1
myClosure.inc();  // returns 2
myClosure.inc();  // returns 3

// Ok, tuyệt. Nhưng nó được cài đặt như thế nào,
// và điều gì đã diễn ra?

Và khi cuối cùng cũng hiểu được, tôi cảm thấy cực kì thích thú và quyết định sẽ giải thích nó: ít nhất, giờ đây tôi sẽ không quên nó nữa. Bạn biết đấy, có câu nói như thé này:

Tell me and I forget. Teach me and I remember. Involve me and I learn.

© Benjamin Franklin

Và khi đọc các giải thích về closures, tôi cố hình dung một cách trực quan xem mọi thứ liên quan đến nhau như thế nào: object nào reference đến các object khác, cái nào kế thừa từ cái nào, vân vân… Tôi tìm các hình minh họa như vậy mà không có, vậy nên tôi quyết định tự mình vẽ luôn.

Tôi xem như rằng độc giả của bài viết này đã quen với JavaScript, biết Global Object là cái gì, biết rằng hàm trong JavaScript là “first-class objects”, vân vân và vân vân…

Scope chain

Khi bất kì một đoạn JavaScript nào được thực thi thì nó cần một chỗ nào đó để chứa các biến địa phương của mình. Ta hãy gọi nó là scope object đi (nhiều người sẽ gọi nó là LexicalEnvironment). Ví dụ, khi bạn gọi một hàm, và hàm đó định nghĩa ra vài biến địa phương, thì những biến địa phương này được lưu vào trong scope object. Bạn có thể xem nó như một object của JavaScript bình thường, chỉ có một điểm khác biệt là bạn không thể tham chiếu đến toàn bộ object này một cách trực tiếp.

Khái niệm về scope object này rất khác với nhiều ngôn ngữ khác, như C hay C++; ở các ngôn ngữ này thì biến địa phương được lưu trong stack. Còn trong JavaScript, scope object được cấp phát bộ nhớ trong heap (hay ít nhất là “hành vi” của nó giống như vậy), do đó nó có thể tồn tại ngay cả khi hàm đã được trả về. Tôi sẽ giải thích thêm sau.

Đúng như bạn nghĩ, scope object có thể có parent. Khi một đoạn code thử truy cập tới một biến, thì trình thông dịch sẽ tìm property này trong scope object hiện tại. Nếu property không tồn tại, trình thông dịch chuyển sang tìm ở parent scope object. Và tiếp tục lần lượt đến khi thấy giá trị cần tìm, hoặc nếu như không còn parent nữa. Ta gọi chuỗi các scope object này là scope chain.

Việc phân giải một biến trên scope chain rất giống với kế thừa prototype (protototypal inheritance) với một điểm khác biệt: nếu bạn truy cập một thuộc tính không tồn tại của object bình thường, và prototype chain cũng không chứa property này thì sẽ không có lỗi xảy ra: undefined sẽ được trả về. Nhưng nếu bạn truy cập một property không tồn tại trên scope chain (truy cập một biến không tồn tại), thì lỗi ReferenceError sẽ xảy ra.

Phần tử cuối cùng trong scope chain luôn luôn là Global Object. Ở code JavaScript top-level thì scope chain chỉ bao gồm một phần tử duy nhất: Global Object. Vì vậy, nếu bạn định nghĩa biến ở code top-level, thì chúng được định nghĩa ở Global Object. Khi một hàm được gọi, scope chain chứa nhiều hơn một object. Bạn có thể nghĩ rằng nếu hàm được gọi từ code top-level, thì scope chain đảm bảo chỉ chứa đúng 2 scope object, tuy nhiên điều này không đúng! Có thể có 2 hoặc nhiều hơn scope object, tùy thuộc vào hàm. Phần sau tôi sẽ phân tích kĩ hơn.

Top-level code

Ok, lý thuyết thế là đủ rồi, hãy thử một ví dụ cụ thể. Sau đây là một ví dụ rất đơn giản:

my_script.js

"use strict";

var foo = 1;
var bar = 2;

Chúng ta mới tạo hai biến ở code top-level. Như đã nói bên trên, đối với code top-level, scope object chính là Global Object:

Trong hình trên, ta có execution context (chính là code top-level my_script.js) tham chiếu tới scope object. Đương nhiên, trong thực tế thì Global Object bao gồm rất nhiều property chuẩn cũng như property đối với từng host, nhưng không được biểu diễn trong hình trên.

Non-nested functions

Giờ, xét đoạn script sau:

my_script.js

"use strict";
var foo = 1;
var bar = 2;

function myFunc() {
  //-- định nghĩa biến địa phương của hàm
  var a = 1;
  var b = 2;
  var foo = 3;

  console.log("inside myFunc");
}

console.log("outside");

//-- vả gọi nó:
myFunc();

Khi hàm myFunc được định nghĩa, định danh myFunc được thêm vào scope object hiện thời (trong ví dụ này là Global Object), và định danh này tham chiếu tới function object. Function object chứa code của hàm cũng như các property khác của nó. Một property mà ta quan tâm là internal property [[scope]], tham chiếu tới scope object hiện tại, hay nói cách khác chính là scope object đang active khi hàm được định nghĩa (trong trường hợp này, là Global Object).

Vậy nên lúc mà console.log("outside"); được thực thi thì ta có dạng như sau:

Nhắc lại một lần nữa: function object được tham chiếu bởi myFunc không chỉ giữ code của hàm mà còn tham chiếu tới scope object đang hoạt động lúc hàm được định nghĩa. Đây là một điểm rất quan trọng.

Và khi hàm được gọi, một scope object mới được tạo ra lưu giữ các biến địa phương cho myFunc (và cả các tham số của nó nữa), và scope object mới này kế thừa từ scope object được tham chiếu bởi hàm được gọi.

Do vậy, lúc myFunc thực sự được gọi, thì ta có sơ đồ như sau:

Cái chúng ta có ở đây là một scope chain: nếu ta thử truy cập một biến bên trong myFunc, JavaScript sẽ thử tìm nó trong scope object đầu tiên: myFunc() scope. Nếu tìm kiếm thất bại thì tiếp tục tới scope object tiếp theo (ở đây là Global object) để tìm tiếp. Nếu property được yêu cầu không nằm trong bất cứ scope object nào thì ReferenceError sẽ xảy ra.

Ví dụ, nếu ta truy cập a từ myFunc, ta sẽ thu được giá trị 1 từ scope object đầu tiên myFunc() scope. Nếu ta truy cập foo, ta sẽ có giá trị 3 cũng từ myFunc() scope: nó che đi property foo của Global object. Nếu ta truy cập bar, ta thu được 2 từ Global object. Nó hoạt động gần như là kế thừa prototype.

Một điểm quan trọng cần chỉ ra ở đây là những scope object này còn tồn tại khi mà có tham chiếu đến chúng. Khi tham chiếu cuối cùng tới một scope object biến mất thì scope object này sẽ bị garbage-collect.

Vậy, khi myFunc() trả về, không có gì tham chiếu đến myFunc() scope nữa, và nó bị garbage-collect, ta thu được sơ đồ giống như lúc trước:

Từ giờ, tôi sẽ không cho function object vào đồ hình nữa, nếu không đồ hình sẽ trở nên cực kì rối rắm. Bạn hãy luôn nhớ rằng: bất cứ tham chiếu tới một hàm nào trong JavaScript đều tham chiếu đến function object, và function object này lại tham chiếu tới scope object.

Nested functions

Như đã thấy ở phần trước, khi hàm trả về, không có gì tham chiếu tới scope object của nó nữa, và vì vậy nó bị garbage-collect. Nhưng nếu ta định nghĩa một nested function (hàm lồng nhau) và trả nó như kết quả (hoặc lưu nó vào đâu đó bên ngoài) thì sao? Bạn đã biết rằng: function object luôn luôn tham chiếu tới scope object mà tại đó nó được tạo ra. Do đó, khi ta định nghĩa nested function, nó tham chiếu tới scope object của hàm bên ngoài. Và nếu ta lưu nested function đâu đó bên ngoài, thì scope object không bị garbage collect kể cả khi hàm số bên ngoài trả về: vì vẫn còn tham chiếu tới nó! Xem đoạn code sau đây:

my_script.js

"use strict";

function createCounter(initial) {
  //-- định nghĩa biến địa phương đồi với hàm
  var counter = initial;

  //-- định nghĩa nested function. Mỗi hàm đều có
  //   một tham chiếu đến scope object hiện thời

  /**
    * Tăng internal counter thêm một giá trị được cho.
    * Nếu giá trị đầu vào không phải là số hữu hạn, hoặc ít hơn 1 thì 1 sẽ
    * được dùng
    */
  function increment(value) {
    if (!isFinite(value) || value < 1){
      value = 1;
    }
    counter += value;
  }

  /**
    * Trả về giá trị counter hiện tại.
    */
  function get() {
    return counter;
  }


  //-- trả về object chứa tham chiếu đến
  //   các nested function
  return {
    increment: increment,
    get: get
  };
}

//-- tạo ra object counter
var myCounter = createCounter(100);

console.log(myCounter.get());   //-- in ra "100"

myCounter.increment(5);
console.log(myCounter.get());   //-- in ra "105"

Khi ta gọi createCounter(100);, ta có sơ đồ như sau:

Để ý rằng createCounter(100) scope được tham chiếu bới nested function increment và get. Nếu createCounter() không trả về gì cả, thì đương nhiên, việc tự tham chiếu này không tính và scope vẫn bị garbage collect. Nhưng do createCounter() trả về object chứa tham chiếu tới những hàm này, nên ta có:

Bỏ chút thời gian để ngẫm nghĩ về nó nào: hàm createCounter(100); đã trả về, nhưng scope của nó vẫn còn, có thể truy cập được thông qua các hàm bên trong, và chỉ thông qua những hàm này. Thực sự là không thể truy cập object createCounter(100) scope trực tiếp, ta chỉ có thể gọi myCounter.increment() hoặc myCounter.get() mà thôi. Những hàm này có quyền truy cập private tới scope của createCounter.

Giờ ta hãy thử gọi, ví dụ như myCounter.get() xem sao. Nhớ lại rằng khi bất cứ hàm nào được gọi, thì một scope object được tạo ra, và được thêm vào scope chain tham chiếu bởi hàm. Do vậy, khi myCounter.get() được gọi, ta có:

Scope object đầu tiên trong chuỗi của hàm get() là object rỗng get() scope. Vậy nên, khi get() truy cập biến counter, JavaScript không thể tìm nó trong object đầu tiên của scope object chain, chuyển đến scope object tiếp theo, và dùng biến counter ở createCounter(100) scope. Rồi hàm get() chỉ đơn thuần trả về kết quả đó.

Bạn có thể đã để ý thấy rằng object myCounter được thêm vào hàm myCounter.get() như là this (biểu thị trong hình bằng mũi tên đỏ). Bởi vì this không bao giờ nằm trong scope chain, bạn cần lưu ý điều này. Tôi sẽ giải thích thêm ở phần sau.

Gọi increment(5) thì thú vị hơn một chút, do hàm này còn có tham số đầu vào:

Bạn thấy đấy, tham số value được lưu tại scope object mới được tạo cho lần gọi increment(5). Khi hàm truy cập đến biến value, JavaScript ngay lập tức xác định được nó ở object đầu tiên trong scope chain. Tuy nhiên khi hàm truy cập counter, JavaScript không tìm thấy nó ở object đầu tiên trong scope chain, chuyển tiếp tới scope object tiếp theo, và tìm thấy nó ở đây. Vì vậy increment() thay đối biến counter ở createCounter(100) scope. Và gần như không ai khác có thể thay đổi được giá trị của biến này. Đó là lí do tại sao closure lại mạnh đến như vậy: object myCounter không thể bị tấn công. Closure cực kì phù hợp để lưu những thứ riêng tư.

Để ý rằng tham số initial cũng được lưu ở scope object của createCounter(), dù rằng nó không được sử dụng. Vậy nên ta có thể tiết kiệm được một xíu bộ nhớ nếu ta bỏ đi var counter = initial; đổi tên initial thành counter và sử dụng trực tiếp. Nhưng để rõ ràng, ta dùng initial và var counter;

Cần nói rõ thêm rằng các scope này vẫn “sống”. Khi hàm được gọi, scope chain hiện thời không được copy cho hàm này: chỉ là scope object mới được thêm vào scope chain mà thôi, và khi bất kì scope object nào đó trong chuỗi này bị thay đổi bời một hàm nào đó, thì thay đổi này ngay lập tức có thể được quan sát thấy bởi tất cả các hàm có scope object này trong scope chain của chúng. Khi increment() thay đổi giá trị counter , lần gọi get() tiếp theo sẽ trả về giá trị đã được cập nhật này.

Đó cũng chính là lí do vì sao ví dụ nổi tiếng sau chạy không đúng:

"use strict";

var elems = document.getElementsByClassName("myClass"), i;

for (i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click", function () {
    this.innerHTML = i;
  });
}

Trong vòng lặp trên có rất nhiều hàm được tạo ra, và tất cả chúng đều tham chiếu đến cùng một scope object trong scope chain của mình. Chính vì vậy, chúng sử dụng cùng một biến i, chứ không phải một bản sao riêng của nó. Để xem thêm giải thích rõ hơn cho ví dụ này, xem link sau: Don’t make functions within a loop.

Function object giống nhau, scope object khác nhau

Giờ ta mở rộng ví dụ về couter cho vui nhé. Nếu ta tạo ra nhiều hơn một object counter thì sao? Đơn giản:

my_script.js

"use strict";

function createCounter(initial) {
  /* ... xem code từ ví dụ trước ... */
}

//-- tạo object counter
var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);

Khi cả myCounter1 và myCounter2 được tạo, ta có sơ đồ sau:

Hãy nhớ lại rằng từng funciton object có tham chiếu tới scope object. Vậy nên ở ví dụ bên trên, myCounter1.increment và myCounter2.increment tham chiếu đến function object có code giống hệt nhau và các giá trị property như nhau(name, length, và nhiều nữa), nhưng [[scope]] của chúng lại tham chiếu đến scope object khác nhau.

Đồ hình không vẽ các function object riêng biệt để đơn giản, nhưng chúng vẫn có ở đó.

Một vài ví dụ khác:

var a, b;
a = myCounter1.get();   // a equals 100
b = myCounter2.get();   // b equals 200

myCounter1.increment(1);
myCounter1.increment(2);

myCounter2.increment(5);

a = myCounter1.get();   // a equals 103
b = myCounter2.get();   // b equals 205

Đó chính là cách nó hoạt động, Khái niệm closure quả thật rất mạnh.

Scope chain và “this”

Dù thích hay không thì this không được lưu như một phần của scope chain. Thay vào đó, giá trị của this phụ thuộc vào cách hàm được gọi: bạn có thể gọi cùng một hàm với nhiều giá trị this khác nhau.

Invocation patterns

Về chủ đề này thì có thể viết được hẳn một bài viết riêng, nên tôi không đi sâu nhưng nhìn chung có bốn cách gọi hàm:

Method invocation pattern

"use strict";

var myObj = {
  myProp: 100,
  myFunc: function myFunc() {
    return this.myProp;
  }
};
myObj.myFunc();  //-- returned 100

Nếu invocation expression chứa refinement (dấu chấm, hoặc [subscript]), thì hàm được gọi như là một phương thức. Vì vậy, trong ví dụ bên trên, this được cho trong myFunc là tham chiếu tới myObj.

Function invocation pattern

"use strict";

function myFunc() {
  return this;
}
myFunc();   //-- returns undefined

Khi không có refinement, thì nó lại phụ thuộc xem code có được chạy trong strict mode hay không:

trong strict mode, thì this là undefined
trong non-strict mode, this trỏ tới Global Object

Do đoạn code trên có "use strict"; nên được chạy trong strict mode, myFunc() trả về undefined.

Constructor invocation pattern

"use strict";

function MyObj() {
  this.a = 'a';
  this.b = 'b';
}
var myObj = new MyObj();

Khi hàm được gọi với new ở đằng trước, JavaScripts cấp phát object mới kế thừa từ property prototype của hàm, và object mới được cấp phát này chính là this của hàm.

Apply invocation pattern

"use strict";

function myFunc(myArg) {
  return this.myProp + " " + myArg;
}

var result = myFunc.apply(
  { myProp: "prop" },
  [ "arg" ]
);
//-- result is "prop arg"

Ta cũng có thể truyền một giá trị tùy ý vào làm this. Trong ví dụ trên, chúng ta dùng Function.prototype.apply(). Xem giải thích cụ thể hơn tại:

Sử dụng “this” trong nested function

Xét:

"use strict";

var myObj = {

  myProp: "outer-value",
  createInnerObj: function createInnerObj() {

    var hidden = "value-in-closure";

    return {
      myProp: "inner-value",
      innerFunc: function innerFunc() {
        return "hidden: '" + hidden + "', myProp: '" + this.myProp + "'";
      }
    };

  }
};

var myInnerObj = myObj.createInnerObj();
console.log( myInnerObj.innerFunc() );

In ra hidden: 'value-in-closure', myProp: 'inner-value'

Đến lúc myObj.createInnerObj() được gọi, ta có sơ đồ như sau:

Và khi ta gọi myInnerObj.innerFunc(), nó trông như sau:

Ta có thể thấy rõ rằng this trong myObj.createInnerObj() trỏ đến myObj, nhưng this trong myInnerObj.innerFunc() trỏ tới myInnerObj: cả hai hàm đều được gọi với Method invocation pattern, như đã giải thích bên trên. Đó là lí do tại sao this.myProp bên trong innerFunc() là "inner-value" chứ không phải là "outer-value".

Do đó, ta có thể lừa innerFunc dùng myProp khác như sau:

/* ... see the definition of myObj above ... */

var myInnerObj = myObj.createInnerObj();
var fakeObject = {
  myProp: "fake-inner-value",
  innerFunc: myInnerObj.innerFunc
};
console.log( fakeObject.innerFunc() );

In ra: hidden: 'value-in-closure', myProp: 'fake-inner-value'

Hoặc với apply() hoặc call():

/* ... see the definition of myObj above ... */

var myInnerObj = myObj.createInnerObj();
console.log(
  myInnerObj.innerFunc.call(
    {
      myProp: "fake-inner-value-2",
    }
  )
);

In ra: hidden: 'value-in-closure', myProp: 'fake-inner-value-2'

Tuy nhiên, đôi khi hàm bên trong cần truy cập tới this của hàm bên ngoài, không phụ thuộc vào cách mà hàm được gọi. Có một idiom cho việc này: ta cần lưu giá trị ta cần vào trong closure (chính là scope object hiện tại), như sau: var self = this, và sử dụng self trong hàm bên trong, thay cho this. Xét đoạn code sau:

"use strict";

var myObj = {

  myProp: "outer-value",
  createInnerObj: function createInnerObj() {

    var self = this;
    var hidden = "value-in-closure";

    return {
      myProp: "inner-value",
      innerFunc: function innerFunc() {
        return "hidden: '" + hidden + "', myProp: '" + self.myProp + "'";
      }
    };

  }
};

var myInnerObj = myObj.createInnerObj();
console.log( myInnerObj.innerFunc() );

In ra: hidden: 'value-in-closure', myProp: 'outer-value'

Theo cách này, ta có sơ đồ sau:

Bạn thấy đấy, lần này innerFunc() cso thể truy cập tới giá trị this của hàm bên ngoài, thông qua self lưu trong closure.

Kết luận

Giờ ta hãy trả lời vài câu hỏi ở đầu bài viết nhé:

Closure là gì? - Là object tham chiếu tới cả function object và scope object. Thực ra thì tất cả hàm trong JavaScript đều là closure: không thể tham chiếu tới function object mà không có scope object.
Nó được tạo ra khi nào? - Do tất cả hàm trong JavaScript đều là closure, đáp án hiển nhiên là: khi bạn định nghĩa một hàm, bạn định nghĩa một closure. Do đó, nó được tạo khi hàm được định nghĩa. Nhưng bạn cần phân biệt giữa việc tạo closure và việc tạo ra scope object mới: closure (hàm và tham chiếu tới scope chain hiện tại) được tạo khi hàm được định nghĩa, nhưng một scope object mới đưuọc tạo ra (và được thêm vào scope chain của closure) khi hàm được gọi.
Khi nào thì nó bị xóa đi? - Cũng như bất kì object bình thường nào khác trong JavaScript, nó được garbage-collect khi không còn tham chiếu đến nó nữa.

Đọc thêm:

JavaScript: The Good Parts của Douglas Crockford. Hiểu closure hoạt động thế nào thì tốt, nhưng quan trọng hơn là hiểu làm thế nào để sử dụng chúng đúng cách. Cuốn sách này rất ngắn gọn, và chứa đựng rất nhiều pattern hay và hữu dụng.
JavaScript: The Definitive Guide của David Flanagan. Đúng như tựa đề của nó, cuốn sách này giải thích ngôn ngữ rất chi tiết.

Javascript, Promise và Functional Programming

2015-12-09T08:00:22+00:00

I. Mở đầu

Trong lập trình ta sẽ bắt gặp hai loại function: sync (đồng bộ - synchronous) và async (bất đồng bộ - asynchronous). Với sync function, chương trình phải đợi từng tác vụ hoàn thành trước khi bắt đầu một tác vụ khác. Và, ngược lại, với async function, ta có thể thực hiện nhiều tác vụ một cách đồng thời.

Đối với Javascript, để gọi một async function, lập trình viên thường phải sử dụng continuation-passing style, truyền callback mỗi khi gọi function, dẫn đến một thứ gọi là callback hell.

Sử dụng promise cùng tư duy functional programming sẽ giúp lập trình viên dễ dàng nắm bắt được luồng xử lý của chương trình khi dùng async function.

II. Async với callback

Chắc hẳn mọi người đều biết đến những đoạn code kiểu này:

$.getJson('...', function (data) {
   // do something with data
   ...
});

Với phương pháp này, mỗi khi gọi một async function, lập trình viên truyền thêm một tham số: một function được gọi khi async function kia kết thúc.

Ở đây, ta không quan tâm giá trị getJson trả về mà chỉ quan tâm đến side effect: đó là việc callback mà ta truyền vào được gọi. Mỗi khi sử dụng một async function như getJson, luồng thực hiện cũng như luồng tư duy của lập trình viên bị “ngắt quãng”. Để hiểu được chương trình, lập trình viên cần xem kết quả trả về được sử dụng như thế nào trong tương lai ở hàm callback rồi lại tiếp tục với các dòng lệnh tiếp theo. Khi đọc và viết code, lập trình viên chạy chương trình trong đầu, vậy nên khi sử dụng nhiều callback, đặc biệt là callback lồng nhau thì chương trình trở nên cực kì khó đọc.

Xét một ví dụ chương trình đơn giản mô phỏng việc mua gạo, thực hiện từng bước như sau:

B1: Mua gạo
B2: Rửa nồi
B3: Vo gạo
B4: Cắm cơm
B5: Ăn

Nếu dùng callback thì ta sẽ có:

var an, camCom, muaGao, noi, ruaNoi, tien, voGao;

tien = 3000;

noi = {
  name: "noi",
  cleaned: false
};

muaGao = function(tien, success, error) {
  if (tien < 2000) {
    error("Khong du tien");
    return;
  }
  console.log("Dang mua gao");
  return setTimeout(function() {
    return success({
      name: "gao",
      cleaned: false
    });
  }, 1000);
};

voGao = function(gao, success, error) {
  if ((gao == null) || gao.name !== "gao") {
    error("Khong co gao");
    return;
  }
  if (gao.cleaned) {
    success(gao);
    return;
  }
  console.log("Dang vo gao");
  return setTimeout(function() {
    gao.cleaned = true;
    return success(gao);
  }, 1000);
};

ruaNoi = function(noi, success, error) {
  if ((noi == null) || noi.name !== "noi") {
    error("Khong co noi");
    return;
  }
  if (noi.cleaned) {
    success(noi);
    return;
  }
  console.log("Dang rua noi");
  return setTimeout(function() {
    noi.cleaned = true;
    return success(noi);
  }, 1000);
};

camCom = function(noi, gao, success, error) {
  if ((noi == null) || noi.name !== "noi") {
    error("Khong co noi");
    return;
  }
  if (!noi.cleaned) {
    error("Chua rua noi");
    return;
  }
  if ((gao == null) || gao.name !== "gao") {
    error("Khong co gao");
    return;
  }
  if (!gao.cleaned) {
    error("Chua vo gao");
    return;
  }
  console.log("Dang cam com");
  return setTimeout(function() {
    return success("com");
  }, 1000);
};

an = function(com) {
  if (com !== "com") {
    console.error("Khong co com");
    return;
  }
  return console.log("Nom nom");
};

muaGao(tien, function(gao) {
  return ruaNoi(noi, function(noiSach) {
    return voGao(gao, function(gaoSach) {
      return camCom(noiSach, gaoSach, function(com) {
        return an(com);
      }, function(error) {
        return console.log(error);
      });
    }, function(error) {
      return console.log(error);
    });
  }, function(error) {
    return console.log(error);
  });
}, function(error) {
  return console.log(error);
});

Với một loạt callback lồng nhau, chương trình trở nên khó đọc và khó hiểu.

III. I `promise` it will help

Trong phần này, ta cùng xem sử dụng promise giúp cải thiện đoạn chương trình trên như thế nào.

1. Điểm lại một số khái niệm về functional programming

Functor hay Monad đều có thể xem như giá trị gắn kèm thêm ngữ cảnh (có thể đọc thêm về monad ở bài viết trước). Các kiểu dữ liệu này ta có thể tưởng tượng như một hộp chứa dữ liệu bên trong.

Với Functor, ta có thể map các giá trị bên trong chiếc hộp này.

Type signature: map :: (a -> b) -> Functor a -> Functor b

Ví dụ:

[1, 2, 3].map {|x| x*x}
 => [1, 4, 9]

Monad thì sẽ là flatMap

Type signature: flatMap :: Monad a -> (a -> Monad b) -> Monad b

Ví dụ:

[1, 2, 3].flat_map {|x| [x, 3*x]}
 => [1, 3, 2, 6, 3, 9]

2. Promise và functional programming

Ta kí kiệu Promise[T] là một Promise bọc bên ngoài một giá trị có kiểu là T. Khi một function trả về Promise[T], ta hiểu function đó muốn nói rằng “À, hiện giờ tôi chưa thể trả về kết quả ngay được, nhưng tôi hứa sau này sẽ trả về kết quả kiểu T, trừ khi có lỗi xảy ra”.

Với kết quả trả về là Promise[T] thì sẽ có 2 khả năng xảy ra:

Mọi chuyện đều êm đẹp, ta thu được giá trị kiểu T
Có lỗi xảy ra, ta thu được thông báo error

Ta cùng xét xem map và flatMap đối với Promise[T] như thế nào nhé!

function map(promise, transform) {
  promise.then(function() {
    transform(data)
  });
}

Ở đây nếu promise resolve về một giá trị data thì function map sẽ trả về một promise resolve về giá trị transform(data). Và ngược lại, nếu promise có lỗi error, thì kết quả của map vẫn chính là promise này.

function flatMap(promise, transform) {
  promise.then(function() {
    transform(data)
  });
}

Có thể thấy, flatMap giống hệt map bên trên. Lí do là ở function truyền vào onFulfilled của promise.then, nếu function này trả về một giá trị nào đó thì kết quả thu được của promise.then sẽ là một promise được fulfilled bởi giá trị vừa thu được; còn nếu onFulfilled trả về một promise, thì kết quả của promise.then sẽ chính là promise vừa được trả về.

3. Thử dùng `promise`

Chương trình “nấu cơm ăn” bên trên nếu viết dưới dạng functional programming sẽ có dạng như sau:

gao = muaGao(tien)
noiSach = ruaNoi(noi)
gaoSach = gao.flatMap(x -> voGao(x))
com = noiSach.flatMap (ns) ->
  gaoSach.flatMap (gs) ->
    camCom(ns, gs)
com.map(x -> an(x))

Áp dụng với promise cùng map và flatMap bên trên ta được:

pGao = muaGao(tien);
pNoiSach = ruaNoi(noi);
pGaoSach = pGao.then(function(x) {
  return voGao(x);
});
pCom = pNoiSach.then(function(ns) {
  return pGaoSach.then(function(gs) {
    return camCom(ns, gs);
  });
});
pCom.done(function(x) {
  return an(x);
}, function(e) {
  return console.log(e.message);
});

Kết quả cuối cùng ta có chương trình

var an, camCom, muaGao, noi, pCom, pGao, pGaoSach, pNoiSach, ruaNoi, tien, voGao;

tien = 3000;

noi = {
  name: "noi",
  cleaned: false
};

muaGao = function(tien) {
  var deferred;
  deferred = Q.defer();
  if (tien < 2000) {
    deferred.reject(new Error("Khong du tien"));
    return deferred.promise;
  }
  console.log("Dang mua gao");
  setTimeout(function() {
    return deferred.resolve({
      name: "gao",
      cleaned: false
    });
  }, 1000);
  return deferred.promise;
};

voGao = function(gao) {
  var deferred;
  deferred = Q.defer();
  if ((gao == null) || gao.name !== "gao") {
    deferred.reject(new Error("Khong co gao"));
    return deferred.promise;
  }
  if (gao.cleaned) {
    deferred.resolve(gao);
    return deferred.promise;
  }
  console.log("Dang vo gao");
  setTimeout(function() {
    gao.cleaned = true;
    return deferred.resolve(gao);
  }, 1000);
  return deferred.promise;
};

ruaNoi = function(noi) {
  var deferred;
  deferred = Q.defer();
  if ((noi == null) || noi.name !== "noi") {
    deferred.reject(new Error("Khong co noi"));
    return deferred.promise;
  }
  if (noi.cleaned) {
    deferred.resolve(noi);
    return deferred.promise;
  }
  console.log("Dang rua noi");
  setTimeout(function() {
    noi.cleaned = true;
    return deferred.resolve(noi);
  }, 1000);
  return deferred.promise;
};

camCom = function(noi, gao) {
  var deferred;
  deferred = Q.defer();
  if ((noi == null) || noi.name !== "noi") {
    deferred.reject(new Error("Khong co noi"));
    return deferred.promise;
  }
  if (!noi.cleaned) {
    deferred.reject(new Error("Chua rua noi"));
    return deferred.promise;
  }
  if ((gao == null) || gao.name !== "gao") {
    deferred.reject(new Error("Khong co gao"));
    return deferred.promise;
  }
  if (!gao.cleaned) {
    error("Chua vo gao");
    return deferred.promise;
  }
  console.log("Dang cam com");
  setTimeout(function() {
    return deferred.resolve("com");
  }, 1000);
  return deferred.promise;
};

an = function(com) {
  if (com !== "com") {
    console.error("Khong co com");
    return;
  }
  return console.log("Nom nom");
};

pGao = muaGao(tien);

pNoiSach = ruaNoi(noi);

pGaoSach = pGao.then(function(x) {
  return voGao(x);
});

pCom = pNoiSach.then(function(ns) {
  return pGaoSach.then(function(gs) {
    return camCom(ns, gs);
  });
});

pCom.done(function(x) {
  return an(x);
}, function(e) {
  return console.log(e.message);
});

Toàn bộ code của bài viết có thể xem tại hai link jsfiddle sau:

http://jsfiddle.net/xuanduc987/5krbvcgh/
http://jsfiddle.net/xuanduc987/af6ntod3/

Convert Github Flavored Markdown Code Block to Liquid Tag in VIM

2015-09-07T04:00:44+00:00

:%s/\v^```(.*)$(\_.{-})^```$/{% highlight \1 %}\2{% endhighlight %}/g | %s/{% highlight  %}/{% highlight text %}/g

Monad Trong Scala

2015-06-28T08:43:39+00:00

TL/DR

Trong Scala, một kiểu chỉ cần hỗ trợ flatMap là có thể xem như là một Monad. Lợi ích trước mắt là có thể sử dụng trong for comprehension.

Ví dụ thế này, ta có một đĩa chứa vài quả ổi. Thêm vào đó, ta biết cách bổ từng quả ổi ra rồi bày lên đĩa. Khi đó, nếu cái đĩa ổi kia là một Monad thì ta có thể dùng một cái máy kì lạ có tên là flatMap. Ta nhét đĩa ổi vào cái máy này, bảo nó cách bổ ổi bày ra đĩa, thì nó sẽ tự biết cách bổ hết các quả ổi có trong đĩa, rồi bày tất cả lên chung một cái đĩa khác.

val đĩa_quả_ổi = Đĩa(Ổi("to"), Ổi("găng"), Ổi("sâu"))
def bổ_ổi(ổi: Ổi): Đĩa[Miếng_Ổi] = {
  val các_miếng_ổi = cắt(ổi)
  Đĩa(các_miếng_ổi)
}
val đĩa_miếng_ổi = đĩa_quả_ổi.flatMap{ bổ_ổi(_) }

Monad là gì

I. Định nghĩa

Có thể xem một monad là một giá trị được gắn kèm thêm ngữ cảnh. Ví dụ như Option[T] thể hiện một giá trị của kiểu T với ngữ cảnh là có khả năng lỗi sẽ xảy ra. Hay nếu kết quả trả về của một hàm là List[T] thì ta biết hàm đó có thể có 0, 1, hoặc nhiều giá trị trả về.

Theo Wikipedia, monad gồm ba thành phần:

Type constructor
Unit function
Binding operation

1. Type constructor

Type constructor định nghĩa cách tạo một kiểu monadic từ một kiểu cụ thể nào đó. Kiểu monadic này nhận một tham số kiểu, giống như generic trong Java hay template của C++ vậy. Ví dụ: Option[T], List[T] chưa phải là một kiểu cụ thể, nhưng Option[String] hay Option[Int] là kiểu cụ thể, nhận tham số kiểu là String và Int tương ứng.

2. Unit function

Unit function là một hàm đính kèm thêm ngữ cảnh vào một giá trị cụ thể, từ A -> Monad[A]. Kết quả thu được thường là giá trị “đơn giản nhất” mà vẫn giữ được thông tin giá trị đầu vào. Ví dụ đối với Option, ta có Some(_); với List sẽ là List(_)

3. Binding Operation

Binding operation có kiểu Monad[A] -> (A -> Monad[B]) -> Monad[B]

Tham số đầu tiên là một giá trị có kiểu monadic, tham số thứ hai là một hàm biến đổi từ kiểu mà monad trong tham số đầu tiên đóng gói sang một kiểu monadic khác, kết quả thu được thuộc kiểu monadic kia. Binding operation có thể xem như gồm bốn bước:

Các giá trị chứa trong monad tham số đầu tiên được lấy ra
Hàm số trong tham số thứ hai được áp dụng cho tất cả các giá trị vừa thu được, kết quả thu được cũng là các monad
Lấy các giá trị từ các monad vừa tính toán được ra
Từ các giá trị vừa lấy ra được, tạo thành một giá trị monad duy nhất

Binding operation trong Scala thông thường có tên gọi là flatMap.

Ngoài ra, monad còn phải tuân thủ các luật monad.

II. Các luật Monad

1. Left identify

Luật monad đầu tiên yêu cầu rằng nếu ta có một giá trị, thêm ngữ cảnh với unit function rồi truyền nó vào binding operation cùng một hàm thì sẽ tương đương với việc truyền trực tiếp giá trị ban đầu vào hàm đó.

Ví dụ với Option thì Some(x).flatMap(f) chính bằng f(x), hay với List thì List(x).flatMap(f) thì không khác gì f(x).

scala> def f(x: Int) = List(x, -x)
f: (x: Int)List[Int]

scala> List(1).flatMap(f)
res14: List[Int] = List(1, -1)

scala> f(1)
res15: List[Int] = List(1, -1)

2. Right identity

Luật thứ hai yêu cầu rằng, nếu ta có một giá trị monadic, truyền vào binding operation cùng với tham số thứ hai là unit function thì kết quả thu được phải là monad ban đầu.

Cụ thể với Option thì x.flatMap(Some(_)) phải trả về x, cũng như đối với List thì x.flatMap(List(_)) cũng như x

scala> Some(10).flatMap(Some(_))
res19: Option[Int] = Some(10)

scala> None.flatMap(Some(_))
res20: Option[Nothing] = None

scala> List('a','b','c').flatMap(List(_))
res21: List[Char] = List(a, b, c)

scala> List().flatMap(List(_))
res22: List[Nothing] = List()

3. Associativity (kết hợp)

Luật monad cuối cùng là khi ta ‘chain’ các binding operation với nhau thì kết quả không phụ thuộc vào cách ta đặt dấu ngoặc: binding hai hàm liên tiếp giống như binding vào một hàm số có thể xác định từ hai hàm ban đầu.

Một cách hình thức x.flatMap(f).flatMap(g) tương đương với x.flatMap(f(_).flatMap(g))

Ví dụ:

scala> def f(x:Int) = List(x, -x)
f: (x: Int)List[Int]

scala> def g(x:Int) = List(2*x)
g: (x: Int)List[Int]

scala> List(1,2).flatMap(f).flatMap(g)
res24: List[Int] = List(2, -2, 4, -4)

scala> List(1,2).flatMap(f(_).flatMap(g))
res25: List[Int] = List(2, -2, 4, -4)

III. Scala for comprehensions

Trong scala, for comprehensions được biến đổi sử dụng flatMap

Ví dụ:

for(
  val x <- m1
  val y <- m2
) yield x+y

Tương đương với

m1.flatMap(x => m2.flatMap(y => List(x+y)))

Tuy nhiên, flatMap cuối cùng hơi thừa, nên thực tế Scala biến đổi thành:

m1.flatMap(x => m2.map(y => x+y))

Ví dụ áp dụng Monad `Option` trong Scala

Trong phần này, ta sẽ xét một ví dụ để thấy được tác dụng của Monad Option cũng như binding operation flatMap.

Giả sử ta có Person như sau:

object Person {

  val persons = List("P", "MP", "MMP", "FMP", "FP", "MFP", "FFP") map { Person(_) }

  private val mothers = Map(
    Person("P") -> Person("MP"),
    Person("MP") -> Person("MMP"),
    Person("FP") -> Person("MFP"))

  private val fathers = Map(
    Person("P") -> Person("FP"),
    Person("MP") -> Person("FMP"),
    Person("FP") -> Person("FFP"))

  def mother(p: Person): Option[Person] = mothers.get(p)

  def father(p: Person): Option[Person] = fathers.get(p)
}

case class Person(name: String) {
  def mother: Option[Person] = Person.mother(this)
  def father: Option[Person] = Person.father(this)
}

Như vậy, ta có một danh sách các người [“P”, “MP”, “MMP”, “FMP”, “FP”, “MFP”, “FFP”], với mỗi người ta có thể xem thông tin về cha hoặc mẹ của người đó: nếu có sẽ trả về Some(person) còn không sẽ trả về None

Giờ nếu ta muốn tìm ông ngoại của một người, ta có thể viết:

def maternalGrandfatherNoMonad(p: Person): Option[Person] =
  p.mother match {
    case Some(m) => m.father
    case None => None
  }

Còn nếu ta muốn kiểm tra xem cả ông nội và ông ngoại của một người có nằm trong cơ sở dữ liệu không thì:

def bothGrandfathersNoMonad(p: Person): Option[(Person, Person)] =
  p.father match {
    case None => None
    case Some(f) =>
      f.father match {
        case None => None
        case Some(ff) =>
          p.mother match {
            case None => None
            case Some(m) =>
              m.father match {
                case None => None
                case Some(fm) => Some(ff, fm)
              }
          }
      }
  }

Với mỗi truy vấn tìm cha hoặc mẹ của một người mà lỗi, trả về None thì tất cả hàm của ta cũng phải trả về None. Khi không có monad, ta phải dùng pattern matching nhiều lần, xét tất cả các trường hợp có thể xảy ra, hàm thu được vừa dài, vừa khó đọc.

May mắn là chúng ta có monad. Khi dùng monad, hai hàm của ta có thể được đơn giản hoá thành:

def maternalGrandfather(p: Person) : Option[Person] =
  p.mother.flatMap { _.father }

def bothGrandfathers(p: Person) : Option[(Person, Person)] =
  p.father.flatMap(f =>
    f.father.flatMap(ff =>
      p.mother.flatMap(m =>
        m.father.flatMap(fm =>
          Some(ff, fm)
        )
      )
    )
  )

Nếu dùng for comprehensions thì bothGrandfathers còn dễ đọc hơn

def bothGrandfathersFor(p: Person): Option[(Person, Person)] =
  for (
    f <- p.father;
    ff <- f.father;
    m <- p.mother;
    fm <- m.father
  ) yield (ff, fm)

Tài liệu tham khảo

Functional Reactive Programming

2015-05-27T07:21:55+00:00

Functional Reactive Programming là gì?

Functional Reactive Programming (FRP) là mô hình lập trình hướng tới luồng dữ liệu và sự lan truyền thay đổi. Trong FRP, ta có một loại dữ liệu thể hiện được “giá trị thay đổi theo thời gian”, ta có thể áp dụng các hàm cơ bản đặc trưng của functional programming (ví dụ như map, reduce, scan…). Ví dụ, trong mô hình lập trình thông thường - imperative programming - khi ta có a = b + c, giá trị của a thu được chính là tổng giá trị của b và c tại thời điểm chạy câu lệnh, sau thời điểm đó giá trị b, c có thể thay đổi nhưng sẽ không làm thay đổi giá trị của a. Đối với FRP thì khác, giá trị của a luôn tự động cập nhật theo giá tri của b và c. Việc này giống như bảng tính Excel vậy, trong một ô nếu ta ghi công thức =A1+B1 thì khi giá trị của ô A1 hay B1 được cập nhật, thì giá trị ô bảng tính vừa rồi cũng được cập nhật theo.

Observable

Về cơ bản, “giá trị thay đổi theo thời gian” trong FRP có hai loại giống như bất cứ loại dữ liệu nào trong tự nhiên: rời rạc và liên tục. Tuy nhiên, do bản chất của máy tính, việc cài đặt hỗ trợ mô hình loại dữ liệu liên tục khó khăn hơn, hầu hết các framework hiện nay mới hỗ trợ cho các cập nhật rời rạc, hướng sự kiện. Trong mô hình này, dữ liệu được mô hình thành các tín hiệu chứa giá trị hiện tại, thay đổi một cách rời rạc gọi là sự kiện. Các sự kiện này thực tế là một dòng sự kiện bất đồng bộ. Như vậy dùng FRP là ta lập trình với dòng dữ liệu bất đồng bộ.

Chúng ta đã quen với việc làm việc với dòng dữ liệu từ lâu. Nguồn xuất dòng dữ liệu chính là producer, và consumer sử dụng dòng dữ liệu đó. Để giải quyết bài toán produce - consumer này ta đã có 2 design pattern Iterator và Observable. Đối với Iterator, consumer khi cần dữ liệu thì mới yêu cầu producer, giống như khi ta hết thực phẩm mới ra siệu thị mua đồ vậy. Còn đối với Observable, consumer đăng ký với producer, khi producer sẽ chuyển trực tiếp cho consumer ngay khi có sản phẩm. Việc này tương tự như chúng ta đặt báo hàng tháng: sau khi đăng ký, mỗi khi đến kỳ có báo mới là có nhân viên giao báo tới tận nhà chúng ta. Trong FRP, dòng sự kiện là Observable. Các observer đăng ký với observable, và phản ứng với các item mà observable emit ra.

Ví dụ, một observable sẽ tạo ra một dòng event như sau:

-----1---3--3---4-2---X--2----|->

1, 2, 3, 4 là các giá trị được emit
X tương ứng với lỗi
| là báo hiệu dòng event đã kết thúc
---> thể hiện dòng thời gian

Nếu chỉ có như vậy thì FRP chẳng hơn gì ta lập trình bình thường sử dụng design pattern Observable. Trong FRP, observable được mô hình như một collection bình thường, từ đó ta có thể áp dụng các hàm cho collection, biến đối từ một observable này sang một observable khác.

Xét một mảng thông thường

[1, 3, 3, 4]

Giờ xét một observable

--1---3-3-----4--|->

Có thể thấy, một observable có thể xem như là một collection, trong đó các giá trị của nó chưa có sẵn, nhưng được cam kết sẽ có trong tương lai.

Với việc xem observable như một collection, ta có thể lập trình với một mức trừu tượng cao hơn. Ta có thể định nghĩa các mối quan hệ giữa các sự kiện một cách rõ ràng thay vì phải viết hàng loạt đoạn code cài đặt phức tạp.

Ví dụ minh hoạ

Để có thể hiện ưu điểm của FRP, ta cùng xét một ví dụ. Giả sử ta cần cài đặt một search box, request lên server ngay trong lúc người dùng đang gõ để gợi ý. Tuy nhiên nếu như vậy, khi người dùng gõ “beautiful flower”, ta phải gửi 16 truy vấn, hầu hết đều không có tác dụng gì. Do đó, searchbox của ta sẽ không được gửi request khi người dùng đang gõ liên tục. Ngoài ra, khi đang request mà người dùng gõ thêm, thì không được phép hiện kết quả cũ, mà phải chờ kết quả mới.

Ở đây, mình chọn thư viện RxJS để làm ví dụ. Vậy giải quyết bài toán này bằng FRP như thế nào?

Trước hết, cần biết rằng mọi thứ đều có thể là observable: đầu tiên ta cho sự kiện người dùng bấm một nút trên bàn phím, làm thay đổi text trong search box là một observable:

-xxx--x-xx-xx-xx-----|->

Để tạo observable từ event rất đơn giản:

var keyPressObservable = Rx.Observable.fromEvent(inputRx, 'keyup');

Do event keypress không bắt được việc bấm backspace, vậy nên ở đây ta dùng tạm keyup.

Lúc người dùng đang gõ liên tục, ta tạm thời không quan tâm. Ta có thể dùng method throttle để chỉ lọc những sự kiện mà ta cần. Throttle chỉ emit các item từ Observable nếu đã qua một khoảng thời gian mà không emit một item nào khác.

keyPressObservable.throttle(200);

keyPressObservable: -xxx--x-xx-xx-xx-----|->
                    vvvv throttle(200) vvvv
                    -----x--x--x--x--x---|->

Sau khi người dùng tạm dừng gõ, ta muốn biết người dùng đã gõ được những gì. Ta sẽ map từng event với giá trị mà người dùng đã gõ được.

requestObservable = keypressObservable.throttle(200)
  .map(function (key) {
    return inputRx.val();
});

Như vậy ta đã có một dòng các text mà ta cần gửi truy vấn. Mỗi khi có một request, ta cần gửi yêu cầu lên server, và thu nhận lại kết quả. Trong Rx, ta có thể dễ dàng chuyển đổi từ Promise, kết quả của truy vấn ajax, sang observable: var observable = Rx.Observable.fromPromise(promise), ta sẽ dùng nó để tạo ra observable cho response.

Với mỗi request trong collection requestObservable, ta biến đổi thành một response = f(request), lại nghề của map rồi:

var responseObservableOfObservable =
requestObservable.map(function(requestData) {
  return Rx.Observable.fromPromise(getResult(requestData));
}

Mỗi request ta sinh ra một observable của response, như vậy từ requestObservable ban đầu, ta đã sinh ra một Observable của Observable, một collection của các collection. Nhưng ta không quan tâm đến tập các collection làm gì, ta chỉ quan tâm tới từng phần tử trong từng collection đó thôi. Vì vậy, ta cần “là phẳng” nó đi, biến nó thành một observable duy nhất.

var responseObservableOfObservable =
requestObservable.map(function(requestData) {
  return Rx.Observable.fromPromise(getResult(requestData)).concatAll();
}

Việc map rồi concatAll gặp rất thường xuyên, vì vậy Rx hỗ trợ flatMap, kết hợp của cả hai

var responseObservableOfObservable =
requestObservable.flatMap(function(requestData) {
  return Rx.Observable.fromPromise(getResult(requestData));
}

Khi đang request mà có thêm một request mới, ta cần huỷ request trước đi. Rx có method takeUntil để giải quyết vấn đề này

--1----2--3--4---5-6--7--8--9--|->
---------------a---------------|->
vvv         takeUntil          vvv
--1----2--3--4-|----------------->

Áp dụng vào bài toán của ta, khi người dùng tiếp tục bấm nút thì huỷ request cũ:

var responseObservable = requestObservable.flatMap(function (requestData) {
    return Rx.Observable.fromPromise(getResult(requestData))
        .takeUntil(keyPressObservable);
});

Khi đã có Observable cho response, ta chỉ cần subscribe nó để hiển thị kết quả:

responseObservable.subscribe(function (result) {
    showResult(outputRx, result);
}, function () {
    showResult(output, "There is some error");
});

Tổng hợp lại toàn bộ code cho searchbox là:

var keyPressObservable = Rx.Observable.fromEvent(inputRx, 'keyup');
var requestObservable = keyPressObservable.throttle(200)
    .map(function (key) {
    return inputRx.val();
});
var responseObservable = requestObservable.flatMap(function (requestData) {
    return Rx.Observable.fromPromise(getResult(requestData))
        .takeUntil(keyPressObservable);
});

responseObservable.subscribe(function (result) {
    showResult(outputRx, result);
}, function () {
    showResult(outputRx, "There is some error");
});

Nếu loại bỏ hết các biến tạm ta chỉ còn

var keyPressObservable = Rx.Observable.fromEvent(inputRx, 'keyup').throttle(200)
    .map(function(key) {
        return inputRx.val();
    })
keyPressObservable.flatMap(function(requestData) {
        return Rx.Observable.fromPromise(getResult(requestData)).takeUntil(
            keyPressObservable);
    }).subscribe(function(result) {
        showResult(outputRx, result);
    }, function() {
        showResult(outputRx, "There is some error");
    });

So sánh với việc cài đặt chức năng tương đương mà không dùng Rx

var timeout = null;
var currentRequest = null;
input.keyup(function() {
    if (timeout) clearTimeout(timeout);
    if (currentRequest) currentRequest.abort();
    var text = input.val();
    timeout = setTimeout(function() {
        currentRequest = getResult(text)
            .done(function(result) {
                showResult(output, result);
            })
            .fail(function(jqXHR, status, error) {
                if (error === "abort") return;
                showResult(output, "There is some error");
            });
    }, 200);
});

Có thể thấy, với Rx, ta mô tả một cách tự nhiên bài toán vào trong code, chỉ cần nói mình muốn gì là máy tính thực hiện. Còn trong ví dụ trên, ta phải tự đặt timeout, huỷ request, hướng dẫn từng bước để máy tính thực hiện theo ý ta.

Phần code trong bài này có thể thử tại đây

Một số trang liên quan:

Cài đặt Rails trên Ubuntu 14.04

2015-04-29T05:59:26+00:00

Cài đặt Ruby

Cài đặt dependencies cho Ruby:

sudo apt-get update
sudo apt-get install git-core curl zlib1g-dev build-essential \
  libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 \
  libxml2-dev libxslt1-dev libcurl4-openssl-dev \
  python-software-properties libffi-dev

Cài đặt Ruby qua rvm

sudo apt-get install libgdbm-dev libncurses5-dev \
  automake libtool bison libffi-dev
curl -L https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm
rvm install 2.2.1
rvm use 2.2.1 --default
ruby -v

Chú ý: Nếu có đổi shell thì cần thêm vào zsh/bash config file:

export PATH="$PATH:$HOME/.rvm/bin" # Add RVM to PATH for scripting

Không cho Rubygems cài đặt docs cho package locally

echo "gem: --no-ri --no-rdoc" > ~/.gemrc

Cài đặt Bundler

gem install bundler

Cài đặt Rails

Rails cần Javascript runtime, vậy nên cài thêm NodeJS:

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Sau đó cài đặt rails:

gem install rails -v 4.2.0

Để kiểm tra rails đã được cài đặt thành công hay chưa, chạy:

rails -v
# Rails 4.2.0

Cài đặt MySQL

Chỉ cần chạy:

sudo apt-get install mysql-server mysql-client libmysqlclient-dev

Chú ý: Nếu cần cài MySQL 5.6:

Gỡ bỏ MySQL 5.5

sudo apt-get purge mysql-server-5.5 mysql-client-5.5
sudo apt-get autoremove

Cài đặt MySQL 5.6

sudo apt-get install mysql-server-5.6 mysql-client-5.6

source

Duc NX’s blog

Ruby: Bỏ Chữ và Số Còn Lại Gì

1. Tên biến

2. Giá trị số

3. String

4. Các cấu trúc điều khiển

4.1 Rẽ nhánh

4.2 Lặp

5. Output

6. Input

Kết luận

Tham khảo

Closures Trong Javascript Hoạt động Như Thế Nào?

Scope chain

Top-level code

Non-nested functions

Nested functions

Function object giống nhau, scope object khác nhau

Scope chain và “this”

Invocation patterns

Method invocation pattern

Function invocation pattern

Constructor invocation pattern

Apply invocation pattern

Sử dụng “this” trong nested function

Kết luận

Javascript, Promise và Functional Programming

I. Mở đầu

II. Async với callback

III. I promise it will help

1. Điểm lại một số khái niệm về functional programming

2. Promise và functional programming

3. Thử dùng promise

Convert Github Flavored Markdown Code Block to Liquid Tag in VIM

Monad Trong Scala

TL/DR

Monad là gì

I. Định nghĩa

1. Type constructor

2. Unit function

3. Binding Operation

II. Các luật Monad

1. Left identify

2. Right identity

3. Associativity (kết hợp)

III. Scala for comprehensions

Ví dụ áp dụng Monad Option trong Scala

Tài liệu tham khảo

Functional Reactive Programming

Functional Reactive Programming là gì?

Observable

Ví dụ minh hoạ

Một số trang liên quan:

Cài đặt Rails trên Ubuntu 14.04

Cài đặt Ruby

Cài đặt dependencies cho Ruby:

Cài đặt Ruby qua rvm

Cài đặt Rails

Cài đặt MySQL

III. I `promise` it will help

3. Thử dùng `promise`

Ví dụ áp dụng Monad `Option` trong Scala