为什么现代前端拒绝原生编程？组件化与框架的降维打击

作者 3Katrina

2025年6月4日 16:51

📖前言

在曾经的年代，前端工程师被戏称为“切图仔”，它们拿着低人一等的工资和待遇，默默地承受着一切...直到后来，Ajax、Node.js、Vue、React等技术的不断涌现，前端迎来了黎明，这些技术不仅给前端带来了技术上的提升，还带来了前端地位的改变，今天我们就来详细聊聊其中一部分，前端是如何由原生CSS到如今的组件化开发，前端是如何由原生DOM编程到如今的各大框架各显神通！

原生CSS

请大家想一想，我们想要将以下的表格进行装饰，让它看起来更加美观整洁，其中的内容排列更加有序，我们该如何实现？🤔🤔🤔

<div class="container">
    <table id="friends" >
    <thead>
        <tr>
            <th>姓名</th>
            <th>家乡</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>小李</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>小邓</td>
            <td>深圳</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>北京</td>
        </tr>
    </tbody>
    </table>
    </div>

如果是曾经在写CSS时，我们只能通过手动去加边框，调整边框粗细大小，加背景色，调整文字大小排列......

 <style>
        /* 表格整体样式 */
        #friends {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            margin: 20px 0; /* 上下边距 */
        }

        /* 表头样式 */
        #friends th {
            background-color: #f8f9fa; /* 浅灰背景 */
            color: #212529; /* 深灰文字 */
            padding: 12px; /* 内边距 */
            text-align: left; /* 文本左对齐 */
            border-bottom: 2px solid #dee2e6; /* 底部粗边框 */
        }

        /* 表格行样式 */
        #friends tr {
            height: 48px; /* 行高 */
        }

        /* 表格行悬停效果 */
        #friends tr:hover {
            background-color: #f1f3f5; /* 悬停时背景色 */
        }

        /* 表格单元格样式 */
        #friends td {
            padding: 12px; /* 内边距 */
            border-bottom: 1px solid #dee2e6; /* 底部细边框 */
        }
    </style>

可以看到，这样虽然可行，但却十分的麻烦，特别是在大型项目中，我们应该把时间和精力放在业务中，而不是如何实现CSS样式这样的细枝末节！于是组件化开发应运而生！

组件化开发

当我们引入组件库bootstrap后，你会发现，实现表格美化的效果只需要直接改个类名即可！😎😎😎

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  //引入组件库

<table id="friends" class="table table-striped">  //添加类名：table-striped

你能看到，无需我们自己写CSS，我们只需要复用组件库中的CSS样式，通过引入该组件库，就能轻松地完成效果！

实现效果截图

实际上，组件库就是通过封装可复用的标准化组件，提升开发效率、降低协作成本的，现在市面上有各式各样的组件库，每个组件库有非常多的组件任我们挑选，而且每家公司也有自己专门的组件库，例如微信的WEUI，饿了么的Element等，每家公司通过自己的组件库可以达到统一产品体验的效果

Element截图

WEUI截图

VUE & REACT

上面我们了解到，使用组件库可以让我们使用组件库里的组件，无需使用原生的方式自己写CSS，从而提升了开发效率，让我们能更专注于业务。

那么同样是为了专注于业务，我们在JS的DOM编程中是否可以这样做呢？🤔🤔🤔

原生JS的DOM编程

请看下面的代码，我们想要将JS中的JSON数组数据给放在HTML的thead标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div class="container">
    <table id="friends" class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>家乡</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    </table>
    </div>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
    const oBody = document.querySelector('#friends tbody')
    //DOM 编程 动态的 数据
    const friends = [
        {
            "name": "王子恒",
            "hometown": "九江"
        },
        {
            "name": "刘红",
            "hometown": "赣州"
        },
    ];
    // html 字符串 = 数组.join 类型转换 
    oBody.innerHTML = friends.map(friend => 
        `
            <tr>
                <td>${friend.name}</td>
                <td>${friend.hometown}</td>
            </tr>
        `
    ).join('')
    </script>
</body>
</html>

如果是曾经，我们只能通过这种复杂的方式，使用DOM编程，通过map函数得到HTML字符串，再通过join转换最终放在tbody标签中。

这种方式是十分正确的，你还可以通过不同的方式来实现相同的效果，如果你是技术大佬，你能使用更高阶的算法，原生API，来实现，非常牛逼！

但请你仔细想想，在业务中，我们应该把时间和精力放在这上面吗？虽然有些场景下，你确实需要做到很多极致的优化，但大多数情况下我们是不是应该主要专注于业务的逻辑？而不是这些具体的实现，况且很多情况下，使用这种原生API的DOM编程会产生大量的重复工作，这会占据我们开发的大部分时间。所以我们的现代前端开发不应该接受这种DOM编程来实现我们实际的业务

大人，时代变了！

VUE和REACT双子星的横空出世

在2013-2015年，诞生出了VUE和REACT这对双子星，可以说它们的出现改变了前端的历史长河，使前端开发人员从黑暗中看到了黎明的光！

框架的作用

VUE和REACT都是前端的框架，它们都能解决我们上述的原生DOM编程的问题，让我们无需再使用麻烦的DOM编程来实现上面的效果：将JS里的JSON数组放在HTML的tbody中。

我们就拿VUE来举例，下面是使用VUE实现上述效果的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚焦于业务，而不是底层API</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
    <div class="container" id="app">

        <h1>{{ title }}</h1>
        <!-- 挂载点 -->
         <header></header>
        <table id="friends" class="table table-striped">
        <thead>
            <tr>
                <th>姓名</th>
                <th>家乡</th>
            </tr>
        </thead>
    
        <tbody>
            <tr v-for="friend in friends">
                <td>{{ friend.name }}</td>
                <td>{{ friend.hometown }}</td>
            </tr>
        </tbody>
        </table>
    </div>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
    <script>
    const App = {
        // 申明数据的业务
        data(){
            return {
                title: 'ECUT 未来之星',
                friends: [
                {
                    "name": "王子恒",
                    "hometown": "九江"
                },
                {
                    "name": "刘红",
                    "hometown": "赣州"
                },
                ],
                  
            }
            
        }
    }
    // 挂载点 
    Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

你会发现，只需要一个挂载点就能将我们想要的数据给绑定到指定的位置

实现效果

下面是两种实现方式的区别

需求	原生 JS 实现	Vue 实现
数据绑定到 HTML	手动操作 DOM（如 `innerHTML`）	自动绑定（`{{ }}` 或指令）
动态列表渲染	拼接字符串 + 循环插入	`v-for` 一键循环
数据更新同步视图	需手动重新渲染	响应式（自动更新）

是不是发现，Vue的实现更加简洁、优雅。

所以当尤雨溪发布了Vue之后，就得到了企业以及民间广泛使用，大家都对这个高效的框架认可，因为它足够强大，能够帮我们显著的提升开发效率！同样React也是，这两个框架都是非常健壮的框架，值得我们去仔细学习！

🎯总结

本文介绍了前端技术由原生开发的刀耕火种到组件化、Vue、React的全新时代，让由于本文是理论性文章，旨在表达Vue、React和组件化的历史与变化，所以就没有详细介绍Vue和React的具体技术点，大家如果想详细了解这两个框架的具体技术实现，推荐大家去阅读官方文档！

🌇结尾

感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是3Katrina，一个热爱编程的大三学生

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

作者：3Katrina
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

普通视图

📖前言