20181219

Author: zhangyue0503

.DS_Store

@@ -0,0 +1,66 @@
+/*
+ * Dispatcher Class
+ * @version  1.0
+ * @author   genify(caijf@corp.netease.com)
+ */
+import { Event } from './Event.js';
+
+// private name
+const middleware = Symbol('middleware');
+
+// class definition
+export class Dispatcher extends Event {
+    /**
+     * Dispatcher Constructor
+     * @param options
+     */
+    constructor(options) {
+        super(options);
+
+        this[middleware] = [];
+    }
+
+    /**
+     * add one or more middle ware
+     * @param  {MiddleWare} MiddleWare - MiddleWare Constructor
+     */
+    add() {
+        this[middleware].push.apply(
+            this[middleware], arguments
+        );
+    }
+
+    /**
+     * redirect to url
+     * @param url
+     */
+    redirect(url) {
+        this.emit('redirect', { url: url });
+    }
+
+    /**
+     * dispatch middle ware
+     * @param {Object} context - exec context
+     */
+    dispatch(context) {
+        let index = 0;
+        let list = this[middleware];
+
+        let next = () => {
+            let MiddleWare = list[index++];
+            if (MiddleWare){
+                let mw = new MiddleWare(next, {
+                    context: context,
+                    redirect: this.redirect.bind(this)
+                });
+                return mw.exec(context);
+            }
+        };
+
+        return next();
+    }
+}
+
+
+
+

高级前端微专业/3/单页作业3.zip

@@ -0,0 +1,70 @@
+/*
+ * Base Event Class
+ * @version  1.0
+ * @author   genify(caijf@corp.netease.com)
+ */
+// private name
+const evtname = Symbol('events');
+
+// class definition
+export class Event {
+    /**
+     * Event Constructor
+     */
+    constructor(options = {}) {
+        this[evtname] = {};
+        // auto add event for function config
+        Object.keys(options).forEach((key) => {
+            let it = options[key];
+            if (typeof it === 'function'){
+                this.on(key, it);
+            }
+        },this);
+    }
+
+    /**
+     * add a listener with event type
+     * @param {String}   type     - event type
+     * @param {Function} listener - event listener
+     */
+    on(type, listener) {
+        let list = this[evtname][type];
+        if (!list){
+            list = [];
+            this[evtname][type] = list;
+        }
+        if (typeof listener === 'function'){
+            list.push(listener);
+        }
+    }
+
+    /**
+     * remove a listener with event type
+     * @param {String}   type     - event type
+     * @param {Function} listener - event listener
+     */
+    off(type, listener) {
+        let list = this[evtname][type];
+        if (!list||!list.length){
+            return;
+        }
+        let index = list.indexOf(listener);
+        if (index>=0){
+            list.splice(index, 1);
+        }
+    }
+
+    /**
+     * emit an event with type
+     * @param {String}   type - event type
+     * @param {Variable} args - parameters for event
+     */
+    emit(type, ...args) {
+        let list = this[evtname][type];
+        if (list&&list.length>0){
+            list.forEach((it) => {
+                it.apply(null, args);
+            });
+        }
+    }
+}

高级前端微专业/3/单页作业3/js/disp/Dispatcher.js

@@ -0,0 +1,75 @@
+/*
+ * Monitor Class
+ * @version  1.0
+ * @author   genify(caijf@corp.netease.com)
+ */
+import { Event } from './Event.js';
+
+// private name
+const key = Symbol('key');
+const last = Symbol('last');
+const check = Symbol('check');
+const timer = Symbol('timer');
+const source = Symbol('source');
+const interval = Symbol('interval');
+
+// class definition
+export class Monitor extends Event{
+    /**
+     * Monitor Constructor
+     * @param {Object} options - Monitor config object
+     * @param {Number} options.interval - check interval
+     * @param {Object} options.source   - watch object
+     * @param {Object} options.key      - watch key
+     */
+    constructor(options = {}) {
+        super(options);
+
+        this[last];
+        this[key] = options.key;
+        this[source] = options.source||{};
+        this[interval] = options.interval||100;
+    }
+
+    /**
+     * check prop changes
+     */
+    [check]() {
+        let event = {
+            oldValue: this[last],
+            newValue: this[source][this[key]]
+        };
+        if (event.oldValue!==event.newValue){
+            this[last] = event.newValue;
+            this.emit('change', event);
+        }
+    }
+
+    /**
+     * start monitor
+     */
+    start() {
+        if (!this[timer]){
+            this[timer] = setInterval(
+                this[check].bind(this),
+                this[interval]
+            );
+            this[check]();
+        }
+    }
+
+    /**
+     * stop monitor
+     */
+    stop() {
+        if (this[timer]){
+            this[timer] = clearInterval(
+                this[timer]
+            );
+        }
+    }
+}
+
+
+
+

高级前端微专业/3/单页作业3/js/disp/Event.js

@@ -0,0 +1,62 @@
+/*
+ * Base MiddleWare Class
+ * @version  1.0
+ * @author   genify(caijf@corp.netease.com)
+ */
+import { Event } from '../disp/Event.js';
+// private name
+const nxt = Symbol('next');
+const context = Symbol('context');
+
+// class definition
+export class MiddleWare extends Event {
+    /**
+     * MiddleWare Constructor
+     * @param  {Function} next    - next middle ware action
+     * @param  {Object}   options - middle ware config
+     * @param  {Object}   options.context - middle ware context
+     */
+    constructor(next, options = {}) {
+        super(options);
+
+        this.name = 'MIDDLEWARE';
+        this[nxt] = next;
+        this[context] = options.context;
+    }
+
+    /**
+     * get middle ware context
+     * @returns {*}
+     */
+    getContext() {
+        return this[context];
+    }
+
+    /**
+     * run next middle ware
+     */
+    next() {
+        if (this[nxt]){
+            this[nxt]();
+        }
+    }
+
+    /**
+     * redirect to url
+     * @param {Object} config - redirect config
+     */
+    redirect(config) {
+        this.emit('redirect', config);
+    }
+
+    /**
+     * execute middle ware
+     * @param  {Object} context - middle ware context
+     */
+    exec(context) {
+        console.log('exec middle ware '+this.name);
+        // overwrite by sub class
+        // call next middleware use this.next()
+    }
+}
+