feat: code optimisation

代码优化
2024-11-24 19:10:34 +08:00 · 2019-11-10 16:59:23 +08:00 · 2019-11-10 16:59:23 +08:00 · c3b04aac21
commit c3b04aac21
parent 98df1b6325
6 changed files with 57 additions and 39 deletions
--- a/assets/scripts/editor.js
+++ b/assets/scripts/editor.js
@ -24,7 +24,7 @@ let app = new Vue({
      sizeOption: [
        { label: '13px', value: '13px', desc: '稍小' },
        { label: '14px', value: '14px', desc: '推荐' },
-        { label: '15px', value: '15px', desc: '稍大' },
+        { label: '15px', value: '15px', desc: '稍大' }
      ],
      colorOption: [
        { label: '橘红', value: 'rgba(255, 95, 46, 0.9)', hex: '#FF5F2E' },
@ -47,7 +47,7 @@ let app = new Vue({
        lineWrapping: true,
        styleActiveLine: true,
        theme: this.currentEditorTheme,
-        mode: 'text/x-markdown',
+        mode: 'text/x-markdown'
      }
    );
    this.editor.on("change", (cm, change) => {
@ -65,9 +65,9 @@ let app = new Vue({
    } else {
      axios({
        method: 'get',
-        url: './assets/default-content.md',
+        url: './assets/default-content.md'
      }).then(resp => {
-        this.editor.setValue(resp.data)
+        this.editor.setValue(resp.data);
      })
    }
  },
@ -82,33 +82,33 @@ let app = new Vue({
        // 附加的一些 style
        output += this.wxRenderer.buildAddition();
      }
-      return output
+      return output;
    },
    editorThemeChanged(editorTheme) {
-      this.editor.setOption('theme', editorTheme)
+      this.editor.setOption('theme', editorTheme);
    },
    fontChanged(fonts) {
      this.wxRenderer.setOptions({
        fonts: fonts
      });
-      this.refresh()
+      this.refresh();
    },
    sizeChanged(size) {
      this.wxRenderer.setOptions({
        size: size
      });
-      this.refresh()
+      this.refresh();
    },
    colorChanged(color) {
      let theme = setColor(color)
      this.wxRenderer.setOptions({
        theme: theme
-      })
-      this.refresh()
+      });
+      this.refresh();
    },
    // 刷新右侧预览
    refresh() {
-      this.output = this.renderWeChat(this.editor.getValue(0))
+      this.output = this.renderWeChat(this.editor.getValue(0));
    },
    // 将左侧编辑器内容保存到 LocalStorage
    saveEditorContent() {
@ -156,7 +156,7 @@ let app = new Vue({
        });
      }
    },
-    openWindow(url) {
+    visit(url) {
      window.open(url);
    }
  },
--- a/assets/scripts/renderers/wx-renderer.js
+++ b/assets/scripts/renderers/wx-renderer.js
@ -7,7 +7,7 @@ let WxRenderer = function (opts) {
  let footnoteIndex = 0;
  let styleMapping = null;

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

  let merge = (base, extend) => Object.assign({}, base, extend);

@ -25,7 +25,7 @@ let WxRenderer = function (opts) {
          style['font-family'] = CODE_FONT_FAMILY;
          style['white-space'] = 'normal';
        }
-        mapping[ele] = merge(base, style)
+        mapping[ele] = merge(base, style);
      }
    }

@ -33,12 +33,12 @@ let WxRenderer = function (opts) {
      if (themeTpl.block.hasOwnProperty(ele)) {
        let style = themeTpl.block[ele];
        if (ele === 'code') {
-          style['font-family'] = CODE_FONT_FAMILY
+          style['font-family'] = CODE_FONT_FAMILY;
        }
-        mapping[ele] = merge(base_block, style)
+        mapping[ele] = merge(base_block, style);
      }
    }
-    return mapping
+    return mapping;
  };

  let getStyles = (tokenName, addition) => {
@ -46,9 +46,9 @@ let WxRenderer = function (opts) {
    let dict = styleMapping[tokenName];
    if (!dict) return '';
    for (const key in dict) {
-      arr.push(key + ':' + dict[key])
+      arr.push(key + ':' + dict[key]);
    }
-    return `style="${arr.join(';') + (addition || '')}"`
+    return `style="${arr.join(';') + (addition || '')}"`;
  };

  let addFootnote = (title, link) => {
@ -59,11 +59,11 @@ let WxRenderer = function (opts) {
  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/>`
+        return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
      }
-      return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`
+      return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
    });
-    return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`
+    return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`;
  };

  this.buildAddition = () => {
@ -87,7 +87,7 @@ let WxRenderer = function (opts) {
  }

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

  this.hasFootnotes = () => footnotes.length !== 0;
@ -116,7 +116,7 @@ let WxRenderer = function (opts) {

    renderer.blockquote = text => {
      text = text.replace(/<p.*?>/, `<p ${getStyles('blockquote_p')}>`);
-      return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`
+      return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`;
    };
    renderer.code = (text, infoString) => {
      text = text.replace(/</g, "&lt;");
@ -129,7 +129,7 @@ let WxRenderer = function (opts) {
      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>')
+        numbers.push('<li></li>');
      }
      let lang = infoString || '';

@ -161,11 +161,11 @@ let WxRenderer = function (opts) {
    renderer.image = (href, title, text) => {
      let subText = '';
      if (text) {
-        subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`
+        subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`;
      }
      let figureStyles = getStyles('figure');
      let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org');
-      return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`
+      return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
    };
    renderer.link = (href, title, text) => {
      if (href.indexOf('https://mp.weixin.qq.com') === 0) {
@ -187,6 +187,6 @@ let WxRenderer = function (opts) {
    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
+    return renderer;
  }
 };
--- a/assets/scripts/sync-scroll.js
+++ b/assets/scripts/sync-scroll.js
@ -4,7 +4,7 @@ $(document).ready(() => {
  $('div.CodeMirror-scroll, #preview').on("scroll", function callback() {
    clearTimeout(timeout);

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

    target.off("scroll");
--- a/assets/scripts/themes/default-theme.js
+++ b/assets/scripts/themes/default-theme.js
@ -65,6 +65,7 @@ let default_theme = {
            'background': 'rgba(27,31,35,.05)',
            'margin': '2em 8px'
        },
+
        blockquote_p: {
            'letter-spacing': '0.1em',
            'color': 'rgb(80, 80, 80)',
@ -72,6 +73,7 @@ let default_theme = {
            'font-size': '1em',
            'display': 'inline',
        },
+
        code: {
            'font-size': '80%',
            'overflow': 'auto',
@ -83,29 +85,35 @@ let default_theme = {
            'border': '1px solid rgb(236,236,236)',
            'margin': '20px 0',
        },
+
        image: {
            'border-radius': '4px',
            'display': 'block',
            'margin': '0.1em auto 0.5em',
            'width': '100% !important',
        },
+
        image_org: {
            'border-radius': '4px',
            'display': 'block'
        },
+
        ol: {
            'margin-left': '0',
            'padding-left': '1em'
        },
+
        ul: {
            'margin-left': '0',
            'padding-left': '1em',
            'list-style': 'circle'
        },
+
        footnotes: {
            'margin': '0.5em 8px',
            'font-size': '80%'
        },
+
        figure: {
            'margin': '1.5em 8px',
        }
@ -116,6 +124,7 @@ let default_theme = {
            'display': 'block',
            'margin': '0.2em 8px'
        },
+
        codespan: {
            'font-size': '90%',
            'color': '#d14',
@ -123,9 +132,11 @@ let default_theme = {
            'padding': '3px 5px',
            'border-radius': '4px',
        },
+
        link: {
            'color': '#576b95'
        },
+
        wx_link: {
            'color': '#576b95',
            'text-decoration': 'none',
@ -136,22 +147,27 @@ let default_theme = {
            'color': 'rgba(255, 95, 46, 0.9)',
            'font-weight': 'bold',
        },
+
        table: {
            'border-collapse': 'collapse',
            'text-align': 'center',
            'margin': '1em 8px'
        },
+
        thead: {
            'background': 'rgba(0, 0, 0, 0.05)'
        },
+
        td: {
            'font-size': '80%',
            'border': '1px solid #dfdfdf',
            'padding': '0.25em 0.5em'
        },
+
        footnote: {
            'font-size': '12px'
        },
+        
        figcaption: {
            'text-align': 'center',
            'color': '#888',
--- a/index.html
+++ b/index.html
@ -3,8 +3,10 @@

 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,cseye">
+  <meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>微信 Markdown 编辑器</title>
  <link rel="shortcut icon" href="assets/images/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
@ -88,16 +90,16 @@
    </el-container>
    <el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
      <div style="text-align: center;">
-        <h3>一款简洁美观的微信 Markdown 编辑器</h3>
+        <h3>一款高度简洁的微信 Markdown 编辑器</h3>
      </div>
      <div style="text-align: center;">
        <img src="assets/images/qrcode.jpg" style="max-width: 300px">
        <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
      </div>
      <span slot="footer" class="dialog-footer">
-        <el-button type="success" plain @click="openWindow('https://github.com/cseye/md')">GitHub 仓库
+        <el-button type="success" plain @click="visit('https://github.com/cseye/md')">GitHub 仓库
        </el-button>
-        <el-button type="success" plain @click="openWindow('https://gitee.com/cseye/md')">Gitee 仓库
+        <el-button type="success" plain @click="visit('https://gitee.com/cseye/md')">Gitee 仓库
        </el-button>
      </span>
    </el-dialog>
--- a/libs/scripts/FuriganaMD.js
+++ b/libs/scripts/FuriganaMD.js
@ -1,7 +1,7 @@
-// 注音功能来自于
-// https://github.com/amclees/furigana-markdown
-// 详见上述文档
-
+/**
+ * 注音功能来自于：https://github.com/amclees/furigana-markdown
+ * 详见上述文档
+ */
 (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
@ -9,7 +9,7 @@
 }(this, (function () {
  'use strict';

-// This function escapes special characters for use in a regex constructor.
+  // This function escapes special characters for use in a regex constructor.
  function escapeForRegex(string) {
    return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  }