JavaScript代码片段

用于收集整理摘抄一下JavaScript代码片段，包括另类思维的技巧。

一 如何控制一秒钟内最多点击一次 [http://cn.rx.js.org/manual/overview.html#observable-]

先来看使用普通的 JavaScript：

1
2
3
4
5
6
7
8
9
10
var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

使用 RxJS：

1
2
3
4
5
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

REM 方法

1 普通方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = doc.documentElement.getBoundingClientRect().width || docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

2 普通适应方案，根据宽度调整根html的font-size

1
2
3
4
5
6
7
;(function(docEl, t, padBaseSize){
    var w,r=function(){
        var nw=Math.min(docEl.getBoundingClientRect().width, padBaseSize)
        if(nw!==w) w=nw,docEl.setAttribute('style','font-size:'+w/10+'px')
    }
    if(t.setAttribute('style','width:1vw'), !t.style.width) r(),window.addEventListener('resize', r)
})(document.documentElement, document.createElement('div'), 750);

3 淘宝适配方案

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
'use strict';

/**
 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};


//链接：https://www.jianshu.com/p/985d26b40199
//压缩版
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);</script>

链接：https://www.jianshu.com/p/985d26b40199

4 对于满屏的背景图适应, 设计稿为750*1334，则比例是750/1334=0.562218891，
当宽/高 > 0.562218891，以高度为基准计算font-size，
反之，以宽度为基准计算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var resize = function () {
  var boundingClientRect = document.documentElement.getBoundingClientRect(),
    winHeight            = document.documentElement.clientHeight || boundingClientRect.height,
    winWidth             = document.documentElement.clientWidth || boundingClientRect.width,
    radio                = winWidth / winHeight;

  if (radio > 0.562218891) { //以高度为基准
    document.documentElement.style.fontSize = (winHeight * 0.562218891) / 750 * 100 + 'px';
    document.documentElement.style.width    = winHeight * 0.562218891 + 'px';
    document.documentElement.style.height   = winHeight + 'px';
  } else {
    document.documentElement.style.fontSize = winWidth / 750 * 100 + 'px';
    document.documentElement.style.width    = winWidth + 'px';
    document.documentElement.style.height   = winWidth / 0.562218891 + 'px';
  }
}

document.addEventListener && (window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', resize, !1),
document.addEventListener('DOMContentLoaded', resize, !1));

判断数组中间有空值

1
/,,/.test(g_answerArr.toString())

用promise处理一个递归的动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let i = 10,
    timer = null;

const draw = (resolve, reject) => {
  if (i === 0) {
    resolve();
    cancelRequestAnimFrame(timer);
  }

  i--;
  console.log(i)

  timer = requestAnimationFrame(draw(resolve, reject));
}


new Promise(draw).then(() => {
    console.log('end')
});