js 杂乱记录

元素是否在可视区

// 判断元素是否在可视范围内
// partiallyVisible 为是否为完全可见
export function elementIsVisibleInViewport(el, partiallyVisible = false) {
  const {
    top,
    left,
    bottom,
    right
  } = el.getBoundingClientRect();

  return partiallyVisible ?
    ((top > 0 && top < innerHeight) ||
      (bottom > 0 && bottom < innerHeight)) &&
    ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
    top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}

pageshow事件

// removeEventListener(evNmae, fnName)
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/copy_event

window.addEventListener('pageshow', function(event) {
    console.log('after , pageshow :',event);
});
window.addEventListener("pagehide", event => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
}, false);
window.addEventListener('load', function() {
    console.log('before');
});

鼠标点位置

1. 相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致。

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.screenX,'y':screenY}
}
2. 相对浏览器窗口

简单代码即可实现,然而这是还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,event的clientX,clientY属性分别表示鼠标点击位置相对于文档的左边距,上边距。于是类似的我们写出了这样的代码

function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.clientX,'y':clientY}
}
3. 相对文档

简单测试也没什么问题,但是clientX与clientY获取的是相对于当前屏幕的坐标,忽略页面滚动因素,这在很多条件下很有用,但当我们需要考虑页面滚动,也就是相对于文档(body元素)的坐标时怎么办呢?加上滚动的位移就可以了,下边我们试试怎么计算页面滚动的位移。

其实在Firefox下问题会简单很多,因为Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了。

在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}

git资源项目收集

1,el-table 二次封装 https://lq782655835.github.io/el-table-plus/
2,基于vuecli的自定义脚手架 
  https://github.com/cloud-templates/vue-preset/tree/main/generator
3,https://github.com/heyui/heyui  //heyui
1,https://github.com/mudin/vue-vr // gl vr 全景
2,https://github.com/mirari/vue-fullscreen // 全屏
3,https://github.com/hujiulong/vue-3d-model // 3d模型加载操作

修改当前url携带参数

window.history.replaceState('', '', newUrl)
router.replace({ query: {} })

滚动加载,数据过多时,优化

1, 每次滚动加载,把之前的数据display:none
2, 滚动到顶部时,把前面一页的数据display:block
3, 利用getBoundingClientRect().top 是否小于0,判断元素是否需要none和block.
4, 渲染时给每一页的数据dom加上当前页数的标记。

高德地图轨迹回放

_trackPlay() {
      const speed = [
        {
          value: 400,
          label: '0.5x'
        },
        {
          value: 200,
          label: '标准'
        },
        {
          value: 100,
          label: '2x'
        },
        {
          value: 50,
          label: '4x'
        },
        {
          value: 25,
          label: '8x'
        },
        {
          value: 12,
          label: '16x'
        },
        {
          value: 6,
          label: '32x'
        },
        {
          value: 1,
          label: '64x'
        }
      ]
      const lineArr = [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482072, 39.997718],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861]
      ]
      this.lineArr = lineArr
      this.gaodeMap.setFitView()
      this.gaodeMap.setZoomAndCenter(17, lineArr[0])
      // this.gaodeMap.setZoomAndCenter(19, path[0]);
      this.startMarker = new AMap.Marker({
        position: [116.478935, 39.997761],
        icon: require('@/assets/images/nanten/ticon.png'),
        // icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
        offset: new AMap.Pixel(-15, -37)
      })

      this.gaodeMap.add(this.startMarker)

      const polygon = new AMap.Polyline({
        strokeColor: '#3366FF',
        strokeOpacity: 0.9,
        showDir: true,
        strokeWeight: 8,
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
        path: lineArr
      })
      this.gaodeMap.add(polygon)

      this.passedPolyline = new AMap.Polygon({
        strokeColor: '#4ab9bc', // #4ab9bc
        strokeWeight: 8
      })
      this.gaodeMap.add(this.passedPolyline)

      this.startMarker.on('moving', e => {
        this.passedPolyline.setPath(e.passedPath)
        // this.isEnd = e.progress
        if (e.progress >= 1) {
          this.isEnd += 1
          // console.log(this.isEnd)
        }
      })

      this.startMarker.moveAlong(lineArr, {
        duration
      })
      // this.startMarker.pauseMove()
    }
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。