什么是 sourceMap？

sourcemap 是现代 web 开发体系中不可或缺的一部分，它给开发者提供了一种调试生产环境压缩和编译后代码的手段，是一种经过工具处理后的代码产物和源代码之间的映射关系。Sourcemap 最初是由 Google 发起并开发的，作为 Web 开发中调试和分析压缩 JavaScript 代码的解决方案。2009 年左右，Google 收购了一家名为 Closure Compiler 的 JavaScript 压缩工具，Closure Compiler 支持生成 sourcemap，并填充了该工具的大量功能。经过一段时间的发展，sourcemap 成为了一个通用的标准规范。2011 年，Mozilla 发布了基于 sourcemap 的 Firefox 开发者工具，这意味着 sourcemap 成为了多个主流浏览器的标准之一。至此，sourcemap 成为了前端开发中必不可少的调试和分析工具。

为什么需要 sourcemap？

JavaScript 是一种弱类型、解释执行的语言，它所用的源代码通常比较容易读懂。然而，在发布时，为了获得更快的速度和更小的文件大小，往往会对 JavaScript 代码进行压缩和混淆，这为开发者在调试和排错时带来了很大的困难。这时就需要 sourcemap 来帮助开发者定位问题。

概述

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

本文为自定义页面的入口，每条索引对应一个自定义的html页面

** 持续更新 **

一个精简的事件系统

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

原文：保哥和八姐

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

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

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

我：……

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

阅读更多

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 () {}
    );
}

AngularJS 的脏检查机制

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

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

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

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