refactor(core): add render

src/core/util/dom.js

@@ -0,0 +1,41 @@
+import { isFn } from '../util/core'
+
+const cacheNode = {}
+
+/**
+ * Get Node
+ * @param  {String|Element} el
+ * @param  {Boolean} noCache
+ * @return {Element}
+ */
+export function getNode (el, noCache = false) {
+  if (typeof el === 'string') {
+    el = noCache ? dom.find(el) : (cacheNode[el] || dom.find(el))
+  }
+
+  return el
+}
+
+export const dom = {
+  body: document.body,
+  head: document.head,
+  find: node => document.querySelector(node),
+  findAll: node => document.querySelectorAll(node),
+  create: (node, tpl) => {
+    node = document.createElement(node)
+    if (tpl) node.innerHTML = tpl
+  },
+  appendTo: (target, el) => target.appendChild(el)
+}
+
+export function on (el, type, handler) {
+  isFn(type)
+    ? window.addEventListener(el, type)
+    : el.addEventListener(type, handler)
+}
+
+export const off = function on (el, type, handler) {
+  isFn(type)
+    ? window.removeEventListener(el, type)
+    : el.removeEventListener(type, handler)
+}

src/core/util/index.js

@@ -1,2 +1,3 @@
 export * from './core'
 export * from './env'
+export * from './dom'

src/core/util/polyfill/css-vars.js

@@ -1,29 +1,32 @@
-import { get } from '../fetch/ajax'
+import { dom } from '../dom'
+import { get } from '../../fetch/ajax'
 
-function replaceVar (block) {
-  block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, $docsify.themeColor)
+function replaceVar (block, themeColor) {
+  block.innerHTML = block.innerHTML
+    .replace(/var\(\s*--theme-color.*?\)/g, themeColor)
 }
 
-export function cssVars () {
-  // variable support
-  if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) return
+export default function (themeColor) {
+  // Variable support
+  if (window.CSS
+      && window.CSS.supports
+      && window.CSS.supports('(--foo: red)')) return
 
-  const styleBlocks = document.querySelectorAll('style:not(.inserted),link')
+  const styleBlocks = dom.findAll('style:not(.inserted),link')
 
   ;[].forEach.call(styleBlocks, block => {
     if (block.nodeName === 'STYLE') {
-      replaceVar(block)
+      replaceVar(block, themeColor)
     } else if (block.nodeName === 'LINK') {
       const href = block.getAttribute('href')
 
       if (!/\.css$/.test(href)) return
 
       get(href).then(res => {
-        const style = document.createElement('style')
+        const style = dom.create('style', res)
 
-        style.innerHTML = res
-        document.head.appendChild(style)
-        replaceVar(style)
+        dom.head.appendChild(style)
+        replaceVar(style, themeColor)
       })
     }
   })