# 2021年06月技术日常

# 2021/06/06 周六

# js 实现点击按钮复制内容

点击按钮复制链接、复制代码在前端是比较常见的需求，这里介绍一种比较简单的实现：

先借用 input 等可以选中文本的元素，调用 element.select() 选中文本内容
再执行 document.execCommand("copy") 对选中内容进行复制

我们可以通过下面的例子来了解这个过程，点击按钮复制内容 - 在线演示 (opens new window)

<body>
  <input id="inputText" value="abcde">
  <button onclick="execCopy()">点击按钮复制内容</button>
  <script>
    function execCopy() {
      let element = document.querySelector("#inputText");
      element.select();
      document.execCommand("copy");
    }
  </script>
</body>

实际使用中，我们需要清楚两点：

我们设置的内容是动态的，需要动态设置 input 内容
我们不需要在页面上显示 input 内容，需要动态创建元素，并隐藏元素

我们可以将该功能封装成一个可复用的函数，如下

// 复制内容
function copyContent(text) {
	// 动态创建 input 元素，设置内容
	let element = document.createElement('input')
	element.setAttribute('value', text)
	// 隐藏 input
	element.style.position = 'absolute'
	element.style.top = '-1000px'
	element.style.display = 'block'
	// 挂载到 body
	document.body.appendChild(element)
	// 复制
	element.select()
	document.execCommand("Copy");
	// 复制完成后从 body 移除
	document.body.removeChild(element)
}

实际使用示例

<body>
  <button onclick="execCopy()">点击按钮复制内容</button>
  <p id="randomText"></p>
  <textarea></textarea>
  <script>
    // 复制内容
    function copyContent(text) {
      // 动态创建 input 元素，设置内容
      let element = document.createElement('input')
      element.setAttribute('value', text)
      // 隐藏 input
      element.style.position = 'absolute'
      element.style.top = '-1000px'
      element.style.display = 'block'
      // 挂载到 body
      document.body.appendChild(element)
      // 复制
      element.select()
      document.execCommand("Copy");
      // 复制完成后从 body 移除
      document.body.removeChild(element)
    }

    // 生成 len 长度的随机字符串
    function getRandomStr(len) {
      // ascii 编码转 字符串，String.fromCharCode(65)  65 "A", 97 "a", 48 "0"
      // 字符串转 ascii 编码, "a".charCodeAt(0)
      let result = ''
      for (let i = 0; i < len; i++) {
        result += String.fromCharCode(97 + Math.random() * 25 + 1) // 0 ~ 25
      }
      return result
    }

    function execCopy() {
      // 生成随机字符串
      let text = getRandomStr(10)
      document.querySelector('#randomText').innerHTML = text
      copyContent(text) // 复制内容
    }
  </script>
</body>

完整代码参见：点击按钮复制内容 - demo (opens new window)

# js if(true) 代码块中函数变量提升的问题

示例 1：

var a = 0;
if (true) {
	a = 1;
	function a() { }
	a = 21;
	console.log(`里面:${a}`)
}
console.log(`外面:${a}`)

Chrome 版本 91.0.4472.114 / Firefox 89.0 (64 位) 结果

里面:21 
外面:1

Safari 14.0.3 (16610.4.3.1.7) 结果

里面:21
外面:21

示例 2：

var a = 0;
if (true) {
	a = () => { }
	a = 1;
	a = 21;
	console.log(`里面:${a}`)
}
console.log(`外面:${a}`)

示例 3:

{
	function a() {};
	a = 50;
}
console.log(a);
{
	b = 50;
	function b() {};
}
console.log(b);

# 2021/06/01 周二

# github webhooks + node 实现自动化部署，持续集成

github 对应仓库 Settings - Webhooks，配置当仓库发生变化时（比如 push 操作）请求一个自定义接口地址
github 请求这个接口地址时，我们需要做一些校验，github-webhook-handler npm 包帮我们做好了，直接使用即可，当接收到 main 分支 push 请求时，使用 node 的 child_process.spawn 可以执行 shell 脚本进行部署。

参考: 使用github Webhooks做持续集成，自动化部署 (opens new window)

← 2022 2021年05月技术日常 →