Tạo một “Pure router JS” cho một Single Page Application
Single Page Application (SPA) đang là một xu hướng rất phát triển trong lập trình web hiên nay. Là một web developer, chắc hẳn chúng ta đều không quá xa lạ với khái niệm này. Với sự phát triển ngày càng mạnh của các library, framework, cụ thể là 3 cái tên nổi bật nhất là: ReactJS, VueJS và Angular, đã hỗ trợ việc tạo ra các SPA một cách nhanh chóng, hiệu quả hơn.
Rõ ràng không thể phủ định được độ tiện dụng cũng như độ dễ hiểu, dễ sử dụng của các library, framework kia mang lại. Tuy nhiên, chính vì chúng quá dễ sử dụng khiến cho các newbie frontend dev hay bị phụ thuộc vào chúng quá nhiều và không hiểu được cách các library, framework đó hoạt động như thế nào. Vì thế, ở bài viết dưới đây, chúng ta hãy cùng nhau đi tìm hiểu cách tạo một Router (xương sống của một SPA) bằng Javascript thuần.
Các bước tạo ra một Router cho SPA
1: Tạo các file cần thiết
Để tạo ra một cấu trúc đơn giản, chúng ta cần tạo ra 3 file:
-
File index.html
- Các thẻ
ulvàlisẽ tạo ra menu đơn giản - Phần
scriptsẽ nhúng 2 filerouting.js,app.js,jqueryvà nhúngApp()sẽ là phần nội dung thay đổi theo đường dẫn
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Routing with pure Javascript</title></head><body><divclass="container-app"><div><ul><li><ahref="javascript:App.navigateTo('/home')">Home</a></li><li><ahref="javascript:App.navigateTo('/aboutus')">About US</a></li><li><ahref="javascript:App.navigateTo('/contactus')">Contact US</a></li><li><ahref="javascript:App.navigateTo('/services')">Services</a></li></ul></div></div><scriptsrc="{{cdn}}/jquery.js"></script><scriptsrc="{{localhost}}/js/vendor/routing.js"></script><scriptsrc="{{loclahost}}/js/app.js"></script><script>$(document).ready(function(){if(App){ App.init();}});</script></body></html> - Các thẻ
-
File app.js
- Ở file này, chúng ta sẽ khai báo các router, mối router cần xác định được đường dẫn dẫn tới router đó và dữ liệu trả về.
- Ở các router này, chúng ta có thể dễ dàng lấy được
title,idtuỳ thuộc vào từng đường dẫn, từ đó có thể dùng các dữ liệu này làm tham số đểGETdữ liệu về từ API
var App ={};varaddRoutes=function(){ $NB.addRoute('/books/:id',function(params){ console.log('Route is ', params.Title, params.id);},'books'); $NB.addRoute('/:category/:id',function(params){ console.log('Route is ', params.Title, params.category, params.id);},'category'); $NB.addRoute('/:category/:id/:action',function(params){ console.log('Route is ', params.Title, params.category, params.id, params.action);},'category action'); $NB.addRoute(['/','/:pagename'],function(params){ console.log('Route is ', params.Title, params.pagename);},'page');}; App.init=function(){addRoutes(); $NB.loadController(location.pathname);}; App.navigateTo=function(pageUrl){ $NB.navigateTo(pageUrl);}; -
File js-routing
- File này sẽ chưa các
functioncần thiết dùng trong fileapp.js
//Tự gọi các router tương ứng với các đường dẫn(function(window){//khai báo một object rỗngvar $M={};//mảng các router, trong các router sẽ chứa đường dẫn và `function` thực thi $M.RoutingList =[];//Kiểm tra trạng thái của các trang $M.currentPage ='';//Khai báo class `RoutingClass` và các thuộc tínhvarRoutingClass=function(u, f, t){this.Params = u.split('/').filter(function(h){return h.length >0;});this.Url = u;this.Fn = f;this.Title = t;};//Hàm kiểm tra sẽ trả về 'false' hoặc url params//sẽ phân tích cú pháp url và tìm các tham số từ `location.href` varcheckParams=function(urlParams, routeParams){var paramMatchCount =0, paramObject ={};for(var i =0; i < urlParams.length ; i++){var rtParam = routeParams[i];if(rtParam.indexOf(':')>=0){ paramObject[rtParam.split(':')[1]]= urlParams[i]; paramMatchCount +=1;}}if(paramMatchCount === urlParams.length){return paramObject;}returnfalse;};//thực hiện 'function(s)' theo 'url' tương ứng//cùng với các tham số đã phân tích được//Ví dụ://: /:page/:pageid //: /home/3434434//giá trị page=>home và pageid=>3434434 $M.loadController=function(urlToParse){if($M.currentPage !== urlToParse){ $M.previousPage = $M.currentPage; $M.currentPage = urlToParse;var uParams = urlToParse.split('/').filter(function(h){return h.length >0;});var isRouteFound =0;for(var i =0; i < $M.RoutingList.length; i++){var routeItem = $M.RoutingList[i];if(routeItem.Params.length === uParams.length){var _params =checkParams(uParams, routeItem.Params);if(_params){ _params.Title = routeItem.Title; isRouteFound +=1; routeItem.Fn.call(null, _params);}}}}else{ console.log('you are on same page dude!!!!');}};//sử dụng chức năng pushSate của browser để điều hướng (thay đổi url)//và thực hiện các hàm tương ứng $M.navigateTo=function(navigateTo){ window.history.pushState(null,null, navigateTo); $M.loadController(navigateTo);};//thêm 'url' và 'function' vào routing list $M.addRoute=function(urlToMatch, fnToExecute, t){if(typeof urlToMatch ==='string'){ $M.RoutingList.push(newRoutingClass(urlToMatch, fnToExecute, t));}elseif(typeof urlToMatch && urlToMatch instanceofArray){ urlToMatch.forEach(function(lItem){ $M.RoutingList.push(newRoutingClass(lItem, fnToExecute, t));});}}; window.$NB= $M;})(window); - File này sẽ chưa các
Tổng kết
Như vậy, chỉ cần với 3 file đơn giản trên, bạn đã có thể bắt đầu tạo ra một SPA cho mình. Giờ đây, bạn chỉ cần định dạng lại cái router, viết các hàm render các giao diện tương ứng và đưa chúng vào khung sườn đã có bên trên bằng jquery.
Link tham khảo: https://gist.github.com/muralikrishnat/9c7049fda1a3708c780c
Nguồn: viblo.asia