前端登录有很多种方式，我们来挑一些常见的方案先梳理一下，后续再补充更多的。

账号密码登录

在系统数据库中已经有了账号密码，或者通过注册渠道生成了账号和密码，此时可以直接通过账号密码登录，只要账号密码正确就认为身份合法，可以换到系统访问的 token，用于后续业务鉴权。

验证码登录

比如手机验证码，邮箱验证码等等。用户首先提供手机号/邮箱，后端根据会话信息生成一个特定的码下发到用户的手机或者邮箱（通过运营商提供的能力）。

用户得到这个码后填入登录表单，随手机号/邮箱一并发给后端，后端拿到手机号/邮箱、码后，与会话信息做校验，确认身份信息是否合法。

如果一致就检查数据库中是否有这个手机号/邮箱，有的话就不用创建用户了，直接通过登录；没有的话就说明是新用户，可以先创建用户，绑定好手机号/邮箱，然后通过登录。

第三方授权

比如微信授权，github授权之类的，可以通过OAuth授权得到访问对方开放API的能力。

OAuth 协议读起来很复杂，其实本质上就是：

• 我是开发者，有个自己的业务系统。

• 用户想图方便，希望通过一些常用的平台（比如微信，支付宝等）登录到我的业务系统。

• 但是这也不是你想用就能用的，我首先要去三方平台登记一下我的应用，比如注册一个微信公众号，公众号再绑定我的业务域名（验证所有权），可能还要交个费做微信认证之类的。

• 交了保护费后（经过上面的操作），我的业务系统就是某三方平台的合法应用了，就可以使用某三方平台的开放接口了。

• 此时用户来到我的业务系统客户端，点击微信一键登录。

• 然后我的业务系统就会按照微信的规矩生成一些鉴权需要的信息，拉起微信的中间页（如果是手机客户端，那可能就是通过 SDK 拉起手机微信）让用户授权。

• 用户同意授权，微信的中间页鉴权成功后，就会给我的客户端返回一个 code 之类的回调信息，客户端需要把这个 code 传给后端。

• 后端拿到这个 code 可以去微信服务器换取 access_token，基于这个 access_token，可以获取微信用户基本开放信息和帮助用户实现基础开放功能等。

• 后端也可以基于此封装自定义的登录态返给客户端，如有必要，也可以生成用户表中的记录。

• 此时我就认为这个用户是通过微信合法登录到我的系统中了。

有些字段或者信息之类的可能会描述得不够精确，但是整个鉴权的思路大概就是这样。

微信小程序登录

wx.login + code2Session 无感登录

如果你的业务系统需要鉴权大部分接口，但是又不想让用户一打开小程序就去输入啥或者点啥按钮登录，那么无感登录是比较适合的。

关键是找到能唯一标识用户身份的东西，openid 或者 unionid 就不错。那么怎么无感得到这些？wx.login + code2Session 值得拥有。

小程序前端 wx.login 得到用户登录凭证 code（目前说的有效期是五分钟），然后把 code 传给服务端，服务端调用微信服务的 auth.code2Session，使用 code 换取 openid、unionid、session_key 等信息，session_key 相当于是当前用户在微信的会话标识，我们可以基于此自定义登录态再返回给前端，前端拿着登录态再访问后端的业务接口。

getPhonenumber授权手机号登录

当指定 button 组件的 open-type 为 getPhoneNumber 时，可以拉起手机号授权，手机号某种程度上可以标识用户身份，自然也可以用来做登录。

旧版方案中，getPhonenumber得到的 e 对象中有 encryptedData, iv 字段，传给后端，根据解密算法能得到手机号和区号等信息。手机号也相当于是一种可以唯一标识用户的信息（虽然一个人可以有多个手机号，不过宽松点来说也可以用来标识用户），自然可以用来生成用户表记录，后续再与其他信息做关联即可。

但是旧版方案已经不建议使用了，目前 getPhonenumber得到的 e 对象中有 code 字段，这个 code 和 wx.login 得到的 code 不是同一回事。我们把这个 code 传给后端，后端再调用 phonenumber.getPhoneNumber得到手机号信息。

接着再封装登录态返回给前端即可。

微信公众号登录

首先分析一下渠道，在微信环境中，用户可能会直接通过链接访问 H5，也可能通过公众号菜单进入 H5。

微信公众号网页提供了授权方案，具体可以参考这个网页授权文档。

授权有两种形式，snsapi_base 和 snsapi_userinfo。

这个授权是支持无感的，具体见这个解释。

关于特殊场景下的静默授权

上面已经提到，对于以snsapi_base为 scope 的网页授权，就静默授权的，用户无感知；

对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是 scope 为snsapi_userinfo，也是静默授权，用户无感知。

这基本上就是说，如果是 snsapi_base 方式，目的主要是取 token 和 openid，用来做后续业务鉴权，那就是无感的。

如果是 snsapi_userinfo 方式，除了拿鉴权信息，还要要拿头像昵称等信息，可能需要用户授权，不过只要关注了该公众号，也可以不出现授权中间页，也是无感的。

下面说下具体的交互形式。

snsapi_base 场景下，需要绑定一个回调地址，交互形式是：

1. 根据标准格式提供链接：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

1. 你可以在公众号菜单跳转这个标准链接，或者通过其他网页跳转这个链接。这个链接是个微信鉴权的中间页，如果鉴权没问题就会回调到 REDIRECT_URI 对应的业务系统页面，也就是用户真正前往的网页，用户能感知到的就是网页的进度条加载了两次，然后就到目标页面了，基本上是无感的。

2. 页面在回调时会在 querystring 上携带 code 参数。前端在这个页面拿到 code 后，可以传给后端，后端就可以调下面这个接口得到 token 信息，然后封装出登录态返给前端。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

具体实现时，不一定要在页面层级上完成 code 换 token 的操作，也可以在应用层级上实现。

1. 后续可以根据需要进行 refreshToken。

snsapi_userinfo 场景下，也是跳一个标准链接。与 snsapi_base 场景相比，除了 scope 参数不一样，其他都一样。跳转这个标准链接时会根据有没有关注公众号决定是否要拉起授权中间页面。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

接着也可以根据 code 换 token，进行必要的 refreshToken。

最重要的是，在 scope=snsapi_userinfo 场景下，还可以发起获取用户信息的请求，这才是它与 snsapi_base 的本质区别。如果 scope 不符合要求，则无法通过调用下面的接口得到用户信息。

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

还有一些公告调整内容要注意一下：

• 微信网页授权能力调整公告

结语

好了，前端常见的一些登录方式先整理到这里，实际上还有很多种方案还没提到，比如生物认证登录，运营商验证登录等等，后面再补充，只要是双方互相认可的方案，并且能标识用户身份，不管是严格的还是宽松的，都可以拿来做认证使用，具体还要根据你的业务特性决定。

作者：Tusi
来源：juejin.cn/post/7172026468535369735

什么年代了还在用传统账号密码登录？没钱买手机号验证码组合？直接把鉴权和用户系统全盘托出依赖第三方（又不是不能用），省去鉴权系列 SQL 攻击、密码加密、CSRF 攻击、XSS 攻击，老板再也不用担心黑产盗号了（我们的系统根本没有号）

要实现上面的功能就得接入第三方登录，接下来就随着文章一起试试吧！

github

本章节将使用 github 作为第三方登录服务提供商

github 不愧是阿美力卡之光，极其简便的操作即可开启你的第三方登录之旅，经济又实惠，你可以通过快捷链接进入创建 OAuth 应用界面，也可以按照下面的顺序

然后填写相应的信息

生成你的密钥（Client secrets），就可以去试试第三方登录了

组合 URL

您可以在线查看本章节源代码

这里我使用的是 express-generator 去生成项目，并且前后端分离，在选项上不需要 HTML 渲染器

npx express --no-view your-project-path && cd your-project-path

前端部分简单设置一下跳转验证

