From 5c49d1e27aa4500fdda7140733fa9d4c8aa280e9 Mon Sep 17 00:00:00 2001
From: Joe Pea <joe@trusktr.io>
Date: Sun, 16 Jul 2023 16:37:17 -0700
Subject: [PATCH] refactor: move some functions and module-level state into
 classes as private methods and properties to start to encapsulate Docsify

Also some small tweaks:

- move ajax to utils folder
- fix some type definitions and improve content in some JSDoc comments
- use concise class field syntax
- consolidate duplicate docsify-ignore comment removal code
- move initGlobalAPI out of Docsify.js to start to encapsulate Docsify

This handles a task in [Simplify and modernize Docsify](https://github.com/docsifyjs/docsify/issues/2104), as well as works towards [Encapsulating Docsify](https://github.com/docsifyjs/docsify/issues/2135).
---
 src/core/Docsify.js                  |   9 +-
 src/core/config.js                   |   2 +-
 src/core/event/index.js              | 291 +++++++++++++++++-
 src/core/event/scroll.js             | 163 ----------
 src/core/event/sidebar.js            | 106 -------
 src/core/fetch/index.js              | 125 ++++----
 src/core/global-api.js               |   6 +-
 src/core/index.js                    |  13 +-
 src/core/init/lifecycle.js           |   8 +-
 src/core/render/compiler.js          |   4 +-
 src/core/render/compiler/headline.js |   4 +-
 src/core/render/embed.js             |   2 +-
 src/core/render/index.js             | 432 ++++++++++++++-------------
 src/core/render/utils.js             |  10 +-
 src/core/router/history/base.js      |  51 ++--
 src/core/router/history/hash.js      |   6 +-
 src/core/router/history/html5.js     |   5 +-
 src/core/router/index.js             |   9 +-
 src/core/{fetch => util}/ajax.js     |   2 +-
 src/core/util/str.js                 |   8 -
 src/core/virtual-routes/index.js     |  20 +-
 src/core/virtual-routes/next.js      |   4 +-
 src/plugins/search/search.js         |  10 +-
 test/unit/render-util.test.js        |  10 +-
 24 files changed, 663 insertions(+), 637 deletions(-)
 delete mode 100644 src/core/event/scroll.js
 delete mode 100644 src/core/event/sidebar.js
 rename src/core/{fetch => util}/ajax.js (98%)
 delete mode 100644 src/core/util/str.js

diff --git a/src/core/Docsify.js b/src/core/Docsify.js
index f0d74fff9d..4f6affe278 100644
--- a/src/core/Docsify.js
+++ b/src/core/Docsify.js
@@ -16,11 +16,11 @@ export class Docsify extends Fetch(
   // eslint-disable-next-line new-cap
   Events(Render(VirtualRoutes(Router(Lifecycle(Object)))))
 ) {
+  config = config(this);
+
   constructor() {
     super();
 
-    this.config = config(this);
-
     this.initLifecycle(); // Init hooks
     this.initPlugin(); // Install plugins
     this.callHook('init');
@@ -46,8 +46,3 @@ export class Docsify extends Fetch(
     });
   }
 }
-
-/**
- * Global API
- */
-initGlobalAPI();
diff --git a/src/core/config.js b/src/core/config.js
index 5e076bfdb5..687dfd230a 100644
--- a/src/core/config.js
+++ b/src/core/config.js
@@ -3,7 +3,7 @@ import { hyphenate, isPrimitive } from './util/core.js';
 
 const currentScript = document.currentScript;
 
