Untitled

<!doctype html>
<html lang="en">
        <head>
                <title>JavaScript Patterns</title>
                <meta charset="utf-8">
        </head>
        <body>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                <script>
                        /* Title: Custom events using .on() and .off()
                         * Description: A really tiny pub/sub implementation for jQuery 1.7 using the two new methods(since jQuery 1.7): .on() and .off().
                         */

                        /* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
                         * http://benalman.com/
                         * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
/*
Nguồn tài liệu:
 http://learn.jquery.com/plugins/basic-plugin-creation/
 http://stackoverflow.com/questions/3796788/whats-the-apply-jquery-function : .apply là để gọi hàm với 1 mảng các tham số
 http://api.jquery.com/on/ : thêm đối tượng lắng nghe sự kiện
 http://api.jquery.com/off/ : hủy lắng nghe sự kiện khỏi 1 đối tượng
 http://api.jquery.com/trigger/: tạo event

Cái này nó viết ko theo hướng đối tượng, muốn làm  hướng đối tượng thì phải tạo 2 object như bên dưới, cái này chỉ là khuôn mẫu chung, đọc xong chế biến lại
XEM CHƯƠNG 2 CUỐN HEAD FIRST DESIGN PATTERN NÓ SẼ GIẢI THÍCH
Subject: đối tượng quan sát,
{
    var observers = [] : mảng lưu các phần tử lắng nghe sự kiện của thằng Subject
    registerObserver(o) : add o vào mảng observers tương tự hàm addListener, thằng nào lắng nghe nó thì add vào mảng observers
    removeObbrserver(o) : xóa thằng o khỏi mảng observers, ko lắng nghe sự kiện nữa
    notifyObrserver() : duyệt mảng observers, gọi phương thức getData() của từng thằng observers[i], 0 <= i < observers.length -1
}
Observer: tạm hiểu là thằng quan sát subject, subject thay đổi thì nó sẽ xử lý tương ứng
{
    getData(): hàm xử lý sự kiện, nếu có tham số thì thêm vào
}

Hoặc trộn lẫn chế biến thế nào tùy mày, để ý là mấy cái lớp UI bên Java với .NET cũng hoạt động tượng tự (addListener....)

Còn cái code dưới này thì cái subject là o, observer là arguments, code này nó truyền thẳng cái hàm vào luôn
subsribe(o, arguments) : cho thằng agruments lắng nghe o
unsubscribe(o, arguments) : bỏ thằng arguments ko cho lắng nghe o nữa
publish(o, arguments) : phát sự kiện, jquery sẽ tìm những thằng lắng nghe o tương ứng rồi chạy hàm

*/
                        (function($) {

                          var o = $({});

                          $.subscribe = function() {
                            o.on.apply(o, arguments);
                          };

                          $.unsubscribe = function() {
                            o.off.apply(o, arguments);
                          };

                          $.publish = function() {
                            o.trigger.apply(o, arguments);
                          };

                        }(jQuery));

//Dưới này là ví dụ

                        // Usage:
                        // Super-basic example:

                        function handle(e, a, b, c) {
                          // `e` is the event object, you probably don't care about it.
                          console.log(a + b + c);
                        };

                        $.subscribe("/some/topic", handle);

                        $.publish("/some/topic", [ "a", "b", "c" ]);
                        // logs: abc

                        $.unsubscribe("/some/topic", handle); // Unsubscribe just this handler

                        // Or:

                        $.subscribe("/some/topic", function(e, a, b, c) {
                          console.log(a + b + c);
                        });

                        $.publish("/some/topic", [ "a", "b", "c" ]);
                        // logs: abc
                        // Unsubscribe all handlers for this topic
                        $.unsubscribe("/some/topic");

                        // References
                        // https://gist.github.com/1321768
                </script>
        </body>
</html>