<html>
  <body>
    <div>
      第三方登录
      <br />
      <button onclick="handleGithubLoginClick()">github</button>
    </div>
  </body>
  <script>
    const handleGithubLoginClick = () => {
      const state = Math.floor(Math.random() * Math.pow(10, 8));
      localStorage.setItem("state", state);
      window.open(
        `https://github.com/login/oauth/authorize?client_id=b351931efd1203b2230e&redirect_uri=http://localhost:8080&state=${state}`,
        "_blank"
      );
    };
  </script>
</html>

其中有三个比较重要的 params

1. client_id - string - “必需”。 注册时从 GitHub 收到的客户端 ID。

2. redirect_uri - string - 用户获得授权后被发送到的应用程序中的 URL。 请参阅以下有关重定向 URL 的详细信息。

3. state - string - 不可猜测的随机字符串。 它用于防止跨站请求伪造攻击。

redirect_uri 默认是注册 OAuth 应用（Register a new OAuth application）是填写的授权回调 URL（Authorization callback URL）

而对于 state 就在前端用随机字符串模拟，通常此类加密的敏感数据会再后端生成，而这里为了方便演示就采用了前端生成

详细参数请参考文档

鉴权验证

登录之后就可以进行相对应的验证，比如输入账号密码、授权、Github 客户端验证

成功鉴权后会再新弹出的页面重定向至 redirect_uri

注意要在属于用户操作的范畴下，比如点击按钮的操作，去使用 window.open(strUrl, strWindowName, [strWindowFeatures]) 这种方式去跳转鉴权，否则像 window.open("https://github.com...", "_blank") 这种常见的写法，会报错

浏览器会以为是弹窗式广告，所以我推荐使用直接在当前窗口跳转的方法，而不是选择新开窗口或者浮动窗口

window.location.href = "https://github.com/login/oauth/authorize?client_id=b351931efd1203b2230e&redirect_uri=http://localhost:8080";

处理回调

通过用户授权时，Github 的响应如下

GET redirect_uri

参数

state 参数负责安全非常重要，想要快速通关的选手可以跳过这部分

对于这里的 state 处理可以分为前端处理和后端处理

前端处理

当 redirect_uri 是前端路由时，可以将之前提交的 state 从 localStorage 或者 sessionStorage 中取出，验证是否一致，再去向后端请求并带上 state 和 code

优点

1. 无需缓存 state

缺点

1. 需要防止 XSS 的 DOM 型攻击

后端处理

当 redirect_uri 是后端时，后端需要持有 state 的缓存，具体做法可以在前端处理第三方登录时同步随机生成的 state，并在后端缓存

优点

1. 不需要防止 XSS 的 DOM 型攻击

缺点

1. 需要缓存 state

科普：早期 token 其实就是这里的 state

获取 token

第三方登录从本质上来讲就是获取到 token，在安全的拿到 code 和 state 之后，需要向 github 发送获取 token 请求，其文档如下

POST https://github.com/login/oauth/access_token

参数

响应

注意因为 client_secret 属于私钥，所以该请求必须放在后端，不能在前端请求！否则会失去登录的意义

const { default: axios } = require("axios");
const express = require("express");
const router = express.Router();

router.post("/redirect", function (req, res, next) {
  const { code } = req.body;
  axios({
    method: "POST",
    url: "https://github.com/login/oauth/access_token",
    headers: {
      "Accept": "application/json",
    },
    timeout: 60 * 1000,
    data: {
      client_id: "your_client_id",
      client_secret: "your_client_secret",
      code,
    },
  })
    .then((response) => {
      res.send(response.data);
    })
    .catch((e) => {
      res.status(404);
    });
});

module.exports = router;

注意，由于 github 的服务器在国外，所以这个请求非常容易超时或者失效，建议做好对应的处理（或者设置一个比较长的时间）

最后拿到对应的 token

总结

如果还没有了解过第三方登录的同学可以试试，毕竟不需要审核，有对应的 github 账号就行，截至写完文章的现在，我仍然没有通过微博第三方登录的审核/(ㄒoㄒ)/~~

参考资料

1. 授权 OAuth 应用 - Github Docs

2. 给你的网站添加第三方登录以及短信验证功能

作者：2分钟速写快排
来源：juejin.cn/post/7181114761394782269

当前技术社区中出现了各种下一代技术或框架，却很少有当代可以用的，于是electron-egg就出现了。

它愿景很大：希望所有开发者都能学会桌面软件开发

当前桌面软件技术有哪些？

为什么使用electron？

某某说：我们的应用要兼容多个平台，原生开发效率低，各平台研发人员不足，我们没有资源。

也许你觉得只是中小公司没有资源，no！大公司更没有资源。因为软件体量越大，所需研发人员越多。再加上需要多平台支持的话，研发人员更是指数级增长的。

我们来看看QQ团队负责人最近的回应吧：

“感谢大家对新版桌面QQ NT的使用和关注，今年QQ团队启动了QQ的架构升级计划，第一站就是解决目前桌面端迭代慢的问题，我们使用新架构从前到后对QQ代码进行了重构，而其中选择使用Electron作为新版QQ桌面端UI跨平台解决方案，是基于提升研发效率、框架成熟度、团队技术及人才积累等几个方面综合考虑的结果。”

也许electron的缺点很明显，但它的投入产出比却是最高的。

所以，对企业而言，效率永远是第一位的。不要用程序员的思维去思考产品。

哪些企业或软件在使用electron？

国内：抖音客户端、百度翻译、阿里云盘、B站客户端、迅雷、网易有道云、QQ(doing) 等

国外：vscode、Slack、Atom、Discord、Skype、WhatsApp、等

你的软件用户体量应该没有上面这些公司多吧？所以你还有什么可担心的呢？

开发者 / 决策者不要去关心性能、包体大小这些东西，当你的产品用户少时，它没意义；当你的产品用户多时，找nb的人把它优化。

聊聊electron-egg框架

EE是一个业务框架；就好比 Spring之于java，thinkphp之于php，nuxt.js之于vue；electron只提供了基础的函数和api，但你写项目的时候，业务和代码工程化是需要自己实现的，ee就提供了这个工程化能力。

特性

• 🍄 跨平台：一套代码，可以打包成windows版、Mac版、Linux版、国产UOS、Deepin、麒麟等

• 🌹 简单高效：只需学习 js 语言

• 🌱 前端独立：理论上支持任何前端技术，如：vue、react、html等等

• 🌴 工程化：可以用前端、服务端的开发思维，来编写桌面软件

• 🍁 高性能：事件驱动、非阻塞式IO

• 🌷 功能丰富：配置、通信、插件、数据库、升级、打包、工具... 应有尽有

• 🌰 安全：支持字节码加密、压缩混淆加密

• 💐 功能demo：桌面软件常见功能，框架集成或提供demo

谁可以使用electron-egg？

前端、服务端、运维、游戏等技术人员皆可使用。我相信在你的工作生涯中，或多或少都接触过js，恭喜你，可以入门了。

为什么各种技术栈的开发者都能使用electron-egg？

这与它的架构有关。

第一：前端独立

你可以用vue、react、angular等开发框架；也可用antdesign、layui、bootstrap等组件库；或者你用cococreater开发游戏也行； 框架只需要最终构建的资源（html/css/js）。

第二：工程化-MVC编程模式

如果你是java、php、python等后端开发者，不懂js那一套编程模式怎么办？

没关系，框架已经为你提供了MVC（controller/service/model/view），是不是很熟悉？官方提供了大量业务场景demo，直接开始撸代码吧。

开箱即用

编程方法、插件、通信、日志、数据库、调试、脚本工具、打包工具等开发需要的东西，框架都已经提供好了，你只需要专注于业务的实现。

十分钟体验

安装

# 下载
git clone https://gitee.com/dromara/electron-egg.git

# 安装依赖
npm install

# 启动
npm run start

效果

界面中的功能是demo，方便初学者入门。

项目案例

EE框架已经应用于医疗、学校、政务、股票交易、ERP、娱乐、视频、企业等领域客户端

以下是部分开发者使用electron-egg开发的客户端软件，请看效果

后语

仓库地址，欢迎给项目点赞！

