給你的jQuery項目賦予Router技能吧

現在你不會React/Vue都不好意思說自己是前端，不過我相信很多前端項目還是基於jquery類庫的傳統模式的，假如你有追求的態度使用過requireJs這個庫，你一定思考過一個問題，或者說一種組件化的雛形思維，那就是運用一個模板引擎如artTemplate+requireJs實現一個單頁面組件化的開發模式（spa）

先貼一個目錄結構

這是近段時間做的一個中后台系統的基本目錄結構，就是使用上述的模式。如圖所示：其中index.html為網頁唯一入口，其他每一個頁面均對應一個tpl+css+js，頁面跳轉均通過require['xx',cb]實現，看上去好像其實也挺好的，簡單、快捷，那么這樣的模式有個很大的問題就是不產生瀏覽記錄，頁面無法后退！無法單獨刷新！所以，應運而生，是時候給他賦予路由功能了

簡要思路

在頁面跳轉的時候使用history.pushState(stateObject, title, url)改變url的hash值（如：#....），通常情況是預先配置好的路由key，這個時候會觸發window.onhashchange事件，回調函數里執行業務邏輯並最終控制頁面的跳轉，這樣一來就基本達到了路由的能力。同時再配合window.onpopstate事件，當頁面后退時觸發，進行相關的邏輯控制。

簡要實現

API

router.config(obj) //配置路由對應的key-value

var roleid = 2;
router.config({
    view: '.module-container', //渲染模板的dom
    baseUrl: '/', //資源根路徑
    router: {
        'page-test1': {
            templateUrl: 'tpl/test/test1.tpl', //模板或頁面地址
            controller: 'js/test/test1.js', //頁面對應的js
            role: [1, 2] //能訪問頁面的角色id
        },
        'page-test2': {
            templateUrl: 'tpl/test/test2.tpl',
            controller: 'js/test/test2.js',
            role: 1
        },
        'page-test3': {
            controller: 'js/test/test3.js',
            role: 2
        },
        'defaults': 'page-test1' //默認路由
    },
    errorTplId: '#errorTpl',  //可選的錯誤模板，用來處理加載html模塊異常時展示錯誤內容
    enterCallback: function (routeObj) {
        //回車鍵后的回調函數，通常可做頁面權限控制、數據統計等等
        console.log('enterCallback')
        if (!routeObj.url) return;
        if (typeof routeObj.role == 'object') {
            var notLook = false;
            for (var i = 0; i < routeObj.role.length; i++) {
                if (routeObj.role[i] == roleid) {
                    notLook = true;
                    break;
                }
            }
            if (!notLook) {
                router.isNotLook = false;
                alert('無權訪問')
            } else {
                router.isNotLook = true;
            }
        } else {
            if (routeObj.role != roleid) {
                router.isNotLook = false;
                alert('無權訪問')
            } else {
                router.isNotLook = true;
            }
        }
    }
});

router.to(string, {}, [null || '_self' || '_blank'] , callback) //頁面跳轉、顯示傳參

router.to('page-test1', {
    'test1': '我是帶過來的參數'
})
router.getUrlParameter('test1')

router.get/set/delParam/clear() //隱式傳參

router.setParam({
    'test1': '我是帶過來的參數，不顯示在url上哦'
})
router.to('page-test1');
router.getParam('test1')

屬性

• view 渲染模板的dom，默認body
• baseUrl 資源根路徑
• errorTplId 錯誤時渲染的模板id，后續可擴展404、500等
• templateUrl 模板或頁面地址，這里暫時只能是靜態的
• controller 頁面對應的js，如需動態頁面，在這里面渲染模板
• role 頁面級角色權限id

完整版js

傳送門

demo

傳送門

存在問題

1. 沒有集成ES6，無法享受新特性帶來的技術紅利。（嘗試使用gulp-babel編譯成ES5，並通過webpack構建成bundle.js，但是遇到各種問題，如使用jquery和jquery系列插件，很多並不支持CommonJS規范等等，最終無奈放棄）
2. 獨立組件並沒有形成生命周期，如注冊事件后，已跳轉到其他頁面，並不能銷毀事件等，必須妥協使用先off再on的做法
3. 沒有數據流的概念，數據操作很混亂