汽车 {{ $car->id }}

相似的：

PHP 将数据直接嵌入到 HTML 中。

ASPX for ASP，在 HTML 中嵌入 C# 代码。

Java的JSP将数据直接嵌入到网页中。

3.3 铁器时代

1995年，推出了Java，形成了前端的雏形：HTML为骨架，CSS为外观，Java为交互。

1998年左右，Ajax（Java And XML：异步Java和XML）得到相对应用，并逐渐被运用在各种页面上，从而推动了Web从1.0的静态网页和纯内容展示向Web 2.0模式迈进:

Web 2.0时代：动态网页、丰富交互、前端数据处理

在Ajax的流行中，有三件事值得一提：

这时前端不再是后端的模板，它可以独立获取各种数据。与Web 1.0时代相比，Web 2.0已经从石器时代进入了铁器时代！

在Web 2.0时代，2006年，DOM操作出现，并迅速风靡全球。大量基于JS的插件形成了一个庞大的生态系统，从而巩固了其作为领先JS库的地位。

影响是深远的。即使到了今天，仍然有前端工程项目使用 、+gulp 等……无非就是方便。

3.4 工业时代

随着信息时代和大数据时代的到来，大规模数据运营的弊端凸显出来。对DOM进行大规模操作会导致页面加载缓慢等问题。这个时候，一些前端开发者渐渐感到力不从心……

如果说，MVVM、Vue等模型的出现，以及前端工程化的建设，加速了数据驱动前端工程化的发展。然后，基于V8引擎的服务器端Java运行环境Node的诞生，其对前端的贡献堪比Ajax。

Node是前端的第二次飞跃，它让JS在服务器端语言中占有一席之地。

什么是 MVVM 模式？

如今，越来越明显的是后端负责数据，前端负责其余。它们之间的通信只需要后端暴露接口，前端通过Ajax和HTTP协议与后端通信：

在这个前端工业时代，Vue、.虽然其他框架也在陆续发布，但都逃不出这三大框架的魔爪。至于这三大框架的UI框架，已经出现了很多技术，比如桌面、NW.js；移动、Weex 等

与此同时，手机的发展也不容小觑：

虽然，最初的移动应用是基于IOS、WP等手机本地系统，利用其原生程序编写的第三方应用——App的世界。但随着微信小程序等技术的发展以及网络速度的不断提高，App逐渐被Web Apps取代。

如今，多元化的前端框架催生了这个行业独特的产业时代，技术百花齐放，百家争鸣。

四种技术对比

没有最好的框架，只有最适合的应用场景。

在开始前端开发工作之前，我们应该对不同的前端技术进行分析和比较，以便能够更好、更顺利地进行编程开发。

4.1 JSP 和

从技术上来说，JSP 和 JSP 有天壤之别。不过，我个人觉得我们可以对JSP和内嵌HTML形式、前后端分离形式的JSP做一个简单的比较。这里的比较只是因为我的工作同时涉及JSP和JSP。如有不准确之处，请指正。

关于JSP的学习记录以及：

什么是JSP？

JSP，全称Java Page，是一种Java企业应用程序的动态技术。 Java和JSP运行在服务器端，这意味着它们的运行结果生成HTML。 HTML是静态页面，而JSP是动态页面。

为什么？

是一个轻量级的Java库。它可以将用户的HTML页面和JS内容分开。也就是说，使用更有利于HTML、CSS、Java的分离，让前端代码能够更好的维护。

现在比较相同功能的 JSP 和代码：

