Wep应用实战

首先我们就来说一下wep的发展简史：

Web 1.0】
      Web1.0时代开始于1994年，其主要特征是大量使用静态的HTML网页来发布信息，并开始使用浏览器来获取信息，这个时候主要是单向的信息传递。最早Web主要被一帮科学家们用来2共享和传递信息，全世界的Web服务器也就几十台。第一个Web浏览器时Berners Lee在NeXT机器上实现，也只能跑的NeXT机器上。 真正使Web流行起来的是Mosaic浏览器，是Netscape Navigator的前身。1994 年底，由 Berners Lee 牵头的万维网联盟（World Wide Web Consortium,W3C）成立，W3C负责相关标准的制定，这标志着万维网的正式诞生。
      Web1.0的本质是聚合、联合、搜索，其聚合的对象是巨量、无序的网络信息。但Web1.0 只解决了人对信息搜索、聚合的需求，而没有解决人与人之间沟通、互动和参与的需求，所以Web2.0应运而生。

【Web 2.0】
      Web 2.0开始于2004年3月O’Reilly Media公司和MediaLive公司的一次头脑风暴会议。Tim O’Reilly 在发表的“What Is Web2.0”一文中概括了Web2.0的概念，并给出了描述 Web2.0 的框图——Web2.0 MemeMap，该文成为 Web2.0 研究的经典文章。此后关于 Web2.0 的相关研究与应用迅速发展，Web2.0 的理念与相关技术日益成熟和发展，推动了Internet的变革与应用的创新。在Web2.0中，软件被当成一种服务，Internet从一系列网站演化成一个成熟的为最终用户提供网络应用的服务平台，强调用户的参与、在线的网络协作、数据储存的网络化、社会关系网络、RSS应用以及文件的共享等成为了Web2.0发展的主要支撑和表现。Web2.0模式大大激发了创造和创新的积极性，使Internet重新变得生机勃勃。Web 2.0的典型应用包括Blog、Wiki、RSS、Tag、SNS、P2P、IM等。

【Web 3.0】
      Web3.0是Web2.0的发展和延伸。Web3.0将杂乱的微内容进行小单位继续拆分，同时进行词义标准化、结构化，实现微信息之间的互动和微内容间基于语义的链接。Web3.0能够进一步深度挖掘信息，并使其直接从底层数据库进行互通，并把散布在Internet上的各种信息点以及用户的需求点聚合和对接起来，通过在网络上的元数据，使机器能够理解网络内容，从而提供基于语义的检索与匹配，是用户的检索更加个性、精准和智能。Web3．0浏览器会把网络当成一个可以满足任何查询需求的大型信息库。Web3．0的本质是深度参与、生命体验以及体现网民参与的价值。
 

之后我们就来说一下本次应用实战的重点Vue.js——渐进式JavaScript框架

首先就是这个渐进式：Vue.js提供了很多的功能：Vue核心插件、Vue-Router、Vuex、Vue-Cli。 这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。 即插件化开发：Vue.js保持了轻量级的功能，核心库与路由、状态管理、AJAX等功能分离，可通过加载对应的插件来实现响应的功能。

【JavaScript】 前端技术生态都是建立在JavaScript基础上。 JavaScript是前端工程师使用的唯一编程语言。 没有竞争对手且不会过时

【框架】 框架可以帮助省略一些基本的相同底层代码的反复书写，只需要调用框架的方法就可以实现你想要的功能。 前端框架有：Angular框架、React框架、VueJS框架... “Vue.js兼具Angular.js和React.js的优点，并剔除了他们的缺点。”被授予了这么高评价的Vue.js,也是开源世界华人的骄傲，因为它的作者是为中国人——尤雨溪。

接下来我们好好讨论一下Vue.js的高级软件开发中的软件架构设计模式  M V VM 

  什么是MVVM.呢？MVVM（Model-View-Viewmodel）是一种软件架构模式。. MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开，这是通过标记语言或GUI代码实现的。. MVVM的视图模型是一个值转换器， 这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。. 在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。.

MVVM结构

model模型

指的是后端传过来的数据。

view视图

指的是所有看到的页面，可以理解为将数据以某种方式呈现给用户。

ViewModel

指的是视图模型，他是连接view和model的桥梁。

从上面的图片可以大致看到，有两个不同的方向。

1.模型->视图

解析：将后端数据转换为前端的页面。实现的方式是数据绑定。 

2.视图->模型

解析：将前端页面转换为后端数据的实现方式：叫做Dom数据监听。

