黑马程序员技术交流社区

标题: 原始社会到现在社会--前端的蜕变 [打印本页]
作者: 前端广州    时间: 2019-9-23 17:04
标题: 原始社会到现在社会--前端的蜕变
 很久很久很久以前，即 1994 年的时候，网景公司 (Netscape Communications) 推出了第一款浏览器：NCSAMosaic，但是它只有少数的幸运儿才能使用。


 它的初始作用，是为了方便科学家看文档、传论文。所以，到今天为止，学习前端的人在接触 HTML 的时候，都会记得它的第一句有个词是 Document。
 这时候的互联网，无疑是处于原始社会的文明初创时期。


 你的标点符号变了？OK，浏览器下载过一个新的页面；
 你提交了一个表单？OK，浏览器白屏等待许久，最后返回给你个 “用户名错误”；
 你电商网站有一千种商品？OK，那你写一千个页面吧……
 这时候的互联网，它的开发者统称为程序员。因为前后端开发是一体的，前端代码是后端代码的一部分：后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器。
3.2 石器时代
返回目录
 就在同一年(1994 年)，PHP 出现了，有了将数据嵌入到 HTML 中的形式，这意味着互联网行业出现了钻木取火，不断朝石器时代发展。


 这时候的互联网，兴起了数据嵌入模板，模板直接写样式的开发模式，例如 MVC 模式：
 在此时，前端只是后端 MVC 中的 V，所以那时候的所谓 “前端工程师” 还没有对应的概念，前端开发人员都喜欢自称 “切图仔”。
 后来，因为后端太忙，没空写页面样式让它长得更好看些，于是才有了前端编写页面模板后，让后端代码读取模板，替换变量，渲染出页面。
 以 PHP 框架的 Laravel 为例：


 PHP 内嵌 HTML 代码片段：
[url=][/url]
<html>  <head><title>Car {{ $car->id }}</title></head>  <body>    <h1>Car {{ $car->id }}</h1>    <ul>      <li style="color:red">>Make: {{ $car->make }}</li>      <li style="color:blue">Model: {{ $car->model }}</li>      <li style="color:yellow">Produced on: {{ $car->produced_on }}</li>    </ul>  </body></html>[url=][/url]

相似的：
PHP 直接将数据内嵌到 HTML 中。
ASP 的 ASPX，在 HTML 中嵌入 C# 代码。
Java 的 JSP 直接将数据嵌入到网页中。

3.3 铁器时代
返回目录

 1995 年，网景推出了 JavaScript，形成了前端的雏形：HTML 为骨架，CSS 为外貌，JavaScript 为交互。
 而到了 1998 年前后，Ajax（Asynchronous Javascript And XML：异步的 JavaScript 和 XML）得到了相对的应用，并且在之后逐渐被使用到各个页面上，从而促进了 Web 从 1.0 的静态网页，纯内容展示向 Web 2.0 模式迈进：
 Web 2.0 时代：动态网页，富交互，前端数据处理
 在 Ajax 的普及中，有三件事是值得一提的：
 这时候，前端不再是后端的模板，它可以独立得到各种数据。相对于 Web 1.0 的时代，Web 2.0 由石器时代迈向了铁器时代！

[img][/img]" alt="" data-src="https://user-gold-cdn.xitu.io/2018/11/29/1675fcd070a48970?imageslim" data-width="320" data-height="240" style="border: 0px; max-width: 900px; height: auto;">

 在 Web 2.0 的时代中，在 2006 年的时候，用于操作 DOM 的 jQuery 出现了，它快速地风靡了全球。大量的基于 jQuery 的插件构成了一个庞大的生态系统，从而稳固了 jQuery 作为 JS 库一哥的地位。
 jQuery 的影响是源远流长的。即时到了今天，还是会有用 jQuery 一把梭、jQuery + gulp 的前端工程化的项目等……无它，唯方便而。

