标签： 编译成

发布于

WebAssembly（Wasm）与JavaScript互操作：探讨如何将C++、Rust等语言编译成`WebAssembly`并在浏览器中运行，实现高性能计算。

WebAssembly 与 JavaScript 互操作：在浏览器中实现高性能计算 大家好！今天我们来聊聊 WebAssembly (Wasm) 与 JavaScript 的互操作，以及如何利用这项技术在浏览器中实现高性能计算。 WebAssembly 简介 WebAssembly 是一种新型的二进制指令集，设计目标是为 Web 应用提供接近原生应用的性能。它不是一门编程语言，而是一个编译目标。我们可以使用 C、C++、Rust 等高级语言编写代码，然后将它们编译成 Wasm 模块，最后在浏览器中运行。 为什么需要 WebAssembly？ JavaScript 在 Web 开发中占据主导地位，但它的性能瓶颈也日益凸显。尤其是在处理复杂的计算密集型任务时，JavaScript 的解释执行方式会带来明显的性能损失。 WebAssembly 的出现正是为了解决这个问题。它具有以下优势： 高性能： Wasm 模块以二进制形式存在，体积小，加载速度快。浏览器可以直接执行 Wasm 代码，无需解释，因此性能接近原生应用。 安全性： Wasm 代码运行在沙箱环境中，无法直接访问底层操作系统资源，保 …

继续阅读“WebAssembly（Wasm）与JavaScript互操作：探讨如何将C++、Rust等语言编译成`WebAssembly`并在浏览器中运行，实现高性能计算。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `WebAssembly`：如何将 `C++` 代码编译成 `Wasm`，并在 `JavaScript` 中调用。

各位老铁，双击666，今天要跟大家唠唠嗑，不对，是聊聊硬核的 WebAssembly。咱们的目标是：把 C++ 代码编译成浏览器能跑的 Wasm，再用 JavaScript 像使唤丫鬟一样使唤它。 第一部分：WebAssembly 是个啥？ WebAssembly (简称 Wasm)，你可以把它想象成一个轻量级的虚拟机，但这个虚拟机不是跑操作系统那种，而是专门跑代码的。它的特点是： 快！ 比 JavaScript 快得多，因为它是编译型的，直接运行机器码。 安全！ 在沙箱里运行，不会直接访问你的电脑。 可移植！ 几乎所有现代浏览器都支持。 简单来说，Wasm 就是为了解决 JavaScript 在性能密集型应用上的不足而生的。比如，游戏、图像处理、音视频编码等等。 第二部分：Emscripten：C++ 到 Wasm 的桥梁 要让 C++ 代码变成 Wasm，我们需要一个工具，这个工具就是 Emscripten。Emscripten 是一个 LLVM 编译器，它可以把 C++ 代码编译成 Wasm 字节码，还能生成一些 JavaScript 代码，方便我们在 JavaScript 中调 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `WebAssembly`：如何将 `C++` 代码编译成 `Wasm`，并在 `JavaScript` 中调用。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`WebAssembly`：如何将`C++`代码编译成`Wasm`。

各位好，欢迎来到今天的“JavaScript内核与高级编程”讲座。今天我们要聊的是一个挺酷炫的话题：WebAssembly，简称Wasm。别被它看起来高大上的名字吓到，其实它就像一个翻译官，能把其他语言（比如C++）写好的代码，翻译成浏览器能高效执行的“机器码”。 咱们的目标是：了解WebAssembly，并学会如何把C++代码编译成Wasm，让它在浏览器里飞起来！ 一、WebAssembly：浏览器里的超级英雄 想象一下，如果你只会说中文，而你的朋友只会说英语，你们怎么交流？是不是需要一个翻译？WebAssembly就扮演着这个翻译的角色。 为什么需要WebAssembly？ 以前，浏览器只能跑JavaScript。JavaScript很灵活，写起来也方便，但执行效率相对较低。如果要做一些计算密集型的事情，比如游戏、图像处理、科学计算，JavaScript就有点力不从心了。 WebAssembly的出现，就是为了解决这个问题。它可以让其他语言编写的代码，以接近原生代码的速度在浏览器里运行。 WebAssembly是什么？ 简单来说，WebAssembly是一种新的二进制格式，它是一种 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`WebAssembly`：如何将`C++`代码编译成`Wasm`。”