-/** @param {import('./Docsify').Docsify} vm */
+/** @param {import('./Docsify.js').Docsify} vm */
 export default function (vm) {
   const config = Object.assign(
     {
diff --git a/src/core/event/index.js b/src/core/event/index.js
index d5619c0b05..516f1fb270 100644
--- a/src/core/event/index.js
+++ b/src/core/event/index.js
@@ -1,9 +1,11 @@
+import Tweezer from 'tweezer.js';
 import { isMobile } from '../util/env.js';
 import { body, on } from '../util/dom.js';
-import * as sidebar from './sidebar.js';
-import { scrollIntoView, scroll2Top } from './scroll.js';
+import * as dom from '../util/dom.js';
+import { removeParams } from '../router/util.js';
+import config from '../config.js';
 
-/** @typedef {import('../Docsify').Constructor} Constructor */
+/** @typedef {import('../Docsify.js').Constructor} Constructor */
 
 /**
  * @template {!Constructor} T
@@ -18,29 +20,300 @@ export function Events(Base) {
       if (source !== 'history') {
         // Scroll to ID if specified
         if (this.route.query.id) {
-          scrollIntoView(this.route.path, this.route.query.id);
+          this.#scrollIntoView(this.route.path, this.route.query.id);
         }
         // Scroll to top if a link was clicked and auto2top is enabled
         if (source === 'navigate') {
-          auto2top && scroll2Top(auto2top);
+          auto2top && this.#scroll2Top(auto2top);
         }
       }
 
       if (this.config.loadNavbar) {
-        sidebar.getAndActive(this.router, 'nav');
+        this.__getAndActive(this.router, 'nav');
       }
     }
 
     initEvent() {
       // Bind toggle button
-      sidebar.btn('button.sidebar-toggle', this.router);
-      sidebar.collapse('.sidebar', this.router);
+      this.#btn('button.sidebar-toggle', this.router);
+      this.#collapse('.sidebar', this.router);
       // Bind sticky effect
       if (this.config.coverpage) {
-        !isMobile && on('scroll', sidebar.sticky);
+        !isMobile && on('scroll', this.__sticky);
       } else {
         body.classList.add('sticky');
       }
     }
+
+    /** @readonly */
+    #nav = {};
+
+    #hoverOver = false;
+    #scroller = null;
+    #enableScrollEvent = true;
+    #coverHeight = 0;
+
+    #scrollTo(el, offset = 0) {
+      if (this.#scroller) {
+        this.#scroller.stop();
+      }
+
+      this.#enableScrollEvent = false;
+      this.#scroller = new Tweezer({
+        start: window.pageYOffset,
+        end:
+          Math.round(el.getBoundingClientRect().top) +
+          window.pageYOffset -
+          offset,
+        duration: 500,
+      })
+        .on('tick', v => window.scrollTo(0, v))
+        .on('done', () => {
+          this.#enableScrollEvent = true;
+          this.#scroller = null;
+        })
+        .begin();
+    }
+
+    #highlight(path) {
+      if (!this.#enableScrollEvent) {
+        return;
+      }
+
+      const sidebar = dom.getNode('.sidebar');
+      const anchors = dom.findAll('.anchor');
+      const wrap = dom.find(sidebar, '.sidebar-nav');
+      let active = dom.find(sidebar, 'li.active');
+      const doc = document.documentElement;
+      const top =
+        ((doc && doc.scrollTop) || document.body.scrollTop) - this.#coverHeight;
+      let last;
+
+      for (const node of anchors) {
+        if (node.offsetTop > top) {
+          if (!last) {
+            last = node;
+          }
+
+          break;
+        } else {
+          last = node;
+        }
+      }
+
+      if (!last) {
+        return;
+      }
+
+      const li = this.#nav[this.#getNavKey(path, last.getAttribute('data-id'))];
+
+      if (!li || li === active) {
+        return;
+      }
+
+      active && active.classList.remove('active');
+      li.classList.add('active');
+      active = li;
+
+      // Scroll into view
+      // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+      if (!this.#hoverOver && dom.body.classList.contains('sticky')) {
+        const height = sidebar.clientHeight;
+        const curOffset = 0;
+        const cur = active.offsetTop + active.clientHeight + 40;
+        const isInView =
+          active.offsetTop >= wrap.scrollTop && cur <= wrap.scrollTop + height;
+        const notThan = cur - curOffset < height;
+
+        sidebar.scrollTop = isInView
+          ? wrap.scrollTop
+          : notThan
+          ? curOffset
+          : cur - height;
+      }
+    }
+
+    #getNavKey(path, id) {
+      return `${decodeURIComponent(path)}?id=${decodeURIComponent(id)}`;
+    }
+
+    __scrollActiveSidebar(router) {
+      const cover = dom.find('.cover.show');
+      this.#coverHeight = cover ? cover.offsetHeight : 0;
+
+      const sidebar = dom.getNode('.sidebar');
+      let lis = [];
+      if (sidebar !== null && sidebar !== undefined) {
+        lis = dom.findAll(sidebar, 'li');
+      }
+
+      for (const li of lis) {
+        const a = li.querySelector('a');
+        if (!a) {
+          continue;
+        }
+
+        let href = a.getAttribute('href');
+
+        if (href !== '/') {
+          const {
+            query: { id },
+            path,
+          } = router.parse(href);
+          if (id) {
+            href = this.#getNavKey(path, id);
+          }
+        }
+
+        if (href) {
+          this.#nav[decodeURIComponent(href)] = li;
+        }
+      }
+
+      if (isMobile) {
+        return;
+      }
+
+      const path = removeParams(router.getCurrentPath());
+      dom.off('scroll', () => this.#highlight(path));
+      dom.on('scroll', () => this.#highlight(path));
+      dom.on(sidebar, 'mouseover', () => {
+        this.#hoverOver = true;
+      });
+      dom.on(sidebar, 'mouseleave', () => {
+        this.#hoverOver = false;
+      });
+    }
+
+    #scrollIntoView(path, id) {
+      if (!id) {
+        return;
+      }
+      const topMargin = config().topMargin;
+      // Use [id='1234'] instead of #id to handle special cases such as reserved characters and pure number id
+      // https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document
+      const section = dom.find("[id='" + id + "']");
+      section && this.#scrollTo(section, topMargin);
+
+      const li = this.#nav[this.#getNavKey(path, id)];
+      const sidebar = dom.getNode('.sidebar');
+      const active = dom.find(sidebar, 'li.active');
+      active && active.classList.remove('active');
+      li && li.classList.add('active');
+    }
+
+    #scrollEl = dom.$.scrollingElement || dom.$.documentElement;
+
+    #scroll2Top(offset = 0) {
+      this.#scrollEl.scrollTop = offset === true ? 0 : Number(offset);
+    }
+
+    /** @readonly */
+    #title = dom.$.title;
+
+    /**
+     * Toggle button
+     * @param {Element} el Button to be toggled
+     * @void
+     */
+    #btn(el) {
+      const toggle = _ => dom.body.classList.toggle('close');
+
+      el = dom.getNode(el);
+      if (el === null || el === undefined) {
+        return;
+      }
+
+      dom.on(el, 'click', e => {
+        e.stopPropagation();
+        toggle();
+      });
+
+      isMobile &&
+        dom.on(
+          dom.body,
+          'click',
+          _ => dom.body.classList.contains('close') && toggle()
+        );
+    }
+
+    #collapse(el) {
+      el = dom.getNode(el);
+      if (el === null || el === undefined) {
+        return;
+      }
+
+      dom.on(el, 'click', ({ target }) => {
+        if (
+          target.nodeName === 'A' &&
+          target.nextSibling &&
+          target.nextSibling.classList &&
+          target.nextSibling.classList.contains('app-sub-sidebar')
+        ) {
+          dom.toggleClass(target.parentNode, 'collapse');
+        }
+      });
+    }
+
+    __sticky = () => {
+      const cover = dom.getNode('section.cover');
+      if (!cover) {
+        return;
+      }
+
+      const coverHeight = cover.getBoundingClientRect().height;
+
+      if (
+        window.pageYOffset >= coverHeight ||
+        cover.classList.contains('hidden')
+      ) {
+        dom.toggleClass(dom.body, 'add', 'sticky');
+      } else {
+        dom.toggleClass(dom.body, 'remove', 'sticky');
+      }
+    };
+
+    /**
+     * Get and active link
+     * @param  {Object} router Router
+     * @param  {String|Element} el Target element
+     * @param  {Boolean} isParent Active parent
+     * @param  {Boolean} autoTitle Automatically set title
+     * @return {Element} Active element
+     */
+    __getAndActive(router, el, isParent, autoTitle) {
+      el = dom.getNode(el);
+      let links = [];
+      if (el !== null && el !== undefined) {
+        links = dom.findAll(el, 'a');
+      }
+
+      const hash = decodeURI(router.toURL(router.getCurrentPath()));
+      let target;
+
+      links
+        .sort((a, b) => b.href.length - a.href.length)
+        .forEach(a => {
+          const href = decodeURI(a.getAttribute('href'));
+          const node = isParent ? a.parentNode : a;
+
+          a.title = a.title || a.innerText;
+
+          if (hash.indexOf(href) === 0 && !target) {
+            target = a;
+            dom.toggleClass(node, 'add', 'active');
+          } else {
+            dom.toggleClass(node, 'remove', 'active');
+          }
+        });
+
+      if (autoTitle) {
+        dom.$.title = target
+          ? target.title || `${target.innerText} - ${this.#title}`
+          : this.#title;
+      }
+
+      return target;
+    }
   };
 }
diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js
deleted file mode 100644
index 13a4ef7172..0000000000
--- a/src/core/event/scroll.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import Tweezer from 'tweezer.js';
-import { isMobile } from '../util/env.js';
-import * as dom from '../util/dom.js';
-import { removeParams } from '../router/util.js';
-import config from '../config.js';
-
-const nav = {};
-let hoverOver = false;
-let scroller = null;
-let enableScrollEvent = true;
-let coverHeight = 0;
-
-function scrollTo(el, offset = 0) {
-  if (scroller) {
-    scroller.stop();
-  }
-
-  enableScrollEvent = false;
-  scroller = new Tweezer({
-    start: window.pageYOffset,
-    end:
-      Math.round(el.getBoundingClientRect().top) + window.pageYOffset - offset,
-    duration: 500,
-  })
-    .on('tick', v => window.scrollTo(0, v))
-    .on('done', () => {
-      enableScrollEvent = true;
-      scroller = null;
-    })
-    .begin();
-}
-
-function highlight(path) {
-  if (!enableScrollEvent) {
-    return;
-  }
-
-  const sidebar = dom.getNode('.sidebar');
-  const anchors = dom.findAll('.anchor');
-  const wrap = dom.find(sidebar, '.sidebar-nav');
-  let active = dom.find(sidebar, 'li.active');
-  const doc = document.documentElement;
-  const top = ((doc && doc.scrollTop) || document.body.scrollTop) - coverHeight;
-  let last;
-
-  for (const node of anchors) {
-    if (node.offsetTop > top) {
-      if (!last) {
-        last = node;
-      }
-
-      break;
-    } else {
-      last = node;
-    }
-  }
-
-  if (!last) {
-    return;
-  }
-
-  const li = nav[getNavKey(path, last.getAttribute('data-id'))];
-
-  if (!li || li === active) {
-    return;
-  }
-
-  active && active.classList.remove('active');
-  li.classList.add('active');
-  active = li;
-
-  // Scroll into view
-  // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
-  if (!hoverOver && dom.body.classList.contains('sticky')) {
-    const height = sidebar.clientHeight;
-    const curOffset = 0;
-    const cur = active.offsetTop + active.clientHeight + 40;
-    const isInView =
-      active.offsetTop >= wrap.scrollTop && cur <= wrap.scrollTop + height;
-    const notThan = cur - curOffset < height;
-
-    sidebar.scrollTop = isInView
-      ? wrap.scrollTop
-      : notThan
-      ? curOffset
-      : cur - height;
-  }
-}
-
-function getNavKey(path, id) {
-  return `${decodeURIComponent(path)}?id=${decodeURIComponent(id)}`;
-}
-
-export function scrollActiveSidebar(router) {
-  const cover = dom.find('.cover.show');
-  coverHeight = cover ? cover.offsetHeight : 0;
-
-  const sidebar = dom.getNode('.sidebar');
-  let lis = [];
-  if (sidebar !== null && sidebar !== undefined) {
-    lis = dom.findAll(sidebar, 'li');
-  }
-
-  for (const li of lis) {
-    const a = li.querySelector('a');
-    if (!a) {
-      continue;
-    }
-
-    let href = a.getAttribute('href');
-
-    if (href !== '/') {
-      const {
-        query: { id },
-        path,
-      } = router.parse(href);
-      if (id) {
-        href = getNavKey(path, id);
-      }
-    }
-
-    if (href) {
-      nav[decodeURIComponent(href)] = li;
-    }
-  }
-
-  if (isMobile) {
-    return;
-  }
-
-  const path = removeParams(router.getCurrentPath());
-  dom.off('scroll', () => highlight(path));
-  dom.on('scroll', () => highlight(path));
-  dom.on(sidebar, 'mouseover', () => {
-    hoverOver = true;
-  });
-  dom.on(sidebar, 'mouseleave', () => {
-    hoverOver = false;
-  });
-}
-
-export function scrollIntoView(path, id) {
-  if (!id) {
-    return;
-  }
-  const topMargin = config().topMargin;
-  // Use [id='1234'] instead of #id to handle special cases such as reserved characters and pure number id
-  // https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document
-  const section = dom.find("[id='" + id + "']");
-  section && scrollTo(section, topMargin);
-
-  const li = nav[getNavKey(path, id)];
-  const sidebar = dom.getNode('.sidebar');
-  const active = dom.find(sidebar, 'li.active');
-  active && active.classList.remove('active');
-  li && li.classList.add('active');
-}
-
-const scrollEl = dom.$.scrollingElement || dom.$.documentElement;
-
-export function scroll2Top(offset = 0) {
-  scrollEl.scrollTop = offset === true ? 0 : Number(offset);
-}
diff --git a/src/core/event/sidebar.js b/src/core/event/sidebar.js
deleted file mode 100644
index 0e8442914c..0000000000
--- a/src/core/event/sidebar.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { isMobile } from '../util/env.js';
-import * as dom from '../util/dom.js';
-
-const title = dom.$.title;
-/**
- * Toggle button
- * @param {Element} el Button to be toggled
- * @void
- */
-export function btn(el) {
-  const toggle = _ => dom.body.classList.toggle('close');
-
-  el = dom.getNode(el);
-  if (el === null || el === undefined) {
-    return;
-  }
-
-  dom.on(el, 'click', e => {
-    e.stopPropagation();
-    toggle();
-  });
-
-  isMobile &&
-    dom.on(
-      dom.body,
-      'click',
-      _ => dom.body.classList.contains('close') && toggle()
-    );
-}
-
-export function collapse(el) {
-  el = dom.getNode(el);
-  if (el === null || el === undefined) {
-    return;
-  }
-
-  dom.on(el, 'click', ({ target }) => {
-    if (
-      target.nodeName === 'A' &&
-      target.nextSibling &&
-      target.nextSibling.classList &&
-      target.nextSibling.classList.contains('app-sub-sidebar')
-    ) {
-      dom.toggleClass(target.parentNode, 'collapse');
-    }
-  });
-}
-
-export function sticky() {
-  const cover = dom.getNode('section.cover');
-  if (!cover) {
-    return;
-  }
-
-  const coverHeight = cover.getBoundingClientRect().height;
-
-  if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) {
-    dom.toggleClass(dom.body, 'add', 'sticky');
-  } else {
-    dom.toggleClass(dom.body, 'remove', 'sticky');
-  }
-}
-
-/**
- * Get and active link
- * @param  {Object} router Router
- * @param  {String|Element} el Target element
- * @param  {Boolean} isParent Active parent
- * @param  {Boolean} autoTitle Automatically set title
- * @return {Element} Active element
- */
-export function getAndActive(router, el, isParent, autoTitle) {
-  el = dom.getNode(el);
-  let links = [];
-  if (el !== null && el !== undefined) {
-    links = dom.findAll(el, 'a');
-  }
-
-  const hash = decodeURI(router.toURL(router.getCurrentPath()));
-  let target;
-
-  links
-    .sort((a, b) => b.href.length - a.href.length)
-    .forEach(a => {
-      const href = decodeURI(a.getAttribute('href'));
-      const node = isParent ? a.parentNode : a;
-
-      a.title = a.title || a.innerText;
-
-      if (hash.indexOf(href) === 0 && !target) {
-        target = a;
-        dom.toggleClass(node, 'add', 'active');
-      } else {
-        dom.toggleClass(node, 'remove', 'active');
-      }
-    });
-
-  if (autoTitle) {
-    dom.$.title = target
-      ? target.title || `${target.innerText} - ${title}`
-      : title;
-  }
-
-  return target;
-}
diff --git a/src/core/fetch/index.js b/src/core/fetch/index.js
index cbea24ca54..aa7e195d90 100644
--- a/src/core/fetch/index.js
+++ b/src/core/fetch/index.js
@@ -1,70 +1,70 @@
 /* eslint-disable no-unused-vars */
 import { getParentPath, stringifyQuery } from '../router/util.js';
 import { noop, isExternal } from '../util/core.js';
-import { getAndActive } from '../event/sidebar.js';
-import { get } from './ajax.js';
-
-function loadNested(path, qs, file, next, vm, first) {
-  path = first ? path : path.replace(/\/$/, '');
-  path = getParentPath(path);
-
-  if (!path) {
-    return;
-  }
-
-  get(
-    vm.router.getFile(path + file) + qs,
-    false,
-    vm.config.requestHeaders
-  ).then(next, _error => loadNested(path, qs, file, next, vm));
-}
+import { get } from '../util/ajax.js';
 