gitee ： gitee.com/dromara/ele… 2300+

github ： github.com/dromara/ele… 500+

关于 Dromara

Dromara 是由国内顶尖的开源项目作者共同组成的开源社区。提供包括分布式事务，流行工具，企业级认证，微服务RPC，运维监控，Agent监控，分布式日志，调度编排等一系列开源产品、解决方案与咨询、技术支持与培训认证服务。技术栈全面开源共建、 保持社区中立，致力于为全球用户提供微服务云原生解决方案。让参与的每一位开源爱好者，体会到开源的快乐。

Dromara开源社区目前拥有10+GVP项目，总star数量超过十万，构建了上万人的开源社区，有成千上万的个人及团队在使用Dromara社区的开源项目。

electron-egg已加入dromara组织。

作者：哆啦好梦
来源：juejin.cn/post/7181279242628366397

废话开篇：一些 404 页面为了体现趣味性会添加一些简单的交互效果。 这里用纯 JS 简单实现类似 404 可跳跃障碍物页面，内容全部用 canvas 画布实现。

一、效果展示

二、画面拆解

1、绘制地平线

地平线这里就是简单的一条贯穿屏幕的线。

2、绘制红色精灵

绘制红色精灵分为两部分：

（1）上面圆

（2）下面定点与上面圆的切线。

绘制结果：

进行颜色填充，再绘制中小的小圆，绘制结果：

（3）绘制障碍物

这里绘制的是一个黑色的长方形。最后的实现效果：

三、逻辑拆解

1、全局定时器控制画布重绘

创建全局的定时器。

它有两个具体任务：

（1）全局定时刷新重置，将画布定时擦除之前的绘制结果。

（2）全局定时器刷新动画重绘新内容。

2、精灵跳跃动作

在接收到键盘 “空格” 点击的情况下，让精灵起跳一定高度，到达顶峰的时候进行回落，当然这里设计的是匀速。

3、障碍物移动动作

通过定时器，重绘障碍物从最右侧移动到最左侧。

4、检测碰撞

在障碍物移动到精灵位置时，进行碰撞检测，判断障碍物最上端的左、右顶点是否在精灵的内部。

5、绘制提示语

提示语也是用 canvas 绘制的，当障碍物已移动到左侧的时候进行，结果判断。如果跳跃过程中无碰撞，就显示 “完美跳跃～”，如果调跃过程中有碰撞，就显示 “再接再厉”。

四、代码讲解

1、HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./wsl404.js"></script>
    </head>
    <body>
        <div id="content">
            <canvas id="myCanvas">
            </canvas>
        </div>
    </body>
    <script>
        elves.init();
    </script>
</html>

2、JS

(function WSLNotFoundPage(window) {
    var elves = {};//精灵对象
    elves.ctx = null;//画布
    elves.width = 0;//屏幕的宽度
    elves.height = 0;//屏幕的高度
    elves.point = null;//精灵圆中心
    elves.elvesR = 20;//精灵圆半径
    elves.runloopTargets = [];//任务序列（暂时只保存跳跃）
    elves.upDistance = 50;//当前中心位置距离地面高度
    elves.upDistanceInitNum = 50;//中心位置距离地面高度初始值
    elves.isJumping = false;//是否跳起
    elves.jumpTarget = null;//跳跃任务
    elves.jumpTop = false;//是否跳到最高点
    elves.maxCheckCollisionWith = 0;//碰撞检测的最大宽度尺寸
    elves.obstaclesMovedDistance = 0;//障碍物移动的距离
    elves.isCollisioned = false;//是否碰撞过
    elves.congratulationFont = 13;//庆祝文字大小
    elves.congratulationPosition = 40;//庆祝文字位移
    elves.isShowCongratulation = false;//是否展示庆祝文字
    elves.congratulationContent = "完美一跃～";
    elves.congratulationColor = "red";
    
    //初始化
    elves.init = function(){
        this.drawFullScreen("content");
        this.drawElves(this.upDistance);
        this.keyBoard();   
        this.runloop();
    }
    
    //键盘点击事件
    elves.keyBoard = function(){
        var that = this;
        document.onkeydown = function whichButton(event)
        {
          if(event.keyCode == 32){
            //空格
            that.elvesJump();
           }
         }
    }
    
    //开始跑圈
    elves.runloop = function(){
        var that = this;
        setInterval(function(){
            //清除画布
            that.cleareAll();
            //绘制障碍物
            that.creatObstacles();
            if(that.isJumping == false){
                //未跳起时重绘精灵
                that.drawElves(that.upDistanceInitNum);
            }
            //绘制地面
            that.drawGround();
            
            //跳起任务
            for(index in that.runloopTargets){
                let target = that.runloopTargets[index];
                if(target.isRun != null && target.isRun == true){
                    
                    if(target.runCallBack){
                        target.runCallBack();
                    }
                }
            }
            //碰撞检测
            that.checkCollision();
            //展示庆祝文字
            if(that.isShowCongratulation == true){
                that.congratulation();
            }
            
        },10);
    }
    
    //画布
    elves.drawFullScreen = function (id){
        var element = document.getElementById(id);
        this.height = window.screen.height - 200;
        this.width = window.screen.width;
        element.style.width = this.width + "px";
        element.style.height = this.height + "px";
        element.style.background = "white";
        this.getCanvas("myCanvas",this.width,this.height);
    }
    
    elves.getCanvas = function(id,width,height){
        var c = document.getElementById(id);
        this.ctx = c.getContext("2d");
        //锯齿修复
        if (window.devicePixelRatio) {
           c.style.width = this.width + "px";
           c.style.height = this.height + "px";
           c.height = height * window.devicePixelRatio;
           c.width = width * window.devicePixelRatio;
           this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        }
    };
    
    //绘制地面
    elves.drawGround = function() {
        // 设置线条的颜色
        this.ctx.strokeStyle = 'gray';
        // 设置线条的宽度
        this.ctx.lineWidth = 1;
        // 绘制直线
        this.ctx.beginPath();
        // 起点
        this.ctx.moveTo(0, this.height / 2.0 + 1);
        // 终点
        this.ctx.lineTo(this.width,this.height / 2.0);
        this.ctx.closePath();
        this.ctx.stroke();
    }
    
    //绘制精灵
    elves.drawElves = function(upDistance){
        
        //绘制圆
        var angle = Math.acos(this.elvesR / upDistance);
        this.point = {x:this.width / 3,y : this.height / 2.0 - upDistance};
        this.ctx.fillStyle = "#FF0000";
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.arc(this.point.x,this.point.y,this.elvesR,Math.PI / 2 + angle,Math.PI / 2 - angle,false);
        
        //绘制切线
        var bottomPoint = {x:this.width / 3,y : this.point.y + this.upDistanceInitNum};
        
        let leftPointY = this.height / 2.0 - (upDistance - Math.cos(angle) * this.elvesR);
        let leftPointX = this.point.x - (Math.sin(angle) * this.elvesR);
        var leftPoint = {x:leftPointX,y:leftPointY};
        
        let rightPointY = this.height / 2.0 - (upDistance - Math.cos(angle) * this.elvesR);
        let rightPointX = this.point.x + (Math.sin(angle) * this.elvesR);
        var rightPoint = {x:rightPointX,y:rightPointY};
        
        this.maxCheckCollisionWith = (rightPointX - leftPointX) * 20 / (upDistance - Math.cos(angle) * this.elvesR);
        this.ctx.moveTo(bottomPoint.x, bottomPoint.y);
        this.ctx.lineTo(leftPoint.x,leftPoint.y);
        this.ctx.lineTo(rightPoint.x,rightPoint.y);
        
        this.ctx.closePath();
        this.ctx.fill();
        
        //绘制小圆
        this.ctx.fillStyle = "#FFF";
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.arc(this.point.x,this.point.y,this.elvesR / 3,0,Math.PI * 2,false);
        this.ctx.closePath();
        this.ctx.fill();
    }
    
    //清除画布
    elves.cleareAll = function(){
        this.ctx.clearRect(0,0,this.width,this.height);
    }
    
    //精灵跳动
    elves.elvesJump = function(){
        if(this.isJumping == true){
            return;
        }
        this.isJumping = true;
        if(this.jumpTarget == null){
            var that = this;
            this.jumpTarget = {type:'jump',isRun:true,runCallBack:function(){
                let maxDistance = that.upDistanceInitNum + 55;
                if(that.jumpTop == false){
                    if(that.upDistance > maxDistance){
                        that.jumpTop = true;
                    }
                    that.upDistance += 1;
                } else if(that.jumpTop == true) {
                    that.upDistance -= 1;
                    if(that.upDistance < 50) {
                        that.upDistance = 50;
                        that.jumpTop = false;
                        that.jumpTarget.isRun = false;
                        that.isJumping = false;
                    }
                }
                that.drawElves(that.upDistance);
            }};
            this.runloopTargets.push(this.jumpTarget);
        } else {
            this.jumpTarget.isRun = true;
        }
    }
    
    //绘制障碍物
    elves.creatObstacles = function(){
        let obstacles = {width:20,height:20};
        if(this.obstaclesMovedDistance != 0){
            this.ctx.clearRect(this.width - obstacles.width - this.obstaclesMovedDistance + 0.5, this.height / 2.0 - obstacles.height,obstacles.width,obstacles.height);
        }
        this.obstaclesMovedDistance += 0.5;
        if(this.obstaclesMovedDistance >= this.width + obstacles.width) {
            this.obstaclesMovedDistance = 0; 
            //重置是否碰撞
            this.isCollisioned = false;
        }
        this.ctx.beginPath();
        this.ctx.fillStyle = "#000";
        this.ctx.moveTo(this.width - obstacles.width - this.obstaclesMovedDistance, this.height / 2.0 - obstacles.height);
        this.ctx.lineTo(this.width - this.obstaclesMovedDistance,this.height / 2.0 - obstacles.height);
        this.ctx.lineTo(this.width - this.obstaclesMovedDistance,this.height / 2.0);
        this.ctx.lineTo(this.width - obstacles.width - this.obstaclesMovedDistance, this.height / 2.0);
        this.ctx.closePath();
        this.ctx.fill();
    }
    
    //检测是否碰撞
    elves.checkCollision = function(){
        var obstaclesMarginLeft = this.width - this.obstaclesMovedDistance - 20;
        var elvesUpDistance = this.upDistanceInitNum - this.upDistance + 20;
        if(obstaclesMarginLeft > this.point.x - this.elvesR && obstaclesMarginLeft < this.point.x + this.elvesR && elvesUpDistance <= 20) {
            //需要检测的最大范围
            let currentCheckCollisionWith = this.maxCheckCollisionWith * elvesUpDistance / 20;
            if((obstaclesMarginLeft < this.point.x + currentCheckCollisionWith / 2.0 && obstaclesMarginLeft > this.point.x - currentCheckCollisionWith / 2.0) || (obstaclesMarginLeft + 20 < this.point.x + currentCheckCollisionWith / 2.0 && obstaclesMarginLeft + 20 > this.point.x - currentCheckCollisionWith / 2.0)){
                this.isCollisioned = true;
            }
        }
        
        //记录障碍物移动到精灵左侧
        if(obstaclesMarginLeft + 20 < this.point.x - this.elvesR && obstaclesMarginLeft + 20 > this.point.x - this.elvesR - 1){
            if(this.isCollisioned == false){
                //跳跃成功，防止检测距离内重复得分置为true，在下一次循环前再置为false
                this.isCollisioned = true;
                //庆祝
                if(this.isShowCongratulation == false) {
                    this.congratulationContent = "完美一跃～";
                    this.congratulationColor = "red";
                    this.isShowCongratulation = true;
                }
            } else {
                //鼓励
                if(this.isShowCongratulation == false) {
                    this.isShowCongratulation = true;
                    this.congratulationColor = "gray";
                    this.congratulationContent = "再接再厉～";
                }
            }
        }
    }
    
    //庆祝绘制文字
    elves.congratulation = function(){
        
        this.congratulationFont += 0.1;
        this.congratulationPosition += 0.1;
        if(this.congratulationFont >= 30){
                        //重置
            this.congratulationFont = 13;
            this.congratulationPosition = 30;
            this.isShowCongratulation = false;
            return;
        }
        this.ctx.fillStyle = this.congratulationColor;        
        this.ctx.font = this.congratulationFont + 'px "微软雅黑"';        
        this.ctx.textBaseline = "bottom";         
        this.ctx.textAlign = "center"; 
        this.ctx.fillText( this.congratulationContent, this.point.x, this.height / 2.0 - this.upDistanceInitNum - this.congratulationPosition);   
    }
    
    window.elves = elves;
})(window)

