理解前端框架中的运行时和编译时

本文主要阐述前端框架中的运行时和编译时的区别。首先说明本文内容参考书籍 《Vue.js 设计与实现》,并加以自己的理解创作。有错误的地方还请指出。 运行时 运行时就是指代码实际执行时的阶段。前端代码是在浏览器中执行的,换言之,如果一个框架的代码可以直接在浏览器中执行,那它就是一个纯运行时的框架。 举个例子,假设我们设计了一个框架,它提供一个 Render 函数,用户使用时,为该函数提供一个描述 DOM 树形结构的参数对象,然后 Render 函数根据该对象递归地将数据渲染成 DOM 元素。假设规定要传入的对象结构如下: const obj = { tag: "div", children: [ { tag: "span", children: "hello world!", }, ], }; 对象中有两个属性:tag 代表标签名称,children 可以是数组(代表子节点)也可以是文本(代表文本子节点)。然后实现 Render 函数: function Render(obj, root) { const el = document.createElement(obj.tag); if (typeof obj.children === "string") { const text = document.createTextNode(obj.children); el.appendChild(text); } else if (obj.children) { obj.children.forEach((child) => Render(child, el)); } root.appendChild(el); } 现在可以在浏览器环境中调用 Render 函数:...

八月 11, 2023 · 1 分钟 · 212 字 · 瓶子

TypeScript 中 any 和 unknown 的区别

本文简单记录一下 any 和 unknown 的区别。 相同点:any 和 unknown 可以是任何类的父类,即任何类型的变量都可以赋值给 any 类型的变量或者 unknown 类型的变量,例: // any let anyVal: any; anyVal = 1; anyVal = "hello"; anyVal = true; anyVal = null; anyVal = undefined; anyVal = []; anyVal = {}; anyVal = function () {}; // unknown let unknownVal: unknown; unknownVal = 1; unknownVal = "hello"; unknownVal = true; unknownVal = null; unknownVal = undefined; unknownVal = []; unknownVal = {}; unknownVal = function () {}; 不同点...

四月 7, 2023 · 1 分钟 · 156 字 · 瓶子

新的脚本,自动部署 Hugo 博客至服务器

之前写过一篇 通过 Github Actions 实现 Hugo 博客的自动构建部署,现在感觉部署脚本写的有点复杂了,所以重新写了一个脚本,简化了不少,内容如下: name: Auto Deploy on: push: branches: - main pull_request: jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 with: submodules: true # Fetch Hugo themes (true OR recursive) fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: "0.110.0" extended: true - name: Build run: hugo --minify - name: Rsync Deployments Action uses: Burnett01/rsync-deployments@5.2.1 with: switches: -avzr --delete path: ./public/ remote_path: # 填服务器部署目录 remote_host: # 填服务器IP地址 remote_port: # 填端口号,一般就是 22 remote_user: # 填服务器用户名 remote_key: ${{ secrets....

三月 19, 2023 · 1 分钟 · 90 字 · 瓶子

通过 Github Actions 实现 Hugo 博客的自动构建部署

玩过静态博客的人都知道,写一篇文章的过程远不如动态博客那么方便,每次写完文章部署时,都需要重新构建整个站点文件,然后再重新上传到网站服务器。这种方式过于繁琐,影响写博客的心情,所以需要更自动的方式,这里我推荐 Github Actions。 目前我这个博客是采用 Hugo 搭建的,并部署在阿里云 ECS 云服务器上的。而整个构建发布过程我都是利用 Github Actions 帮我完成的,个人觉得很方便,所以记录下来,有需要的可以参考一下。 服务器准备 安装 nginx,配置 web 服务器目录 因为本文是介绍部署到服务器,所以需要准备一个服务器的。然后部署 Web 站点是通过 nginx 的,你可以自己安装配置 nginx,也可以通过宝塔这样的程序来简易安装,总而言之,你都会得到一个网站静态文件存放的目录,这个目录其实就是存放博客构建之后的文件的。我是自己安装 nginx 并配置目录的: 之所以强调这个目录,是因为我们后面要用到它。不熟悉命令行操作的,推荐使用宝塔,会自动帮你配置好。 服务器配置公钥 一般使用过 git 的,你的电脑上都会有一个公钥和私钥,是用来连接远程仓库的。没有也没关系,他们是通过以下命令创建的: ssh-keygen -t rsa -C "youremail@example.com" // 后面填你自己的邮箱 找到你电脑本地已经创建好的公钥,Mac 和 Linux 系统上一般在 ~/.ssh 目录中,Windows 系统一般也在用户目录中的 .ssh 目录中。 id_rsa.pub 是公钥,id_rsa 是私钥,现在要将公钥内容拷贝一份到服务器上。不管是手动复制粘贴还是命令形式都好,你要做的就是将本地的 id_rsa.pub 文件内容拷贝到服务器的 ~/.ssh/authorized_keys 文件中,如果服务器没有这个文件,按照路径创建一个。 这一步的目的是为了后面让 Github Actions 服务器能免密访问我们自己的服务器,具体后面会说到。 其实服务器配置了公钥后,我们自己的电脑也可以免密访问服务器,可以参考我写的一篇文章:mac 上配置 ssh 免密登录服务器 上传博客代码到 gtihub,配置私钥 既然是利用 Github Actions,那我们的代码肯定是要放在 Github 上了,不过需要注意的是存放的代码不是构建好的博客代码,而是完整的博客程序代码,因为构建过程我们也交给了 Github Actions。 创建的代码仓库不管是公开库还是私密库都可以,过程我就不细述了。仓库建好之后,我们要配置一下私钥,按照下图操作:...

二月 24, 2022 · 2 分钟 · 422 字 · 瓶子