js/ts 杂乱记录 - 前端笔记 JSRUN

小东西

ts接口等

// 通用对象接口
interface elObj {
  src: string,
  type: string,
  videoNo: string,
  carNum: string,
}
// 通用数组接口
interface arrEl extends Array<elObj> {
  [index: number]: elObj,
}

原生路由跳转

window.history.pushState('', '浏览器帮助', path)

vite

// 获取环境信息
console.log(import.meta.env)
// 批量获取文件便于自动注册
// ./content/*.js // ./*.vue匹配模式
import.meta.glob 为动态导入
import.meta.globEager 为直接引入
const files = import.meta.glob('./*.vue')
组件注册
// const files = import.meta.glob('./*.vue') // 动态
// globEager 直接引入
import { createApp } from 'vue'
const app = createApp()
const files = import.meta.globEager('./*.vue')
Object.keys(files).forEach(path => {
  if (!path) return
  const component = files[path].default
  const [name] = path.split('.vue')[0]?.split('/').slice(-1)
  console.log(name, component)
  app.component(name, component)
})

web tab建移动焦点

给需要的元素添加，tabindex属性

混合开发js桥 https://github.com/ionuv/s-bridge/tree/master/src/api

import dsBridge from 'dsbridge'

// 拍照
const takePhoto = (options) => {
  if(typeof(options) === 'object') {
    options['type'] = 'camera'
    return photoswithOptions(options)
  }else {
    return photos('camera')
  }
}

// 打开相册获取图片
const getPhotos = (options) => {
  if(typeof(options) === 'object') {
    options['type'] = 'photo'
    return photoswithOptions(options)
  }else {
    return photos('photo')
  }
}

// 默认参数调起相机或者相册
const photos = (type) => {
  return new Promise((resolve, reject) => {
    dsBridge.call('b.photos', type, (res) => {
      resolve(res)
    })
  })
}

const photoswithOptions = (options) => {
  return new Promise((resolve, reject) => {
    dsBridge.call('b.photoswithOptions', options, (res) => {
      resolve(res)
    })
  })
}

const photo = {
  takePhoto,
  getPhotos
}

export default photo

css fixed 有时不生效。原因，所在父元素使用了transform属性。

元素是否在可视区

// 判断元素是否在可视范围内
// 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()
    }