五、总结与思考

逻辑注释基本都写在代码里，里面的一些计算可能会绕一些。

作者：头疼脑胀的代码搬运工
来源：juejin.cn/post/7056610619490828325

很多公司都会有自己的组件库，但是在使用起来都不尽如人意，这里分享下我自己的一些观点和看法

问题思考

在规划这种整个团队都要用的工具之前要多思考，走一步想一步的方式是不可取的

首先，在开发一个组件库之前先要明确以下几点：

• 目前现状

  • 不自建的话会有哪些问题，为什么不用 antd/element

  • 哪些人提出了哪些的问题

  • 分析为什么会出现这些问题

  • 哪些问题是必须解决的，哪些是阶段推进的

• 期望目标

  • 组件库的定位是什么

  • 自建组件库是为了满足什么场景

  • 阶段目标是什么

  • 最终期望达到什么效果

• 具体实现

  • 哪些问题用哪些方法来解决

  • 关于后续迭代是怎么考虑的

目前现状

仅仅是因为前端开发为了部分代码或者样式不用重复写就封装一个组件甚至组件库是一件很搞笑的事情，最终往往会出现以下问题：

• 代码分散但是却高耦合，存在很多职责不明确

• 封装过于死板，且暴露的属性职责不明确

• 可维护性低，无法应对不断变化的需求

• 可靠性低，对上游数据不做错误处理，对下游使用者不做兼容处理

最后没法迭代，因为代码质量及版本问题，连原始开发者都改不动的，相关使用者怨声载道，然后又重构一遍，还是同样的设计思路，只不过基于已知业务场景改了写法，然后过一段时间又成为一个新的历史包袱。。。

当你为了方便改别人的代码而选择 fork 别人的组件库下来简单改改再输出时，难道你觉得别人不会对“你写的”这个组件库持同样的看法么？

你会发现，如果仅仅以一个业务员的角度去寻求解决办法的话，最后往往不能够得到其他业务员的认可的～

组件库的存在目的是为了提高团队的工作效率，不是单纯为了个别人能少写代码，前者才是目的，后者只是其中一种实现方式（这句话自己悟吧）

期望目标

一个合格的组件库应该要让使用者感受到两点：

• 约束（为什么只能这样传嘛？）

• 方便（只要这样传就可以耶～）

不合格的组件库往往只关注后者，但是其实前者更加重要

在能实现甲方的需求前提下，约束的树立会让团队对某一问题形成一个固有的解决方案，这个使用过程会促成惯性的产生

同时，这个惯性一旦建立，就能促成两个结果：

• 弥合了人与人之间的差异

• 提高了交流效率（不单单是开发，还包括设计、产品、测试等一条工作链路上的相关人）

要知道的是，团队合作过程中，效率最低的环节永远是沟通，一个好的团队不是全员大神，而是做什么事情以一个整体，每个人步调趋于一致，这样效率才高～

具体实现

编写一个公共库需要考虑很多东西，下面主要分三点来阐述

逻辑的分割

• 避免一次性、不通用、没必要的封装

• 不允许出现相互跨级或交叉引用的情况，应形成明确的上下级关系

• 被抽离的逻辑代码应该尽可能的“独立“，避免变成”谁也离不开谁”

逻辑的封装

对于一个管理平台框架来说，宗旨是让开发少写代码、产品少写文档，不需要每次有新业务都要重复产出

