MV*

前言

前端演进是段特别有意思的历史。人们总是在过去就做出未来需要的框架，而现在流行的是过去的过去发明过的。如，响应式设计不得不提到的一个缺点是：

他只是将原本在模板层做的事，放到了样式（CSS）层来完成。

前言

什么是前端？

wiki：前端Front-End和后端Back-End是描述进程开始和结束的通用词汇。前端作用于采集输入信息，后端进行处理，计算机程序的界面形式，视觉呈现属于前端。

前言

在MV*中前端属于哪个？

V？

我们将model，view与其他要素关联起来的某种形式叫做MV*架构

前言

复杂度同力一样不会消失，也不会凭空消失

它总是从一个物体转移到另一个物体

或者从一种形式转换为另一种形式

MVC

有哪些MVC流行框架？

SSH的Spring

我们在Controller层应该做的事情是？

1.处理请求的参数

2.渲染和重定向

3.选择Model和Service

4.处理Session和Cookie

因为Controller层的足够强大，所以View在MVC时代所做的事情就是渲染，被动渲染

而我们叫做前端开发工程师

MVP

MVP？

MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。

MVVM

MVVM，全称Model-View-ViewModel，Model提供数据，View负责显示，ViewModel通过双向绑定实现视图更新。

MVVM的核心思想：不关注数据如何呈现到页面，由框架更新Model和VIew

Jquery与MVVM代码Demo

输入一个名字，div更新输入的名字

Jquery

var updateLabel = $("#label-show");
$("#input-name").onchange(function(){
    var name = $(this).val();
    var defaultStr = updateLabel.text();
    var updateStr = defaultStr + name;
    updateLabel.empty().text(updateStr);
})

<input id="input-name" value=""/>
<label id="label-show">我的名字是</label>

Angular.js

<input ng-model="name" id="input-name" value=""/>
<label id="label-show">
     我的名字是 {{name}}
</label>

http://www.runoob.com/try/try.php?filename=try_ng_intro

ViewModel的数据绑定的思维颠覆了传统的javascript操作DOM的行为，迎合MVC的思想又能够让javascript的逻辑更加的清晰 

MVVM实现

Angular.Js

脏检查机制，Timer

Vue.Js

Object.defineProperty的getter和setter 结合观察者模式(watcher,dep,observer) 

模板 Template, 与其相关的有 String-based、DOM-based。

String-base，基于字符串的模板

向对象添加新属性。  当对象不具有指定的属性名称时，发生此操作。  

修改现有属性的特性。  当对象已具有指定的属性名称时，发成此操作。 

var a= {}
Object.defineProperty(a,"b",{
  set:function(newValue){
    console.log("你要赋值给我,我的新值是"+newValue)
    },
  get:function(){
    console.log("你取我的值")
    return 2 //注意这里，我硬编码返回2
   }
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b) 

https://github.com/georgebbbb/fakeVue

What's More?

爱之初体验

> npm install -g cordova ionic

> ionic start myApp tabs

> ionic platform add ios

> ionic build ios

> ionic emulate ios

React Native

Javascript Core

> npm install -g react-native-cli

> react-native init PropertyFinder

HomeWork

结合RAP MOCK 出Json数据，选择一种MV*框架实现Todo list。

你可以选择Vue.js Angular.js React.js等等