如何转换（打包）

• webpack
• rollup
• esbuild
• turbopack
• snowpack
• grunt
• gulp
• Rspack

{
  "script": {
    "serve": "webpack serve",
    "build": "webpack --mode-production"
  }
}

开发服务器 webpack serve websocket hmr webpack webpack-dev-server

webpack 配置

// copy-webpack-plugin
module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "js/app-[contenthash:5].js",
    assetModuleFilename: "assets/[hash:5][ext]",
    chunkFilename: "js/chunk-[contenthash:5].js",
    // publicPath:'./',
    clean: true,
  },
  target: "web",
  devtool: "source-map",
  devServer: {
    port: 8080,
    //static:'./dist',
    proxy: {},
  },
};

• 构建荣俱

• 脚手架

  vue-cli vite cra umijs

• npm create vite@latest

• vue-cli 模板 https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue

运行打包后的图片路径

• vite 自动转换路径

  css 的静态路径 img 中的 src(静态路径) import()语句

  import(`./assets/${val}.jpg`).then((res) => {
    path.value = res.default;
  });
  

  URL

  const url = new URL(`./assets/${val}.jpg`, import.meta.url);
  

触发菜单行为

function useContextMenu(container) {
  const x = ref(0);
  const y = ref(0);
  const showMenu = ref(false);
  const openMenu = (e) => {
    e.preventDefault();
    showMenu.value = true;
  };
  const closeMenu = () => {
    showMenu.value = false;
  };
  onMounted(() => {
    container.addEventListener("contextmenu", openMenu);
    window.addEventListener("click", closeMenu, true);
    window.addEventListener("contextmenu", closeMenu, true);
  });
  onUnmounted(() => {
    container.removeEventListener("contextmenu", openMenu);
  });
}
// --------------------------------

function handleBeforeEnter(el) {
  el.style.height = 0;
}

function handleEnter(el) {
  el.style.height = "auto";
  const h = el.clientHeight;
  el.style.height = 0;
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      el.style.height = h + "px";
    });
  });
}

function handleAfterEnter(el) {
  el.style.transition = "none";
}

瀑布流

var divcontainer = document.getElementByid("container");
var imgWidth = 220; // 每张图片的固定宽度

function createImgs() {
  for (var i = 0; i <= 40; i++) {
    var src = "img/" + i + ".jpg"; //生成图片的src路径
    var img = document.createElement("img");
    img.onload = setPosions;
    img.src = src; //设置src路径
    divContainer.appendChild(img); // 添加到容器中
  }
}
createImgs();

intersection Observer 交叉监听

const ob = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        // 取消交叉监听
        ob.unobserve(img);
        // const vdo = entry.target;
        // vdo.play();
        // vdo.pause();
      }
    }
  },
  {
    threshold: 0,
  }
);

const imgs = document.querySelectorAll("img");
imgs.forEach((img) => {
  ob.observe(img);
});

ob.observe(document.querySelector("video"));

判断离线还是在线

navigator.connection;
// downlink:3.1
// effectiveType:'4g'
// onchange:null
// rtt:300
//saveData:false

window.addEventListener("online", undateInfo);
window.addEventListener("offline", undateInfo);
navigator.connection.addEventListener("change", updateInfo);

图片转 base64

• data url

• mime

  text/plain application/json application/javascript text/html image/png

<!-- 例如 -->
<img src="data:image/png;base64,xxx" />
<script src="data:application/javascript,alert(123)"></script>
<script src="data:application/javascript;base64,alert(123)"></script>

btoa('alert("123")');
atob(btoa('alert("123")'));

// 图片转base64
const inp = document.querySelector("input");
inp.onchange = function () {
  const file = inp.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    // console.log(e.target.result);
    preview.src = e.target.result;
  };
  reader.readAsDataURL(file);
};

精度问题

(0.2).toPrecision(100);