Мое имя есть в исходных кодах ядра ОС Linux
Я со скриптами не особо на ты.
class Router{routes=[];mode=null;root='/';constructor(options){this.mode=window.history.pushState?'history':'hash';if(options.mode)this.mode=options.mode;if(options.root)this.root=options.root;this.listen()}
add=(path,cb)=>{this.routes.push({path,cb});return this};remove=path=>{for(let i=0;i<this.routes.length;i+=1){if(this.routes[i].path===path){this.routes.slice(i,1);return this}}
return this};flush=()=>{this.routes=[];return this};clearSlashes=path=>path.toString().replace(/\/$/,'').replace(/^\//,'');getFragment=()=>{let fragment='';if(this.mode==='history'){fragment=this.clearSlashes(decodeURI(window.location.pathname+window.location.search));fragment=fragment.replace(/\?(.*)$/,'');fragment=this.root!=='/'?fragment.replace(this.root,''):fragment}else{const match=window.location.href.match(/#(.*)$/);fragment=match?match[1]:''}
return this.clearSlashes(fragment)};navigate=(path='')=>{if(this.mode==='history'){window.history.pushState(null,null,this.root+this.clearSlashes(path))}else{window.location.href=`${window.location.href.replace(/#(.*)$/, '')}#${path}`}
return this};listen=()=>{clearInterval(this.interval);this.interval=setInterval(this.interval,50)};interval=()=>{if(this.current===this.getFragment())return;this.current=this.getFragment();this.routes.some(route=>{const match=this.current.match(route.path);if(match){match.shift();route.cb.apply({},match);return match}
return!1})}}const router = new Router({
mode: 'history',
root: '/'
});
router
.add(/about/, () => {
//about page controller
})
.add(/products\/(.*)\/specification\/(.*)/, (id, specification) => {
})
.add(/items\/(.*)/, (id) => {
getProductPage(id);
})
.add('', () => {
// general controller
getMainPage();
});router.navigate(this.getAttribute('href'));
Наверстать кучу типичных блоков заранее без детализации по дизайну
А-ля сделать библиотеку, фреймворк по типу Bootstrap
<section class="fdb-block">
<div class="container">
<div class="row text-center">
<div class="col">
<h1>Pricing Plans</h1>
</div>
</div>
<div class="row mt-5 align-items-top">
<div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-center">
<div class="bg-gray pb-5 pt-5 pl-4 pr-4 rounded">
<h3><strong>Startup</strong></h3>
<p class="h4">< 10 employees</p>
<p class="h1 mt-5">$9.90 <span class="lead">/ month</span></p>
<p>Far far away, behind the word mountains, far from the countries.</p>
<hr>
<p><em>Unlimited calls</em></p>
<p><em>Free hosting</em></p>
<p><em>40MB of storage</em></p>
<p class="text-center pt-5"><a href="https://www.blabla.com" class="btn btn-primary">Subscribe</a></p>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-center pt-4 pt-lg-0">
<div class="bg-gray pb-5 pt-5 pl-4 pr-4 rounded">
<h3><strong>Agency</strong></h3>
<p class="h4">10-100 employees</p>
<p class="h1 mt-5">$19.90 <span class="lead">/ month</span></p>
<p>And if she hasn’t been rewritten, then they are still using her.</p>
<hr>
<p><em>Unlimited calls</em></p>
<p><em>Free hosting</em></p>
<p><em>40MB of storage</em></p>
<p class="text-center pt-5"><a href="https://www.blabla.com" class="btn btn-primary">Subscribe</a></p>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-center pt-4 pt-lg-0">
<div class="bg-gray pb-5 pt-5 pl-4 pr-4 rounded">
<h3><strong>Business</strong></h3>
<p class="h4">>100 employees</p>
<p class="h1 mt-5">$99.90 <span class="lead">/ month</span></p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
<hr>
<p><em>Unlimited calls</em></p>
<p><em>Free hosting</em></p>
<p><em>40MB of storage</em></p>
<p class="text-center pt-5"><a href="https://www.blabla.com" class="btn btn-primary">Subscribe</a></p>
</div>
</div>
</div>
</div>
</section>