Merge pull request #222 from zkz098/refactor_comment

feat: 修复运行不正常 & 去 vue 化

layout/_partials/header.pug

@@ -11,7 +11,7 @@ nav(id="nav")
                     != alternate || title
         ul(class="right" id="rightNav")
             li(class="item theme" @click="changeThemeByBtn")
-                i(class="ic" :class="{'i-sun': !themeStatus,'i-moon': themeStatus}")
+                i(class="ic i-sun")
             li(class="item search")
                 i(class="ic i-search")
             != shokax_inject('rightNav')

package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.4.0-alpha.1",
+    "version": "0.4.0-alpha.2",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",

source/js/_app/components/sidebar.ts

@@ -4,7 +4,9 @@ import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../
 import { clipBoard } from '../globals/tools'
 import { pageScroll, transition } from '../library/anime'
 import { $dom } from '../library/dom'
+import initProto, { child, getHeight, setDisplay } from '../library/proto'
 
+initProto()
 export const sideBarToggleHandle = (event:Event, force?:number) => {
   if (sideBar.hasClass('on')) {
     sideBar.removeClass('on')
@@ -31,7 +33,7 @@ export const sideBarToggleHandle = (event:Event, force?:number) => {
 }
 
 export const sideBarTab = () => {
-  const sideBarInner = sideBar.child('.inner')
+  const sideBarInner = child(sideBar, '.inner')
 
   if (sideBar.child('.tab')) {
     sideBarInner.removeChild(sideBar.child('.tab'))
@@ -45,13 +47,13 @@ export const sideBarTab = () => {
 
     if (element.innerHTML.trim().length < 1) {
       if (item === 'contents') {
-        showContents.display('none')
+        setDisplay(showContents, 'none')
       }
       return
     }
 
     if (item === 'contents') {
-      showContents.display('')
+      setDisplay(showContents, '')
     }
 
     const tab = document.createElement('li')
@@ -212,7 +214,7 @@ export const backToTopHandle = () => {
 }
 
 export const goToBottomHandle = () => {
-  pageScroll(parseInt(String(Container.changeOrGetHeight())))
+  pageScroll(parseInt(String(getHeight(Container))))
 }
 
 export const goToCommentHandle = () => {

source/js/_app/globals/handles.ts

@@ -22,14 +22,15 @@ import {
 } from './globalVars'
 import { changeMetaTheme } from './themeColor'
 import { Loader } from './thirdparty'
+import {getHeight, setWidth} from '../library/proto'
 
 export const resizeHandle = () => {
   // 获取 siteNav 的高度
-  setSiteNavHeight(siteNav.changeOrGetHeight())
+  setSiteNavHeight(getHeight(siteNav))
   // 获取 siteHeader 的高度
-  setHeaderHightInner(siteHeader.changeOrGetHeight())
+  setHeaderHightInner(getHeight(siteHeader))
   // 获取 #waves 的高度
-  setHeaderHight(headerHightInner + $dom('#waves').changeOrGetHeight())
+  setHeaderHight(headerHightInner + getHeight($dom('#waves')))
 
   // 判断窗口宽度是否改变
   if (oWinWidth !== window.innerWidth) {
@@ -90,7 +91,7 @@ export const scrollHandle = () => {
   }
   // 更新百分比进度条的宽度
   if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
-    $dom('.percent').changeOrGetWidth(scrollPercent)
+    setWidth($dom('.percent'), scrollPercent)
   }
 }
 

source/js/_app/globals/tools.ts

@@ -2,14 +2,15 @@ import { pageScroll } from '../library/anime'
 import { $dom } from '../library/dom'
 import { $storage } from '../library/storage'
 import { BODY, CONFIG, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
+import { createChild } from '../library/proto'
 
 // 显示提示(现阶段用于版权及复制结果提示)
 export const showtip = (msg: string): void | never => {
   if (!msg) {
     return
   }
 
-  const tipbox = BODY.createChild('div', {
+  const tipbox = createChild(BODY, 'div', {
     innerHTML: msg,
     className: 'tip'
   })

source/js/_app/library/anime.ts

@@ -1,6 +1,7 @@
 import anime from 'theme-shokax-anime'
 import { siteNavHeight } from '../globals/globalVars'
 import type { AnimeOptions } from 'theme-shokax-anime/dist/types'
+import {getTop, setDisplay} from './proto'
 
 /**
  * 参数  动画效果
@@ -26,7 +27,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
     case 'bounceUpIn':
       animation = {
         begin (anim) {
-          target.display('block')
+          setDisplay(target, 'block')
         },
         translateY: [
           { value: -60, duration: 200 },
@@ -41,7 +42,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
     case 'shrinkIn':
       animation = {
         begin (anim) {
-          target.display('block')
+          setDisplay(target, 'block')
         },
         scale: [
           { value: 1.1, duration: 300 },
@@ -54,7 +55,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
     case 'slideRightIn':
       animation = {
         begin (anim) {
-          target.display('block')
+          setDisplay(target, 'block')
         },
         translateX: ['100%', '0%'],
         opacity: [0, 1]
@@ -82,7 +83,7 @@ export const transition = (target: HTMLElement, type: number|string|Function, co
       begin && begin()
     },
     complete () {
-      target.display(display)
+      setDisplay(target, display)
       complete && complete()
     }
   }, animation)).play()
@@ -100,7 +101,7 @@ export const pageScroll = (target: HTMLElement|number, offset?: number, complete
     // 动画缓动函数
     easing: 'easeInOutQuad',
     // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
-    scrollTop: offset || (typeof target === 'number' ? target : (target ? target.getTop() + document.documentElement.scrollTop - siteNavHeight : 0)),
+    scrollTop: offset || (typeof target === 'number' ? target : (target ? getTop(target) + document.documentElement.scrollTop - siteNavHeight : 0)),
     // 完成回调函数
     complete () {
       complete && complete()

source/js/_app/library/loadFile.ts

@@ -1,5 +1,6 @@
 import { getScript } from './scriptPjax'
 import { CONFIG } from '../globals/globalVars'
+import { createChild } from './proto'
 
 /**
  * 用途是根据不同的资源名称和类型生成相应的资源 URL。
@@ -32,7 +33,7 @@ export const vendorCss = (type: string, condition?: string): void => {
   }
 
   if (LOCAL[type]) {
-    document.head.createChild('link', {
+    createChild(document.head, 'link', {
       rel: 'stylesheet',
       href: assetUrl('css', type)
     })

source/js/_app/library/proto.ts

@@ -1,84 +1,82 @@
 import { $dom } from './dom'
 
+export const insertAfter = function (el: HTMLElement, element: HTMLElement): void {
+  const parent = el.parentNode
+  if (parent.lastChild === el) {
+    parent.appendChild(element)
+  } else {
+    parent.insertBefore(element, el.nextSibling)
+  }
+}
+
+/**
+ * 创建一个子节点并放置
+ */
+export const createChild = function (parent: HTMLElement, tag: string, obj: object, positon?: string): HTMLElement {
+  const child = document.createElement(tag)
+  Object.assign(child, obj)
+  switch (positon) {
+    case 'after':
+      insertAfter(parent, child)
+      break
+    case 'replace':
+      parent.innerHTML = ''
+      parent.appendChild(child)
+      break
+    default:
+      parent.appendChild(child)
+  }
+  return child
+}
+
+/**
+ *  此方法使用`<div>`包装一个 DOM 元素
+ * @param parent
+ * @param obj 需要被包装的对象
+ */
+export const wrapObject = function (parent: HTMLElement, obj: any): void {
+  const box = document.createElement('div')
+  Object.assign(box, obj)
+  parent.insertBefore(box, obj)
+  parent.removeChild(obj)
+  box.appendChild(obj)
+}
+
+export const getHeight = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().height
+}
+
+export const setWidth = function (el: HTMLElement, w: number|string): void {
+  el.style.width = typeof w === 'number' ? w + 'rem' : w
+}
+
+export const getWidth = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().width
+}
+
+export const getTop = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().top
+}
+
+export const getLeft = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().left
+}
+
+export const getDisplay = function (el: HTMLElement): string {
+  return el.style.display
+}
+
+export const setDisplay = function (el: HTMLElement, d: string): HTMLElement {
+  el.style.display = d
+  return el
+}
+
+// TODO 未完成迁移
+export const child = function (el: HTMLElement, selector: string): HTMLElement {
+  return $dom(selector, (el as unknown as Document))
+}
 export default function initProto () {
   Object.assign(HTMLElement.prototype, {
-  /**
-   * 创建一个子节点并放置
-   */
-    createChild (tag: string, obj: ElementCreationOptions, positon?: string): HTMLElement {
-      const child = document.createElement(tag)
-      Object.assign(child, obj)
-      switch (positon) {
-        case 'after':
-          this.insertAfter(child)
-          break
-        case 'replace':
-          this.innerHTML = ''
-          this.appendChild(child)
-          break
-        default:
-          this.appendChild(child)
-      }
-      return child
-    },
-    /**
-     *  此方法使用`<div>`包装一个 DOM 元素
-     * @param obj 需要被包装的对象
-     */
-    wrapObject (obj: HTMLElement) {
-      const box = document.createElement('div')
-      Object.assign(box, obj)
-      this.parentNode.insertBefore(box, this)
-      this.parentNode.removeChild(this)
-      box.appendChild(this)
-    },
-    changeOrGetHeight (h?: number | string): number {
-      if (h) {
-      // TODO 0rem是期望的值吗?
-        this.style.height = typeof h === 'number' ? h + 'rem' : h
-      }
-      return this.getBoundingClientRect().height
-    },
-    /**
-   此函数将元素的宽度设置为指定值,如果未提供值,则返回元素的宽度.<br />
-   宽度可以作为数字提供(假定它以`rem`为单位).作为字符串提供则直接设置为元素宽度
-   */
-    changeOrGetWidth (w?: number | string): number {
-      if (w) {
-      // TODO 0rem是期望的值吗?
-        this.style.width = typeof w === 'number' ? w + 'rem' : w
-      }
-      return this.getBoundingClientRect().width
-    },
-    getTop (): number {
-      return this.getBoundingClientRect().top
-    },
-    left (): number {
-      return this.getBoundingClientRect().left
-    },
-    /**
-   * 将此节点插入父节点的下一个节点之前
-   */
-    insertAfter (element: HTMLElement): void {
-      const parent = this.parentNode
-      if (parent.lastChild === this) {
-        parent.appendChild(element)
-      } else {
-        parent.insertBefore(element, this.nextSibling)
-      }
-    },
-    /**
-   * 当d为空时返回此节点的CSSStyle display属性 <br />
-   * 反之,将d设置为此节点的CSSStyle display属性
-   */
-    display (d?: string): string | EventTarget {
-      if (d == null) {
-        return this.style.display
-      } else {
-        this.style.display = d
-        return this
-      }
-    },
     /**
    * 找到此节点第一个符合selector选择器的子节点
    */