feat: code optimisation

代码优化
2024-11-24 19:10:34 +08:00 · 2019-11-10 15:52:46 +08:00 · 2019-11-10 15:52:46 +08:00 · 98df1b6325
commit 98df1b6325
parent 30cf5b13d9
3 changed files with 85 additions and 97 deletions
--- a/assets/scripts/editor.js
+++ b/assets/scripts/editor.js
@ -6,9 +6,9 @@ let app = new Vue({
      output: '',
      source: '',
      editorThemes: [
-        { label: '淡雅', value: 'xq-light'},
-        { label: '精美', value: 'eclipse'},
-        { label: '暗绿', value: 'oceanic-next'}
+        { label: '淡雅', value: 'xq-light' },
+        { label: '精美', value: 'eclipse' },
+        { label: '暗绿', value: 'oceanic-next' }
      ],
      editor: null,
      builtinFonts: [
@ -28,8 +28,8 @@ let app = new Vue({
      ],
      colorOption: [
        { label: '橘红', value: 'rgba(255, 95, 46, 0.9)', hex: '#FF5F2E' },
-        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', hex: '#42B983'},
-        { label: '暗青', value: 'rgba(0, 139, 139, 0.9)', hex: '#008B8B'}
+        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', hex: '#42B983' },
+        { label: '暗青', value: 'rgba(0, 139, 139, 0.9)', hex: '#008B8B' }
      ],
      aboutDialogVisible: false
    };
@ -40,7 +40,6 @@ let app = new Vue({
    return d;
  },
  mounted() {
-    let self = this;
    this.editor = CodeMirror.fromTextArea(
      document.getElementById('editor'),
      {
@ -51,9 +50,9 @@ let app = new Vue({
        mode: 'text/x-markdown',
      }
    );
-    this.editor.on("change", function (cm, change) {
-      self.refresh();
-      self.saveEditorContent();
+    this.editor.on("change", (cm, change) => {
+      this.refresh();
+      this.saveEditorContent();
    });
    this.wxRenderer = new WxRenderer({
      theme: setColor(this.currentColor),
@ -67,13 +66,13 @@ let app = new Vue({
      axios({
        method: 'get',
        url: './assets/default-content.md',
-      }).then(function (resp) {
-        self.editor.setValue(resp.data)
+      }).then(resp => {
+        this.editor.setValue(resp.data)
      })
    }
  },
  methods: {
-    renderWeChat: function (source) {
+    renderWeChat(source) {
      let output = marked(source, { renderer: this.wxRenderer.getRenderer() });
      if (this.wxRenderer.hasFootnotes()) {
        // 去除第一行的 margin-top
@ -85,22 +84,22 @@ let app = new Vue({
      }
      return output
    },
-    editorThemeChanged: function (editorTheme) {
+    editorThemeChanged(editorTheme) {
      this.editor.setOption('theme', editorTheme)
    },
-    fontChanged: function (fonts) {
+    fontChanged(fonts) {
      this.wxRenderer.setOptions({
        fonts: fonts
      });
      this.refresh()
    },
-    sizeChanged: function (size) {
+    sizeChanged(size) {
      this.wxRenderer.setOptions({
        size: size
      });
      this.refresh()
    },
-    colorChanged: function (color) {
+    colorChanged(color) {
      let theme = setColor(color)
      this.wxRenderer.setOptions({
        theme: theme
@ -108,19 +107,19 @@ let app = new Vue({
      this.refresh()
    },
    // 刷新右侧预览
-    refresh: function () {
+    refresh() {
      this.output = this.renderWeChat(this.editor.getValue(0))
    },
    // 将左侧编辑器内容保存到 LocalStorage
-    saveEditorContent: function () {
+    saveEditorContent() {
      let content = this.editor.getValue(0);
-      if (content){
+      if (content) {
        localStorage.setItem("__editor_content", content);
      } else {
        localStorage.removeItem("__editor_content");
      }
    },
-    copy: function () {
+    copy() {
      let clipboardDiv = document.getElementById('output');
      clipboardDiv.focus();
      window.getSelection().removeAllRanges();
@ -157,13 +156,13 @@ let app = new Vue({
        });
      }
    },
-    openWindow: function (url) {
+    openWindow(url) {
      window.open(url);
    }
  },
-  updated: function () {
-    this.$nextTick(function () {
-      prettyPrint()
+  updated() {
+    this.$nextTick(() => {
+      prettyPrint();
    })
  }
 });
--- a/assets/scripts/renderers/wx-renderer.js
+++ b/assets/scripts/renderers/wx-renderer.js
@ -9,11 +9,9 @@ let WxRenderer = function (opts) {

  let CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";

-  let merge = function (base, extend) {
-    return Object.assign({}, base, extend)
-  };
+  let merge = (base, extend) => Object.assign({}, base, extend);

-  this.buildTheme = function (themeTpl) {
+  this.buildTheme = themeTpl => {
    let mapping = {};
    let base = merge(themeTpl.BASE, {
      'font-family': this.opts.fonts,
@ -30,6 +28,7 @@ let WxRenderer = function (opts) {
        mapping[ele] = merge(base, style)
      }
    }
+
    for (let ele in themeTpl.block) {
      if (themeTpl.block.hasOwnProperty(ele)) {
        let style = themeTpl.block[ele];
@ -42,7 +41,7 @@ let WxRenderer = function (opts) {
    return mapping
  };

-  let getStyles = function (tokenName, addition) {
+  let getStyles = (tokenName, addition) => {
    let arr = [];
    let dict = styleMapping[tokenName];
    if (!dict) return '';
@ -52,14 +51,13 @@ let WxRenderer = function (opts) {
    return `style="${arr.join(';') + (addition || '')}"`
  };

-  let addFootnote = function (title, link) {
-    footnoteIndex += 1;
-    footnotes.push([footnoteIndex, title, link]);
-    return footnoteIndex
+  let addFootnote = (title, link) => {
+    footnotes.push([++footnoteIndex, title, link]);
+    return footnoteIndex;
  };

-  this.buildFootnotes = function () {
-    let footnoteArray = footnotes.map(function (x) {
+  this.buildFootnotes = () => {
+    let footnoteArray = footnotes.map(x => {
      if (x[1] === x[2]) {
        return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`
      }
@ -68,31 +66,33 @@ let WxRenderer = function (opts) {
    return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`
  };

-  this.buildAddition = function () {
-    return '<style>.preview-wrapper pre::before{' +
-      'font-family:"SourceSansPro","HelveticaNeue",Arial,sans-serif;' +
-      'position:absolute;' +
-      'top:0;' +
-      'right:0;' +
-      'color:#ccc;' +
-      'text-align:right;' +
-      'font-size:0.8em;' +
-      'padding:5px10px0;' +
-      'line-height:15px;' +
-      'height:15px;' +
-      'font-weight:600;' +
-      '}</style>'
-  };
+  this.buildAddition = () => {
+    return `
+    <style>
+      .preview-wrapper pre::before {
+        font-family: "SourceSansPro", "HelveticaNeue", Arial, sans-serif;
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #ccc;
+        text-align: center;
+        font-size: 0.8em;
+        padding: 5px 10px 0;
+        line-height: 15px;
+        height: 15px;
+        font-weight: 600;
+      }
+    </style>
+    `;
+  }

-  this.setOptions = function (newOpts) {
+  this.setOptions = newOpts => {
    this.opts = merge(this.opts, newOpts)
  };

-  this.hasFootnotes = function () {
-    return footnotes.length !== 0
-  };
+  this.hasFootnotes = () => footnotes.length !== 0;

-  this.getRenderer = function () {
+  this.getRenderer = () => {
    footnotes = [];
    footnoteIndex = 0;

@ -100,7 +100,7 @@ let WxRenderer = function (opts) {
    let renderer = new marked.Renderer();
    FuriganaMD.register(renderer);

-    renderer.heading = function (text, level) {
+    renderer.heading = (text, level) => {
      switch (level) {
        case 1:
          return `<h1 ${getStyles('h1')}>${text}</h1>`;
@ -112,39 +112,40 @@ let WxRenderer = function (opts) {
          return `<h4 ${getStyles('h4')}>${text}</h4>`;
      }
    };
-    renderer.paragraph = function (text) {
-      return `<p ${getStyles('p')}>${text}</p>`
-    };
-    renderer.blockquote = function (text) {
+    renderer.paragraph = text => `<p ${getStyles('p')}>${text}</p>`;
+
+    renderer.blockquote = text => {
      text = text.replace(/<p.*?>/, `<p ${getStyles('blockquote_p')}>`);
      return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`
    };
-    renderer.code = function (text, infoString) {
+    renderer.code = (text, infoString) => {
      text = text.replace(/</g, "&lt;");
      text = text.replace(/>/g, "&gt;");

      let lines = text.split('\n');
      let codeLines = [];
      let numbers = [];
+
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        codeLines.push(`<code class="prettyprint"><span class="code-snippet_outer">${(line || '<br>')}</span></code>`);
        numbers.push('<li></li>')
      }
      let lang = infoString || '';
-      return `<section class="code-snippet__fix code-snippet__js">`
-        + `<ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>`
-        + `<pre class="code-snippet__js" data-lang="${lang}">`
-        + codeLines.join('')
-        + `</pre></section>`
+
+      return `
+        <section class="code-snippet__fix code-snippet__js">
+            <ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
+            <pre class="code-snippet__js" data-lang="${lang}">
+                ${codeLines.join('')}
+            </pre>
+        </section>
+        `;
    };
-    renderer.codespan = function (text, infoString) {
-      return `<code ${getStyles('codespan')}>${text}</code>`
-    };
-    renderer.listitem = function (text) {
-      return `<span ${getStyles('listitem')}><span style="margin-right: 10px;"><%s/></span>${text}</span>`;
-    };
-    renderer.list = function (text, ordered, start) {
+    renderer.codespan = (text, infoString) => `<code ${getStyles('codespan')}>${text}</code>`;
+    renderer.listitem = text => `<span ${getStyles('listitem')}><span style="margin-right: 10px;"><%s/></span>${text}</span>`;
+
+    renderer.list = (text, ordered, start) => {
      text = text.replace(/<\/*p.*?>/g, '');
      let segments = text.split(`<%s/>`);
      if (!ordered) {
@ -157,7 +158,7 @@ let WxRenderer = function (opts) {
      }
      return `<p ${getStyles('ol')}>${text}</p>`;
    };
-    renderer.image = function (href, title, text) {
+    renderer.image = (href, title, text) => {
      let subText = '';
      if (text) {
        subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`
@ -166,7 +167,7 @@ let WxRenderer = function (opts) {
      let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org');
      return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`
    };
-    renderer.link = function (href, title, text) {
+    renderer.link = (href, title, text) => {
      if (href.indexOf('https://mp.weixin.qq.com') === 0) {
        return `<a href="${href}" title="${(title || text)}" ${getStyles('wx_link')}>${text}</a>`;
      } else if (href === text) {
@ -180,21 +181,12 @@ let WxRenderer = function (opts) {
        }
      }
    };
-    renderer.strong = function (text) {
-      return `<strong ${getStyles('strong')}>${text}</strong>`;
-    };
-    renderer.em = function (text) {
-      return `<p ${getStyles('p', ';font-style: italic;')}>${text}</p>`
-    };
-    renderer.table = function (header, body) {
-      return `<table class="preview-table"><thead ${getStyles('thead')}>${header}</thead><tbody>${body}</tbody></table>`;
-    };
-    renderer.tablecell = function (text, flags) {
-      return `<td ${getStyles('td')}>${text}</td>`;
-    };
-    renderer.hr = function () {
-      return `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
-    };
+    renderer.strong = text => `<strong ${getStyles('strong')}>${text}</strong>`;
+    renderer.em = text => `<p ${getStyles('p', ';font-style: italic;')}>${text}</p>`;
+    renderer.table = (header, body) => `<table class="preview-table"><thead ${getStyles('thead')}>${header}</thead><tbody>${body}</tbody></table>`;
+    renderer.tablecell = (text, flags) => `<td ${getStyles('td')}>${text}</td>`;
+    renderer.hr = () => `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
+
    return renderer
  }
 };
--- a/assets/scripts/sync-scroll.js
+++ b/assets/scripts/sync-scroll.js
@ -1,13 +1,11 @@
 // 左右栏同步滚动
-$(document).ready(function () {
-  
+$(document).ready(() => {
  let timeout;
-
  $('div.CodeMirror-scroll, #preview').on("scroll", function callback() {
    clearTimeout(timeout);

    let source = $(this), 
-      target = $(source.is("#preview") ? 'div.CodeMirror-scroll' : '#preview');
+        target = $(source.is("#preview") ? 'div.CodeMirror-scroll' : '#preview');

    target.off("scroll");

@ -18,9 +16,8 @@ $(document).ready(function () {
    let height = percentage * (target0.scrollHeight - target0.offsetHeight);
    target0.scrollTo(0, height);

-    timeout = setTimeout(function () {
+    timeout = setTimeout(() => {
      target.on("scroll", callback);
    }, 100);
  });
-
 });