发布于

Vue 3源码极客之：`Vue`的`compiler`：如何将`template`中的`v-bind`编译成`props`。

各位靓仔靓女，晚上好！我是今晚的主讲人，咱们今晚的夜宵是Vue 3的compiler，特别是它如何把template里的v-bind变成props的魔法。 别担心，咱们不搞那些高深的理论，直接撸代码，用最接地气的方式，把这玩意儿扒个底朝天。 一、Compiler 概览：从Template到Render Function 首先，咱们得知道compiler是干啥的。简单来说，它就是一个翻译官，把咱们写的template翻译成render function。这个render function最终会生成虚拟DOM，然后Vue会把虚拟DOM渲染成真实的DOM。 这个过程大致可以分为三个阶段： Parsing (解析)：把template字符串变成抽象语法树 (AST)。 Transformation (转换)：对AST进行各种转换和优化，比如处理v-bind、v-if、v-for等等。 Code Generation (代码生成)：把转换后的AST生成render function的代码字符串。 咱们今晚重点关注的是Transformation阶段，特别是v-bind的处理。 二、Parsing …

继续阅读“Vue 3源码极客之：`Vue`的`compiler`：如何将`template`中的`v-bind`编译成`props`。”

发布于

Vue 3源码深度解析之：`Vue`的`uni-app`：它如何将`Vue`编译成多端应用。

大家好！今天咱们来聊聊一个挺有意思的话题，那就是 Vue 3 源码深度解析之：Vue的uni-app，看看这玩意儿是怎么把 Vue 代码“变”成能在各种设备上跑的多端应用的。准备好了吗？咱们这就开始！ 一、开场白：Vue 和 uni-app，一对好基友 各位观众老爷们，咱们写前端，谁还没用过 Vue 啊？简洁、高效、上手快，简直就是前端界的“瑞士军刀”。但是，光有 Vue 还不够啊，你想让你的 App 在 iOS、Android、微信小程序、H5 等等平台都能跑起来，一个个平台适配，那得掉多少头发啊！ 这时候，uni-app 就跳出来了，它就像个“翻译器”，能把你的 Vue 代码翻译成各个平台能理解的“方言”。 二、uni-app 的核心思想：一次编写，多端运行 uni-app 的核心思想就是“一次编写，多端运行”。这句话听起来很美好，但实现起来可不容易。它主要靠的是： 编译器： 把 Vue 代码编译成各个平台的代码。 运行时： 提供一套统一的 API，让你的代码在各个平台都能正常运行。 三、编译器：魔法的起点 uni-app 的编译器是整个流程中最关键的部分，它负责把你的 Vue 代 …

继续阅读“Vue 3源码深度解析之：`Vue`的`uni-app`：它如何将`Vue`编译成多端应用。”

发布于

Vue 3源码深度解析之：`Vue`的`CustomElement`：如何将`Vue`组件编译成`Web Component`。

大家好，我是你们的老朋友Bug终结者，今天咱们来聊点硬核的——Vue 3 源码深度解析之：Vue 的 CustomElement，也就是如何把我们心爱的 Vue 组件变成浏览器原生支持的 Web Component。 准备好了吗？发车！ 一、什么是 Web Component？为啥要和 Vue 搞在一起？ 首先，咱得搞清楚 Web Component 是个啥玩意儿。 简单来说，Web Component 是一套浏览器原生提供的技术，它允许你创建可重用的、封装良好的自定义 HTML 元素。 想象一下，你可以像使用 <button> 或者 <div> 一样，直接在 HTML 里写 <my-awesome-component>，而这个标签背后是你自己定义的一套逻辑和样式。 Web Component 主要有三个核心技术： Custom Elements: 允许你定义新的 HTML 元素。 Shadow DOM: 允许你为你的 Web Component 创建一个独立的 DOM 树，避免全局样式污染。 HTML Templates: 允许你定义可重复使用的 …

继续阅读“Vue 3源码深度解析之：`Vue`的`CustomElement`：如何将`Vue`组件编译成`Web Component`。”