vscode-settings.json

2022-03-14 阅读量 0 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
  "editor.accessibilitySupport": "off",
  "editor.bracketPairColorization.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.cursorSmoothCaretAnimation": true,
  "editor.fontFamily": "Cartograph CF Italic, Cartograph CF",
  "editor.fontSize": 14,
  "editor.guides.bracketPairs": "active",
  "editor.inlineSuggest.enabled": true,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "extensions.autoUpdate": false,
  "files.simpleDialog.enable": true,
  "github.copilot.enable": {
    "*": true,
    "markdown": false,
    "plaintext": true,
    "yaml": false
  },
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "terminal.integrated.fontFamily": "Cartograph CF,MesloLGS NF, Menlo, Monaco, 'Courier New', monospace",
  "window.dialogStyle": "custom",
  "window.zoomLevel": 2,
  "workbench.colorTheme": "Vue Theme",
  "workbench.editor.wrapTabs": true,
  "workbench.editorAssociations": {
    "*.md": "vscode.markdown.preview.editor"
  },
  "workbench.fontAliasing": "antialiased",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.list.smoothScrolling": true,
  "workbench.productIconTheme": "fluent-icons"
}

HTML5 video 之缓冲条

2019-10-21 阅读量 0

概述

html5的 <video> 标签现在可以完美支持web端的视频播放场景,最近在用<video>自定义播放器，在绘制进度条的时候，需要标记出视频缓冲段，因此了解了一下媒体元素（video、audio）HTMLMediaElement的一些属性，其中buffered属性跟缓存相关。

阅读更多

simple eventManage system

2019-10-12 积累 阅读量 0

一个精简的事件系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
let eventManage = (function() {
  let event = {}
  // 触发事件
  function dispatchEvent(type, infoData) {
    if (event.handlers) {
      if (Object.prototype.hasOwnProperty.call(event.handlers, type)) {
        for (let i = 0; i < event.handlers[type].length; i++) {
          event.handlers[type][i](infoData)
        }
      }
    }
  }
  // 添加监听
  function addEventListener(type, callBack) {
    if (!event.handlers) {
      Object.defineProperty(event, 'handlers', {
        value: {},
        enumerable: false,
        configurable: true,
        writable: true
      })
    }
    if (!event.handlers[type]) {
      event.handlers[type] = []
    }
    event.handlers[type].push(callBack)
  }
  //移除监听
  function removeEventListener(type) {
    if (event.handlers) {
      if (Object.prototype.hasOwnProperty.call(event.handlers, type)) {
        event.handlers[type] = []
      }
    }
  }
  return {
    event,
    eventType,
    dispatchEvent,
    addEventListener,
    removeEventListener
  }
})()

export { eventManage }

git rebase使用场景🤣

2019-08-02 积累 阅读量 0

简介

git rebase 俗称变基，作用是将提交到某一分支上的所有修改都移至另一分支上，就好像“重新播放”一样。这样操作后，提交历史会变得简洁，可读性更高，因为提交记录改变了时间线，把某个完整功能的提交记录整合在了一起，使得这期间其他人的提交记录不会穿插到其中，干净舒爽！🚾👯‍♂️

阅读更多

社保那些事

2019-07-30 非技术文章 阅读量 0

原文：保哥和八姐

图片来源：pexels

最近，我的一个表弟裸辞了。他跟我说，不着急马上投入下一份工作，要先给自己放个假，好好出去玩一下再说。

好吧，现在的年轻人，都挺头铁的。

出于对他的关怀，我随口问了一句，社保什么的，你打算自己交吗？他竟然抛出了一张“黑人问号脸”，向我表示，从来没care过这个事情，不工作就不交呗，有什么问题吗？

我：……

原来很多年轻人，根本没有意识到社保断缴对自己的影响。今天，就来跟像我表弟一样的小青年，谈谈社保的问题。
阅读更多

clipboard.js 首次复制需要点击两次问题的解决方案

2019-07-30 积累 阅读量 0

web项目中有对渲染后的列表进行复制文字的操作，采用了clipboard.js的方案，免去了解决兼容性的烦恼，但是实际效果不符合预期，第一次点击复制无效，从第二次之后才可以复制成功

项目使用的Vue技术栈，复制操作使用了动态复制的api

1
2
3
4
5
new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

经过试验，是因为API调用放在了ajax的回调函数中，这样第一次创建ClipboardJS构造函数成功时，复制操作已经结束，没有复制到任何文本，由于要复制的目标文本必须要通过网络请求动态获取，可以采取hack方案，借助mouseenter实现，当鼠标移入的时候执行一次，在接下来的点击事件中就可以正常复制。

额外的处理就是区分事件调用者为鼠标移入事件还是点击事件，鼠标移入事件只简单的创建构造函数，屏蔽额外的业务逻辑，真正的逻辑放在点击事件中处理，保证mouseenter只执行一次即可

附基础代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// html
<button class="btn" @mouseenter="copy" @click="copy"></button>

// script
function copy() {
    $.get(url, data).then(
        function (response) {
            if (response.code === 0) {
                var clipboard = new ClipboardJS(".btn", {
                    text: function () {
                        return response.text;
                    }
                });
                clipboard.on("success", e => {
                    clipboard.destroy();
                });
                clipboard.on("error", e => {
                    e.clearSelection();
                    clipboard.destroy();
                });
            }
        },
        function () {}
    );
}

MVVM双向数据绑定的个人理解

2019-04-23 积累 阅读量 0

AngularJS 的脏检查机制

AngularJS的双向数据绑定采用的脏检查机制，所谓“脏检查”，就是检测到数据与之前不一致，有变化，这时候就认为数据是“脏”的，然后把不一致的数据变更为较新的值，直到没有新的数据变动。

通常UI事件、ajax请求后的数据处理 或者 timeout 延迟事件会触发这个脏检查这个过程的实现，主要是靠 $watch 和$digest 两个重要的函数。

阅读更多

http headers之我见

2019-04-20 阅读量 0

最近看了一些关于HTTP headers的知识，平时与服务端联调接口，查看headers必不可少。

headers（请求头）允许客户端和服务器通过 request和 response传递附加信息。一个请求头由名称（不区分大小写）后跟一个冒号“：”，冒号后跟具体的值（不带换行符）组成。该值前面的引导空白会被忽略。

阅读更多

h5 数据上报之SendBeacon

2019-04-15 积累 阅读量 0

概述

公司为了精准的了解自己产品的用户使用情况，通常会对用户数据进行统计分析，获取pv、uv、页面留存率、访问设备等信息。与之相关的就是客户端的数据采集，然后上报的服务端。为了保证数据的准确性，就需要保证数据上报不会有差错。

常见方案及缺陷

数据发回服务器的常见做法是，将收集好的用户数据，放在unload事件里面，用 AJAX 请求发回服务器。但是这种方法有个弊端，因为AJAX通常应用的场景是异步发送请求，在 unload 事件中，使用 XHR 异步发送数据。这种做法有可能导致服务端未收到数据，浏览器就已经断开连接，数据就会丢失。虽然AJAX支持同步请求，但这种做法会阻塞页面的跳转，影响用户体验。

阅读更多