2018 前端开发分享

时间 2019-11-08

标签前端开发分享繁體版

原文原文链接

Create by jsliang on 2018-11-26 08:10:27
Recently revised in 2018-11-29 22:12:45css

Hello 小伙伴们，若是以为本文还不错，记得点个赞或者给个 star，大家的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址html

【2019-08-16】Hello 小伙伴们，因为 jsliang 对文档库进行了重构，这篇文章的一些连接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请须要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。前端

查阅网上诸多资料，并结合本身的实际开发经验，进行的一次前端技术分享。vue

一目录

不折腾的前端，和咸鱼有什么区别react

目录
一目录
二前言
三发展历史
3.1 原始社会
3.2 石器时代
3.3 铁器时代
3.4 工业时代
四技术比较
4.1 JSP 与 jQuery
4.2 jQuery 与 Vue
4.3 Vue 与小程序
五思考总结

二前言

返回目录jquery

于 2018年12月 作个小小的前端技术分享，分享包括但不限于：Web 前端发展史、JQuery 与 Vue 的比较、Vue/React/Angular 的比较、前端开发经验的分享与总结等……git

参考文献：程序员

参与协助：github

深圳大学 - 陈建光
杭州店家科技智慧财务线 - 靳宗楠

三发展历史

返回目录ajax

以铜为镜，能够正衣冠；
以古为镜，能够知兴替；
以人为镜，能够明得失。

了解一门技术的历史，能够帮助咱们更清晰地了解这个行业的动态。

3.1 原始社会

返回目录

好久好久好久之前，在 jsliang 出生的前一年，即 1994 年的时候，网景公司 (Netscape Communications) 推出了第一款浏览器：NCSAMosaic，可是它只有少数的幸运儿才能使用。

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

你的标点符号变了？OK，浏览器下载过一个新的页面；
你提交了一个表单？OK，浏览器白屏等待许久，最后返回给你个 “用户名错误”；
你电商网站有一千种商品？OK，那你写一千个页面吧……

这时候的互联网，它的开发者统称为程序员。由于先后端开发是一体的，前端代码是后端代码的一部分：后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器。

3.2 石器时代

返回目录

就在同一年(1994 年)，PHP 出现了，有了将数据嵌入到 HTML 中的形式，这意味着互联网行业出现了钻木取火，不断朝石器时代发展。

这时候的互联网，兴起了数据嵌入模板，模板直接写样式的开发模式，例如 MVC 模式：

Model（模型层）：提供/保存数据。
Controller（控制层）：数据处理，实现业务逻辑。
View（视图层）：展现数据，提供用户界面。

在此时，前端只是后端 MVC 中的 V，因此那时候的所谓 “前端工程师” 尚未对应的概念，前端开发人员都喜欢自称 “切图仔”。
后来，由于后端太忙，没空写页面样式让它长得更好看些，因而才有了前端编写页面模板后，让后端代码读取模板，替换变量，渲染出页面。

以 PHP 框架的 Laravel 为例：

用户提交请求
根据路由不一样请求对应的 Laravel 控制器
控制器与模型交互
控制器调用结果页面
在用户浏览器上渲染页面

PHP 内嵌 HTML 代码片断：

<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>
复制代码

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

1995 年，网景推出了 JavaScript，造成了前端的雏形：HTML 为骨架，CSS 为外貌，JavaScript 为交互。
而到了 1998 年先后，Ajax（Asynchronous Javascript And XML：异步的 JavaScript 和 XML）获得了相对的应用，而且在以后逐渐被使用到各个页面上，从而促进了 Web 从 1.0 的静态网页，纯内容展现向 Web 2.0 模式迈进：

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

在 Ajax 的普及中，有三件事是值得一提的：

2004 年：Gmail
2005 年：Google 地图
2006 年：Ajax 被 W3C 正式归入标准

这时候，前端再也不是后端的模板，它能够独立获得各类数据。相对于 Web 1.0 的时代，Web 2.0 由石器时代迈向了铁器时代！

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

3.4 工业时代

返回目录

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

2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。
2009 年 AngularJS 诞生、Node诞生。
2011 年 React 诞生。
2014 年 Vue.js 诞生。