3.4 工业时代
返回目录

 伴随着信息时代、大数据时代的到来，jQuery 在大量的数据操作中的弊端体现出来了，它在对 DOM 进行大量的操作中，会导致页面的加载缓慢等问题，这时，有些前端开发人员逐渐觉得力不从心了……


 如果说，Angular、React、Vue 等 MVVM 模式的出现，以及 Webpack 的前端工程化构建，加速了数据驱动前端工程化的发展。那么，Node 这个基于 V8 引擎的服务端 JavaScript 运行环境的诞生，可媲美 Ajax 对于前端的贡献。
 Node 是前端的第二次飞跃，它使 JS 在服务端语言中也有了一席之地。
何为 MVVM 模式？
 如今，后端负责数据，前端负责其余工作越发明显化。它们之间的通讯，只需要后端暴露 RESTful 接口，前端通过 Ajax，以 HTTP 协议与后端通信即可：


 在这个前端的工业时代中，Vue、React、Angular 三大框架并驾齐驱。其他框架虽然也有在陆续发布，但是脱离不了这三大框架的魔爪。而这三大框架的 UI 框架来说，也涌现了不少地技术，例如桌面端的 Electron、NW.js；移动端的React Native、Weex 等。
 以此同时，手机端的发展也是不可小觑的：
 虽然，一开始的手机应用，是基于手机本地系统如 IOS、Android、WP，使用其原生程序进行编写的第三方应用程序 —— Native App 的天下。但是，随着 React Native、微信小程序等这类技术的发展，以及网速等的不断提升，Native App 逐渐被 Web App 所取代。
 如今，多元化的前端框架使这门行业兴起了其独特的工业时代，诸多科技百花争放、百家争鸣。

四 技术比较
返回目录

 没有最好的框架，只有最合适的应用场景。
 在前端的开发工作开始之前，我们应该就不同的前端技术进行分析比较，从而更好、更流畅地进行编程开发。

4.1 JSP 与 jQuery
返回目录

 关于 JSP 与 jQuery 的学习记录：
 何为 JSP？
 JSP 全称 Java Server Page，是 Java 企业应用的一种动态技术。Java 和 JSP 是运行在服务器端的，也就是说他两运行的结果生成 HTML，HTML 是静态页面，而 JSP 是动态页面。
 何为 jQuery？
 jQuery 是一个轻量级的 JavaScript 库。jQuery 能够使用户的 HTML 页面 和 JS 内容分离，也就是说，jQuery 的使用，更有利于 HTML、CSS、JavaScript 三者的分离，使得前端代码得到更好的维护。


 现在就相同功能进行 JSP 与 jQuery 代码比较：
JSP 代码片段
<ul>    <c:forEach items="${list}">      <li>${user.userName}</li>  </c:forEach></ul>

