js实现同步等待

| 前端 | | 暂无评论 | 470 views

场景：用户下单后需要支付，但是支付前需要确定用户的订单是否生成，这就需要在用户操作后，不断查询订单状态。 方法：无非就是设置一个定时器，每隔n秒去查一下，如果状态ok就走下一步，不行就等待，直到获取成功。当然了，可以设置一个最多界限。 第一种方法：promise

1
2
3
4
5
6
7
8
9
10
11
12
const check = async (times=0) => {
    if(times > 3){
        return;
    }
    const res = await new Promise((resolve) => {
        setTimeout(async () => {
            const prom = await check(times + 1);
            resolve(prom);
        }, 1000);
    });
    return res;
}

第二种方法……

userAgent判断合集

| 前端 | | 暂无评论 | 596 views

通过navigator.userAgent判断一些设备和环境类型，总结了一些：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//系统
var webkit = ua.match(/Web[kK]it[/]{0,1}([\d.]+)/);
var android = ua.match(/(Android);?[\s/]+([\d.]+)?/);
var osx = !!ua.match(/\(Macintosh; Intel /);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
var webos = ua.match(/(webOS|hpwOS)[\s/]([\d.]+)/);
var wp = ua.match(/Windows Phone ([\d.]+)/);var touchpad = webos && ua.match(/TouchPad/);
 
//app
var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/);
var firefox = ua.match(/Firefox\/([\d.]+)/);
var firefoxos = ua.match(/\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/);
var webview = !chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/);
var safari = webview || ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/);
var qq = ua.match(/(QQBrowser)\/([\d.]+)/);
var baidubox = ua.match(/baiduboxapp\/([\d.]+)/i);
var baidubrowser = ua.match(/baidubrowser\/([\d.]+)/i);
var weixin = ua.match(/MicroMessenger\/([\d.]+)/i);
var iqiyi = ua.match(/iqiyi\s*IqiyiVersion\/([\d.]+)/i);
var uc = ua.match(/(?:ucbrowser|ucweb)\/([\d.]+)/i) || typeof ucweb !== 'undefined';
var qqApp = ua.match(/(QQ)\/([\d.]+)/);
var readApp = ua.match(/iqiyireader IqiyiReaderVersion\/([\d.]+)/i); // 爱奇艺阅读
var readPlugin = ua.match(/IqiyiVersion_Reader\/([\d.]+)/i); // 爱奇艺阅读插件
var youku = ua.match(/Youku\/([\d.]+)/i);
var xigua = ua.match(/VideoArticle\/([\d.]+)/i);
var toutiao = ua.match(/NewsArticle\/([\d.]+)/i);
 
//设备
var oppo = ua.match(/OPPO (\w+) |OppoBrowser\/(\w+)/i);
var vivo = ua.match(/vivo (\w+) /i);
var sumsung = ua.match(/SM-(\w+) /i);
var le = ua.match(/(?:Letv|Le) (\w+) Build/i);
var mi = ua.match(/(?:MI) ([\w ]+) Build/i);
var huawei = ua.match(/(?:HUAWEI ([\w-]+) Build)|(?:; (?:HW-)?([\w-]+) Build\/(?:HUAWEI|HONOR))/i);
var redmi = ua.match(/(?:Redmi|HM) ([\w ]+) Build/i);
var meizu = ua.match(/(((?:meizu\/|m|mx|PRO) ?(?:[0-9]+)) ?(?:\w*)) Build/i);

给准备高考的同学看的

| 闲谈 | | 暂无评论 | 566 views

大部分的中国朋友都看过的东西： 动漫： 1、蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角，梦想是找到传说中的One Piece，成为海贼王，路飞积极乐观，他出海不是为了钱财，而是为了享受冒险的过程。 2、漩涡鸣人，日本漫画《火影忍者》及其衍生作品中的男主角，在追求梦想的过程中不断突破自我，贯彻了自身的忍道，获得人们的认可。 3……

判断dom进入可视区域

| 前端 | | 暂无评论 | 637 views

