web前端技术的前世今生

    当前web技术十分火热，原因有几条，1、web开发的应用能跨越不同的操作系统平台，windows、linux、ios、android等等平台；2、随着应用软件越来越复杂，我们希望用户安装是瘦客户端软件，把不变的功能模块封装成服务调用，现在的应用软件基于三层架构的（微服务/中台），web技术有着天然的优势，web的诞生开始就是前后端分离的，技术成熟稳定；3、web技术几乎都是开源的，又是互联网蓬勃发展的基石，而且拥有广泛的群众基础。

    web技术一般分为前端技术和后端技术，后端技术比较稳定如java、php、python等，前端技术千变万化，新技术眼花缭乱，web前端技术学习有点无从下手，本文重点探讨web前端技术的前世今生，为小白找到一条学习路径。

一、web诞生

    英国计算机科学家，蒂姆·伯纳斯·李，万维网(World Wide Web)发明人。据说发明web的初衷是解决学术交流的问题，分布各地的研究机构，想要及时看到最新的研究成果，在没有web之前，大家相互传文件，很不方便。如果集中一个地方存储资源的，大家通过某种方式可以方便访问到，这就是服务器/浏览器模式，这就是web技术诞生。蒂姆很有远见，认为这项技术可以扩展其他领域，改变世界，将这项技术制订了一套标准开放出来，如果能收取专利费，估计他是全世界最有钱的男人。

  于是蒂姆成立了W3C组织(万维网联盟)，制定整个web的规范。web中关键技术http,html,xml,css等等。需要注意javascrpit不是W3C发布的标准，是ECMAScript一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。

二、web前端发展历程

      如何理解web前端技术，它的主要任务搞定一张网页。我们先来搞清楚几个概念，如果把网页想像成一个“空间”，我们一般把这个“空间”叫做“容器”，当然有“大空间”，也可以在“大空间”中间划分“小空间”。在“容器”里面放“标签”（p，li，img，em）等等一般称之为“元素”或“项目”。如何将“容器”、“元素”按规则堆放在一起，这个叫“布局”。了解这3个概念，才能理解一个网页是如何构建出来的。

      我个人喜欢把构建一张网页，类比“建造一个房子”，这样可以生动形象的理解。如何造一个房子，我们首先得到一个只有“框架”的“毛坯房”，这就是网页的当中的html标签结构；有了“毛坯房”，肯定不能住人，我们还要搞装修，这就是网页中的CSS；新房子装修好了，搬进去住，会产生一系列的活动，比如开灯、关灯，开电视，关电视，这就是网页中的javascrpit，下文简称js。

    web刚开始的时候，没有css，js的。所以第一代“房子”，是简单装修，静态网页。很很多标签就是用来“装修”的，比如font标签。表格布局，一大堆table标签，设置各种百分比，如果打开网页查看源代码，有如上这些特征，很可能是“爷爷级的网站”。

    随着人们生活水平日渐提高，我们需求更好的“房子”，精装修，动态网页（网页内容不再单调乏味，可以动态变化）。分工明确，html结构、css“装修”、js“动作”，可以开发出复杂丰富的网页效果。 布局（div+css）基于盒状模型，依赖 display属性 + position属性 + float属性。下面我举例一个最简单的例子。

html结构

CSS“装修”代码

js“动作代码”

盒子模型

    随着进一步发展，满足现代化的需求，自然产生2个需求，第一个需求需要更好的“房子”；第二个需求降低建造成本。面对第一个需求，我们升级原有的技术，html升级到html5，css升级到css3，布局升级为弹性布局（flex）。面对第二个需求，原生js代码开发是非常大工作量，各种浏览器兼容不稳定，所以出现一种jquery的解决方案，我们一般都是通过jquery写脚本，简化写js的工作量。一个人同时掌握html、css、js并精通是非常耗时的，大家发现很多功能，可以做到“组件”复用（进度条、TAB标签、上传组件、日期组件等等），所以诞生一堆前端框架，降低前开发工作量（vue、layui、bootstrap等等）。

      在web前端发展过程中也出现一个创业失败的项目 xml(可扩展标记语言)。xml的出现，本意让人民群众最大程度发挥创意，自定义标签，但明显高估广大人民群众的智商，太难了，对于大部分的人基本搞不定，所以xml永远只有1.0版本。后来人们发现xml用作跨平台、跨应用数据交换挺有用的。目前xml最广泛的用途不是用来开发网页，而是用来交换数据。

xml文件

三、web架构思想变迁

    1、MVC（Model-View-Controller）。视图（View）：用户界面，控制器（Controller）：业务逻辑，模型（Model）：数据保存。view调用controller再传给model，再反馈给view，这个过程是单向的。

mvc

    实际上我们在项目中采用的以下这种调用方式。

    a. 用户可以向 View 发送指令，再由 View 直接要求 Model 改变状态。

    b. 用户也可以直接向 Controller 发送指令，再由 Controller 发送给 View。

2、MVP（Model-View-Presenter）。mvp实际是mvc的改进版,view与model之间架设一个桥梁（Presenter）进行中转。

mvp

  3.MVVM(Model-View-ViewModel)。mvvm完全是思想的变革，采用“双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。目前最流行的vue、微信小程序基于这种思想设计的。

mvvm

      在wvvm之下写代码与mvc有什么区别？假设存在一个hello

标签，要更改里面的内容，mvc如何写js代码：

var message="123"；
$（"#iddiv"）.html（message）；
message="456"；
$（"#iddiv"）.html（message）；

在mvvm之下如何写代码（vue.js举例）：

先将结构调整：

{{  message }}

// 我们的数据对象
var data = { message: "hello"}；
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  el："#iddiv"，
  data: data
})
vm.message = "123"；
vm.message = "456"；

      其实两段代码完成的功能的一模一样，就是将“hello”，变成“123”，再变成“456”在页面更新显示。那有什么区别？在mvc下面，你需要更新dom的代码，浏览器需要重新渲染dom，页面数据才会刷新，在mvvm下，由于“双向绑定”，页面数据自动刷新，这就是vue代码更简洁的原因。

    最后小结，经过我分析web前端发展脉络，你会发现要掌握的技术其实很多，从html、css、js、jquery、布局技术、前端框架等等。如果你开发一个完整的web应用，光掌握前端还不够，还要掌握后端技术php、python、java之一，还有与之对应后端框架thinkphp、 django、spring。整体来说web前端的发展功能越来越丰富，越来越简单上手，但是你要精通就必须得下一番苦功夫。