jQuery 代码片段
[url=][/url]
<!-- HTML 内容填充 --><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>    $(function() {    // 通过 ajax 从 Java 接口获取数据    var data;    $.ajax({      // ...请求地址、请求头及传参等      success: function(res){        data = res.data;        // 拼接字符串，并渲染页面        var html = '';        $.each(data, function(index, item) {          var html='<li>' + item.userName + '</li>';          html += html;        })        html = '<ul>' + html + '</ul>';      }    })  })</script> [url=][/url]


 咋看之下，你会觉得：“啊，JSP 那么简单，用 JSP 好啊！”
 是的，JSP 几行代码就能解决 jQuery 十几行代码才能解决的事，而且运行速度也快过 jQuery，为啥不一直用它呢？
 就项目发展而言。公司初创的时候，项目初期结构不繁杂的情况下，使用 JSP 无可厚非，因为它快、省事，而且还能节省人力（前后端让一个 Java 写就可以搞定了）。
 但是，在项目越来越繁杂、庞大的情况下，一个 Java 已经维护不过来了，企业必须不停地增加 Java 开发人手，而 Java 人员也深陷技术债中……


 然而，就好比喜欢锻炼的不全都喜欢跑步一样，并不是所有操作数据的 Java 都喜欢写页面的，这时候就凸显了几个问题：
 综上，这时候企业不得不考虑了：能不能帮 Java 开发人员减轻负担，更好地维护发展项目。
 以此同时，JavaScript 经过时间的沉淀，越发凸显了它的强大。所以，在诸多因素之下，就有了前后端的分离：


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

4.2 jQuery 与 Vue
返回目录

 在上面的 JSP 与 jQuery 的比较中，我们会发现一个问题，就是 jQuery 在数据操作上，它需要操作的步骤太多了。而且，频繁地操作 DOM。在数据量比较大的情况下，还会造成页面卡慢。
 而这时候，就有了 MVVM 等 MV* 概念的提出：
何为 MVVM 模式？

 简单来说，就是 MV* 模式，将对数据的操作提升上去了。在 Vue、React、Angular 等 MV* 框架中，可以通过对数据的操作，从而完成对页面数据的渲染。这里我们挑选简单、快速、紧凑而强大的 Vue，与 jQuery 进行比较。
index.html - jQuery
[url=][/url]
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>jQuery 代码演示</title></head><body>  <div id="app">    <ul id="list">      <li>第1条数据</li>      <li>第2条数据</li>    </ul>    <button id="add">添加数据</button>  </div>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  <script>    $(document).ready(function() {        var i = 2;      $('#add').click(function() {         i++;         //通过 DOM 操作在最后一个li元素后手动添加一个标签        $("#list").children("li").last().append("<li>第" + i + "条数据</li>");      });      });   </script></body></html>[url=][/url]


index.html - Vue
[url=][/url]
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Vue 代码演示</title></head><body>  <div id="app">    <ul>      <!--根据数组数据自动渲染页面-->      <li v-for="item in message">{{item}}</li>    </ul>    <button @click="add">添加数据</button>  </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script>    new Vue({      el: "#app",      data: {        message: ["第1条数据", "第2条数据"],        i: 2      },      methods:{        //向数组添加一条数据即可        add:function(){          this.i++;          this.message.push("第" + this.i + "条数据");        }      }    })  </script></body></html>[url=][/url]




 上面的例子，对这两者进行了简单的比较与区分。虽然只是一个简单的说明，但是在实际中，Vue 能解决的问题远比上面的要多的多，复杂的多。
 但是，对 jQuery 与 Vue 进行比较，是推崇 Vue，建议全面废弃 jQuery 吗？并不是。
 正应了那句话：“没有最好的框架，只有更适合的应用”。
 我们应该根据项目的需求，对技术进行不同的选取。就好比在公众号的 H5 页面上，jsliang 就很喜欢用 jQuery 进行操作，因为它简单粗暴好操作，在动画效果的编写上也不错；而在使用 Echarts 进行报表演示的开发中，我更喜欢使用 Vue，因为它能很简易地对后端传回的大量数据进行操作。

4.3 Vue 与 小程序
返回目录

 开篇点题；深入学习过 Vue 开发的，那么在微信小程序、React、Angular 等框架的开发上也不会太差。
 为什么这么说呢？因为它们都是基于 MV* 模式的一些现代前端框架。拿其中的 Vue 与 微信小程序 进行一些简单区别：
 往往很多时候，我们会觉得它们是有很多地方是相同的。
 所以，对于 Vue、React、Angular、微信小程序等 MV* 模式的前端框架，如果非得进行区分比较的话，我们应该就框架的使用场景、团队技术能力、框架优劣势、生态系统等方面去分析它们，并区分它们的适用场景：
 因此：
就 jsliang 本人的开发体验来说：2018 年 4 月份的毕业设计使用了 Vue 进行开发，然后相隔半年进行了微信小程序开发，发觉小程序开发比起 Vue 而言是更轻松便捷的，因为它封装了很多 API 供开发人员使用，并且它有专门的提 Bug 社区。

五 思考总结
返回目录

 没有最好的框架，只有最合适的应用场景。
 希望小伙伴们在面临不同的项目时，可以选择到最合适的框架，从而减少开发工作量，降低开发难度。
 最后的最后，我们再谈谈前端的未来发展及前端职业未来：
 所以，抓住机遇，不断折腾，创造更好的前端吧！






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2