2021 ​

<script type='text/javascript'>
    window.jsonpCallback = function (res) {
        console.log(res)
    }
</script>
<script src='http://localhost:8080/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script>

const Koa = require('koa');
const app = new Koa();
const items = [
  { id: 1, title: 'title1' },
  { id: 2, title: 'title2' }
];

app.use(async (ctx, next) => {
  if (ctx.path === '/api/jsonp') {
    const { cb, id } = ctx.query;
    const title = items.find((item) => item.id == id)['title'];
    ctx.body = `${cb}(${JSON.stringify({ title })})`;
    return;
  }
});
app.listen(8080, () => {
  console.log('listen 8080...');
});

function handleChange(e) {
  // This won't work because the event object gets reused.
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use `event.persist()`. See https://fb.me/react-event-pooling for more information.

function handleChange(e) {
  // This won't work because the event object gets reused.
  event.persist();
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

const s = '  abc  ';

s.trim(); // "abc"
s.trimStart(); // "abc  "
s.trimEnd(); // "  abc"

var a = {};
var b = { jing: 'hao' };
var c = { test: 'jing' };
function jing() {
	var jing = 999;
}
a[b] = 'b';
a[c] = 'c';
a[jing] = 'jing';
console.log(a);

// 输出结果如下：
{
  '[object Object]': 'c',
  'function jing() {\n\tvar jing = 999;\n}': 'jing'
}

var a = {};
var b = Symbol('123');
var c = Symbol('123');
a[b] = 'b';
a[c] = 'c';
console.log(a);
console.log(a[b]);
console.log(a[c]);
console.log(Object.keys(a));

// 对应输出结果分别如下：
// { [Symbol(123)]: 'b', [Symbol(123)]: 'c' }
// b
// c
// []

npm install sass-resources-loader --save-dev

{
  test: /\.less$/,
  use: [
      {
          loader: 'vue-style-loader'
      },
      {
          loader: 'css-loader'
      },
      {
          loader: 'less-loader'
      },
      {
          loader: 'sass-resources-loader',
          options: {
              resources: [path.resolve(__dirname, '../src/styles/variable.less')]
            //这里文件路径就是定义全局公共变量的文件
          }
      }
  ]
},

/^(?:(?=.*[a-zA-Z])(?=.*[\d])|(?=.*[!#+,.\\=:=@-])(?=.*[\d])|(?=.*[!#+,.\\=:=@-])(?=.*[a-zA-Z])).{8,20}$/;

import * as monaco from 'monaco-editor';
import { format } from 'sql-formatter';

class MonacoEditor {
  constructor() {
    // 正常情况系编辑器实例
    this.monacoEditorInstance = null;
    // diff下编辑器实例
    this.diffMonacoEditorInstance = null;
    this.defaultOptions = {
      selectOnLineNumbers: true,
      roundedSelection: true,
      readOnly: false, // 只读
      cursorStyle: 'line', //光标样式
      automaticLayout: true, //自动布局
      glyphMargin: true, //字形边缘
      useTabStops: false,
      fontSize: 14, //字体大小
      autoIndent: true, //自动布局
      quickSuggestionsDelay: 0, //代码提示延时
      language: 'sql', //语言
      theme: 'vs',
      formatOnType: true,
      minimap: {
        enabled: false
      },
      scrollBeyondLastLine: false
    };
    // 当前编辑器是否处于diff的状态
    this.currentEditorDiff = false;
    // 变更堆栈信息
    // this.viewState = null;
  }

  /**
   * 初始化
   * @param domId
   * @param options
   */
  init(domId = '', options = {}) {
    if (!this.monacoEditorInstance) {
      const el = document.getElementById(domId);
      if (el) {
        const allOptions = Object.assign(this.defaultOptions, options);
        this.monacoEditorInstance = monaco.editor.create(el, allOptions);
        this.registerFormat(allOptions.language);
        this.addListenResize();
      } else {
        throw new Error('未找到dom');
      }
    }
  }

  // 编辑器内容变更
  onDidChangeModelContent(callback = undefined) {
    if (callback) {
      const instance = this.getEditor(this.currentEditorDiff);
      if (instance) {
        instance.onDidChangeModelContent(() => {
          callback && callback();
        });
      }
    }
  }
  /**
   * 销毁
   */
  destroyed() {
    if (this.monacoEditorInstance) {
      this.monacoEditorInstance.dispose();
      this.monacoEditorInstance = null;
    }
    if (this.diffMonacoEditorInstance) {
      this.diffMonacoEditorInstance?.dispose();
      this.diffMonacoEditorInstance = null;
    }
  }

  // 添加监听
  addListenResize() {
    window.addEventListener('resize', () => {
      if (this.monacoEditorInstance) {
        this.monacoEditorInstance.layout();
      }
    });
  }

  /**
   * 设置编辑器的值
   * @param value
   */
  setValues(value) {
    const instance = this.getEditor(this.currentEditorDiff);
    if (instance) {
      if (!value) {
        value = '';
      }
      instance.setValue(value);
    }
  }
  // 获取编辑的值
  getValues() {
    const instance = this.getEditor(this.currentEditorDiff);
    if (instance) {
      return instance.getValue();
    }
  }
  // 获取编辑器中选中的值
  getSelectedValue() {
    const instance = this.getEditor(this.currentEditorDiff);
    if (instance) {
      return instance.getModel().getValueInRange(instance.getSelection());
    }
  }
  // 撤销
  revoke() {
    const instance = this.getEditor(this.currentEditorDiff);
    if (instance) {
      instance.trigger('anyString', 'undo');
    }
  }

  // 重做
  redo() {
    const instance = this.getEditor(this.currentEditorDiff);
    if (instance) {
      instance.trigger('anyString', 'redo');
    }
  }

  // 格式化
  format() {
    const instance = this.getEditor(this.currentEditorDiff);
    if (instance) {
      instance.trigger('anyString', 'editor.action.formatDocument');
    }
  }

  // 注册格式化方法
  registerFormat(type) {
    switch (type) {
      case 'sql': {
        monaco.languages.registerDocumentFormattingEditProvider('sql', {
          async provideDocumentFormattingEdits(model) {
            let formatted = await format(model.getValue());
            return [
              {
                range: model.getFullModelRange(),
                text: formatted
              }
            ];
          }
        });
      }
    }
  }

  /**
   * 版本对比
   * @param domId
   * @param lhsData
   * @param rhsData
   */
  diff(domId, lhsData, rhsData, languages = 'sql', changeCallback = undefined) {
    if (!this.diffMonacoEditorInstance) {
      this.diffMonacoEditorInstance = monaco.editor.createDiffEditor(document.getElementById(domId), {
        enableSplitViewResizing: false,
        originalEditable: true,
        scrollBeyondLastLine: false
      });
    }
    let lhsModel = monaco.editor.createModel(lhsData, languages);
    let rhsModel = monaco.editor.createModel(rhsData, languages);

    this.diffMonacoEditorInstance.setModel({
      original: lhsModel,
      modified: rhsModel
    });
    // 设置右侧diff只读
    this.diffMonacoEditorInstance.getModifiedEditor().updateOptions({ readOnly: true });
    /**
     * hack写法
     * @type {Element}
     */
    const closeDiffReviewEl = document.getElementsByClassName('close-diff-review')[0];
    if (closeDiffReviewEl) {
      closeDiffReviewEl.click();
    }
  }

  /**
   * 设置当前编辑器的状态
   * @returns {boolean}
   */
  setCurrentEditorStatus(status) {
    this.currentEditorDiff = status;
  }

  /**
   * 获取当前编辑器的状态
   * @returns {boolean}
   */
  getCurrentEditorStatus() {
    return this.currentEditorDiff;
  }

  /**
   * 获取当前实例
   * @returns {null}
   */
  getEditor(isDiff = false) {
    if (isDiff) {
      return this.diffMonacoEditorInstance?.getOriginalEditor();
    } else {
      return this.monacoEditorInstance;
    }
  }

  /**
   * 设置编辑器为只读
   */
  setEditorReadOnly() {
    const instance = this.getEditor(this.currentEditorDiff);
    instance.updateOptions({ readOnly: true });
  }

  // /**
  //  * 保存变更的堆栈信息
  //  */
  // saveViewState() {
  //     const instance = this.getEditor(this.currentEditorDiff);
  //     if (instance) {
  //         this.viewState = instance.getModel();
  //         debugger;
  //     }
  // }
  //
  // /**
  //  * 恢复变更记录
  //  */
  // restoreViewState() {
  //     const instance = this.getEditor(this.currentEditorDiff);
  //     if (instance) {
  //         instance.restoreViewState(this.viewState);
  //     }
  // }
}

export default new MonacoEditor();

pickerOptions: {
  onPick: ({ maxDate, minDate }) => {
      this.min = minDate && minDate.getTime();
  },
  disabledDate: (time) => {
      let m = 13 * 24 * 60 * 60 * 1000;
      if (this.min) {
          return time.getTime() > this.min + m || time.getTime() < this.min - m;
      }else {
          return false;
      }
  },
},

handleChange(val) {
    if (!val) {
        this.min = null;
    }
},

const start = new Date();
const end = new Date();
const day = new Date().getDay(); //当前是星期几
start.setTime(start.getTime() - 3600 * 1000 * 24 * (day + 1));
end.setTime(end.getTime() - 3600 * 1000 * 24 * day);

dateFormat(tempDate, fmt) {
        var o = {
            'M+': tempDate.getMonth() + 1, //月份
            'd+': tempDate.getDate(), //日
            'H+': tempDate.getHours(), //小时
            'm+': tempDate.getMinutes(), //分
            's+': tempDate.getSeconds(), //秒
            'q+': Math.floor((tempDate.getMonth() + 3) / 3), //季度
            S: tempDate.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (tempDate.getFullYear() + '').substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp('(' + k + ')').test(fmt))
                fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        return fmt;
    }

//使用方法
dateFormat(Date(), 'yyyy-MM-dd')

Number.isInteger(8.0); //true

Number.isInteger =
  Number.isInteger ||
  function (value) {
    return typeof value === 'number' && isFinite(value) && Math.floor(value) === value; //原因
  };

<ui-table-pro
   ....其他属性
   :cell-class-name="cellClassNameFn"
>
  <ui-table-column
      type="selection"
      width="60"
      :selectable="handledisabled"
  ></ui-table-column>
</ui-table-pro>

// 给特定的单元格设置类名
cellClassNameFn(row) {
    if (row.rowIndex === 0) {
        // 第一列且状态为 1 通过自定义样式隐藏复选框
        return 'table-column-hidden';
    }
},
//将这一列的 CheckBox disabled，防止全选时被选中
handledisabled(row, index) {
    if (index === 0) {
        return false;
    } else {
        return true;
    }
},

//隐藏 CheckBox 的样式
/deep/ .table-column-hidden .checkbox {
    display: none !important;
}

this.$refs.myCascader.getCheckedNodes()[0].pathLabels;

/*
 * @Author: wangzhihao
 * @Date: 2021-11-22 12:51:36
 * @LastEditors: wangzhihao
 * @LastEditTime: 2021-11-22 13:16:46
 */
//有意思的操作 可以改变 instanceof 操作符的结果
class Bar {}
class Baz extends Bar {
  static [Symbol.hasInstance]() {
    return false;
  }
}
let b = new Baz();
console.log(Bar[Symbol.hasInstance](b)); // true
console.log(b instanceof Bar); // true
console.log(Baz[Symbol.hasInstance](b)); // false
console.log(b instanceof Baz); // false

//柯里化函数
const sum = function () {
  const prev = [...arguments];
  const fn = function () {
    const cur = [...arguments];
    return sum.apply(null, prev.concat(cur));
  };
  /**
   * 优先走 valueOf
   */
  // fn.valueOf = () => {
  //     return prev.reduce((p,c) => p - c);
  // }
  fn.toString = () => {
    return prev.reduce((p, c) => p + c);
  };
  return fn;
};

// console.log(+sum(1,3)(1,4)(5)(2,0)); // 放开 valueOf 的结果就是 -14
console.log(+sum(1, 3)(1, 4)(5)(2, 0)); //16