摘要：回調(diào)函數(shù)將在更新時(shí)觸發(fā)，回調(diào)中的起到了新的的作用。注冊(cè)回調(diào)在中使用注冊(cè)的回調(diào)函數(shù)，最終放在模塊的回調(diào)函數(shù)數(shù)組中。

原文地址：https://github.com/joeyguo/blog/issues/2

在單頁(yè)應(yīng)用上，前端路由并不陌生。很多前端框架也會(huì)有獨(dú)立開(kāi)發(fā)或推薦配套使用的路由系統(tǒng)。那么，當(dāng)我們?cè)谡勄岸寺酚傻臅r(shí)候，還可以談些什么？本文將簡(jiǎn)要分析并實(shí)現(xiàn)一個(gè)的前端路由，并對(duì) react-router 進(jìn)行分析。

說(shuō)一下前端路由實(shí)現(xiàn)的簡(jiǎn)要原理，以 hash 形式（也可以使用 History API 來(lái)處理）為例，當(dāng) url 的 hash 發(fā)生變化時(shí)，觸發(fā) hashchange 注冊(cè)的回調(diào)，回調(diào)中去進(jìn)行不同的操作，進(jìn)行不同的內(nèi)容的展示。直接看代碼或許更直觀。

function Router() {
    this.routes = {};
    this.currentUrl = "";
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {
    this.currentUrl = location.hash.slice(1) || "/";
    this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
    window.addEventListener("load", this.refresh.bind(this), false);
    window.addEventListener("hashchange", this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();

上面路由系統(tǒng) Router 對(duì)象實(shí)現(xiàn)，主要提供三個(gè)方法

init 監(jiān)聽(tīng)瀏覽器 url hash 更新事件

route 存儲(chǔ)路由更新時(shí)的回調(diào)到回調(diào)數(shù)組routes中，回調(diào)函數(shù)將負(fù)責(zé)對(duì)頁(yè)面的更新

refresh 執(zhí)行當(dāng)前url對(duì)應(yīng)的回調(diào)函數(shù)，更新頁(yè)面

Router 調(diào)用方式以及呈現(xiàn)效果如下：點(diǎn)擊觸發(fā) url 的 hash 改變，并對(duì)應(yīng)地更新內(nèi)容（這里為 body 背景色）

 
    
turn white
 
    
turn blue
 
    
turn green
 
 

var content = document.querySelector("body");
// change Page anything
function changeBgColor(color) {
    content.style.backgroundColor = color;
}
Router.route("/", function() {
    changeBgColor("white");
});
Router.route("/blue", function() {
    changeBgColor("blue");
});
Router.route("/green", function() {
    changeBgColor("green");
});

以上為一個(gè)前端路由的簡(jiǎn)單實(shí)現(xiàn)，點(diǎn)擊查看完整代碼，雖然簡(jiǎn)單，但實(shí)際上很多路由系統(tǒng)的根基都立于此，其他路由系統(tǒng)主要是對(duì)自身使用的框架機(jī)制的進(jìn)行配套及優(yōu)化，如與 react 配套的 react-router。

react-router 是基于 history 模塊提供的 api 進(jìn)行開(kāi)發(fā)的，結(jié)合的形式本文記為 包裝方式。所以在開(kāi)始對(duì)其分析之前，先舉一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明如何進(jìn)行對(duì)象的包裝。

// 原對(duì)象
var historyModule = {
    listener: [],
    listen: function (listener) {
        this.listener.push(listener);
        console.log("historyModule listen..")
    },
    updateLocation: function(){
        this.listener.forEach(function(listener){
            listener("new localtion");
        })
    }
}
// Router 將使用 historyModule 對(duì)象，并對(duì)其包裝
var Router = {
    source: {},
    init: function(source){
        this.source = source;
    },
    // 對(duì) historyModule的listen進(jìn)行了一層包裝
    listen: function(listener) {
        return this.source.listen(function(location){
            console.log("Router listen tirgger.");
            listener(location);
        })
    }
}
// 將 historyModule 注入進(jìn) Router 中
Router.init(historyModule);
// Router 注冊(cè)監(jiān)聽(tīng)
Router.listen(function(location){
    console.log(location + "-> Router setState.");
})
// historyModule 觸發(fā)回調(diào)
historyModule.updateLocation();

返回：

可看到 historyModule 中含有機(jī)制：historyModule.updateLocation() -> listener( )，Router 通過(guò)對(duì)其進(jìn)行包裝開(kāi)發(fā)，針對(duì) historyModule 的機(jī)制對(duì) Router 也起到了作用，即historyModule.updateLocation() 將觸發(fā) Router.listen 中的回調(diào)函數(shù) 。點(diǎn)擊查看完整代碼
這種包裝形式能夠充分利用原對(duì)象（historyModule ）的內(nèi)部機(jī)制，減少開(kāi)發(fā)成本，也更好的分離包裝函數(shù)（Router）的邏輯，減少對(duì)原對(duì)象的影響。

react-router 以 react component 的組件方式提供 API， 包含 Router，Route，Redirect，Link 等等，這樣能夠充分利用 react component 提供的生命周期特性，同時(shí)也讓定義路由跟寫(xiě) react component 達(dá)到統(tǒng)一，如下

render((
  
    
      
      
        
      
      
    
  
), document.body)

就這樣，聲明了一份含有 path to component 的各個(gè)映射的路由表。

react-router 還提供的 Link 組件（如下），作為提供更新 url 的途徑，觸發(fā) Link 后最終將通過(guò)如上面定義的路由表進(jìn)行匹配，并拿到對(duì)應(yīng)的 component 及 state 進(jìn)行 render 渲染頁(yè)面。

"joey"

這里不細(xì)講 react-router 的使用，詳情可見(jiàn)：https://github.com/reactjs/react-router

主要是因?yàn)橛|發(fā)了 react setState 的方法從而能夠觸發(fā) render component。
從頂層組件 Router 出發(fā)（下面代碼從 react-router/Router 中摘?。?，可看到 Router 在 react component 生命周期之組件被掛載前 componentWillMount 中使用 this.history.listen 去注冊(cè)了 url 更新的回調(diào)函數(shù)?；卣{(diào)函數(shù)將在 url 更新時(shí)觸發(fā)，回調(diào)中的 setState 起到 render 了新的 component 的作用。

Router.prototype.componentWillMount = function componentWillMount() {
    // .. 省略其他
    var createHistory = this.props.history;
    
    this.history = _useRoutes2["default"](createHistory)({
      routes: _RouteUtils.createRoutes(routes || children),
      parseQueryString: parseQueryString,
      stringifyQuery: stringifyQuery
    });
    
    this._unlisten = this.history.listen(function (error, state) {
        _this.setState(state, _this.props.onUpdate);
    });
  };

上面的 _useRoutes2 對(duì) history 操作便是對(duì)其做一層包裝，所以調(diào)用的 this.history 實(shí)際為包裝以后的對(duì)象，該對(duì)象含有 _useRoutes2 中的 listen 方法，如下

function listen(listener) {
      return history.listen(function (location) {
          // .. 省略其他
          match(location, function (error, redirectLocation, nextState) {
            listener(null, nextState);
          });
      });
}

可看到，上面代碼中，主要分為兩部分

使用了 history 模塊的 listen 注冊(cè)了一個(gè)含有 setState 的回調(diào)函數(shù)（這樣就能使用 history 模塊中的機(jī)制）

回調(diào)中的 match 方法為 react-router 所特有，match 函數(shù)根據(jù)當(dāng)前 location 以及前面寫(xiě)的 Route 路由表匹配出對(duì)應(yīng)的路由子集得到新的路由狀態(tài)值 state，具體實(shí)現(xiàn)可見(jiàn) react-router/matchRoutes ，再根據(jù) state 得到對(duì)應(yīng)的 component ，最終執(zhí)行了 match 中的回調(diào) listener(null, nextState) ，即執(zhí)行了 Router 中的監(jiān)聽(tīng)回調(diào)（setState），從而更新了展示。

以上，為起始注冊(cè)的監(jiān)聽(tīng)，及回調(diào)的作用。

這里還得從如何更新 url 說(shuō)起。一般來(lái)說(shuō)，url 更新主要有兩種方式：簡(jiǎn)單的 hash 更新或使用 history api 進(jìn)行地址更新。在 react-router 中，其提供了 Link 組件，該組件能在 render 中使用，最終會(huì)表現(xiàn)為 a 標(biāo)簽，并將 Link 中的各個(gè)參數(shù)組合放它的 href 屬性中?？梢詮?react-router/ Link 中看到，對(duì)該組件的點(diǎn)擊事件進(jìn)行了阻止了瀏覽器的默認(rèn)跳轉(zhuǎn)行為，而改用 history 模塊的 pushState 方法去觸發(fā) url 更新。

Link.prototype.render = function render() {
    // .. 省略其他
    props.onClick = function (e) {
      return _this.handleClick(e);
    };
    if (history) {
     // .. 省略其他
      props.href = history.createHref(to, query);
    }
    return _react2["default"].createElement("a", props);
};
  
Link.prototype.handleClick = function handleClick(event) {
    // .. 省略其他
    event.preventDefault();
    this.context.history.pushState(this.props.state, this.props.to, this.props.query);
};

對(duì) history 模塊的 pushState 方法對(duì) url 的更新形式，同樣分為兩種，分別在 history/createBrowserHistory 及 history/createHashHistory 各自的 finishTransition 中，如 history/createBrowserHistory 中使用的是 window.history.replaceState(historyState, null, path); 而 history/createHashHistory 則使用 window.location.hash = url，調(diào)用哪個(gè)是根據(jù)我們一開(kāi)始創(chuàng)建 history 的方式。

更新 url 的顯示是一部分，另一部分是根據(jù) url 去更新展示，也就是觸發(fā)前面的監(jiān)聽(tīng)。這是在前面 finishTransition 更新 url 之后實(shí)現(xiàn)的，調(diào)用的是 history/createHistory 中的 updateLocation 方法，changeListeners 中為 history/createHistory 中的 listen 中所添加的，如下

function updateLocation(newLocation) {
   // 示意代碼
    location = newLocation;
    changeListeners.forEach(function (listener) {
      listener(location);
    });
}
function listen(listener) {
     // 示意代碼
    changeListeners.push(listener);
}

可以將以上 react-router 的整個(gè)包裝閉環(huán)總結(jié)為

回調(diào)函數(shù)：含有能夠更新 react UI 的 react setState 方法。

注冊(cè)回調(diào)：在 Router componentWillMount 中使用 history.listen 注冊(cè)的回調(diào)函數(shù)，最終放在 history 模塊的 回調(diào)函數(shù)數(shù)組 changeListeners 中。

觸發(fā)回調(diào)：Link 點(diǎn)擊觸發(fā) history 中回調(diào)函數(shù)數(shù)組 changeListeners 的執(zhí)行，從而觸發(fā)原來(lái) listen 中的 setState 方法，更新了頁(yè)面

至于前進(jìn)與后退的實(shí)現(xiàn)，是通過(guò)監(jiān)聽(tīng) popstate 以及 hashchange 的事件，當(dāng)前進(jìn)或后退 url 更新時(shí)，觸發(fā)這兩個(gè)事件的回調(diào)函數(shù)，回調(diào)的執(zhí)行方式 Link 大致相同，最終同樣更新了 UI ，這里就不再說(shuō)明。

react-router 主要是利用底層 history 模塊的機(jī)制，通過(guò)結(jié)合 react 的架構(gòu)機(jī)制做一層包裝，實(shí)際自身的內(nèi)容并不多，但其包裝的思想筆者認(rèn)為很值得學(xué)習(xí)，有興趣的建議閱讀下源碼，相信會(huì)有其他收獲。