0 results found
Utone
总结笔记20190614
2019/06/14 Code JavaScript
  1. 解决 chrome network 中出现provisional headers are shown,导致跨域时,查看不了 cookie 的携带情况
  2. less 的函数 data-uri,可以将图片编译成 base64 格式,图片过大时,不生效,最大尺寸为 24KB
  3. devDependencies 和 dependencies 区别
    • 网上统一的观念是
    • devDependencies 用于本地环境开发时候。 dependencies 用户发布环境 其实看名字我也知道是这个意思,我觉得没解释情况。 devDependencies 是只会在开发环境下依赖的模块,生产环境不会被打入包内。通过 NODE_ENV=developement 或 NODE_ENV=production 指定开发还是生产环境。 而 dependencies 依赖的包不仅开发环境能使用,生产环境也能使用。其实这句话是重点,按照这个观念很容易决定安装模块时是使用–save 还是–save-dev。
  4. 关于 cookie 携带问题
    • cookie 携带:这个问题与你发起 ajax 请求的方式有关
    • fetch 在默认情况下, 不管是同域还是跨域 ajax 请求都不会带上 cookie, 只有当设置了 credentials 时才会带上该 ajax 请求所在域的 cookie, 服务端需要设置响应头 Access-Control-Allow-Credentials: true, 否则浏览器会因为安全限制而报错, 拿不到响应
    • axios 和 jQuery 在同域 ajax 请求时会带上 cookie, 跨域请求不会, 跨域请求需要设置 withCredentials 和服务端响应头
    • 默认情况下,一般浏览器的 CORS 跨域请求都是不会发送 cookie 等认证信息到服务端的,除非指定了 xhr.withCredentials = true,但是只有客户端单方面的设置了这个值还不行,服务端也需要同意才可以,所以服务端也需要设置好返回头 Access-Control-Allow-Credentials: true;还有一点要注意的,返回头 Access-Control-Allow-Origin 的值不能为星号,必须是指定的域,否则 cookie 等认证信息也是发送不了。
  5. process.argv属性返回一个数组,这个数组包含了启动 Node.js 进程时的命令行参数。第一个元素为 process.execPath。如果需要获取 argv[0]的值请参见 node 文档的 process.argv0。第二个元素为当前执行的 JavaScript 文件路径。剩余的元素为其他命令行参数。
  6. CORS 的相关设置

    Access-Control-Allow-Origin: * // 跨域时,如果客户端ajax设置了withCredentials: true,就不可以为通配符,否则浏览器还是会跨域拦截
    Access-Control-Allow-Credentials: true // 表示客户端是否可以发送Cookie
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8
    // ajax set 跨域携带证书
    xhrFields: {
      withCredentials: true
    }
  7. 判断是否为对象

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

  9. (1,2,3,4) === 4 // true
  10. 易混淆的判断真假
    • 0 判断为 false
    • “0” 判断为 true
    • “” 判断为 false
    • “null” 判断为 true
  11. 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"))
  1. 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 启动 并 生成一个配置文件
  2. 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 特性(版本控制)
  3. 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的博客,转载请注明出处!