存在两个方向都能实现的情况下，叫做数据的双向绑定。

更深层次了解MVVM，我们需要了解MVC架构，从MVC来理解MVVM演变和出现。

二、MVC是什么？

MVC的全称是Model View Controller。MVC是Model-View-Controller的简写。MVC的目的是讲M和V的代码进行分离，且MVC是单向通信，即View和Model，必须是通过Controller来承上启下，Controller指的是页面的逻辑，他对用户的请求进行接收，并将Model返回给用户。

M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据；

V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的；

C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

五、MVVM对MVC的完善

MVVM就是将其中的View的状态和行为抽象化，让我们的视图UI和业务逻辑进行分离。

在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行数据交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，Model数据的变化也会立即反应到View上面。

ViewModel通过双向数据绑定把View和Model层连接起来，而View和Model之间的同步工作是完全自动的，不需要进行人为的干涉，因此开发者只需要关注业务逻辑，不需要手动操作Dom，不需要关注数据状态的同步问题，复杂的数据状态的维护完全由MVVM来进行管理。可以说是具备完美耦合性和可测试性

总结

MVVM模型的好处是，除了获得分离之外，还可以实现模型和视图之间的分离，MVVM模型的功效是获得了一个无需查看即可轻松更改的一致模型。实施MVVM的重要关键的要素是可测试性，可维护性和可扩展性。MVVM的对于模型和视图的隔离，大大方便了开发者对于数据状态的维护与管理。

声明式编程&命令式编程

说完了编程模型那么接下来就是编程方法了

1. 什么是声明式编程？（Declarative）

简单的说，你只需要告诉计算机，你要得到什么样的结果，计算机则会完成你想要的结果，以Vue为例，在页面中通过 {{ }} 显示一个data里面的变量，你只需要改变这个变量，页面就会跟着刷新，这就是你只需要结果，vue 内部去处理过程，这就是声明式编程。

2. 什么是命令式编程？（Imperative）

用详细的命令机器怎么去处理一件事情以达到你想要的结果。例如你想通过点击改变页面中某一个元素，首先要获取按钮，再给按钮添加点击事件，获取要改变的元素，执行点击函数，改变元素达到自己的目的，这是一步一步的步骤操作，就如同给计算机发布命令，一步一步执行，这就是命令式编程。

3.两者优缺点

命令式编程更加的精细化，更严谨，程序也会一丝不苟的执行你的命令。但是操作步骤比较多，代码量大，影响开发效率. 声明式编程让你可以更关注在状态表现，而不用去考虑底层如何实现, 声明式编程能在特定的更高层面代码领域我们带来效率的提升，程序员只需要对想要的结果进行深思熟虑，程序会自动的解决过程。当然代码看起来更简洁也是大大的满足了众多强迫症程序猿，但同时 他的可读性相较于命令式有点差。

Chrome浏览器-开发者工具

 打开开发者工具方法

方法一：在对应网页页面 右键网站 选择“检查”选项

方法二：按“F12”按钮

方法三：按Ctrl+Shift+I 组合键

其中操作

之后我们来说一下关于cmd终端的操作cmd的常见命令符：

盘符名称+冒号——盘符切换

dir——查看当前路径下的文件列表

cd目录——进入单级目录 （tab补足目录名称）

cd..——回退到上一级目录

cd 目录一\目录二\...——进入多级目录

cd\——回退到盘符目录

cls——清屏

exit——退出命令提示符窗口 

calc——启动计算机 cleanmgr——启动磁盘清理 notepad——启动记事本 magnify——启动放大镜 mspaint——启动画图板 osk——启动屏幕键盘

CDN

全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络

基本思路：

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

目的：

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。

控制时延无疑是现代信息科技的重要指标，CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性。

优势：

如果你在经营一家网站，那你应该知道几点因素是你制胜的关键：

1. 内容有吸引力
2. 访问速度快
3. 支持频繁的用户互动
4. 可以在各处浏览无障碍

另外：你的网站必须能在复杂的网络环境下运行，考虑到全球的用户访问体验。你的网站也会随着使用越来越多的对象（如图片、帧、CSS及APIs）和形形色色的动作（分享、跟踪）而系统逐渐庞大。所以，系统变慢带来用户的流失。

Google及其它网站的研究表明，一个网站每慢一秒钟，就会丢失许多访客，甚至这些访客永远不会再次光顾这些网站。可以想像，如果网站是你的盈利渠道或是品牌窗口，那么网站速度慢将是一个致命的打击。

这就是你使用CDN的第一个也是最重要的原因：加速网站的访问