Rjiazhen的博客

Appearance

学习周报 - 2024/2/25 ​

在HTML中使用SVG的方式（可正常执行SVG内部JS代码） ​

How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

最近在研究SVG动画，其中一个难题就是如何让SVG内部的JS代码能正常执行，直接使用<img src="XXX.svg"/>的形式只能是执行CSS样式代码。

如果改为使用<object data="./XXX.svg"></object>，则可以执行SVG内部的JS代码。

甚至，SVG内部还可以通过window.parent.document访问到外部环境，并且将控制SVG内部的相关方法挂载到外部，外部再使用该方法来对SVG进行操作。

例如：

circle.svg:

xml
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="ekg4JmMfD2O1">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id="circle" />
  <script>
    const circle = document.getElementById('circle');
    const outerDocument = window.parent.document;

    const player = {
      _color: 'red',
      get color(){
        return this._color
      },
      set color(value){
        this._color = value
        circle.setAttribute('fill', value)
      }
    }

    // 把player挂载到outerDocument上
    outerDocument.player = player;
  </script>
</svg>

index.html:

html
<html>
  </head>
  <body>
    <form onsubmit="return false">
      <input
        type="color"
        id="colorInput"
      />
      <button onclick="changeColor()">Change Color</button>
    </form>
    <object data="./circle.svg"></object>
  </body>
  <script>
    changeColor = () => {
      const colorInput = document.getElementById('colorInput');
      const player = document.player;
      player.color = colorInput.value;
    };
  </script>
</html>

则可以在网页中修改SVG的填充颜色

Webpack、Rollup、Parcel和Vite的对比 ​

Webpack是前端最常用的构建工具，通过丰富的扩展生态，可以实现HMR、SCSS和less的转换、语法降级等各种功能；

Rollup是一个前端打包工具，专注于代码打包过程；

Parcel也是一个前端打包工具，特点是零配置，甚至可以在开发过程中根据涉及到的文件自动安装不同的扩展；

Vite也是一个前端构建工具，不过是专注于浏览器项目开发，通过利用浏览器的原生的模块引入，可以更实现更快的项目启动和HMR。但是也要注意，Vite的打包功能是由Rollup实现的，不过是Vite团队进行了预配置的（很多功能都是Vite通过内置插件实现的）。

npm create vite命令的原理 ​

"npm create vite" 是怎么实现初始化 Vite 项目？ - 掘金

npm create命令是npm init的别名，在执行这个命令时，如果后面带有<initializer> 参数，则会使用其，则会等同于执行npm exce命令，即

bash
npm create vite

等于

bash
npm exec create-vite

vue-cli、webpack、Vite和create-vite的关系 ​

vue-cli是用来构建Vue2项目的脚手架，其构建出来的项目中已经包含有webpack了，以及其他Vue2项目最佳实践的一些包，

同样的，create-vite对标的就是vue-cli，是用来构建Vue3项目的脚手架，其构建出来的项目中包含有Vite和Vue3项目最佳实践的一些包了。