update(jQuery-callbacks): impl of Callbacks queue

issue #105

programming/web/frameworks/jQueryBasicNotes.md

@@ -4,66 +4,59 @@
 <!-- TOC -->
 
 - [JQuery](#jquery)
+  - [$.Callbacks](#callbacks)
+  - [DOM](#dom)
+    - [structure](#structure)
+    - [class](#class)
+    - [style](#style)
   - [Events](#events)
     - [Mouse](#mouse)
     - [Keyboard](#keyboard)
     - [Form](#form)
     - [Document/Window](#documentwindow)
-  - [常用多态函数](#常用多态函数)
-  - [window](#window)
-  - [DOM](#dom)
-    - [structure](#structure)
-    - [class](#class)
-    - [style](#style)
+    - [常用多态函数](#常用多态函数)
+    - [window](#window)
   - [Ajax](#ajax)
     - [$.getJSON](#getjson)
     - [$.ajax](#ajax)
+  - [Animation](#animation)
 
 <!-- /TOC -->
 
-## Events
-
-### Mouse
+## $.Callbacks
 
-- click
-- dblclick
-- mouseenter
-- mouseleave
-
-### Keyboard
-
-- keypress
-- keydown
-- keyup
-
-### Form
-
-- submit
-- change
-- focus
-- blur
-
-### Document/Window
-
-- load
-- resize
-- scroll
-- unload
-
-## 常用多态函数
+callback queue use `Observer` pattern to
+add callbacks to callback queue,
+fire callbacks when events happen.
 
 ```js
-data、html、css
-$(document).ready(function(){});
-```
-
-## window
-
-```js
-$(window).scroll(function(event) {});
-$(document).height()           //返回整个网页的高度
-$(window).height()               //返回窗口高度
-$(window).scrollTop() //返回滚动条距网页顶部距离
+function Callbacks(options) {
+  let list = [];
+  const self;
+
+  self = {
+    add(fn) {
+      if (options == 'unique') {
+        if (-1 === list.indexOf(fn)) {
+          list.push(fn)
+        }
+      } else {
+        list.push(fn)
+      }
+    },
+    fire(args) {
+      list.forEach((fn) => {
+        fn(args);
+      });
+
+      if (options === 'once') {
+        list = undefined;
+      }
+    },
+  };
+
+  return self;
+}
 ```
 
 ## DOM
@@ -104,6 +97,51 @@ $("selector").css("color", "red");
 $("selector").prop("disable", "true");
 ```
 
+## Events
+
+### Mouse
+
+- click
+- dblclick
+- mouseenter
+- mouseleave
+
+### Keyboard
+
+- keypress
+- keydown
+- keyup
+
+### Form
+
+- submit
+- change
+- focus
+- blur
+
+### Document/Window
+
+- load
+- resize
+- scroll
+- unload
+
+### 常用多态函数
+
+```js
+data、html、css
+$(document).ready(function(){});
+```
+
+### window
+
+```js
+$(window).scroll(function(event) {});
+$(document).height()           //返回整个网页的高度
+$(window).height()               //返回窗口高度
+$(window).scrollTop() //返回滚动条距网页顶部距离
+```
+
 ## Ajax
 
 ### $.getJSON
@@ -128,3 +166,5 @@ $.ajax({
     error: errorHandle,
 });
 ```
+
+## Animation