Web前端MVVM设计模式与Vue.js浅析

近几年Web的开发方式

Web1.0

简单的html和css以及js脚本,基本都是一些静态页面,复杂一些的页面大多是采用结合服务端的开发方式。前端工作大概就是切图,写html和样式。

图片1

Web2.0

出现了一批以DOM,和浏览器兼容统一的前端框架,例如jquery,bootstarp等,当然最重要的还是ajax的出现,意味着可以不重新加载页面的情况下,更新数据。同时也是前后端工作逐渐划分清晰。

图片2

Web3.0(单页面应用开发)

当前较流行的开发方式,页面开发都是以组件化模块化为基础概念,同时ECMAScript设计语言的出现,被广泛应用,也出现了以ECMAScript设计语言为基础开发的框架。例如MVVM的angular和vue。

图片3

回到主题,什么是MVVM设计模式,MVVM的全称是Model View ViewModel,这种架构模式最初是由微软作为微软软件的展现层设计模式的规范提出。

它是MVC模式的衍生物。

MCV由model、controller、view组成,视图发送指令给控制器,控制器处理业务逻辑,通知模型改变状态,模型将新数据发送给model,这是一种单向的业务。

图片4

图片5

MVVM:用户再视图输入数据,视图将模型发送给viewmodel,viewmodel处理并发送给model,model验证并将状态返回给viewmodel,viewmodel最后发送给view,展示。其中模型和视图不存在直接的业务逻辑关系。其他层都是双向的业务。

在MVVM中,model只关心数据,和验证,不关心行为。

在MVVM中,view是用户最直观的交互部分。

在MVVM中,viewmodel是一个专门转换数据的控制中心。控制这view的显示和model的数据信息。

近几年,MVVM模式在JavaScript中开始有人实现,目前比较成熟的框架有vue.js, angular.js 4.0,下面我们就以vue.js为例看下MVVM模式中个部分的具体职责和实例代码,同时理解使用这种模式开发的优点和缺点。

图片8

Vuejs是什么,可以理解为,更快速的构建用户界面的渐进式MVVM框架。他由国人尤玉溪开发,采用ES5为基础设计语言。是当前果然最热门的框架。因为他的性能以及丰富的生态系统。

那么vuejs到底能做什么,他有最重要的两个功能,模板渲染和模块组件化开发,当然还有一些非常优秀的扩展,像路由、ajax框架等。下面解释一下什么是模板渲染和组件化开发,

模板渲染同时也叫数据同步、双向绑定,传统页面开发,如果需要实现XXXX功能,而利用vuejs则XXXX。这就是模板渲染。

下面来看模块组件化开发,我们可以理解为:页面由多个组件搭建而成,例如XXXXX。这就是模块组件化开发。在vuejs中注册组件是这样的balala..

Vuejs还有一些非常优秀的扩展,如果我们需要搭建一个以vuejs构成的完全的项目,自己搭建会较麻烦,所以官网提供了一个脚手架,也叫vuejs全家桶,他基本包括vuejs2.0、router、webpack以及resource(ajax)框架。

首先先解释一下,其中最重要的路由和webpack是什么意思,路由是指根据地址分配处理程序,一般由后端处理,那么和前端的最主要的区别在于,后端路由,两个地址每次请求都会向服务器发起请求,然后服务器响应请求,过程中必然有延迟,而前端路由只是变换了地址,无网络延迟。

Webpack是指一个自动处理分析项目结构并将代码打包成浏览器能识别的语言的一个打包工具。

全家桶式的开发,需要了解dos命令,以及npm的使用。

vue.js浅析

vue.js 是什么(2016.10发布了 2.0版本)


Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

  • 2013 年底作为个人实验项目开始开发
  • 2014 年 2 月公开发布
  • 2014 年 11 月发布从头重写的 0.11
  • 2016年10发布了 2.0版本
  • 截止2017年8月62000+ Stars on GitHub图片8

    vue.js 能做什么


  • 数据渲染/数据同步(双向绑定)

  • 组件化/模块化
  • 路由
  • 状态管理模式(vuex)

图片9

  • 轻量级
  • 高效率
  • 简洁而全面的文档
  • 完整的社区以及讨论社区
  • 在 API 与设计两方面非常简单,因此可以快速地掌握它的全部特性并投入开发。
  • 在性能方面,可以参考这个第三方跑分。图片7

模块/组件化


图片11

 

Web前端MVVM设计模式

Web 1.0


  1. 简单的HTML+JavaScript脚本
  2. 纯静态的页面
  3. 结合服务端的开发模式图片1

    Web 2.0


  • ajax
  • jQuery、BootStrap等前端框架
  • Requirejs 图片2

Web 3.0 (Commponents SPA)


  • ES5、ES6(ECMAScript)
  • TypeScript
  • MVVM ( angularjs、vuejs ) 图片3

Web 4.0 全栈 node.js …

 

MVVM(Model+ViewModel+View)


MVVM模式是根据MVP模式来的,可以简单的说,MVVM模式就是WPF版的MVP模式。MVP模式,MVC模式,这几个模式都是为了抽离出UI逻辑和业务逻辑。

MCV:Backbone、ember MVVM:vue.js、angular.js 4.0

图片4 图片5

当前热门MVVM框架


图片6

纯异步nodejs文件夹(目录)复制

node.js 复制文件夹

思路:

1、callback 驱动

2、递归所有需要复制文件

3、在一定阀值下并发复制文件

转载至