The jquery project gives router

Now you will not React/vue are embarrassed to say that you are the front-end, but I believe many front-end projects are based on the traditional jquery class library model, if you have the attitude of using Requirejs This library, you must think of a problem, or a component of the embryonic thinking, That is, using a template engine, such as Arttemplate+requirejs, to implement a single-page component-based development model (SPA)

Put a directory structure first

This is the basic directory structure of a mid-background system that has been done in recent time, that is, using the above pattern. : Which index.html for the Web page is the only portal, the other each page corresponds to a tpl+css+js, page jump through require[' xx ', CB] to achieve, it looks as if actually very good, simple, fast, Then there is a big problem with this model is not to generate browsing records, the page can not back! cannot be refreshed individually! So, it was time to give him the routing function.

Brief ideas

When the page jumps, use History.pushstate (stateobject, title, URL) to change the URL hash value (such as: # .... ), typically a pre-configured route key, which triggers the Window.onhashchange event, the callback function executes the business logic and ultimately controls the page's jump, which basically achieves the ability to route. At the same time, with the Window.onpopstate event, when the page back to trigger, the relevant logic control.

Briefly implement Apirouter.config (OBJ)//configure Key-value for routing

var Roleid =2;router.config ({view:'. Module-container ',Render the template Dom BaseUrl:‘/‘,Resource Root Path router: {' Page-test1 ': {templateurl:' Tpl/test/test1.tpl ',Template or page address controller:' Js/test/test1.js ',The page corresponds to the JS role: [1,2]can access the page's role 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 'Default route}, Errortplid:' #errorTpl ',Optional error template to handle loading HTML module exceptions when displaying error content Entercallback:function (Routeobj) {The callback function after the ENTER key, usually can do the page permission control, data statistics and so onConsole.log (' Entercallback ')if (!routeobj.url)Returnif (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 ( ' no Access ')} else {router.isnotlook = true; } } }}); 

Router.to (String, {}, [null | | ' _self ' | | ' _blank '], callback)//page jump, show parameters

router.to(‘page-test1‘, {    ‘test1‘: ‘我是带过来的参数‘})router.getUrlParameter(‘test1‘)

Router.get/set/delparam/clear ()//implicit pass-through parameter

router.setParam({    ‘test1‘: ‘我是带过来的参数，不显示在url上哦‘})router.to(‘page-test1‘);router.getParam(‘test1‘)

Property

• The DOM of the view render template, the default body
• BASEURL Resource Root Path
• Errortplid error when rendering template ID, subsequent expandable 404, 500, etc.
• Templateurl template or page address, here temporarily can only be static
• Controller page corresponding to the JS, if you want a dynamic page, in this face rendering template
• Role page-level roles permission ID

Full version JS

Transmission Door

Demo

Portal

There is a problem

1. There is no integrated ES6 to enjoy the technical dividends of the new features. (try to compile into ES5 using Gulp-babel, and build bundle.js through Webpack, but encounter various problems, such as the use of jquery and jquery series plug-ins, many do not support the COMMONJS specification, etc., eventually helpless to give up)
2. The standalone component does not form a life cycle, such as registering an event, jumping to another page, not destroying the event, etc., must compromise the use of first off and then on the practice
3. Without the concept of data flow, data manipulation is confusing

The jquery project gives router