对于开发来说，具体有两点：

• 大部分情况下，能拷贝下 demo 即可实现各类交互效果

• 小部分情况下，组件能提供其他更多的可能以满足特殊需求

封装过程中，仅暴露关键属性，提供多种可能，并且以比较常用的值作为“默认值”并明确定义，即可满足“大部分需求只需无脑引用，同时小部分的特殊需求也能被满足”

维护与开发

作为一个上游的 UI 库，要充分考虑下游使用者的情况

• 做到升级后保证下游大部分情况下不需要改动

• 组件的新增、删除、修改要有充分的理由（需求或 bug），并且要遵循最小影响原则

• 组件的设计要充分考虑日后可能发生的变化

未来展望

仅靠一个 UI 框架难以解决问题，对于未来的想法有分成三个阶段：

1. UI 库，沉淀稳定高效的组件

2. 代码片段生成器，收集业务案例代码

3. 页面生成器，输出有效模版

这里更多面向的是中后台项目的解决方案

总结

组件库输出约束和统一解决办法，前者通过抚平团队中个体的差异来提高团队的沟通效率，后者通过形成工作惯性来提高团队的工作效率

作者：tellyourmad
来源：juejin.cn/post/7063017892714905608

免战申明

本文不讨论两种缩进方式的优劣，只提供一种能够同时兼容大家关于缩进代码风格的解决方案

字符缩进，2还是4?

很久之前，组内开发时发现大家的tab.size不一样，有的伙伴表示都能接受，有的伙伴习惯使用2字符缩进，有的伙伴习惯4字符缩进，导致开发起来很痛苦，一直在寻找兼容大家代码风格的办法，今天终于研究出一种解决方案（不一定适用所有人）。

工具准备

1. vscode

2. prettierrc插件

解决方案

首先设置"editor.tabSize"为自己习惯的tabSize

设置tab按下时不插入空格"editor.insertSpaces": false

项目根目录下创建.prettierrc（可添加到.gitignore）,设置"useTabs": true

{
    "printWidth": 180,
    "semi": true,
    "singleQuote": true,
    //使用tab进行格式化
    "useTabs": true
}

设置展示效果"editor.renderWhitespace": "selection"

最终效果

可以看到，编辑器内设置不同的代码缩进，展示效果不同，但最终提交的代码风格一致。 （小缺陷：对于强制要求使用空格代替tab的情况不适用）

作者：断律绎殇
来源：juejin.cn/post/7095001798120833061

提到大文件上传，在脑海里最先想到的应该就是将图片保存在自己的服务器（如七牛云服务器），保存在数据库，不仅可以当做地址使用，还可以当做资源使用；或者将图片转换成base64，转换成buffer流，但是在javascript这门语言中不存在，但是这些只适用于一些小图片，对于大文件还是束手无策。

一、问题分析

如果将大文件一次性上传，会发生什么？想必都遇到过在一个大文件上传、转发等操作时，由于要上传大量的数据，导致整个上传过程耗时漫长，更有甚者，上传失败，让你重新上传！这个时候，我已经咬牙切齿了。先不说上传时间长久，毕竟上传大文件也没那么容易，要传输更多的报文，丢包也是常有的事，而且在这个时间段万不可以做什么其他会中断上传的操作；其次，前后端交互肯定是有时间限制的，肯定不允许无限制时间上传，大文件又更容易超时而失败....

一、解决方案

既然大文件上传不适合一次性上传，那么将文件分片散上传是不是就能减少性能消耗了。

没错，就是分片上传。分片上传就是将大文件分成一个个小文件（切片），将切片进行上传，等到后端接收到所有切片，再将切片合并成大文件。通过将大文件拆分成多个小文件进行上传，确实就是解决了大文件上传的问题。因为请求时可以并发执行的，这样的话每个请求时间就会缩短，如果某个请求发送失败，也不需要全部重新发送。

二、具体实现

1、前端

（1）读取文件

准备HTML结构，包括：读取本地文件（input类型为file）、上传文件按钮、上传进度。

<input type="file" id="input">
<button id="upload">上传</button>
<!-- 上传进度 -->
<div style="width: 300px" id="progress"></div>

JS实现文件读取：

监听input的change事件，当选取了本地文件后，打印事件源可得到文件的一些信息：

let input = document.getElementById('input')
let upload = document.getElementById('upload')
let files = {}//创建一个文件对象
let chunkList = []//存放切片的数组

// 读取文件
input.addEventListener('change', (e) => {
    files = e.target.files[0]
    console.log(files);
    
    //创建切片
    //上传切片
})

观察控制台，打印读取的文件信息如下：

（2）创建切片

文件的信息包括文件的名字，文件的大小，文件的类型等信息，接下来可以根据文件的大小来进行切片，例如将文件按照1MB或者2MB等大小进行切片操作：

// 创建切片
function createChunk(file, size = 2 * 1024 * 1024) {//两个形参：file是大文件，size是切片的大小
    const chunkList = []
    let cur = 0
    while (cur < file.size) {
        chunkList.push({
                file: file.slice(cur, cur + size)//使用slice()进行切片
        })
        cur += size
    }
    return chunkList
}

切片的核心思想是：创建一个空的切片列表数组chunkList，将大文件按照每个切片2MB进行切片操作，这里使用的是数组的Array.prototype.slice()方法，那么每个切片都应该在2MB大小左右，如上文件的大小是8359021，那么可得到4个切片，分别是[0，2MB]、[2MB，4MB]、[4MB,6MB]、[6MB,8MB]。调用createChunk函数，会返回一个切片列表数组，实际上，有几个切片就相当于有几个请求。

调用创建切片函数：

//注意调用位置，不是在全局，而是在读取文件的回调里调用
chunkList = createChunk(files)
console.log(chunkList);

观察控制台打印的结果：

（3）上传切片

上传切片的个关键的操作：

第一、数据处理。需要将切片的数据进行维护成一个包括该文件，文件名，切片名的对象，所以采用FormData对象来进行整理数据。FormData 对象用以将数据编译成键值对,可用于发送带键数据，通过调用它的append()方法来添加字段，FormData.append()方法会将字段类型为数字类型的转换成字符串（字段类型可以是 Blob、File或者字符串：如果它的字段类型不是 Blob 也不是 File，则会被转换成字符串类。

第二、并发请求。每一个切片都分别作为一个请求，只有当这4个切片都传输给后端了，即四个请求都成功发起，才上传成功，使用Promise.all()保证所有的切片都已经传输给后端。

//数据处理
async function uploadFile(list) {
    const requestList = list.map(({file,fileName,index,chunkName}) => {
        const formData = new FormData() // 创建表单类型数据
        formData.append('file', file)//该文件
        formData.append('fileName', fileName)//文件名
        formData.append('chunkName', chunkName)//切片名
        return {formData,index}
    })
        .map(({formData,index}) =>axiosRequest({
            method: 'post',
            url: 'http://localhost:3000/upload',//请求接口，要与后端一一一对应
            data: formData
        })
            .then(res => {
                console.log(res);
                //显示每个切片上传进度
                let p = document.createElement('p')
                p.innerHTML = `${list[index].chunkName}--${res.data.message}`
                document.getElementById('progress').appendChild(p)
            })
        )
        await Promise.all(requestList)//保证所有的切片都已经传输完毕
}

//请求函数
function axiosRequest({method = "post",url,data}) {
    return new Promise((resolve, reject) => {
        const config = {//设置请求头
            headers: 'Content-Type:application/x-www-form-urlencoded',
        }
        //默认是post请求，可更改
        axios[method](url,data,config).then((res) => {
            resolve(res)
        })
    })
}

// 文件上传
upload.addEventListener('click', () => {
    const uploadList = chunkList.map(({file}, index) => ({
        file,
        size: file.size,
        percent: 0,
        chunkName: `${files.name}-${index}`,
        fileName: files.name,
        index
    }))
    //发请求，调用函数
    uploadFile(uploadList)

})

2、后端

（1）接收切片

主要工作：

第一：需要引入multiparty中间件，来解析前端传来的FormData对象数据；