若是说，Angular、React、Vue 等 MVVM 模式的出现，以及 Webpack 的前端工程化构建，加速了数据驱动前端工程化的发展。那么，Node 这个基于 V8 引擎的服务端 JavaScript 运行环境的诞生，可媲美 Ajax 对于前端的贡献。

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

何为 MVVM 模式？

Model：提供/保存数据。

View：视图

View-Model：简化的 Controller，惟一的做用就是为 View 提供处理好的数据，不含其它逻辑。

现在，后端负责数据，前端负责其他工做愈加明显化。它们之间的通信，只须要后端暴露 RESTful 接口，前端经过 Ajax，以 HTTP 协议与后端通讯便可：

在这个前端的工业时代中，Vue、React、Angular 三大框架并驾齐驱。其余框架虽然也有在陆续发布，可是脱离不了这三大框架的魔爪。而这三大框架的 UI 框架来讲，也涌现了很多地技术，例如桌面端的 Electron、NW.js；移动端的React Native、Weex 等。

以此同时，手机端的发展也是不可小觑的：

2007 年第一代 iPhone 发布。
2008 年第一台安卓手机发布。
......
2018 年 iPhone Xs Max 发布。

虽然，一开始的手机应用，是基于手机本地系统如 IOS、Android、WP，使用其原生程序进行编写的第三方应用程序 —— Native App 的天下。可是，随着 React Native、微信小程序等这类技术的发展，以及网速等的不断提高，Native App 逐渐被 Web App 所取代。

现在，多元化的前端框架使这门行业兴起了其独特的工业时代，诸多科技百花争放、百家争鸣。

四技术比较

返回目录

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

4.1 JSP 与 jQuery

返回目录

就技术而言，JSP 与 jQuery 是天南地北的。可是，jsliang 我的以为能够就内嵌 HTML 的形式与先后端分离的形式，对 JSP 与 jQuery 进行简要比较。这里的比较，仅仅由于工做中同时有涉及 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 代码片断

<!-- 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> 
复制代码

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

然而，就比如喜欢锻炼的不全都喜欢跑步同样，并非全部操做数据的 Java 都喜欢写页面的，这时候就凸显了几个问题：

项目愈来愈大，模块愈来愈多，须要投入的人手也愈来愈多，这时候须要分模块分人手地去维护。并且这些 Java 开发人员必须喜欢操做数据也喜欢编写页面，要否则企业将面临员工频繁流动的困扰。
用户开始对界面操做提更高的要求，须要增长更多的 JavaScript 互动和特效，无形中增长 Java 开发人员的工做量。
当有员工辞职后，下一名员工接手熟悉项目的时间将逐渐增长，由 1 天增加为 1 周甚至 1 个月。由于他不只要熟悉数据的操做部分，更须要去维护 JavaScript 的页面互动。而这段时间，辞职员工的工做将施压到其余 Java 开发人员身上。

综上，这时候企业不得不考虑了：能不能帮 Java 开发人员减轻负担，更好地维护发展项目。
以此同时，JavaScript 通过时间的沉淀，愈加凸显了它的强大。因此，在诸多因素之下，就有了先后端的分离：

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

4.2 jQuery 与 Vue

返回目录

在上面的 JSP 与 jQuery 的比较中，咱们会发现一个问题，就是 jQuery 在数据操做上，它须要操做的步骤太多了。并且，频繁地操做 DOM。在数据量比较大的状况下，还会形成页面卡慢。
而这时候，就有了 MVVM 等 MV* 概念的提出：

何为 MVVM 模式？

Model：提供/保存数据。

View：视图。

View-Model：简化的 Controller，惟一的做用就是为 View 提供处理好的数据，不含其它逻辑。

简单来讲，就是 MV* 模式，将对数据的操做提高上去了。在 Vue、React、Angular 等 MV* 框架中，能够经过对数据的操做，从而完成对页面数据的渲染。这里咱们挑选简单、快速、紧凑而强大的 Vue，与 jQuery 进行比较。

index.html - jQuery

<!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>
复制代码

index.html - Vue

<!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>
复制代码