-/** @typedef {import('../Docsify').Constructor} Constructor */
+/** @typedef {import('../Docsify.js').Constructor} Constructor */
 
 /**
  * @template {!Constructor} T
  * @param {T} Base - The class to extend
  */
 export function Fetch(Base) {
-  let last;
+  return class Fetch extends Base {
+    #loadNested(path, qs, file, next, vm, first) {
+      path = first ? path : path.replace(/\/$/, '');
+      path = getParentPath(path);
 
-  const abort = () => last && last.abort && last.abort();
-  const request = (url, requestHeaders) => {
-    abort();
-    last = get(url, true, requestHeaders);
-    return last;
-  };
+      if (!path) {
+        return;
+      }
 
-  const get404Path = (path, config) => {
-    const { notFoundPage, ext } = config;
-    const defaultPath = '_404' + (ext || '.md');
-    let key;
-    let path404;
-
-    switch (typeof notFoundPage) {
-      case 'boolean':
-        path404 = defaultPath;
-        break;
-      case 'string':
-        path404 = notFoundPage;
-        break;
-
-      case 'object':
-        key = Object.keys(notFoundPage)
-          .sort((a, b) => b.length - a.length)
-          .filter(k => path.match(new RegExp('^' + k)))[0];
-
-        path404 = (key && notFoundPage[key]) || defaultPath;
-        break;
-
-      default:
-        break;
+      get(
+        vm.router.getFile(path + file) + qs,
+        false,
+        vm.config.requestHeaders
+      ).then(next, _error => this.#loadNested(path, qs, file, next, vm));
     }
 
-    return path404;
-  };
+    #last;
+
+    #abort = () => this.#last && this.#last.abort && this.#last.abort();
+
+    #request = (url, requestHeaders) => {
+      this.#abort();
+      this.#last = get(url, true, requestHeaders);
+      return this.#last;
+    };
+
+    #get404Path = (path, config) => {
+      const { notFoundPage, ext } = config;
+      const defaultPath = '_404' + (ext || '.md');
+      let key;
+      let path404;
+
+      switch (typeof notFoundPage) {
+        case 'boolean':
+          path404 = defaultPath;
+          break;
+        case 'string':
+          path404 = notFoundPage;
+          break;
+
+        case 'object':
+          key = Object.keys(notFoundPage)
+            .sort((a, b) => b.length - a.length)
+            .filter(k => path.match(new RegExp('^' + k)))[0];
+
+          path404 = (key && notFoundPage[key]) || defaultPath;
+          break;
+
+        default:
+          break;
+      }
+
+      return path404;
+    };
 
-  return class Fetch extends Base {
     _loadSideAndNav(path, qs, loadSidebar, cb) {
       return () => {
         if (!loadSidebar) {
@@ -77,7 +77,7 @@ export function Fetch(Base) {
         };
 
         // Load sidebar
-        loadNested(path, qs, loadSidebar, fn, this, true);
+        this.#loadNested(path, qs, loadSidebar, fn, this, true);
       };
     }
 
@@ -121,7 +121,7 @@ export function Fetch(Base) {
             if (typeof contents === 'string') {
               contentFetched(contents);
             } else {
-              request(file + qs, requestHeaders).then(
+              this.#request(file + qs, requestHeaders).then(
                 contentFetched,
                 contentFailedToFetch
               );
@@ -129,7 +129,7 @@ export function Fetch(Base) {
           });
         } else {
           // if the requested url is not local, just fetch the file
-          request(file + qs, requestHeaders).then(
+          this.#request(file + qs, requestHeaders).then(
             contentFetched,
             contentFailedToFetch
           );
@@ -137,7 +137,7 @@ export function Fetch(Base) {
 
         // Load nav
         loadNavbar &&
-          loadNested(
+          this.#loadNested(
             path,
             qs,
             loadNavbar,
@@ -216,7 +216,7 @@ export function Fetch(Base) {
       const newPath = this.router.getFile(
         path.replace(new RegExp(`^/${local}`), '')
       );
-      const req = request(newPath + qs, requestHeaders);
+      const req = this.#request(newPath + qs, requestHeaders);
 
       req.then(
         (text, opt) =>
@@ -244,9 +244,9 @@ export function Fetch(Base) {
 
       const fnLoadSideAndNav = this._loadSideAndNav(path, qs, loadSidebar, cb);
       if (notFoundPage) {
-        const path404 = get404Path(path, this.config);
+        const path404 = this.#get404Path(path, this.config);
 
-        request(this.router.getFile(path404), requestHeaders).then(
+        this.#request(this.router.getFile(path404), requestHeaders).then(
           (text, opt) => this._renderMain(text, opt, fnLoadSideAndNav),
           _error => this._renderMain(null, {}, fnLoadSideAndNav)
         );
@@ -262,7 +262,12 @@ export function Fetch(Base) {
 
       // Server-Side Rendering
       if (this.rendered) {
-        const activeEl = getAndActive(this.router, '.sidebar-nav', true, true);
+        const activeEl = this.__getAndActive(
+          this.router,
+          '.sidebar-nav',
+          true,
+          true
+        );
         if (loadSidebar && activeEl) {
           activeEl.parentNode.innerHTML += window.__SUB_SIDEBAR__;
         }
diff --git a/src/core/global-api.js b/src/core/global-api.js
index 1673f0f92c..24be8ae2c4 100644
--- a/src/core/global-api.js
+++ b/src/core/global-api.js
@@ -4,13 +4,13 @@ import * as util from './util/index.js';
 import * as dom from './util/dom.js';
 import { Compiler } from './render/compiler.js';
 import { slugify } from './render/slugify.js';
-import { get } from './fetch/ajax.js';
+import { get } from './util/ajax.js';
 
-// TODO This is deprecated, kept for backwards compatibility. Remove in next
+// TODO This is deprecated, kept for backwards compatibility. Remove in a
 // major release. We'll tell people to get everything from the DOCSIFY global
 // when using the global build, but we'll highly recommend for them to import
 // from the ESM build (f.e. lib/docsify.esm.js and lib/docsify.min.esm.js).
-export default function () {
+export default function initGlobalAPI() {
   window.Docsify = {
     util,
     dom,
diff --git a/src/core/index.js b/src/core/index.js
index 7074b3b738..897ac66b3a 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -1,8 +1,17 @@
 import { documentReady } from './util/dom.js';
 import { Docsify } from './Docsify.js';
+import initGlobalAPI from './global-api.js';
+
+// TODO This global API and auto-running Docsify will be deprecated, and removed
+// in a major release. Instead we'll tell users to use `new Docsify()` to create
+// and manage their instance(s).
+
+/**
+ * Global API
+ */
+initGlobalAPI();
 
 /**
  * Run Docsify
  */
-// eslint-disable-next-line no-unused-vars
-documentReady(_ => new Docsify());
+documentReady(() => new Docsify());
diff --git a/src/core/init/lifecycle.js b/src/core/init/lifecycle.js
index 531ef354d3..36eb4c7d5f 100644
--- a/src/core/init/lifecycle.js
+++ b/src/core/init/lifecycle.js
@@ -1,6 +1,6 @@
 import { noop } from '../util/core.js';
 
-/** @typedef {import('../Docsify').Constructor} Constructor */
+/** @typedef {import('../Docsify.js').Constructor} Constructor */
 
 /**
  * @template {!Constructor} T
@@ -8,6 +8,9 @@ import { noop } from '../util/core.js';
  */
 export function Lifecycle(Base) {
   return class Lifecycle extends Base {
+    _hooks = {};
+    _lifecycle = {};
+
     initLifecycle() {
       const hooks = [
         'init',
@@ -18,9 +21,6 @@ export function Lifecycle(Base) {
         'ready',
       ];
 
-      this._hooks = {};
-      this._lifecycle = {};
-
       hooks.forEach(hook => {
         const arr = (this._hooks[hook] = []);
         this._lifecycle[hook] = fn => arr.push(fn);
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 9386f42668..3514136a46 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -8,7 +8,7 @@ import { emojify } from './emojify.js';
 import {
   getAndRemoveConfig,
   removeAtag,
-  getAndRemoveDocisfyIgnorConfig,
+  getAndRemoveDocisfyIgnoreConfig,
 } from './utils.js';
 import { imageCompiler } from './compiler/image.js';
 import { highlightCodeCompiler } from './compiler/code.js';
@@ -214,7 +214,7 @@ export class Compiler {
       const nextToc = { level, title: str };
 
       const { content, ignoreAllSubs, ignoreSubHeading } =
-        getAndRemoveDocisfyIgnorConfig(str);
+        getAndRemoveDocisfyIgnoreConfig(str);
       str = content.trim();
 
       nextToc.title = removeAtag(str);
diff --git a/src/core/render/compiler/headline.js b/src/core/render/compiler/headline.js
index 6ad117667c..be09b05d10 100644
--- a/src/core/render/compiler/headline.js
+++ b/src/core/render/compiler/headline.js
@@ -1,7 +1,7 @@
 import {
   getAndRemoveConfig,
   removeAtag,
-  getAndRemoveDocisfyIgnorConfig,
+  getAndRemoveDocisfyIgnoreConfig,
 } from '../utils.js';
 import { slugify } from './slugify.js';
 
@@ -11,7 +11,7 @@ export const headingCompiler = ({ renderer, router, _self }) =>
     const nextToc = { level, title: str };
 
     const { content, ignoreAllSubs, ignoreSubHeading } =
-      getAndRemoveDocisfyIgnorConfig(str);
+      getAndRemoveDocisfyIgnoreConfig(str);
     str = content.trim();
 
     nextToc.title = removeAtag(str);
diff --git a/src/core/render/embed.js b/src/core/render/embed.js
index fcd8bd7f55..ed3db4f36c 100644
--- a/src/core/render/embed.js
+++ b/src/core/render/embed.js
@@ -1,5 +1,5 @@
 import stripIndent from 'strip-indent';
-import { get } from '../fetch/ajax.js';
+import { get } from '../util/ajax.js';
 
 const cached = {};
 
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 4502efbb50..ba8d3efe13 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -1,248 +1,247 @@
 /* eslint-disable no-unused-vars */
 import tinydate from 'tinydate';
 import * as dom from '../util/dom.js';
-import { getAndActive, sticky } from '../event/sidebar.js';
 import { getPath, isAbsolutePath } from '../router/util.js';
 import { isMobile, inBrowser } from '../util/env.js';
 import { isPrimitive } from '../util/core.js';
-import { scrollActiveSidebar } from '../event/scroll.js';
 import { Compiler } from './compiler.js';
 import * as tpl from './tpl.js';
 import { prerenderEmbed } from './embed.js';
 
-let vueGlobalData;
+/** @typedef {import('../Docsify.js').Constructor} Constructor */
 
-function executeScript() {
-  const script = dom
-    .findAll('.markdown-section>script')
-    .filter(s => !/template/.test(s.type))[0];
-  if (!script) {
-    return false;
-  }
+/**
+ * @template {!Constructor} T
+ * @param {T} Base - The class to extend
+ */
+export function Render(Base) {
+  return class Render extends Base {
+    #vueGlobalData;
+
+    #executeScript() {
+      const script = dom
+        .findAll('.markdown-section>script')
+        .filter(s => !/template/.test(s.type))[0];
+      if (!script) {
+        return false;
+      }
 
-  const code = script.innerText.trim();
-  if (!code) {
-    return false;
-  }
+      const code = script.innerText.trim();
+      if (!code) {
+        return false;
+      }
 
-  new Function(code)();
-}
+      new Function(code)();
+    }
 
-function formatUpdated(html, updated, fn) {
-  updated =
-    typeof fn === 'function'
-      ? fn(updated)
-      : typeof fn === 'string'
-      ? tinydate(fn)(new Date(updated))
-      : updated;
+    #formatUpdated(html, updated, fn) {
+      updated =
+        typeof fn === 'function'
+          ? fn(updated)
+          : typeof fn === 'string'
+          ? tinydate(fn)(new Date(updated))
+          : updated;
 
-  return html.replace(/{docsify-updated}/g, updated);
-}
+      return html.replace(/{docsify-updated}/g, updated);
+    }
 
-function renderMain(html) {
-  const docsifyConfig = this.config;
-  const markdownElm = dom.find('.markdown-section');
-  const vueVersion =
-    'Vue' in window &&
-    window.Vue.version &&
-    Number(window.Vue.version.charAt(0));
+    #renderMain(html) {
+      const docsifyConfig = this.config;
+      const markdownElm = dom.find('.markdown-section');
+      const vueVersion =
+        'Vue' in window &&
+        window.Vue.version &&
+        Number(window.Vue.version.charAt(0));
 
-  const isMountedVue = elm => {
-    const isVue2 = Boolean(elm.__vue__ && elm.__vue__._isVue);
-    const isVue3 = Boolean(elm._vnode && elm._vnode.__v_skip);
+      const isMountedVue = elm => {
+        const isVue2 = Boolean(elm.__vue__ && elm.__vue__._isVue);
+        const isVue3 = Boolean(elm._vnode && elm._vnode.__v_skip);
 
-    return isVue2 || isVue3;
-  };
+        return isVue2 || isVue3;
+      };
 
-  if (!html) {
-    html = /* html */ `<h1>404 - Not found</h1>`;
-  }
-
-  if ('Vue' in window) {
-    const mountedElms = dom
-      .findAll('.markdown-section > *')
-      .filter(elm => isMountedVue(elm));
-
-    // Destroy/unmount existing Vue instances
-    for (const mountedElm of mountedElms) {
-      if (vueVersion === 2) {
-        mountedElm.__vue__.$destroy();
-      } else if (vueVersion === 3) {
-        mountedElm.__vue_app__.unmount();
+      if (!html) {
+        html = /* html */ `<h1>404 - Not found</h1>`;
       }
-    }
-  }
 
-  this._renderTo(markdownElm, html);
-
-  // Render sidebar with the TOC
-  !docsifyConfig.loadSidebar && this._renderSidebar();
+      if ('Vue' in window) {
+        const mountedElms = dom
+          .findAll('.markdown-section > *')
+          .filter(elm => isMountedVue(elm));
+
+        // Destroy/unmount existing Vue instances
+        for (const mountedElm of mountedElms) {
+          if (vueVersion === 2) {
+            mountedElm.__vue__.$destroy();
+          } else if (vueVersion === 3) {
+            mountedElm.__vue_app__.unmount();
+          }
+        }
+      }
 
-  // Execute markdown <script>
-  if (
-    docsifyConfig.executeScript ||
-    ('Vue' in window && docsifyConfig.executeScript !== false)
-  ) {
-    executeScript();
-  }
+      this._renderTo(markdownElm, html);
 
-  // Handle Vue content not mounted by markdown <script>
-  if ('Vue' in window) {
-    const vueMountData = [];
-    const vueComponentNames = Object.keys(docsifyConfig.vueComponents || {});
+      // Render sidebar with the TOC
+      !docsifyConfig.loadSidebar && this._renderSidebar();
 
-    // Register global vueComponents
-    if (vueVersion === 2 && vueComponentNames.length) {
-      vueComponentNames.forEach(name => {
-        const isNotRegistered = !window.Vue.options.components[name];
+      // Execute markdown <script>
+      if (
+        docsifyConfig.executeScript ||
+        ('Vue' in window && docsifyConfig.executeScript !== false)
+      ) {
+        this.#executeScript();
+      }
 
-        if (isNotRegistered) {
-          window.Vue.component(name, docsifyConfig.vueComponents[name]);
-        }
-      });
-    }
+      // Handle Vue content not mounted by markdown <script>
+      if ('Vue' in window) {
+        const vueMountData = [];
+        const vueComponentNames = Object.keys(
+          docsifyConfig.vueComponents || {}
+        );
 
-    // Store global data() return value as shared data object
-    if (
-      !vueGlobalData &&
-      docsifyConfig.vueGlobalOptions &&
-      typeof docsifyConfig.vueGlobalOptions.data === 'function'
-    ) {
-      vueGlobalData = docsifyConfig.vueGlobalOptions.data();
-    }
+        // Register global vueComponents
+        if (vueVersion === 2 && vueComponentNames.length) {
+          vueComponentNames.forEach(name => {
+            const isNotRegistered = !window.Vue.options.components[name];
 
-    // vueMounts
-    vueMountData.push(
-      ...Object.keys(docsifyConfig.vueMounts || {})
-        .map(cssSelector => [
-          dom.find(markdownElm, cssSelector),
-          docsifyConfig.vueMounts[cssSelector],
-        ])
-        .filter(([elm, vueConfig]) => elm)
-    );
-
-    // Template syntax, vueComponents, vueGlobalOptions
-    if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
-      const reHasBraces = /{{2}[^{}]*}{2}/;
-      // Matches Vue full and shorthand syntax as attributes in HTML tags.
-      //
-      // Full syntax examples:
-      // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
-      //
-      // Shorthand syntax examples:
-      // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
-      //
-      // Markup examples:
-      // <div v-html>{{ html }}</div>
-      // <div v-text="msg"></div>
-      // <div v-bind:text-content.prop="text">
-      // <button v-on:click="doThis"></button>
-      // <button v-on:click.once="doThis"></button>
-      // <button v-on:[event]="doThis"></button>
-      // <button @click.stop.prevent="doThis">
-      // <a :href="url">
-      // <a :[key]="url">
-      const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
-
-      vueMountData.push(
-        ...dom
-          .findAll('.markdown-section > *')
-          // Remove duplicates
-          .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-          // Detect Vue content
-          .filter(elm => {
-            const isVueMount =
-              // is a component
-              elm.tagName.toLowerCase() in
-                (docsifyConfig.vueComponents || {}) ||
-              // has a component(s)
-              elm.querySelector(vueComponentNames.join(',') || null) ||
-              // has curly braces
-              reHasBraces.test(elm.outerHTML) ||
-              // has content directive
-              reHasDirective.test(elm.outerHTML);
-
-            return isVueMount;
-          })
-          .map(elm => {
-            // Clone global configuration
-            const vueConfig = {
-              ...docsifyConfig.vueGlobalOptions,
-            };
-            // Replace vueGlobalOptions data() return value with shared data object.
-            // This provides a global store for all Vue instances that receive
-            // vueGlobalOptions as their configuration.
-            if (vueGlobalData) {
-              vueConfig.data = () => vueGlobalData;
+            if (isNotRegistered) {
+              window.Vue.component(name, docsifyConfig.vueComponents[name]);
             }
+          });
+        }
 
-            return [elm, vueConfig];
-          })
-      );
-    }
+        // Store global data() return value as shared data object
+        if (
+          !this.#vueGlobalData &&
+          docsifyConfig.vueGlobalOptions &&
+          typeof docsifyConfig.vueGlobalOptions.data === 'function'
+        ) {
+          this.#vueGlobalData = docsifyConfig.vueGlobalOptions.data();
+        }
 
-    // Mount
-    for (const [mountElm, vueConfig] of vueMountData) {
-      const isVueAttr = 'data-isvue';
-      const isSkipElm =
-        // Is an invalid tag
-        mountElm.matches('pre, script') ||
-        // Is a mounted instance
-        isMountedVue(mountElm) ||
-        // Has mounted instance(s)
-        mountElm.querySelector(`[${isVueAttr}]`);
-
-      if (!isSkipElm) {
-        mountElm.setAttribute(isVueAttr, '');
-
-        if (vueVersion === 2) {
-          vueConfig.el = undefined;
-          new window.Vue(vueConfig).$mount(mountElm);
-        } else if (vueVersion === 3) {
-          const app = window.Vue.createApp(vueConfig);
-
-          // Register global vueComponents
-          vueComponentNames.forEach(name => {
-            const config = docsifyConfig.vueComponents[name];
+        // vueMounts
+        vueMountData.push(
+          ...Object.keys(docsifyConfig.vueMounts || {})
+            .map(cssSelector => [
+              dom.find(markdownElm, cssSelector),
+              docsifyConfig.vueMounts[cssSelector],
+            ])
+            .filter(([elm, vueConfig]) => elm)
+        );
 
-            app.component(name, config);
-          });
+        // Template syntax, vueComponents, vueGlobalOptions
+        if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
+          const reHasBraces = /{{2}[^{}]*}{2}/;
+          // Matches Vue full and shorthand syntax as attributes in HTML tags.
+          //
+          // Full syntax examples:
+          // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
+          //
+          // Shorthand syntax examples:
+          // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
+          //
+          // Markup examples:
+          // <div v-html>{{ html }}</div>
+          // <div v-text="msg"></div>
+          // <div v-bind:text-content.prop="text">
+          // <button v-on:click="doThis"></button>
+          // <button v-on:click.once="doThis"></button>
+          // <button v-on:[event]="doThis"></button>
+          // <button @click.stop.prevent="doThis">
+          // <a :href="url">
+          // <a :[key]="url">
+          const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
+
+          vueMountData.push(
+            ...dom
+              .findAll('.markdown-section > *')
+              // Remove duplicates
+              .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+              // Detect Vue content
+              .filter(elm => {
+                const isVueMount =
+                  // is a component
+                  elm.tagName.toLowerCase() in
+                    (docsifyConfig.vueComponents || {}) ||
+                  // has a component(s)
+                  elm.querySelector(vueComponentNames.join(',') || null) ||
+                  // has curly braces
+                  reHasBraces.test(elm.outerHTML) ||
+                  // has content directive
+                  reHasDirective.test(elm.outerHTML);
+
+                return isVueMount;
+              })
+              .map(elm => {
+                // Clone global configuration
+                const vueConfig = {
+                  ...docsifyConfig.vueGlobalOptions,
+                };
+                // Replace vueGlobalOptions data() return value with shared data object.
+                // This provides a global store for all Vue instances that receive
+                // vueGlobalOptions as their configuration.
+                if (this.#vueGlobalData) {
+                  vueConfig.data = () => this.#vueGlobalData;
+                }
+
+                return [elm, vueConfig];
+              })
+          );
+        }
 
-          app.mount(mountElm);
+        // Mount
+        for (const [mountElm, vueConfig] of vueMountData) {
+          const isVueAttr = 'data-isvue';
+          const isSkipElm =
+            // Is an invalid tag
+            mountElm.matches('pre, script') ||
+            // Is a mounted instance
+            isMountedVue(mountElm) ||
+            // Has mounted instance(s)
+            mountElm.querySelector(`[${isVueAttr}]`);
+
+          if (!isSkipElm) {
+            mountElm.setAttribute(isVueAttr, '');
+
+            if (vueVersion === 2) {
+              vueConfig.el = undefined;
+              new window.Vue(vueConfig).$mount(mountElm);
+            } else if (vueVersion === 3) {
+              const app = window.Vue.createApp(vueConfig);
+
+              // Register global vueComponents
+              vueComponentNames.forEach(name => {
+                const config = docsifyConfig.vueComponents[name];
+
+                app.component(name, config);
+              });
+
+              app.mount(mountElm);
+            }
+          }
         }
       }
     }
-  }
-}
-
-function renderNameLink(vm) {
-  const el = dom.getNode('.app-name-link');
-  const nameLink = vm.config.nameLink;
-  const path = vm.route.path;
 
-  if (!el) {
-    return;
-  }
+    #renderNameLink(vm) {
+      const el = dom.getNode('.app-name-link');
+      const nameLink = vm.config.nameLink;
+      const path = vm.route.path;
 
-  if (isPrimitive(vm.config.nameLink)) {
-    el.setAttribute('href', nameLink);
-  } else if (typeof nameLink === 'object') {
-    const match = Object.keys(nameLink).filter(
-      key => path.indexOf(key) > -1
-    )[0];
-
-    el.setAttribute('href', nameLink[match]);
-  }
-}
+      if (!el) {
+        return;
+      }
 
-/** @typedef {import('../Docsify').Constructor} Constructor */
+      if (isPrimitive(vm.config.nameLink)) {
+        el.setAttribute('href', nameLink);
+      } else if (typeof nameLink === 'object') {
+        const match = Object.keys(nameLink).filter(
+          key => path.indexOf(key) > -1
+        )[0];
 
-/**
- * @template {!Constructor} T
- * @param {T} Base - The class to extend
- */
-export function Render(Base) {
-  return class Render extends Base {
+        el.setAttribute('href', nameLink[match]);
+      }
+    }
     _renderTo(el, content, replace) {
       const node = dom.getNode(el);
       if (node) {
@@ -269,7 +268,12 @@ export function Render(Base) {
       }
 
       this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
-      const activeEl = getAndActive(this.router, '.sidebar-nav', true, true);
+      const activeEl = this.__getAndActive(
+        this.router,
+        '.sidebar-nav',
+        true,
+        true
+      );
       if (loadSidebar && activeEl) {
         activeEl.parentNode.innerHTML +=
           this.compiler.subSidebar(subMaxLevel) || '';
@@ -285,7 +289,7 @@ export function Render(Base) {
     _bindEventOnRendered(activeEl) {
       const { autoHeader } = this.config;
 
-      scrollActiveSidebar(this.router);
+      this.__scrollActiveSidebar(this.router);
 
       if (autoHeader && activeEl) {
         const main = dom.getNode('#main');
@@ -301,20 +305,20 @@ export function Render(Base) {
     _renderNav(text) {
       text && this._renderTo('nav', this.compiler.compile(text));
       if (this.config.loadNavbar) {
-        getAndActive(this.router, 'nav');
+        this.__getAndActive(this.router, 'nav');
       }
     }
 
     _renderMain(text, opt = {}, next) {
       if (!text) {
-        return renderMain.call(this, text);
+        return this.#renderMain.call(this, text);
       }
 
       this.callHook('beforeEach', text, result => {
         let html;
         const callback = () => {
           if (opt.updatedAt) {
-            html = formatUpdated(
+            html = this.#formatUpdated(
               html,
               opt.updatedAt,
               this.config.formatUpdated
@@ -322,7 +326,7 @@ export function Render(Base) {
           }
 
           this.callHook('afterEach', html, hookData => {
-            renderMain.call(this, hookData);
+            this.#renderMain.call(this, hookData);
             next();
           });
         };
@@ -386,12 +390,12 @@ export function Render(Base) {
       }
 
       this._renderTo('.cover-main', html);
-      sticky();
+      this.__sticky();
     }
 
     _updateRender() {
       // Render name link
-      renderNameLink(this);
+      this.#renderNameLink(this);
     }
 
     initRender() {
diff --git a/src/core/render/utils.js b/src/core/render/utils.js
index acd3a45e8b..5f505e44f3 100644
--- a/src/core/render/utils.js
+++ b/src/core/render/utils.js
@@ -16,7 +16,7 @@
  *
  * @param {string}   str   The string to parse.
  *
- * @return {object}  The original string and parsed object, { str, config }.
+ * @return {{str: string, config: object}} The original string formatted, and parsed object, { str, config }.
  */
 export function getAndRemoveConfig(str = '') {
   const config = {};
@@ -43,7 +43,7 @@ export function getAndRemoveConfig(str = '') {
  * Remove the <a> tag from sidebar when the header with link, details see issue 1069
  * @param {string}   str   The string to deal with.
  *
- * @return {string}   str   The string after delete the <a> element.
+ * @return {string}   The string after delete the <a> element.
  */
 export function removeAtag(str = '') {
   return str.replace(/(<\/?a.*?>)/gi, '');
@@ -51,11 +51,11 @@ export function removeAtag(str = '') {
 
 /**
  * Remove the docsifyIgnore configs and return the str
- * @param {string}   str   The string to deal with.
+ * @param {string}   content   The string to deal with.
  *
- * @return {string}   str   The string after delete the docsifyIgnore configs.
+ * @return {{content: string, ignoreAllSubs: boolean, ignoreSubHeading: boolean}} The string after delete the docsifyIgnore configs, and whether to ignore some or all.
  */
-export function getAndRemoveDocisfyIgnorConfig(content = '') {
+export function getAndRemoveDocisfyIgnoreConfig(content = '') {
   let ignoreAllSubs, ignoreSubHeading;
   if (/<!-- {docsify-ignore} -->/g.test(content)) {
     content = content.replace('<!-- {docsify-ignore} -->', '');
diff --git a/src/core/router/history/base.js b/src/core/router/history/base.js
index 72ba407513..b36e48eb91 100644
--- a/src/core/router/history/base.js
+++ b/src/core/router/history/base.js
@@ -8,32 +8,37 @@ import {
 } from '../util.js';
 import { noop } from '../../util/core.js';
 
-const cached = {};
-
-function getAlias(path, alias, last) {
-  const match = Object.keys(alias).filter(key => {
-    const re = cached[key] || (cached[key] = new RegExp(`^${key}$`));
-    return re.test(path) && path !== last;
-  })[0];
-
-  return match
-    ? getAlias(path.replace(cached[match], alias[match]), alias, path)
-    : path;
-}
-
-function getFileName(path, ext) {
-  return new RegExp(`\\.(${ext.replace(/^\./, '')}|html)$`, 'g').test(path)
-    ? path
-    : /\/$/g.test(path)
-    ? `${path}README${ext}`
-    : `${path}${ext}`;
-}
-
 export class History {
+  #cached = {};
+
   constructor(config) {
     this.config = config;
   }
 
+  #getAlias(path, alias, last) {
+    const match = Object.keys(alias).filter(key => {
+      const re =
+        this.#cached[key] || (this.#cached[key] = new RegExp(`^${key}$`));
+      return re.test(path) && path !== last;
+    })[0];
+
+    return match
+      ? this.#getAlias(
+          path.replace(this.#cached[match], alias[match]),
+          alias,
+          path
+        )
+      : path;
+  }
+
+  #getFileName(path, ext) {
+    return new RegExp(`\\.(${ext.replace(/^\./, '')}|html)$`, 'g').test(path)
+      ? path
+      : /\/$/g.test(path)
+      ? `${path}README${ext}`
+      : `${path}${ext}`;
+  }
+
   getBasePath() {
     return this.config.basePath;
   }
@@ -43,8 +48,8 @@ export class History {
     const base = this.getBasePath();
     const ext = typeof config.ext === 'string' ? config.ext : '.md';
 
-    path = config.alias ? getAlias(path, config.alias) : path;
-    path = getFileName(path, ext);
+    path = config.alias ? this.#getAlias(path, config.alias) : path;
+    path = this.#getFileName(path, ext);
     path = path === `/README${ext}` ? config.homepage || path : path;
     path = isAbsolutePath(path) ? path : getPath(base, path);
 
diff --git a/src/core/router/history/hash.js b/src/core/router/history/hash.js
index ecb2caf14f..9853e7ecc0 100644
--- a/src/core/router/history/hash.js
+++ b/src/core/router/history/hash.js
@@ -7,11 +7,9 @@ function replaceHash(path) {
   const i = location.href.indexOf('#');
   location.replace(location.href.slice(0, i >= 0 ? i : 0) + '#' + path);
 }
+
 export class HashHistory extends History {
-  constructor(config) {
-    super(config);
-    this.mode = 'hash';
-  }
+  mode = 'hash';
 
   getBasePath() {
     const path = window.location.pathname || '';
diff --git a/src/core/router/history/html5.js b/src/core/router/history/html5.js
index c5a89a168f..080ba365d2 100644
--- a/src/core/router/history/html5.js
+++ b/src/core/router/history/html5.js
@@ -4,10 +4,7 @@ import { parseQuery, getPath } from '../util.js';
 import { History } from './base.js';
 
 export class HTML5History extends History {
-  constructor(config) {
-    super(config);
-    this.mode = 'history';
-  }
+  mode = 'history';
 
   getCurrentPath() {
     const base = this.getBasePath();
diff --git a/src/core/router/index.js b/src/core/router/index.js
index 8b3814bf95..76f692776a 100644
--- a/src/core/router/index.js
+++ b/src/core/router/index.js
@@ -12,7 +12,7 @@ import { HTML5History } from './history/html5.js';
 /** @type {Route} */
 let lastRoute = {};
 
-/** @typedef {import('../Docsify').Constructor} Constructor */
+/** @typedef {import('../Docsify.js').Constructor} Constructor */
 
 /**
  * @template {!Constructor} T
@@ -20,12 +20,7 @@ let lastRoute = {};
  */
 export function Router(Base) {
   return class Router extends Base {
-    /** @param {any[]} args */
-    constructor(...args) {
-      super(...args);
-
-      this.route = {};
-    }
+    route = {};
 
     updateRender() {
       this.router.normalize();
diff --git a/src/core/fetch/ajax.js b/src/core/util/ajax.js
similarity index 98%
rename from src/core/fetch/ajax.js
rename to src/core/util/ajax.js
index a6fe81cd07..c66b593e7b 100644
--- a/src/core/fetch/ajax.js
+++ b/src/core/util/ajax.js
@@ -1,7 +1,7 @@
 // @ts-check
 /* eslint-disable no-unused-vars */
 import progressbar from '../render/progressbar.js';
-import { noop } from '../util/core.js';
+import { noop } from './core.js';
 
 /** @typedef {{updatedAt: string}} CacheOpt */
 
diff --git a/src/core/util/str.js b/src/core/util/str.js
deleted file mode 100644
index e973fe7b12..0000000000
--- a/src/core/util/str.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export function removeDocsifyIgnoreTag(str) {
-  return str
-    .replace(/<!-- {docsify-ignore} -->/, '')
-    .replace(/{docsify-ignore}/, '')
-    .replace(/<!-- {docsify-ignore-all} -->/, '')
-    .replace(/{docsify-ignore-all}/, '')
-    .trim();
-}
diff --git a/src/core/virtual-routes/index.js b/src/core/virtual-routes/index.js
index 1009658a40..faea43b9c0 100644
--- a/src/core/virtual-routes/index.js
+++ b/src/core/virtual-routes/index.js
@@ -1,12 +1,30 @@
 import { makeExactMatcher } from './exact-match.js';
 import { createNextFunction } from './next.js';
 
-/** @typedef {import('../Docsify').Constructor} Constructor */
+/** @typedef {import('../Docsify.js').Constructor} Constructor */
 
 /** @typedef {Record<string, string | VirtualRouteHandler>} VirtualRoutesMap */
 /** @typedef {(route: string, match: RegExpMatchArray | null) => string | void | Promise<string | void> } VirtualRouteHandler */
 
 /**
+ * Allows users/plugins to introduce dynamically created content into their docsify
+ * websites. https://github.com/docsifyjs/docsify/issues/1737
+ *
+ * For instance:
+ *
+ * ```js
+ * window.$docsify = {
+ *   routes: {
+ *     '/items/(.+)': function (route, matched) {
+ *       return `
+ *         # Item Page: ${matched[1]}
+ *         This is an item
+ *       `;
+ *     }
+ *   }
+ * }
+ * ```
+ *
  * @template {!Constructor} T
  * @param {T} Base - The class to extend
  */
diff --git a/src/core/virtual-routes/next.js b/src/core/virtual-routes/next.js
index 1b14904a1a..ec53ece46f 100644
--- a/src/core/virtual-routes/next.js
+++ b/src/core/virtual-routes/next.js
@@ -1,4 +1,5 @@
-/** @typedef {((value: any) => void) => void} OnNext */
+/** @typedef {(value: any) => void} CB */
+/** @typedef {(cb: CB) => void} OnNext */
 /** @typedef {(value: any) => void} NextFunction */
 
 /**
@@ -7,6 +8,7 @@
  * @returns {[NextFunction, OnNext]}
  */
 export function createNextFunction() {
+  /** @type {CB} */
   let storedCb = () => null;
 
   function next(value) {
diff --git a/src/plugins/search/search.js b/src/plugins/search/search.js
index 327cb370cb..14312d6731 100644
--- a/src/plugins/search/search.js
+++ b/src/plugins/search/search.js
@@ -1,6 +1,8 @@
 /* eslint-disable no-unused-vars */
-import { getAndRemoveConfig } from '../../core/render/utils.js';
-import { removeDocsifyIgnoreTag } from '../../core/util/str.js';
+import {
+  getAndRemoveConfig,
+  getAndRemoveDocisfyIgnoreConfig,
+} from '../../core/render/utils.js';
 
 let INDEXS = {};
 
@@ -88,7 +90,7 @@ export function genIndex(path, content = '', router, depth) {
     if (token.type === 'heading' && token.depth <= depth) {
       const { str, config } = getAndRemoveConfig(token.text);
 
-      const text = removeDocsifyIgnoreTag(token.text);
+      const text = getAndRemoveDocisfyIgnoreConfig(token.text).content;
 
       if (config.id) {
         slug = router.toURL(path, { id: slugify(config.id) });
@@ -97,7 +99,7 @@ export function genIndex(path, content = '', router, depth) {
       }
 
       if (str) {
-        title = removeDocsifyIgnoreTag(str);
+        title = getAndRemoveDocisfyIgnoreConfig(str).content;
       }
 
       index[slug] = { slug, title: title, body: '' };
diff --git a/test/unit/render-util.test.js b/test/unit/render-util.test.js
index 46e4395e6c..24c750d01f 100644
--- a/test/unit/render-util.test.js
+++ b/test/unit/render-util.test.js
@@ -1,7 +1,7 @@
 import {
   removeAtag,
   getAndRemoveConfig,
-  getAndRemoveDocisfyIgnorConfig,
+  getAndRemoveDocisfyIgnoreConfig,
 } from '../../src/core/render/utils.js';
 import { tree } from '../../src/core/render/tpl.js';
 import { slugify } from '../../src/core/render/slugify.js';
@@ -24,7 +24,7 @@ describe('core/render/utils', () => {
   describe('getAndRemoveDocisfyIgnorConfig()', () => {
     test('getAndRemoveDocisfyIgnorConfig from <!-- {docsify-ignore} -->', () => {
       const { content, ignoreAllSubs, ignoreSubHeading } =
-        getAndRemoveDocisfyIgnorConfig(
+        getAndRemoveDocisfyIgnoreConfig(
           'My Ignore Title<!-- {docsify-ignore} -->'
         );
       expect(content).toBe('My Ignore Title');
@@ -34,7 +34,7 @@ describe('core/render/utils', () => {
 
     test('getAndRemoveDocisfyIgnorConfig from <!-- {docsify-ignore-all} -->', () => {
       const { content, ignoreAllSubs, ignoreSubHeading } =
-        getAndRemoveDocisfyIgnorConfig(
+        getAndRemoveDocisfyIgnoreConfig(
           'My Ignore Title<!-- {docsify-ignore-all} -->'
         );
       expect(content).toBe('My Ignore Title');
@@ -44,7 +44,7 @@ describe('core/render/utils', () => {
 
     test('getAndRemoveDocisfyIgnorConfig from {docsify-ignore}', () => {
       const { content, ignoreAllSubs, ignoreSubHeading } =
-        getAndRemoveDocisfyIgnorConfig('My Ignore Title{docsify-ignore}');
+        getAndRemoveDocisfyIgnoreConfig('My Ignore Title{docsify-ignore}');
       expect(content).toBe('My Ignore Title');
       expect(ignoreSubHeading).toBeTruthy();
       expect(ignoreAllSubs === undefined).toBeTruthy();
@@ -52,7 +52,7 @@ describe('core/render/utils', () => {
 
     test('getAndRemoveDocisfyIgnorConfig from {docsify-ignore-all}', () => {
       const { content, ignoreAllSubs, ignoreSubHeading } =
-        getAndRemoveDocisfyIgnorConfig('My Ignore Title{docsify-ignore-all}');
+        getAndRemoveDocisfyIgnoreConfig('My Ignore Title{docsify-ignore-all}');
       expect(content).toBe('My Ignore Title');
       expect(ignoreAllSubs).toBeTruthy();
       expect(ignoreSubHeading === undefined).toBeTruthy();