js 特效代码—js特效怎么使用方法 收藏 0

JSX、TSX、JS、TS：前端代码“四兄弟”，傻傻分不清？一文全解！

哈喽，各位前端同仁！在前端开发的世界里，我们每天都与各种代码打交道，其中 JSX、TSX、JS 和 TS 这四个家伙经常会让我们傻傻分不清。它们之间有什么关系？又有什么区别呢？今天，我们就来彻底梳理一下这四者的关系，让你不再迷茫！

JS：JavaScript，前端世界的基石

首先，我们来说说 JS (JavaScript)。JS 是一种动态的、弱类型的脚本语言，它是前端开发的核心语言，几乎所有前端框架和库都基于 JS 构建。

JS 的特点：

• 动态类型： 变量的类型在运行时确定，不需要提前声明类型。
• 弱类型： 变量可以赋值为不同的类型，类型转换比较灵活。
• 解释型语言： JS 代码在浏览器中逐行解释执行。
• 广泛应用： JS 可以用于前端开发、后端开发、移动开发等多个领域。

JS 的例子：

TS：TypeScript，JS 的超集

接下来，我们来说说 TS (TypeScript)。TS 是 JS 的一个超集，它在 JS 的基础上添加了静态类型检查功能。TS 代码最终会被编译成 JS 代码，然后在浏览器中执行。

TS 的特点：

• 静态类型： 变量的类型在编译时确定，需要提前声明类型。
• 强类型： 变量的类型一旦确定，就不能随意修改，类型转换需要显式进行。
• 编译型语言： TS 代码需要通过 TypeScript 编译器编译成 JS 代码。
• 类型安全： TS 可以在开发时发现类型错误，提高代码质量和可维护性。

TS 的例子：

JSX：JavaScript 的 XML 扩展

JSX (JavaScript XML) 是一种 JS 的语法扩展，它允许我们在 JS 代码中编写类似 HTML 的结构，主要用于 React 开发。

JSX 的特点：

• 声明式 UI： 通过 JSX，我们可以像描述 UI 结构一样编写代码。
• JS 表达式： JSX 支持使用 JS 表达式，可以动态生成 UI。
• React 专属： JSX 主要用于 React 项目中，其他框架一般不使用 JSX。
• 编译为 JS： JSX 代码需要通过 Babel 等工具编译成标准的 JS 代码。

JSX 的例子：

TSX：TypeScript 的 JSX 扩展

TSX (TypeScript XML) 是一种 TS 的语法扩展，它在 JSX 的基础上添加了类型检查功能。TSX 代码可以被 TypeScript 编译器编译成 JS 代码。

TSX 的特点：

• 类型安全： TSX 支持 TypeScript 的类型系统，可以在编译时进行类型检查。
• 类型化的 React 组件： TSX 可以提供更好的代码提示和自动补全功能。
• 编译为 JS： TSX 代码需要通过 TypeScript 编译器编译成标准的 JS 代码。
• TypeScript 专属： TSX 主要用于 TypeScript 项目中。

TSX 的例子：

四者的关系：

• JS 是基础，所有前端代码最终都会变成 JS 代码运行。
• TS 是 JS 的超集，它添加了静态类型检查功能，可以提高代码质量。
• JSX 是 JS 的扩展，它可以让我们在 JS 中编写类似 HTML 的结构，主要用于 React 开发。
• TSX 是 TS 的扩展，它在 JSX 的基础上添加了类型检查功能，用于 TypeScript 的 React 开发。

总结：

• JS： 前端开发的基石，动态、弱类型。
• TS： JS 的超集，静态、强类型，可以提高代码质量。
• JSX： JS 的 XML 扩展，用于编写 UI 结构。
• TSX： TS 的 JSX 扩展，用于类型安全的 UI 开发。

选择哪一个？

• 如果你正在使用纯 JavaScript 开发项目，那么你只需要使用 JS 和 JSX。
• 如果你正在使用 TypeScript 开发项目，那么你应该使用 TS 和 TSX。
• 如果你是初学者，建议先学习 JS，然后再学习 TS，这样更容易理解 TS 的优势。

结尾：

希望这篇文章能帮你更好地理解 JSX、TSX、JS 和 TS 之间的关系。如果你觉得这篇文章对你有帮助，请点赞、评论、收藏，也欢迎分享给你的朋友们。让我们一起在前端的道路上越走越远！

任由文字肆意流淌，更自由的开源 Markdown 编辑器

对于创作平台来说内容编辑器是十分重要的功能，强大的编辑器可以让创作者专注于创作“笔”下生花。而最好取悦程序员创作者的方法之一就是支持 Markdown 写作，因为大多数程序员都是用 Markdown 来写文章。

Markdown 作为程序员写作的心头爱，有很多优点：

