web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs、Angular、React原理和前端发展历史

2017-04-07 小北哥哥 前端你别闹


今天来说说 “前端发展历史和框架”

「前端程序发展的历史」

「 不学自知,不问自晓,古今行事,未之有也 」

我们都知道如今流行的框架:Vue.Js、AngularJs、ReactJs。已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种。

在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解。

这段回想历史。由于网上就可查不少资料,但都篇幅非常长。晦涩难懂。

所以我引用了 廖雪峰老师站点总结的一段话,言简意骇,方便大家秒懂阅读



在上个世纪的1989年,欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言(HyperText Markup Language),简称HTML。并在1993年成为互联网草案。

从此。互联网開始迅速商业化。诞生了一大批商业站点。

最早的HTML页面是全然静态的网页,它们是预先编写好的存放在Webserver上的html文件。

浏览器请求某个URL时,Webserver把相应的html文件扔给浏览器,就能够显示html文件的内容了。

假设要针对不同的用户显示不同的页面,显然不可能给成千上万的用户准备好成千上万的不同的html文件,所以,server就须要针对不同的用户,动态生成不同的html文件。一个最直接的想法就是利用C、C++这些编程语言,直接向浏览器输出拼接后的字符串。这种技术被称为CGI:Common Gateway Interface。

非常显然,像新浪首页这种复杂的HTML是不可能通过拼字符串得到的。于是,人们又发现,事实上拼字符串的时候,大多数字符串都是HTML片段。是不变的,变化的仅仅有少数和用户相关的数据,所以,又出现了新的创建动态HTML的方式:ASP、JSP和PHP等——分别由微软、SUN和开源社区开发。

在曾经:
在ASP中,一个asp文件就是一个HTML。可是,须要替换的变量用特殊的<%=var%>标记出来了,再配合循环、条件推断。创建动态HTML就比CGI要easy得多。

可是,一旦浏览器显示了一个HTML页面。要更新页面内容。唯一的方法就是又一次向server获取一份新的HTML内容。假设浏览器想要自己改动HTML页面的内容,怎么办?那就须要等到1995年年底。JavaScript被引入到浏览器。

有了JavaScript后,浏览器就能够运行JavaScript,然后,对页面进行一些改动。JavaScript还能够通过改动HTML的DOM结构和CSS来实现一些动画效果,而这些功能没法通过server完毕,必须在浏览器实现。

以上页面发展历史。摘自廖雪峰总结,有兴趣能够去搜

以下先跟着我节奏揭开MVVM原理。



JavaScript操作HTML

至于 js怎样在浏览器运行,这又是另外一个资深课题了(前端真的是仅仅是庞杂)。这里我们不做研究,有兴趣的能够自己去搜资料。我们仅仅须要知道浏览器就是也JS运行容器。运行完之后。通过页面显示结果即可了,就像java须要编译器一样原理。

用JavaScript在浏览器中操作HTML。也经历了若干发展阶段: 我们利用【小北最帅】这个案例来展示

【第一阶段】

是JS原生通过浏览器解析机制,它的原理是使用浏览器提供的原生API 结合JS语法,能够直接操作DOM,如:

HTML:


<div id="name" style="color:#fff">前端你别闹</div>
<div id="age">3</div>

JavaScript:


// JavaScriptvar dom1 = document.getElementById(‘name‘);var dom2 = document.getElementById(‘age‘);
dom1.innerHTML = ‘小北‘;
dom2.innerHTML = ‘666‘;
dom1.style.color = ‘#000000‘;  // css样式也能够操作

结果变成:


<div id="name" style="color:#fff">小北</div>
<div id="age">‘666</div>


【第二阶段】

我用一个字总结 就是懒,就是我们上一篇说的jQuery时代,由于原生API晦涩难懂,语法非常长不好用,最重要的是要考虑各种浏览器兼容性。由于他们的解析标准都不一样。造成了。写一段效果代码要写非常多的兼容语法。令人沮丧,所以jQuery的出现,迅速占据了世界。

上边的样例用 jQuery 是这种

HTML:


<div id="name" style="color:#fff">前端你别闹</div>
<div id="age">3</div>

JavaScript:


// jQuery 一句话即可