IntersectionObserver 大家平时在做性能优化的时候，经常用到懒加载，那么就会用到window的scroll和setTimeOut等等，无非是要判断dom是否进入可是区域了，那么这api就是一个令人惊喜的东西了，它就是用来判断dom进入可视区域的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//初始化一个实例
var observer = new IntersectionObserver(changes => {
    for (const change of changes) {
        console.log(change.time);
        // Timestamp when the change occurred
        // 当可视状态变化时，状态发送改变的时间戳
        // 对比时间为，实例化的时间，
        // 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化
 
        console.log(change.rootBounds);
        // Unclipped area of root
        // 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值
 
        console.log(change.boundingClientRect);
        // target.boundingClientRect()
        // 目标元素的矩形区域的信息
 
        console.log(change.intersectionRect);
        // boundingClientRect, clipped by its containing block ancestors,
        // and intersected with rootBounds
        // 目标元素与视口（或根元素）的交叉区域的信息
 
        console.log(change.intersectionRatio);
        // Ratio of intersectionRect area to boundingClientRect area
        // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，
        // 完全可见时为1，完全不可见时小于等于0
 
        console.log(change.target);
        // the Element target
        // 被观察的目标元素，是一个 DOM 节点对象
        // 当前可视区域正在变化的元素
 
    }
}, {});
 
// Watch for intersection events on a specific target Element.
// 对元素target添加监听，当target元素变化时，就会触发上述的回调
observer.observe(target);
 
// Stop watching for intersection events on a specific target Element.
// 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数
observer.unobserve(target);
 
// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();

除此之外，……

随手搞下node服务器

| 鲜货 | | 暂无评论 | 775 views

1、下载node的二进制包

1
wget https://nodejs.org/dist/v10.15.0/node-v10.15.0.tar.gz

2、解压

1
tar xvf node-v10.15.0.tar.gz

3、安装，先后执行

1
2
./configure
make install

执行这里的时候可能会报错，原因是有些编译需要用到c++，所以需要先安装 [crayo……

phantom将网页转成图片乱码

| 鲜货 | | 暂无评论 | 1968 views

我们书接上回，继续来说乱码的问题。我也是好久没在centos上操作了，一时间也是翻看各种资料。 其实已经在本地和测试服务器都试过了，是没问题的，但是后来在一个cocker里运行，发现乱码，想必是这个docker有什么问题吧。 1、先是设置了docker的容器编码格式，重启服务，发现不行； 2、设置phantom的编码格式，网上有说：pha……

nodejs把html转化为image

| 前端,后端 | | 暂无评论 | 2373 views

业务需求：每个用户都可以生成自己的卡片，并分享到朋友圈。 尝试：canvas画图。但是部分安卓手机不支持，iPhone6以下不支持，最大的问题是canvas功能实现的过程是比较麻烦的，尤其是布局的部分，时刻挑战你的额GPU。网上有一个html2canvas的库，可以把指定的div转化为canvas，不过如果手机本身不支持的话，恐怕这个库也……

“前端”背后刀–Lottie

| 前端 | | 暂无评论 | 2611 views

最近一个项目中UI同学给了我一个json文件，说可以用lottie操作，完成一个动画——哇？！设计同学都这么牛了吗！ 话不多说，按照惯例，先上代码图： 代码不难，就是引用一个库文件，然后初始化，文章末尾附上了比较官方都手册，其中的animationData可以换成path，定义一个在线路径，这样可以在打包的时候减少包的大小，而且还可以随时……

Charles之Map Local

| 鲜货 | | 暂无评论 | 3035 views

这两天测试同学反复来找我，说他们无法mock数据，导致好多状态难以复现。因为在做连续看视频领金币的功能，有进度条，每个节点还有额外操作，所以他们要覆盖每个过程来测试。 有个同学说自己页面https无法抓取到，被我猜测了一番，说是不是换了手机或者电脑，果然，他换了电脑(俩月了)，我不知道他这么久是怎么测试的[捂脸]，今天主要是想解决一个代理……

微信小程序广告收益

| 前端 | | 暂无评论 | 5188 views

没事弄个小程序，等累计用户过千，就可以投放一些广告进去，坐等收益，想象很美好。而现实确实，收益甚少！ 广告收益计算方式 单日广告收入流水10万元以内（含）的部分，开发者可获其中50%， 单日广告收入流水超过10万元的部分，开发者可获其中30%。 以单日广告收入15万元为例，开发者收益=10万 * 50% + 5万 * 30% = 6.5万……