Utone
总结笔记20190415
2019/04/15 Code JavaScript
  1. Async/Await 从 Node 版本 v7.6.0 开始支持
  2. setTimeout 的定时器值推荐最小使用 16.7ms 的原因(16.7 = 1000 / 60, 即每秒 60 帧)
  3. 超出部分展示省略号

    // css控制行数展示,省略号
    .ellipsis {
      word-wrap: break-word; // 允许长单词换行到下一行
      overflow: hidden;
      text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本 string 可以给定string
      display: -webkit-box;
      -webkit-line-clamp: 3; // Safari、Opera 以及 Chrome
      -webkit-box-orient: vertical;
    }
    .ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  4. vscode 中 vue 无法格式化

    {
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned"
        },
        "prettyhtml": {
          "printWidth": 100,
          "singleQuote": false,
          "wrapAttributes": false,
          "sortAttributes": true
        },
        // --- 解决问题 ---
        "prettier": {
          "semi": false,
          "singleQuote": true
        }
        // --- 解决问题 ---
      }
    }
  5. offsetTop,获取的距离最近的 offsetParent 的顶部高度,offsetParent 是距离该元素设置过 postion 的父元素(设置过定位的父元素)、否则 offsetParent 就是 body 元素 getBoundingClientRect() // 使用该方法,获取距离视窗顶部的高度

  6. window.scrollTo(x, y) x,y 为小数时,实际滚动时,是向下取整
  7. p 标签中不能包含 display:block 的元素,否则浏览器解析错误
  8. _.isEmpty(123) === true 纯数字判断为真,一般校验对象
  9. 想要 div 触发 focus 和 blur,需要添加 tabIndex 属性
  10. 判断空数组,空对象方法 Object.keys().length !== 0

  11. 判断是否为对象

    function isObject(x) {
      return Object.prototype.toString.call(x) === '[object Object]'
    }
  12. (1,eval)(“str”) 等价于 (eval)(‘str’) => eval(‘str’)

  13. (1,2,3,4) === 4 // true
  14. 易混淆的判断真假
    • 0 判断为 false
    • “0” 判断为 true
    • “” 判断为 false
    • “null” 判断为 true
  15. Promise 相关写法

    var p1 = Promise.resolve(value)
    // 等价于
    var p1 = new Promise(resolve => resolve(value))
    
    var p2 = Promise.reject('err')
    // 等价于
    var p2 = new Promise((resolve, reject) => reject('err'))
  16. pm2 常用命令

    $ pm2 logs 显示所有进程日志
    $ pm2 stop all 停止所有进程
    $ pm2 restart all 重启所有进程
    $ pm2 reload all 0秒停机重载进程 (用于 NETWORKED 进程)
    $ pm2 stop 0 停止指定的进程
    $ pm2 restart 0 重启指定的进程
    $ pm2 startup 产生 init 脚本 保持进程活着
    $ pm2 web 运行健壮的 computer API endpoint (http://localhost:9615)
    $ pm2 delete 0 杀死指定的进程
    $ pm2 delete all 杀死全部进程
    
    运行进程的不同方式:
    $ pm2 start app.js -i max 根据有效CPU数目启动最大进程数目
    $ pm2 start app.js -i 3 启动3个进程
    $ pm2 start app.js -x 用fork模式启动 app.js 而不是使用 cluster
    $ pm2 start app.js -x -- -a 23 用fork模式启动 app.js 并且传递参数 (-a 23)
    $ pm2 start app.js --name serverone 启动一个进程并把它命名为 serverone
    $ pm2 stop serverone 停止 serverone 进程
    $ pm2 start app.json 启动进程, 在 app.json里设置选项
    $ pm2 start app.js -i max -- -a 23 在--之后给 app.js 传递参数
    $ pm2 start app.js -i max -e err.log -o out.log 启动 并 生成一个配置文件
  17. pm2 启动文件

    • apps:json 结构,apps 是一个数组,每一个数组成员就是对应一个 pm2 中运行的应用
    • name:应用程序名称
    • cwd:应用程序所在的目录
    • script:应用程序的脚本路径
    • log_date_format:
    • error_file:自定义应用程序的错误日志文件
    • out_file:自定义应用程序日志文件
    • pid_file:自定义应用程序的 pid 文件
    • instances:
    • min_uptime:最小运行时间,这里设置的是 60s 即如果应用程序在 60s 内退出,pm2 会认为程- 序异常退出,此时触发重启 max_restarts 设置数量
    • max_restarts:设置应用程序异常退出重启的次数,默认 15 次(从 0 开始计数)
    • cron_restart:定时启动,解决重启能解决的问题
    • watch:是否启用监控模式,默认是 false。如果设置成 true,当应用程序变动时,pm2 会自- 动重载。这里也可以设置你要监控的文件。
    • merge_logs:
    • exec_interpreter:应用程序的脚本类型,这里使用的 shell,默认是 nodejs
    • exec_mode:应用程序启动模式,这里设置的是 cluster_mode(集群),默认是 fork
    • autorestart:启用/禁用应用程序崩溃或退出时自动重启
    • vizion:启用/禁用 vizion 特性(版本控制)
  18. onpagehide,onunload,onpageshow,onload

// onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow
// 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发
event.persisted 判断页面是否从缓存中加载
  1. JS 模块化写法

    let module = (function() {
      let count = 1
      return {
        add: function(count) {
          return this.count + count
        }
      }
    })()
  2. 得到一个键盘

// 用字符串返回一个键盘图形
;(_ =>
  [..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(
    x =>
      ((o += `/${(b = '_'.repeat(
        (w =
          x < y
            ? 2
            : ' 667699'[
                ((x = ['BS', 'TAB', 'CAPS', 'ENTER'][p++] || 'SHIFT'), p)
              ])
      ))}\\|`),
      (m += y + (x + '    ').slice(0, w) + y + y),
      (n += y + b + y + y),
      (l += ' __' + b))[73] && (k.push(l, m, n, o), (l = ''), (m = n = o = y)),
    (m = n = o = y = '|'),
    (p = l = k = [])
  ) &&
  k.join`
`)()
  1. 中文输入下 input 的 compositionstart 与 compositionend,实现仅在选词后触发 input 事件

    var typing = false
    $('#ipt').on('compositionstart', function() {
      typing = true
    })
    $('#ipt').on('compositionend', function() {
      typing = false
    })
    //oninput在oncompositionend之前执行,需加定时器
    $('#ipt').on('input', function() {
      setTimeout(function() {
        if (!typing) {
          //To do something...
        }
      }, 0)
    })
    
    //或用keyup代替input
    $('#ipt').on('keyup', function() {
      if (!typing) {
        //To do something...
      }
    })
请杯咖啡呗~
支付宝
微信
本文作者:Utone
版权声明:本文首发于Utone的博客,转载请注明出处!