第二：通过path.resolve()在根目录创建一个文件夹--qiepian，该文件夹将存放另一个文件夹（存放所有的切片）和合并后的文件；

第三：处理跨域问题。通过setHeader()方法设置所有的请求头和所有的请求源都允许；

第四：解析数据成功后，拿到文件相关信息，并且在qiepian文件夹创建一个新的文件夹${fileName}-chunks，用来存放接收到的所有切片；

第五：通过fse.move(filePath,fileName)将切片移入${fileName}-chunks文件夹，最后向前端返回上传成功的信息。

//app.js
const http = require('http')
const multiparty = require('multiparty')// 中间件，处理FormData对象的中间件
const path = require('path')
const fse = require('fs-extra')//文件处理模块

const server = http.createServer()
const UPLOAD_DIR = path.resolve(__dirname, '.', 'qiepian')// 读取根目录，创建一个文件夹qiepian存放切片

server.on('request', async (req, res) => {
    // 处理跨域问题，允许所有的请求头和请求源
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Headers', '*')

    if (req.url === '/upload') { //前端访问的地址正确
        const multipart = new multiparty.Form() // 解析FormData对象
        multipart.parse(req, async (err, fields, files) => {
            if (err) { //解析失败
                return
            }
            console.log('fields=', fields);
            console.log('files=', files);
            
            const [file] = files.file
            const [fileName] = fields.fileName
            const [chunkName] = fields.chunkName
            
            const chunkDir = path.resolve(UPLOAD_DIR, `${fileName}-chunks`)//在qiepian文件夹创建一个新的文件夹，存放接收到的所有切片
            if (!fse.existsSync(chunkDir)) { //文件夹不存在，新建该文件夹
                await fse.mkdirs(chunkDir)
            }

            // 把切片移动进chunkDir
            await fse.move(file.path, `${chunkDir}/${chunkName}`)
            res.end(JSON.stringify({ //向前端输出
                code: 0,
                message: '切片上传成功'
            }))
        })
    }
})

server.listen(3000, () => {
    console.log('服务已启动');
})

通过node app.js启动后端服务，可在控制台打印fields和files：

（2）合并切片

第一：前端得到后端返回的上传成功信息后，通知后端合并切片：

// 通知后端去做切片合并
function merge(size, fileName) {
    axiosRequest({
        method: 'post',
        url: 'http://localhost:3000/merge',//后端合并请求
        data: JSON.stringify({
            size,
            fileName
        }),
    })
}

//调用函数，当所有切片上传成功之后，通知后端合并
await Promise.all(requestList)
merge(files.size, files.name)

第二：后端接收到合并的数据，创建新的路由进行合并，合并的关键在于：前端通过POST请求向后端传递的合并数据是通过JSON.stringify()将数据转换成字符串，所以后端合并之前，需要进行以下操作：

• 解析POST请求传递的参数，自定义函数resolvePost，目的是将每个切片请求传递的数据进行拼接，拼接后的数据仍然是字符串，然后通过JSON.parse()将字符串格式的数据转换为JSON对象；

• 接下来该去合并了，拿到上个步骤解析成功后的数据进行解构，通过path.resolve获取每个切片所在的路径；

• 自定义合并函数mergeFileChunk，只要传入切片路径，切片名字和切片大小，就真的将所有的切片进行合并。在此之前需要将每个切片转换成流stream对象的形式进行合并，自定义函数pipeStream，目的是将切片转换成流对象，在这个函数里面创建可读流，读取所有的切片，监听end事件，所有的切片读取完毕后，销毁其对应的路径，保证每个切片只被读取一次，不重复读取，最后将汇聚所有切片的可读流汇入可写流；

• 最后，切片被读取成流对象，可读流被汇入可写流，那么在指定的位置通过createWriteStream创建可写流，同样使用Promise.all()的方法，保证所有切片都被读取，最后调用合并函数进行合并。

if (req.url === '/merge') { // 该去合并切片了
        const data = await resolvePost(req)
        const {
            fileName,
            size
        } = data
        const filePath = path.resolve(UPLOAD_DIR, fileName)//获取切片路径
        await mergeFileChunk(filePath, fileName, size)
        res.end(JSON.stringify({
            code: 0,
            message: '文件合并成功'
        }))
}

// 合并
async function mergeFileChunk(filePath, fileName, size) {
    const chunkDir = path.resolve(UPLOAD_DIR, `${fileName}-chunks`)

    let chunkPaths = await fse.readdir(chunkDir)
    chunkPaths.sort((a, b) => a.split('-')[1] - b.split('-')[1])

    const arr = chunkPaths.map((chunkPath, index) => {
        return pipeStream(
            path.resolve(chunkDir, chunkPath),
            // 在指定的位置创建可写流
            fse.createWriteStream(filePath, {
                start: index * size,
                end: (index + 1) * size
            })
        )
    })
    await Promise.all(arr)//保证所有的切片都被读取
}

// 将切片转换成流进行合并
function pipeStream(path, writeStream) {
    return new Promise(resolve => {
        // 创建可读流，读取所有切片
        const readStream = fse.createReadStream(path)
        readStream.on('end', () => {
            fse.unlinkSync(path)// 读取完毕后，删除已经读取过的切片路径
            resolve()
        })
        readStream.pipe(writeStream)//将可读流流入可写流
    })
}

// 解析POST请求传递的参数
function resolvePost(req) {
    // 解析参数
    return new Promise(resolve => {
        let chunk = ''
        req.on('data', data => { //req接收到了前端的数据
            chunk += data //将接收到的所有参数进行拼接
        })
        req.on('end', () => {
            resolve(JSON.parse(chunk))//将字符串转为JSON对象
        })
    })
}

还未合并前，文件夹如下图所示：

合并后，文件夹新增了合并后的文件：

作者：来碗盐焗星球
来源：juejin.cn/post/7177045936298786872

先说结论：

• 看经典书

• 看官方文档

为什么是经典书籍

我买过很多本计算机、前端、JavaScript方面的书，在这方面也踩过一些坑，分享下我的经验。

在最早我也买过亚马逊的kindle，kindle的使用体验还不错，能达到和纸书差不多的阅读体验，而且很便携，但由于上面想看的书很多都没有，又懒得去折腾，所以后来就卖了。

之后就转到了纸书上，京东经常搞100减50的活动，买了很多的书，这些书有的只翻了几页，有的翻来覆去看了几遍。

翻了几页的也有两种情况，一种是内容质量太差，完全照抄文档，而且还是过时的文档，你们都知道，前端的技术更新是比较快的，框架等更新也很快，所以等书出版了，技术可能就已经翻篇了。

另一种就是过于专业的，比较复杂难懂，比如编译原理，深入了解计算机系统 算法(第4版)等这种计算机传世经典之作。

纸书其实也有缺点，它真的是太沉了，如果要是出差的话想要带几本书的话，都得去考虑考虑，带多了是真的重。

还有就是在搬家的时候，真的就是噩梦，我家里有将近100本的纸书，每次搬家真的就是累死了。

所以最近一两年我都很少买纸书了，如果有需要我都会尽量选择电子版。

电子版书走到哪里都能看，不会有纸书那么多限制，唯一缺点可能就是没有纸书那股味道。

还有就是电子书平台的问题，一个平台的书可能不全，比如我就有微信图书和京东这两个，这也和听歌看剧一样，想看个东西，还得去多个平台，如果要是能够统一的话就好了。

还有就是盗版的pdf，这个我也看过，有一些已经买不到的书，没办法只能去网上寻找资源了。建议大家如果能支持正版，还是支持正版，如果作者赚不到钱，慢慢就没有人愿意创作优质内容，久而久之形成了恶性循环。

看经典书学习前端，是非常好的方式之一，因为书是一整套系统的内容，它不同于网上的碎片化文章。同时好书也是经过成千上万人验证后的，我们只需选择对的就可以了。

我推荐几本我读过的比较好的前端方面的书

1. javascript高级程序设计

2. 你不知道的javascript 上 中 下卷

3. 狼书 卷1 卷2

