partial.js client-side routing(客户端路由-基于HTML5 SPA特性的历史API)

Posted 2020-10-08 LightSong@计海拾贝

partial.js client-side routing

https://github.com/petersirka/partial.js-clientside

Framework supports the html 5 History API, for older browsers (IE8+) URL hashtag is automatically enabled. This plugin is a little big cannon for the web development. Works best with jQuery.

• easy to use
• minified only 9.5 kB (without GZIP compression)
• great functionality
• great use
• works in IE 8+
• no dependencies
• DEMO EXAMPLE

 

小巧 易用 功能强大， 兼容性好， 对于老的浏览器， 即不支持HTML5 SPA 历史API的浏览器， 自动降级为 hash方式的路由。

查看例子页面：

http://source.858project.com/contact/

Simple example

// ===========================
// DEFINE ROUTING
// ===========================

// framework === global variable

framework.route(‘/homepage/‘, view_homepage, [‘contact‘]);
framework.route(‘/services/‘, view_services, [‘contact‘]);
framework.route(‘/contact/‘, view_contact, [‘empty‘]);
framework.route(‘/products/{category}/‘, view_products, [‘latest‘]);

// ===========================
// DEFINE PARTIAL CONTENT
// ===========================

framework.partial(‘contact‘, function() {
    $(‘#panel‘).html(‘PANEL CONTACT‘);
});

framework.partial(‘empty‘, function() {
    $(‘#panel‘).html(‘PANEL EMPTY‘);
});

framework.partial(‘latest‘, function() {
    $(‘#panel‘).html(‘PANEL LATEST‘);
});

// ===========================
// DEFINE VIEWS
// ===========================

function view_homepage() {
    $(‘#content‘).html(‘HOMEPAGE‘);
}

function view_services() {
    $(‘#content‘).html(‘SERVICES‘);
}

function view_contact() {
    $(‘#content‘).html(‘CONTACT‘);
}

function view_products(category) {
	$(‘#content‘).html(‘PRODUCTS –> ‘ + category);
}

// ===========================
// DEFINE EVENTS
// ===========================

framework.on(‘ready‘, function() {
    $(‘.menu‘).on(‘click‘, ‘a‘, function(e) {
        e.preventDefault();
        e.stopPropagation();
        framework.redirect($(this).attr(‘href‘));
    });
    framework.redirect(‘/homepage/‘);
});

framework.on(‘location‘, function(url) {
     var menu = $(‘.menu‘);
     menu.find(‘.selected‘).removeClass(‘selected‘);
     menu.find(‘a[href="‘ + url + ‘"]‘).parent().addClass(‘selected‘);
});