$(‘#name‘).text(‘小北好帅‘).css(‘color‘, ‘#000000‘);

$(‘#age‘).text(‘666‘).css(‘color‘, ‘#fff‘);

结果变成:


<div id="name" style="color:#fff">小北好帅</div>
<div id="age">666</div>


【第三阶段】

MVC模式,须要server端配合,JavaScript能够在前端改动server渲染后的数据。

一句话就是全部通信都是单向的: 也就是前期我们最经常使用的状态。提交一次反馈一次。通信一次相互制约。

比方:提交表单 填写内容 → 点击提交 →业务逻辑处理 →存入数据库 → 刷新页面→server取数据库数据→渲染到client页面→ 展示上一次你提交的内容

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGxsaWx5XzEx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

视图(View):用户界面。
控制器(Controller):业务逻辑
模型(Model):数据保存

各部分之间的通信方式例如以下。

View 传送指令到 Controller

Controller 完毕业务逻辑后。要求 Model 改变状态

Model 将新的数据发送到 View,用户得到反馈

这个模式缺点是什么呢?

缺点一:它必须等待server端的指示,并且假设是异步模式的话,全部html节点、数据、页面结构都是后端请求过来。

浏览器仅仅作为一个解析显示容器。Model 作用差点儿是废x,Model 层面做的非常少差点儿前端无法控制。你前端差点儿是切图仔和做轮播图的工作/哭

缺点二:由于你前端渲染的页面结构,差点儿是后端server包扎一堆数据一起发送过来,前端的你仅仅须要用拼接字符串 或者字符串拼接引擎

比方Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等来做事,说白了纯苦力和反复工作居多。这也导致了,假设非常多人觉得前端并不重要,仅仅负责美工 和 动作体验就好了。

缺点三:一发而动全身。数据、显示不分离!为什么这么说。由于假设业务逻辑要变,比方非常easy的需求,你用jsp或者php 拼接出来的ajax数据页面。年龄这个字段我不须要了,把性别字段 区分开,男的单独显示,女的单独显示。曾经是一起显示到一个表的

那么,后端先要sql查询把 男、女数据分开。然后渲染字符串时候把 年龄 这个字段去除,然后把男女分开成2个table,然后再推送给前端接收。

前端收到了,然后从新在渲染一遍,在加工一次页面甚至是展示动作效果。

。。真苦逼啊(前后端一起大声喊到:加班使我快乐。呜呜呜)



MVVM框架模式

最终来到【第四阶段】,为什么在MVC模式我说这么多废话呢。由于你了解了MVC才干更清楚的知道

「 何为mvvm模式 」

MVVM最早由微软提出来。它借鉴了桌面应用程序的MVC思想。在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。也就是我们常说的。前后分离。真正在这里得以实现

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGxsaWx5XzEx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

它採用双向绑定(data-binding):View的变动。自己主动反映在 ViewModel。反之亦然,model数据的变动,也自己主动展示给页面显示

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的改动同步回Model。

可能理论知识枯燥无味,那么我们还是实战派,来看代码不就好了吗?
还是刚才的 【小北最帅】案例

js和jQuery的写法 大家也看到了。那么我们来MVVM 数据绑定怎么实现。

由于数据驱动模式的精髓在于【数据】和【视图】分离。所以我们首先并不关心DOM结构。而是关心数据的展现。

最简单的数据存储方式是什么呢?显然不是mysql、数据库而是使用JavaScript对象

HTML:


// 这次我不关心你了,哼哼

JavaScript:


// JS基础对象// 原始数据var xiaobei = {
    name: ‘前端你别闹‘,
    age: 3。        tag:‘干货‘};

结果是:


name: 前端你别闹age: 3tag: 干货

假设:
我们把变量xiaobei 看作Model数据,把HTML某些DOM节点看作View,并意淫它们已经通过某种手段被关联起来了。

以下我们把name 从[ 前端你别闹] 改为 [小北]。把显示的age从 [3] 改为 [666]。tag变成 [最帅!]
依照曾经我们肯定操作DOM节点,而如今我们仅仅须要改动JavaScript对象:

JavaScript:


// JS基础对象// 改变的数据

var xiaobei = {
    name: ‘小北‘,
    age: 666。        tag:‘最帅‘};

结果是:


name: 小北age: 666tag: 最帅

通过实验和理论

小伙伴惊呆了,我们仅仅要改变JavaScript对象的内容,就会导致DOM结构作出相应的变化!
这让我们的关注点从怎样操作DOM变成了怎样改变JavaScript对象的状态。而操作JavaScript对象比获取和操作DOM简单了一个地球的距离!

这也是MVVM的核心思想:关注Model的变化。让MVVM框架利用自己的机制去自己主动更新DOM,从而把开发人员从操作DOM的繁琐中解脱出来!

也就是所谓的 数据 - 视图分离,数据驱动视图, 视图不影响数据,再也不用管繁琐的DOM结构操作了,世界顿时清净。完美!

常见的MVVM框架:Vue.JS、AngularJs、reactJs 等我们在下一篇讨论

结尾

好累,最终通过简单的样例和非常白话的语言。引出了mvvm框架话题,大牛请忽略,也别笑我,我仅仅是用最简单易懂的语言和表达,让很多其它的人看明确原理,才好进行实际应用,事实上没什么技术难点。

由于我致力要写一个前端系列连载出来,从最初的网页三剑客时代 到如今的JS天下,所以先补齐前面链接

【web前端入坑系列】:点击标题进入
第一篇: 

__biz=MzI5ODM3MjcxNQ==&mid=2247483703&idx=1&sn=173038906c6c86346fc14670af7cfb27&scene=21#wechat_redirect" style="margin: 0px; padding: 0px; color: rgb(0, 128, 255); max-width: 100%; box-sizing: border-box; cursor: pointer; word-wrap: break-word !important; background-color: transparent;">web 前端入坑第一篇:web前端究竟是什么?有前途吗
第二篇: web前端入坑第二篇:web前端究竟怎么学?干货资料!
第三篇: 

__biz=MzI5ODM3MjcxNQ==&mid=2247483750&idx=1&sn=5dbb5b0e57ca0a1625a2e62b6f4eaf32&scene=19#wechat_redirect" style="margin: 0px; padding: 0px; color: rgb(0, 128, 255); max-width: 100%; box-sizing: border-box; cursor: pointer; word-wrap: break-word !important; background-color: transparent;">web前端入坑第三篇 | 一条“不归路” - 学习路线!
第四篇: web前端入坑第四篇 | web前端 | 你还在用jQuery?

下一篇干货:

web前端入坑第六篇:MVVM框架的乐趣和AngularJS、 ReactJS 、Vue.JS的比較

【前端你别闹 】webunao

最帅的技术公众号

我的存在让你明确:生活不仅仅有技术

更有 欢乐 和 梦想

长按扫码关注。听我洗脑

时间: 08-03

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史的相关文章

前端入坑

1.声明 本人并非技术大牛,甚至连牛都算不上,对于真正的大牛来说,我还只是一个小菜鸟.本人也并非科班出身,而是半路出家,因为处于对互联网的热爱(出于高考原因未能选择软件行业,至今都是无法抹去的痛),而投身了互联网,来到了我大前端的世界里.然而为什么写blog,是因为我曾经看过一位前端大师写的一篇名为<作为一个程序员我为什么要写博客>的博文,使我印象深刻,久久不能忘怀,本人建议程序员都看一下,必定受益匪浅. 附一张本人认为的程序员进阶路线: 注:这张图是我自己认为的进阶路线,并且也在为之努力,如

第五篇:朴素贝叶斯分类算法原理分析与代码实现

前言 本文介绍机器学习分类算法中的朴素贝叶斯分类算法并给出伪代码,Python代码实现. 词向量 朴素贝叶斯分类算法常常用于文档的分类,而且实践证明效果挺不错的. 在说明原理之前,先介绍一个叫词向量的概念. --- 它一般是一个布尔类型的集合,该集合中每个元素都表示其对应的单词是否在文档中出现. 比如说,词汇表只有三个单词:'apple', 'orange', 'melo',某文档中,apple和melo出现过,那么其对应的词向量就是 {1, 0, 1}. 这种模型通常称为词集模型,如果词向量元

我的web前端自学之路-心得篇:我为什么要学习web前端?

时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程方面,一开始只是接触到了C语言,但是c语言对于我来说并不友好,也并不是那么的好学,所以自己对程序不是很有兴趣,但一个偶然的机会,我接触到了web前端,看着我的一个大牛同学用前端 所涉及的语言写出了一些很棒的程序,于是就产生了一种很想学习前端的想法和很想把前端做的完美的渴望,于是,就开始了我的前端之路

Python之路【第十五篇】:Web框架

Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #!/usr/bin/env python #coding:utf-8   import socket   def handle_request(client):     buf = client.recv(10

前端工程师技能之photoshop巧用系列第五篇——雪碧图

显示目录 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇--雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提

webpack入坑之旅(二)loader入门

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 引子 在上一篇博客中我们已

【Python五篇慢慢弹(5)】‘类’过依然继续前行,直至ending再出发

‘类’过依然继续前行,直至ending再出发 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondoc入门资料包含了基本要点.本文是对文档常用核心要点进行梳理,简单冗余知识不再介绍,作者假使你用c/java/c#/c++任一种语言基础.本系列文章属于入门内容,老鸟可以略看也可以略过,新鸟可以从篇一<快速上手学python>先接触下python怎样安装与运行,以及pychar

ReactNative for Android入坑(一)

最近找工作发现有些公司要求会ReactNative,决定入坑. 搭建环境:官网详细的教程附链接. 坑一:FQ,建议整个搭建过程中FQ.第一步:安装Chocolatey,管理员运行cmd,输入指令: Chocolatey安装官网指令:@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org

前端知识体系之入门篇总结(一)

利用国庆节时间,把前端学习的知识碎片进行了整理,希望能在前端之路继续努力. 前端是一个范围很大的概念,其领域包括在了计算系统中的方方面面,可以说所有与用户交互行为相关的程序开发工作都是前端的范围,这包括一个数字仪表的显示设计或者一个手机APP.通常意义上讲,前端指的是Web前端的开发工作,而学习前端也是从Web前端知识开始的. 这篇blog面向对前端没有入门或者已经有一定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者,其要旨是整理一个普通网页开发过程中所能用到的知识点.与其它类似的教程