給你的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. 沒有數據流的概念，數據操作很混亂