• 通过语法实现排版，不需要点选手动设置样式
• 快速实现复杂内容，如：代码块、超链接、公式等
• 让创作者有更多时间专注于内容

但，同样的也有些缺点：

• 有一定的学习门槛，对于非程序员不太友好
• 看原文档就像看“代码”，预览效果需要工具或编辑器支持

那有没有能够即保留 Markdown 带来的便利，同时又降低门槛的办法呢？大多数老玩家会脱口而出：Typora

Typora 直接使用完全没有问题，但由于它没有开源。如果想在自己的项目实现类似的 Markdown 编辑器，就需要另寻方案了。

如果你正在寻找功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件，就请花 5 分钟读完本文！

接下来 HelloGitHub 带来的开源项目完全满足上述需求。Milkdown 一款高颜值+自由（插件）的所见即所得，集合 Markdown 编辑器、组件、插件于一身的开源项目。

https://github.com/Saul-Mirone/milkdown

你想要的功能它都有，不要的功能也可以通过删减插件，减少体积。插件的设计思想+完善的中文文档，让你分分钟定制出最适合自己的 Markdown 编辑器！

下面跟着项目作者一起来感受 Milkdown 的魅力吧。

下面提供了 2 种方式，可直接体验：

在线尝试：https://milkdown.dev/#/online-demo

VS Code 插件：https://marketplace.visualstudio.com/items?itemName=mirone.milkdown

方便的编写表格：

直接粘贴和复制 Markdown 文本：

甚至协同编辑：

双栏 Markdown 编辑器很常见。但 双向绑定 的 Markdown 编辑器，目前仅此一家：

功能方面就介绍这么多，下面用 Milkdown 轻松实现个编辑器。

Milkdown 的核心以及各种插件都是独立的 NPM 包，可以直接通过 NPM 来进行安装。

上手也十分简单：

我们先使用 make 来初始化编辑器，然后使用 use 来加载插件，最后使用 create 来创建编辑器。

插件是 Milkdown 的核心，它本质上就是一个插件加载器，一切功能都是通过插件来提供的。表格是一个插件、主题是一个插件、甚至一行简单的文本也是一个插件。

目前官方已经提供了许多插件，确保可以开箱即用。下面仅列举了部分插件：

也可以自己动手编写插件，更多详情

Milkdown 基于下面的工具实现：

• Prosemirror：一个用于在 web 端构建富文本编辑器的工具包
• Remark：正确的 Markdown 解析器
• TypeScript：以 TypeScript 编写
• Emotion：用于构建样式的强大的 css in js 工具
• Prism：代码块支持
• Katex：高性能的渲染数学公式

富文本编辑器本身是一个天坑。虽然 ContentEditable 看起来很美好，但实际用起来就会发现问题层出不穷。因此我们基于 Prosemirror 来实现富文本编辑器。因为它足够成熟、久经工业的锤炼，并且拥有良好的架构和 API 设计。

Prosemirror 的核心逻辑其实类似于 React，它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系，如图：

编辑器通过 EditorState 来保存当前状态，并由 EditorState 产生出 EditorView，即 UI 视图。 用户在 UI 视图上进行的操作最终会产生 DOM event，例如：input 事件、click 事件。DOM event 事件会产生 Transaction，代表了对 State 的修改，类似于 Redux 或 Vuex 中的 Action。 这些 Transaction 会与原来的 EditorState 进行计算，产生新的 EditorState，如此循环。

Prosemirror 通过这样的方式将编辑器中的每个状态以 EditorState 的方式保存了下来，它是一颗树状结构。而有一点编译原理基础的朋友都知道，任何编程语言都有对应的 AST（抽象语法树）。因此我们需要的就是建立 Prosemirror 中的 EditorState 与 Markdown 的抽象语法树之间的联系。 Remark 完美契合我们的需求，因为它有设计良好的 AST，并且易于扩展自己的语法。

这样一来 Milkdown 的架构也逐渐清晰：

Markdown <-> Remark AST <-> Prosemirror State <-> UI

在开始这个项目前，我尝试过各种各样的 Markdown 编辑器，但没有找到一款特别满意的。因为它们都是闭源，而且功能由开发商提供，有的功能太过于臃肿、有的又太过简单。 既然这样，我索性自己做一款能够轻松定制功能，非程序员也能轻松使用的 Markdown 编辑器，也就有了大家看到的 Milkdown。

希望开源的 Milkdown 让用户有更自由的选择，打破 Markdown 编辑器的“垄断”。开源不易如果 Milkdown 对您有帮助，也请给个 Star✨。

最后，感谢 HelloGithub 的支持和帮助。Milkdown 先是有幸入选了 第 65 期 月刊，然后受邀合作了这篇文章，让更多人知道我的开源项目。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com