浅谈前端框架中的DSL

最新推荐文章于 2025-01-10 10:15:35 发布

张子虚

最新推荐文章于 2025-01-10 10:15:35 发布

阅读量3.2k

点赞数

分类专栏： JavaScript React 编程浅谈

本文链接：https://blog.youkuaiyun.com/ccaoee/article/details/116785436

版权

本文探讨了前端框架如Vue和React中DSL（领域特定语言）的应用，强调DSL在描述界面时的优势，如可扩展性和易读性。通过对比Vue和React，展示了如何在React中实现类似Vue的DSL功能，例如if[Hidden]、Switch和Match组件，并指出DSL有助于减轻开发者的心智负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

一个普通的web网站应用使用 html、xhml 等更具描述能力的 external dsl（domain-specific language）来描述界面，然后使用javascript代码来解决界面上的一些逻辑问题，使用css来描绘界面的样式。这些 external dsl 用于将数据配置跟代码逻辑分离开来

一些现代语言加入了 internal dsl 这种东西，它赋予你在代码中写 dsl 的能力：比如jsx语法，vue语法。就是在javascript中使用类似于 html 的语法。

前端编程界的趋势是将 external dsl 混写 javascript 这类着重表达逻辑的语言里面。

分享一段flutter dart代码：

// 这段代码可以类比于`React.createElement`
class Drawer extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Drawer(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                DrawerHeader(
                    decoration: BoxDecoration(color: Colors.green),
                    child: Padding(
                    padding: const EdgeInsets.only(bottom: 20),
                    child: Icon(
                        Icons.account_circle,
                        color: Colors.green.shade800,
                        size: 96,
                    ),
                    ),
                ),
                // Long drawer contents are often segmented.
                Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Divider(),
                ),
                ListTile(
                    leading: SettingsTab.androidIcon,
                    title: Text(SettingsTab.title),
                    onTap: () {
                    Navigator.pop(context);
                    Navigator.push<void>(context,
                        MaterialPageRoute(builder: (context) => SettingsTab()));
                    },
                ),
                ],
            ),
        )
    }
}

从上面的Dart代码可以看出，使用OO的编程语言去描述界面，会显得代码语义不够直观(请注意BoxDecoration, Padding的使用)。

因此，描述界面我们更倾向于专门使用描述性质的语言，描述性语言可拓展性好，对人类友好，结构清晰易读。比如xml，从这个角度来看待React组件中的render方法，和Vue组件中的<template></template>就发现一切都明了了起来。