为什么只在客户端使用{ },而不在Node.js中使用?

阅读时长 3 分钟读完

背景

在前端开发中,我们经常会看到在Vue或React等框架中使用大括号 {} 来绑定变量。例如:

-- -------------------- ---- -------
----------
  ------- ------- --------
-----------

--------
------ ------- -
  ------ -
    ------ -
      -------- ------- -------
    -
  -
-
---------

这样就可以将 message 变量的值插入到模板中展示出来。

然而,在Node.js中我们很少看到这种用法。例如,在Express中,我们会使用模板引擎(如EJS)来渲染视图,但是不会使用类似Vue中的大括号。

这里的 { title: 'Express' } 不同于Vue中的大括号,它只是一个普通的JavaScript对象,其中的属性会被传递给模板引擎进行渲染。

那么,为什么在客户端中使用 {} 是很常见的,而在Node.js中却很少使用呢?下面我们来深入探讨一下。

原因

客户端与服务器端的职责不同

首先,客户端和服务器端的职责是不同的。在客户端,HTML、CSS和JavaScript工作在同一个环境中,都是用来渲染页面和交互的。而对于服务器端,主要是负责处理请求和返回响应,生成动态内容(如通过模板引擎渲染视图)是其中的一部分。

因此,在客户端中使用 {} 是非常自然的,因为它可以很方便地将变量绑定到HTML元素上,实现数据驱动视图的目的。而在服务器端中,生成动态内容并不是它的主要职责,因此也没有必要使用类似Vue中的大括号这样的语法。

安全性

另一个原因是安全性。在客户端,用户可以轻松地修改和注入JavaScript代码,因此使用 {} 这样的语法是比较安全的,因为它只能访问当前作用域中的变量。

而在服务器端,模板引擎通常会将传递给它的数据解析成HTML,如果直接使用 {} 语法的话,很容易导致XSS攻击(跨站脚本攻击),因为恶意用户可以在参数中注入JavaScript代码,从而进行攻击。

因此,使用类似EJS这样的模板引擎,在解析数据时可以对其进行转义和过滤,从而更好地保障了安全性。

指导意义

在实际开发中,我们应该根据具体情况选择合适的技术和工具。如果是客户端开发,使用 {} 这样的语法可以很方便地实现数据驱动视图的目的;而在服务器端,由于安全性等因素考虑,建议使用模板引擎等工具来生成动态内容。

同时,在使用模板引擎时,也要注意对传递给它的数据进行转义和过滤,以防止XSS等攻击。

示例代码

在Vue中使用{ }

-- -------------------- ---- -------
----------
  ------- ------- --------
-----------

--------
------ ------- -
  ------ -
    ------ -
      -------- ------- -------
    -
  -
-
---------

在Express中使用模板引

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/9945

纠错
反馈