前端一些技巧收集

1、搭建本地静态页面服务 或 本地运行vue、react打包后的代码

A、http-server

• 全局按照 http-server

npm i -g http-server

• 用法

http-server [path] [options]

path 默认指向工程路径下的./public，如果不存在那么使用./

options就是常见的配置，比如端口、代理地址等，常用配置：

• -p 或 --port 设置端口 默认：8080
• -P(大写) 或 --proxy 设置代理地址
• -o 默认打开浏览器
• -a 设置访问地址 默认： 0.0.0.0 eg: cmd进入静态目录工程

http-server ./ -o --port 8085 --proxy http://192.168.11.120:8888/

2、滚动穿透

在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动 滚动穿透的6种解决方案【已自测】 - xing.org1^ - 博客园 (cnblogs.com)

3、 滚动的方法

window.scrollTo({ top: top - 60, behavior: 'smooth' })
scroll-into-view

4、随机数生成

nanoid

5、dom元素大小监听

@reach/observe-rect
resize-observer-polyfill

6、拖动的库

Sortable.js中文网 (sortablejs.com)

SortableJS

7、轻量级模糊查询

vue中轻量级模糊查询fuse.js使用_

npm install fuse.js
import Fuse from 'fuse.js'
//初始化搜索引擎 
const init_search = (list) => {
  fuse.value = new Fuse(list, {
    shouldSort: true,  //是否按分数对结果列表排序
    threshold: 0.4,    //匹配算法阈值。阈值为0.0需要完全匹配（字母和位置），阈值为1.0将匹配任何内容。
    location: 0,    // 确定文本中预期找到的模式的大致位置。
    distance: 100,
    minMatchCharLength: 1, // 模式的最大长度
    //搜索标题与作者名
    keys: [{
      name: 'title',
      weight: 0.7    //设置权重
    }, {
      name: 'author.firstName',
      weight: 0.3    //设置权重
    }]
  })
}

8、文字逐个显示的动效

   "typed.js": "^2.0.16",