上面的例子，对这二者进行了简单的比较与区分。虽然只是一个简单的说明，可是在实际中，Vue 能解决的问题远比上面的要多的多，复杂的多。
可是，对 jQuery 与 Vue 进行比较，是推崇 Vue，建议全面废弃 jQuery 吗？并非。

Vue 适用的场景：复杂数据操做的后台页面，表单填写页面。
jQuery 适用的场景：好比说一些 HTML5 的动画页面，一些须要 JavaScript 来操做页面样式的页面。

正应了那句话：“没有最好的框架，只有更适合的应用”。
咱们应该根据项目的需求，对技术进行不一样的选取。就比如在公众号的 H5 页面上，jsliang 就很喜欢用 jQuery 进行操做，由于它简单粗暴好操做，在动画效果的编写上也不错；而在使用 Echarts 进行报表演示的开发中，我更喜欢使用 Vue，由于它能很简易地对后端传回的大量数据进行操做。

4.3 Vue 与小程序

返回目录

开篇点题；深刻学习过 Vue 开发的，那么在微信小程序、React、Angular 等框架的开发上也不会太差。

为何这么说呢？由于它们都是基于 MV* 模式的一些现代前端框架。拿其中的 Vue 与微信小程序进行一些简单区别：

生命周期/钩子函数不一样，微信小程序的钩子函数要简单地多。
请求数据方面，Vue 会在 created 或者 mounted 中请求数据，而微信小程序会在 onLoad 和 onSow 中请求数据。
等等……

每每不少时候，咱们会以为它们是有不少地方是相同的。
因此，对于 Vue、React、Angular、微信小程序等 MV* 模式的前端框架，若是非得进行区分比较的话，咱们应该就框架的使用场景、团队技术能力、框架优劣势、生态系统等方面去分析它们，并区分它们的适用场景：

Vue：简单易学，灵活轻便。相对于 React 和 Angular 来讲，它的学习成本低，适合快速上手，且学习曲线比较平缓。
React：灵活性很高，生态圈强大。相对于 Vue 来讲，React 在数据操做方面更灵动；相对于 Angular 来讲，它的学习成本更低。
Angular：完整的框架体系。相对于 React 和 Vue，它是一个成熟完善的框架。
微信小程序：简单轻便。相对于 Vue 来讲，它更加便捷了，并且微信小程序有上传的代码大小限制，使得微信小程序是真的 “小”。并且微信小程序结合微信，提供了不少 API 供开发人员使用。

所以，前端团队在项目开发前，能够就项目涉及领域进行探讨：

假如你想快速开发一个成本低的小应用，能够考虑 Vue。
假如你想开发一个大型应用，能够考虑 Angular。
假如你想开发一个跨平台应用，能够考虑 React。

事无绝对，这里仅为本人观点，实际技术选用应结合团队意见，从而找到最适合该项目的技术。

就 jsliang 本人的开发体验来讲：2018 年 4 月份的毕业设计使用了 Vue 进行开发，而后相隔半年进行了微信小程序开发，发觉小程序开发比起 Vue 而言是更轻松便捷的，由于它封装了不少 API 供开发人员使用，而且它有专门的提 Bug 社区。

五思考总结

返回目录

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

但愿小伙伴们在面临不一样的项目时，能够选择到最合适的框架，从而减小开发工做量，下降开发难度。

最后的最后，咱们再谈谈前端的将来发展及前端职业将来：

前端会继续分化。例如，喜欢 CSS 图形化的，将更深刻地学习 UI 与 CSS 3D 等，进行更炫酷的布局；喜欢 JavaScript 的，将更深刻地学习数据的操做，实现更复杂地业务、更有趣的用户体验。
前端会继续融合。例如，Vue、React、Angular 合并，实现大一统，结束三分天下的局面。
前端将更加丰富。例如，PC、Mobile、IPad 等的体验更加丰富，不一样的平台实现不一样的功能。

因此，抓住机遇，不断折腾，创造更好的前端吧！

后记：Hello 小伙伴们，若是以为本文还不错，记得点个赞或者给个 star，大家的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

jsliang 的文档库由梁峻荣采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于github.om/LiangJunron…上的做品创做。
本许可协议受权以外的使用权限能够从 creativecommons.org/licenses/by… 处得到。