Event Tracker system & Template system實現

Create your own Event Tracker system

//
// 1. create an `EventTracker` object
//    • it should accept a name when constructed
// 2. extend the `EventTracker` prototype with:
//    • an `on` method
//    • a `notify` method
//    • a `trigger` method
//


var EventTracker = function (name) {
    this.name = name;
    this._events = [];
    this._notify = []
};
//事件，返回方法
EventTracker.prototype.on = function (event, callback) {
    if (this._events[event] == undefined) {
        this._events[event] = [];
    }
    this._events[event].push(callback);
};
//參數：EventTracker對象，事件
EventTracker.prototype.notify = function (otherObj, event) {
    if (this._notify[event] == undefined) {
        this._notify[event] = [];
    }
    this._notify[event].push(otherObj);
};
//參數：事件，方法返回的信息
EventTracker.prototype.trigger = function (event, data) {
    var listCallBacks = this._events[event] || 0;
    var listNotifys = this._notify[event] || 0;
    var i;

    for (i = 0; i < listCallBacks.length; i++) {
        listCallBacks[i].call(this, data);
        console.log("call back "+ this.name);
        console.log("call back[]  "+ listCallBacks[i]);
    }

    for (i = 0; i < listNotifys.length; i++) {
        listNotifys[i].trigger(event, data);
        console.log("call back2 "+ event);
        console.log("call back[]2  "+ listNotifys[i].name);
        console.log("call back2 "+ data);
    }
};

// EXAMPLE:
//創建兩個事件
var nephewParties = new EventTracker('nephews');
var richard = new EventTracker('Richard');
//事件觸發後調用的方法
function purchase(item) {
    console.log('purchasing ' + item);
}
function celebrate() {
    console.log(this.name + ' says birthday parties are awesome!');
}
//事件mainEvent註冊調用方法
nephewParties.on('mainEvent', purchase);
richard.on('mainEvent', celebrate); 
//事件對象添加事件
nephewParties.notify(richard, 'mainEvent');
//觸發事件，執行每個註冊對象的方法並返回信息
nephewParties.trigger('mainEvent', 'ice cream');

Template system

// EXAMPLE:
// in the example below `*(` is my default opening delimiter and `)*` is the default closing delimiter
// var string = "Hi, my name is Richard. And I *( emotion )* this *( thing )*!";
// var logResult = template( string );
// logResult( 'love', 'ice cream', 2 ); // logs the message "Hi, my name is Richard. And I love this ice cream!", twice
//
//
// var string = "Is <<! thing !>> healthy to <<! action !>>?";
// var logResult = template( string, {open: '<<!', close: '!>>'} );
// logResult( 'ice cream', 'consume', 7 ); // logs the message "Is ice cream healthy to consume?", seven times

var template = function(str, delims) {
  // Fill this in
  var dftdelims = {
    open : '*(',
    close : ')*',
  };

  var warpInQuotes = function (text) {
    return "'" + text + "'";
  }

  for (var key in delims) {
    if (delims.hasOwnProperty(key)) {
      if (delims[key] != undefined)
        dftdelims[key] = delims[key];
    }
  }

  var templateString = [];
  var i = 1;
  var closingDelimLoc = 0;
  var funcArgs = [];
  var theVar, remaining;

  var segments = str.split(dftdelims.open);
  var indexSegments = segments.length;

  templateString.push(warpInQuotes(segments[0]));

  while (i < indexSegments) {
    closingDelimLoc = segments[i].indexOf(dftdelims.close);
    theVar = segments[i].slice(0, closingDelimLoc);
    funcArgs.push(theVar);
    templateString.push(theVar);

    remaining = segments[i].slice(closingDelimLoc + dftdelims.close.length);
    templateString.push(warpInQuotes(remaining));

    i++;
  }

  templateString = 'while(times--){ console.log(' + templateString.join('+') + ')}';

  return new Function( funcArgs.join(','), 'times', templateString);
  /*ƒ anonymous( emotion , thing ,times
    ) {
    while(times--){ console.log('Hi, my name is Richard. And I '+ emotion +' this '+ thing +'!')}
    }
    */
}


//addEventListener 方法是 DOM API 的極爲重要的組成部分。該方法使你能夠監聽瀏覽器的事件系統
document.addEventListener( 'keydown', function ( eventObject ) {
  if (eventObject.keyCode == 27) {
     alert('esc has been input');
  }
});


Example Markup
Checkbox    <input type="checkbox" id="checkbox"/><label for="checkbox">Checkbox</label>
<input type="button" onclick="simulateClick();" value="Simulate click"/>
<input type="button" onclick="addHandler();" value="Add a click handler that calls preventDefault"/>
<input type="button" onclick="removeHandler();" value="Remove the click handler that calls preventDefault"/>
Scripts used
function preventDef(event) {
  event.preventDefault();
}

function addHandler() {
  document.getElementById("checkbox").addEventListener("click", 
    preventDef, false);
}

function removeHandler() {
  document.getElementById("checkbox").removeEventListener("click",
    preventDef, false);
}

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

根據學習視頻寫的js code, 幫助熟悉JavaScript。
UdaCity, 需要先在優達網站申請一個帳號