前端 Router 的通用方式

resource : Javascript實現前端簡單路由 前端路由的实现方式

點擊按鈕發送 Ajax 要求網頁內容、從網址要求網頁內容，是兩件事， 需要另外做些工作，讓兩邊可以互相牽動...

原理：

這個做法是去監控 url 欄位，"#" 號後面的值的改變， 若改變符合 A 值，則用 function 發送要求 A 內容的 Ajax

"#" 符號叫做 hash

code

function Router(){
  this.routes = {};
  this.curUrl = '';

  this.route = function (path, callback) {
    // path 不是一個 callback 就是一個空的 function
    this.routes[path] = callback || function(){};
  };

  this.refresh = function () {
    this.curUrl = location.hash.slice(1) || '/';
    // `location`：url 字串，`hash`：#。
    // `slice(1)`：index 1 (第二個字符) 開始 ~ 結束
    // 或是 "/" 符號
    this.routes[this.curUrl]();
    // 找到 this.routes 物件的 this.curUrl 值
  };

  // 初始化
  this.init = function () {
    window.addEventListener('load', this.refresh.bind(this), false);
    // 當下載完成，執行 refresh() 將，在冒泡阶段执行。
    window.addEventListener('hashchange', this.refresh.bind(this), false);
    // 監控，win "#" 後的字串變化， Router 取值，在冒泡阶段执行。
  }
}

上面代碼中由 Router 物件實現，提供三個方法：

• init 監聽瀏覽器 url hash 更新事件。
• route 存儲路由更新後的字串到 routes 物件中，callback 將負責對頁面的更新。
• refresh 執行當前 url 對應的回調函數，更新頁面。

slice( <start-idx>, <end-idx> ) 方法 可取出字符串的某一段，返回新的被提取的字串。 負數 為倒數 ex -1 倒數第一個字符 http://www.w3school.com.cn/jsref/jsref_slice_sring.asp

bind() 方法? 建立具有與原始函式相同主體的繫結函式。 在繫結函式中，this 物件會解析為傳入的物件。 繫結函式具有指定的初始參數。 https://msdn.microsoft.com/zh-tw/library/ff841995(v=vs.94).aspx

addEventListener(event, function, useCapture) 方法 true - 事件句柄在捕获阶段执行 false - 默认。事件句柄在冒泡阶段执行 http://www.runoob.com/jsref/met-element-addeventlistener.html