< src=""> $(() { // 通过ajax从Java接口获取数据 var data; $.ajax({ // ...请求地址、请求头和参数: (res){ data = res . data; // 连接字符串并渲染页面 var html = ''; ; } }) })

乍一看，你可能会想：“啊，JSP这么简单，还不如用JSP呢！”

是的，几行JSP代码就可以解决需要十几行代码的问题，而且运行速度更快。为什么不一直使用它呢？

就项目开发而言。公司刚成立的时候，最初的项目结构并不复杂，使用JSP并没有什么问题，因为速度快、无故障、节省人力（前端和后端都可以用Java编写）。

然而，随着项目变得越来越复杂和庞大，一个Java已经无法维护了。企业必须不断增加Java开发人力，Java人员也深陷技术债……

然而，就像不是所有喜欢运动的人都喜欢跑步一样，也不是所有操作数据的Java人都喜欢写页面。这时候，几个问题就凸显出来了：

项目越来越大，模块越来越多，需要投入的人力也越来越多。这时候维护就需要分模块、分人力。而且，这些Java开发人员一定喜欢操作数据、编写页面，否则公司就会面临员工频繁流动的问题。用户开始对界面操作有了更高的要求，需要添加更多的Java交互和特效，这无形中增加了Java开发人员的工作量。当一名员工辞职后，下一位员工接手熟悉项目的时间会逐渐增加，从1天延长到1周甚至1个月。因为他不仅需要熟悉数据操作部分，还需要维护Java页面交互。这段时间，离职员工的工作会给其他Java开发人员带来压力。

综上所述，这个时候企业就得考虑是否能够帮助Java开发者减轻负担，更好地维护开发项目。

与此同时，Java 随着时间的推移变得越来越强大。因此，由于多种因素的影响，出现了前后端分离的情况：

后端人员提供接口，前端人员使用封装好的Ajax调用接口获取数据并渲染到页面上。

4.2 与Vue

在上面JSP和JSP的对比中，我们会发现一个问题，那就是它在数据操作方面需要太多的步骤。而且，DOM 被频繁操作。当数据量比较大时，也会导致页面变慢。

这时，MVVM等MV*概念被提出：

什么是 MVVM 模式？

简单来说，就是MV*模式，提高了数据的操作性。在Vue、Web等MV*框架中，可以通过操作数据来完成页面数据的渲染。这里我们选择简单、快速、紧凑、功能强大的Vue来进行比较。

.html-

“zh>>

“应用程序”>“添加”>添加数据

< src=""> $().(() { var i = 2; $('#add').(() { i++; // 通过 DOM 操作手动在最后一个 li 元素后面添加标签 $( " #list").("li").last().("+ i + "数据"); }); });

.html-Vue

“zh>>

“应用程序”>“添加”>添加数据

< src=""> new Vue({ el: "#app", data: { : ["1st data", "2nd data"], i: 2 }, :{ //向数组中添加一项 Data 即可添加：(){ this.i++; this..push("th" + this.i + "data");

上面的例子简单地比较和区分了两者。虽然只是简单的解释，但实际上，Vue 可以解决很多比上面更多、更复杂的问题。

但是，与 Vue 相比，您是否会推荐 Vue 并建议完全放弃它？并不真地。

正应了那句话：“没有最好的框架，只有更适合的应用”。

我们应该根据项目的需要，做出不同的技术选择。就像在公众号的H5页面上，我喜欢用它来进行操作，因为它简单、粗暴、易于操作，而且还擅长编写动画效果；而在报表展示的开发中，我更喜欢使用Vue，因为它可以方便地操作后端返回的大量数据。

4.3 Vue和小程序

让我先提出一些问题；如果你深入研究过Vue开发，开发微信小程序、等框架也不会太差。

为什么这么说？因为它们都是基于MV*模式的现代前端框架。我们先来对Vue和微信小程序进行一些简单的区别：

生命周期/钩子函数不同。微信小程序的钩子函数就简单多了。在请求数据方面，Vue 会请求 或 中的数据，而微信小程序会请求 和 中的数据。 ETC……

通常，我们觉得他们有很多共同点。

因此，如果我们要区分和比较Vue、微信小程序等MV*模式的前端框架，应该从框架的使用场景、团队的技术能力、优势等方面进行分析框架、生态系统等的优缺点，并区分其适用场景：

因此，前端团队在开发项目之前可以讨论项目涉及的领域：

没有什么是绝对的。这只是我的意见。实际的技术选型要结合团队的意见，找到最适合项目的技术。

就我的开发经历来说：我在2018年4月的毕业设计中使用Vue进行开发，然后相隔六个月开发了微信小程序。我发现小程序开发比 Vue 更容易、更方便，因为它封装了很多 API 供开发者使用，而且它有专门的 bug 报告社区。

五思想总结

没有最好的框架，只有最适合的应用场景。

希望朋友们在面对不同的项目时，能够选择最合适的框架，从而减少开发工作量和开发难度。

最后说一下前端的未来发展以及前端职业的未来：

前端将继续分化。例如，那些喜欢CSS图形的人将更多地了解UI和CSS 3D以创建更酷的布局；喜欢Java的人会更多地了解数据操作，以实现更复杂的业务和更有趣的用户体验。 。前端将继续收敛。比如Vue、微软、微软合并，实现了大一统，结束了三分天下的局面。前端会更加丰富。比如PC、iPad等拥有更丰富的体验，不同的平台实现不同的功能。

所以，抓住机会，不断修修补补，创造更好的前端！

作者 |

来源 |掘金队

原文| .im/post/3608