关于计算机原理方面的书

1. 编码：隐匿在计算机软硬件背后的语言

2. 算法图解

3. 图解http

4. 大话数据结构

上面的书都是我买过，看过的，可能还有我不知道的，欢迎在评论中留言

这些书都有一些共同的特征，就是能经过时间的检验，不会过时，可以重复的去阅读，学习。

为什么是官方API文档

除了经典书之外，就是各种语言、框架的官方文档，这里一定注意是“官方文档”，因为百度里面搜索的结果里，有很多镜像的文档网站，官方第一时间发布的更新，他们有时并不能及时同步，所以接受信息就比人慢一步。所以一定要看“官方文档”。

比如要查询javascript、css的内容，就去mdn上查看。要去看nodejs就去nodejs的官网，要去看react、vue框架就去官网。尽量别去那些第三方网站。

作者：小帅的编程笔记
来源：juejin.cn/post/7060102025232515086

废话开篇：简单实现一个覆盖水印的小功能，水印一般都是添加在图片上，然后直接加载处理过的图片url即可，这里并没有修改图片，而是直接的在待添加水印的 dom 上添加一个 canvas 蒙版。

一、效果

处理之前

DIV

IMG

处理之后

DIV

IMG

这里添加 “水印”（其实并不是真正的水印） 到 DIV 的时候按钮点击事件并不会因为有蒙版遮挡而无法点击

二、JS 代码

class WaterMark{
    //水印文字
    waterTexts = []
    //需要添加水印的dom集合
    needAddWaterTextElementIds = null
    //保存添加水印的dom
    saveNeedAddWaterMarkElement = []
    //初始化
    constructor(waterTexts,needAddWaterTextElementIds){
        if(waterTexts && waterTexts.length != 0){
            this.waterTexts = waterTexts
        } else {
            this.waterTexts = ['水印文字哈哈哈哈','2022-12-08']
        }
        this.needAddWaterTextElementIds = needAddWaterTextElementIds
    }
    
    //开始添加水印
    startWaterMark(){
        const self = this
        if(this.needAddWaterTextElementIds){
            this.needAddWaterTextElementIds.forEach((id)=>{
                let el = document.getElementById(id)
                self.saveNeedAddWaterMarkElement.push(el)
            })
        } else {
            this.saveNeedAddWaterMarkElement = Array.from(document.getElementsByTagName('img'))
        }
        this.saveNeedAddWaterMarkElement.forEach((el)=>{
            self.startWaterMarkToElement(el)
        })
    }

    //添加水印到到dom对象
    startWaterMarkToElement(el){
        let nodeName = el.nodeName
        if(['IMG','img'].indexOf(nodeName) != -1){
            //图片，需要加载完成进行操作
            this.addWaterMarkToImg(el)
        } else {
            //普通，直接添加
            this.addWaterMarkToNormalEle(el)
        }
    }
        
    //给图片添加水印
    async addWaterMarkToImg(img){
        if(!img.complete){
            await new Promise((resolve)=>{
                img.onload = resolve
            })
        }
        this.addWaterMarkToNormalEle(img)
    }
    
    //给普通dom对象添加水印
    addWaterMarkToNormalEle(el){
        const self = this
        let canvas = document.createElement('canvas')
        canvas.width = el.width ? el.width : el.clientWidth
        canvas.height = el.height ? el.height : el.clientHeight
        let ctx = canvas.getContext('2d')
        let maxSize = Math.max(canvas.height, canvas.width)
        let font = (maxSize / 25)
        ctx.font = font + 'px "微软雅黑"'
        ctx.fillStyle = "rgba(195,195,195,1)"
        ctx.textAlign = "left"
        ctx.textBaseline = "top"
        ctx.save()
        let angle = -Math.PI / 10.0
        //进行平移，计算平移的参数
        let translateX = (canvas.height) * Math.tan(Math.abs(angle))
        let translateY = (canvas.width - translateX) * Math.tan(Math.abs(angle))
        ctx.translate(-translateX / 2.0, translateY / 2.0)
        ctx.rotate(angle)
        //起始坐标
        let x = 0
        let y = 0
        //一组文字之间间隔
        let sepY = (font / 2.0)
        while(y < canvas.height){
            //当前行的y值
            let rowCurrentMaxY = 0
            while(x < canvas.width){
                let totleMaxX = 0
                let currentY = 0
                //绘制水印
                this.waterTexts.forEach((text,index)=>{
                    currentY += (index * (sepY + font))
                    let rect = self.drawWater(ctx,text,x,y + currentY)
                    let currentMaxX = (rect.x + rect.width)
                    totleMaxX = (currentMaxX > totleMaxX) ? currentMaxX: totleMaxX
                    rowCurrentMaxY = currentY
                })
                x = totleMaxX + 20
            }
            //重置x，y值
            x = 0
            y += (rowCurrentMaxY + (sepY + font + (canvas.height / 5)))
        }
        ctx.restore()
        //添加canvas
        this.addCanvas(canvas,el)
    }

    //绘制水印
    drawWater(ctx,text,x,y){
        //绘制文字
        ctx.fillText(text,x,y)
        //计算尺度
        let textRect = ctx.measureText(text)
        let width = textRect.width
        let height = textRect.height
        return {x,y,width,height}
    }

    //添加canvas到当前标签的父标签上
    addCanvas(canvas,el){
        //创建div(canvas需要依赖一个div进行位置设置)
        let warterMarDiv = document.createElement('div')
        //关联水印dom对象
        el.warterMark = warterMarDiv
        //添加样式
        this.resetCanvasPosition(el)
        //添加水印
        warterMarDiv.appendChild(canvas)
        //添加到父标签
        el.parentElement.insertBefore(warterMarDiv,el)
    }

    //重新计算位置
    resetCanvasPosition(el){
        if(el.warterMark){
            //设置父标签的定位
            el.parentElement.style.cssText = `position: relative;`
            //设施水印载体的定位
            el.warterMark.style.cssText = 'position: absolute;top: 0px;left: 0px;pointer-events:none'
        }
    }
}

用法

<div>
    <!-- 待加水印的IMG -->
    <img style="width: 100px;height: auto" src="" alt="">
</div>

let waterMark = new WaterMark()
waterMark.startWaterMark();

ctx.save() 与 ctx.restore() 其实在这里的作用不是很大，但还是添加上了，目的是保存添加水印前的上下文，跟结束绘制后恢复水印前的上下文，这样，这些斜体字只在这两行代码之间生效，下面如果再绘制其他，那么，将不受影响。

防止蒙版水印遮挡底层按钮或其他事件，需要添加 pointer-events:none 属性到蒙版标签上。

添加水印的标签外需要添加一个 父标签 ，这个 父标签 的作用就是添加约束 蒙版canvas 的位置，这里想通过 MutationObserver 观察 body 的变化来进行更新 蒙版canvas 的位置，这个尝试失败了，因为复杂的布局只要变动会都在这个回调里触发。因此，直接在添加水印的标签外需要添加一个 父标签 ，用这个 父标签 来自动约束 蒙版canvas 的位置。

MutationObserver 逻辑如下，在监听回调里可以及时修改布局或者其他操作（暂时放弃）。

var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
var mutationObserver = new MutationObserver(function (mutations) {
    //修改水印位置
})

mutationObserver.observe(document.getElementsByTagName('body')[0], {
    childList: true, // 子节点的变动（新增、删除或者更改）
    attributes: true, // 属性的变动
    characterData: true, // 节点内容或节点文本的变动
    subtree: true // 是否将观察器应用于该节点的所有后代节点
})

图片的大小只有在加载完成之后才能确定，所以，对于 IMG 的操作，需要观察它的 complete 事件。

三、总结与思考

用 canvas ctx.drawImage(img, 0, 0) 进行绘制，再将 canvas.toDataURL('image/png') 生成的 url 加载到之前的图片上，也是一种方式，但是，有时候会因为图片的原因导致最后的合成图片的 base64 数据是空，所以，直接增加一个蒙版，本身只是为了显示，并不是要生成真正的合成图片。实现了简单的伪水印，没有特别复杂的代码，代码拙劣，大神勿笑。

作者：头疼脑胀的代码搬运工
来源：juejin.cn/post/7174695149195231293

前言

在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。

举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。

那作为前端的我们如何实现电子签名呢？其实在html5中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas。

什么是canvas

Canvas（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色。

<canvas></canvas>

如何使用

canvas给我们提供了很多的Api，供我们使用，我们只需要在body标签中创建一个canvas标签，在script标签中拿到canvas这个标签的节点，并创建context(上下文)就可以使用了。

...
<body>
    <canvas></canvas>
</body>
<script>
    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    canvas.getContext('2d')
</script>
...

步入正题。

实现电子签名

知道几何的朋友都很清楚，线有点绘成，面由线绘成。

多点成线，多线成面。

所以我们实际只需要拿到当前触摸的坐标点，进行成线处理就可以了。

在body中添加canvas标签

在这里我们不仅需要在在body中添加canvas标签，我们还需要添加两个按钮，分别是取消和保存（后面我们会用到）。

<body>
    <canvas></canvas>
    <div>
        <button>取消</button>
        <button>保存</button>
    </div>
</body>

添加文件

我这里全程使用js进行样式设置及添加。

// 配置内容
    const config = {
        width: 400, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: 'red', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }

获取canvas实例

这里我们使用querySelector获取canvas的dom实例，并设置样式和创建上下文。

    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框，方便我们查看及使用
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = canvas.getContext('2d')

基础设置

我们将canvas的填充色为透明，并绘制填充一个矩形，作为我们的画布，如果不设置这个填充背景色，在我们初识渲染的时候是一个黑色背景，这也是它的一个默认色。

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );

上次绘制路径保存

这里我们需要声明一个对象，用来记录我们上一次绘制的路径结束坐标点及偏移量。

• 保存上次坐标点这个我不用说大家都懂；

• 为啥需要保存偏移量呢，因为鼠标和画布上的距离是存在一定的偏移距离，在我们绘制的过程中需要减去这个偏移量，才是我们实际的绘制坐标。

• 但我发现chrome中不需要减去这个偏移量，拿到的就是实际的坐标，之前在微信小程序中使用就需要减去偏移量，需要在小程序中使用的朋友需要注意这一点哦。

    // 保存上次绘制的 坐标及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }

设备兼容

我们需要它不仅可以在web端使用，还需要在移动端使用，我们需要给它做设备兼容处理。我们通过调用navigator.userAgent获取当前设备信息，进行正则匹配判断。

    // 判断是否为移动端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

初始化

这里我们在监听鼠标按下(mousedown)(web端)/触摸开始(touchstart)的时候进行初始化，事件监听采用addEventListener。

    // 创建鼠标/手势按下监听器

    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)

三元判断说明： 这里当mobileStatus为true时则表示为移动端，反之则为web端，后续使用到的三元依旧是这个意思。

声明初始化方法

我们添加一个init方法作为监听鼠标按下/触摸开始的回调方法。

这里我们需要获取到当前鼠标按下/触摸开始的偏移量和坐标，进行起始点绘制。

Tips：web端可以直接通过event中取到，而移动端则需要在event.changedTouches[0]中取到。

这里我们在初始化后再监听鼠标的移动。

    // 初始化

    const init = event => {

        // 获取偏移量及坐标

        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 



        // 修改上次的偏移量及坐标

        client.offsetX = offsetX

        client.offsetY = offsetY

        client.endX = pageX

        client.endY = pageY



        // 清除以上一次 beginPath 之后的所有路径，进行绘制

        ctx.beginPath()



        // 根据配置文件设置进行相应配置

        ctx.lineWidth = config.lineWidth

        ctx.strokeStyle = config.strokeStyle

        ctx.lineCap = config.lineCap

        ctx.lineJoin = config.lineJoin



        // 设置画线起始点位

        ctx.moveTo(client.endX, client.endY)



        // 监听 鼠标移动或手势移动

        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)

    }

绘制

这里我们添加绘制draw方法，作为监听鼠标移动/触摸移动的回调方法。

    // 绘制

    const draw = event => {

        // 获取当前坐标点位

        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event

        // 修改最后一次绘制的坐标点

        client.endX = pageX

        client.endY = pageY



        // 根据坐标点位移动添加线条

        ctx.lineTo(pageX , pageY )



        // 绘制

        ctx.stroke()

    }

结束绘制

添加了监听鼠标移动/触摸移动我们一定要记得取消监听并结束绘制，不然的话它会一直监听并绘制的。

这里我们创建一个cloaseDraw方法作为鼠标弹起/结束触摸的回调方法来结束绘制并移除鼠标移动/触摸移动的监听。

canvas结束绘制则需要调用closePath()让其结束绘制

    // 结束绘制

    const cloaseDraw = () => {

        // 结束绘制

        ctx.closePath()

        // 移除鼠标移动或手势移动监听器

        window.removeEventListener("mousemove", draw)

    }

添加结束回调监听器

    // 创建鼠标/手势 弹起/离开 监听器

    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)

    

ok，现在我们的电子签名功能还差一丢丢可以实现完了，现在已经可以正常的签名了。

我们来看一下效果：

取消功能/清空画布

我们在刚开始创建的那两个按钮开始排上用场了。

这里我们创建一个cancel的方法作为取消并清空画布使用

    // 取消-清空画布
    const cancel = () => {
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)
    }

然后我们将这个方法和取消按钮进行绑定

     <button onclick="cancel()">取消</button>

保存功能

这里我们创建一个save的方法作为保存画布上的内容使用。

将画布上的内容保存为图片/文件的方法有很多，比较常见的是blob和toDataURL这两种方案，但toDataURL这哥们没blob强，适配也不咋滴。所以我们这里采用a标签 ➕ blob方案实现图片的保存下载。

    // 保存-将画布内容保存为图片
    const save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            // 获取当前时间并转成字符串，用来当做文件名
            const date = Date.now().toString()
            // 创建一个 a 标签
            const a = document.createElement('a')
            // 设置 a 标签的下载文件名
            a.download = `${date}.png`
            // 设置 a 标签的跳转路径为 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手动触发 a 标签的点击事件
            a.click()
            // 移除 a 标签
            a.remove()
        })
    }

然后我们将这个方法和保存按钮进行绑定

    <button onclick="save()">保存</button>

我们将刚刚绘制的内容进行保存，点击保存按钮，就会进行下载保存

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <div>
        <button onclick="cancel()">取消</button>
        <button onclick="save()">保存</button>
    </div>
</body>
<script>
    // 配置内容
    const config = {
        width: 400, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: 'red', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }

    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = canvas.getContext('2d')

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );

    // 保存上次绘制的 坐标及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }

    // 判断是否为移动端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

    // 初始化
    const init = event => {
        // 获取偏移量及坐标
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 

        // 修改上次的偏移量及坐标
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctx.beginPath()
        // 根据配置文件设置相应配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin
        // 设置画线起始点位
        ctx.moveTo(client.endX, client.endY)
        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
    // 绘制
    const draw = event => {
        // 获取当前坐标点位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最后一次绘制的坐标点
        client.endX = pageX
        client.endY = pageY

        // 根据坐标点位移动添加线条
        ctx.lineTo(pageX , pageY )

        // 绘制
        ctx.stroke()
    }
    // 结束绘制
    const cloaseDraw = () => {
        // 结束绘制
        ctx.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
    }
    // 创建鼠标/手势按下监听器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
    // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
    
    // 取消-清空画布
    const cancel = () => {
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)
    }
    // 保存-将画布内容保存为图片
    const save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            // 获取当前时间并转成字符串，用来当做文件名
            const date = Date.now().toString()
            // 创建一个 a 标签
            const a = document.createElement('a')
            // 设置 a 标签的下载文件名
            a.download = `${date}.png`
            // 设置 a 标签的跳转路径为 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手动触发 a 标签的点击事件
            a.click()
            // 移除 a 标签
            a.remove()
        })
    }
</script>
</html>