mvc 框架ember.js的简单介绍

什么是Ember.js

Ember.js是一个开源的免费JavaScript客户端框架，用于开发Web应用程序。使用模型-视图-控制器（MVC）模式。该框架提供通用数据绑定，基于网址驱动的方法用于构建不同应用，重点放在可扩展性上

一什么是MVC、为什么不用MVC

一、MVC的含义：

M（modal）：是应用程序中处理数据逻辑的部分。
V （view）：是应用程序中数据显示的部分。
C（controller）：是应用程序中处理用户交互的地方（Controller是MVC中的数据和视图的协调者，也就是在Controller里面把Model的数据赋值给View来显示（或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器））；

1、通俗易懂的解释下什么是mvc模式：

如果前端没有框架，只使用原生的html+js，MVC模式可以这样理解。将html看成view;js看成controller，负责处理用户与应用的交互，响应对view的操作（对事件的监听），调用Model对数据进行操作，完成model与view的同步（根据model的改变，通过选择器对view进行操作）;将js的ajax当做Model，也就是数据层，通过ajax从服务器获取数据（按照上面这种方式分层，感觉多少有点强行MVC，因为Model层被弱化了）。

3：MVC模式有什么缺点

对 DOM 操作的代价非常高
程序运行缓慢且效率低下
内存浪费严重
应用程序复杂性高，难以分工开发。

二：什么是MVVM，MVVM的优点

1:什么是MVVM：

M（modal）：模型，定义数据结构。
C（controller）：实现业务逻辑，数据的增删改查。在MVVM模式中一般把C层算在M层中，（只有在理想的双向绑定模式下，Controller 才会完全的消失。这种理想状态一般不存在）。
VM（viewModal）：视图View的模型、映射和显示逻辑（如if for等，非业务逻辑），另外绑定器也在此层。ViewModel是基于视图开发的一套模型，如果你的应用是给盲人用的，那么也可以开发一套基于Audio的模型AudioModel。
V（view）：将ViewModel通过特定的GUI展示出来，并在GUI控件上绑定视图交互事件，V(iew)一般由MVVM框架自动生成在浏览器中。

MVVM模式在vue中的对应关系

ember 初始化项目
在安装emberjs之前，它应该要求在具有兼容浏览器的系统上安装nodej。在nodejs命令行界面中使用以下命令安装emberjs-

npm install -g ember-cli

ember new my-app

目录结构

├── app
│   ├── components
│   │   └── .gitkeep
│   ├── controllers
│   │   └── .gitkeep
│   ├── helpers
│   │   └── .gitkeep
│   ├── models
│   │   └── .gitkeep
│   ├── routes
│   │   └── .gitkeep
│   ├── styles
│   │   └── app.css
│   ├── templates
│   │   └── application.hbs
│   ├── app.js
│   ├── index.html
│   └── router.js
├── config
│   ├── environment.js
│   ├── optional-features.json
│   └── targets.js
├── public
│   └── robots.txt
├── tests
│   ├── helpers
│   │   └── .gitkeep
│   ├── integration
│   │   └── .gitkeep
│   ├── unit
│   │   └── .gitkeep
│   ├── index.html
│   └── test-helper.js
├── vendor
│   └── .gitkeep
├── .editorconfig
├── .ember-cli
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .template-lintrc.js
├── .travis.yml
├── .watchmanconfig
├── README.md
├── ember-cli-build.js
├── package.json
├── package-lock.json
└── testem.js

模型—model
模型和路由相关联，因为模型通过作为参数传递到调用路由来实现路由。它操作存储在数据库中的数据。该模型是扩展Ember数据功能的简单类。Ember Data是一个与Ember.js紧密耦合的库，用于存储在数据库中的数据。

视图- - template
创建视图有两个原因：

如果存在处理用户事件的复杂性。

您可以创建可重复使用的组件。

视图负责处理用户事件并更新DOM（文档对象模块）。将评估handlebar模板以创建视图。在模板评估期间，将添加子视图。它通过为最终用户提供丰富的UI，帮助保持应用程序系统的健壮性。

模板是最终用户的强大的UI。您可以直接将模板嵌入到HTML标记中。Ember.js提供了Handlebar模板库来构建前端应用程序，就像普通HTML一样。它还支持正则表达式并动态更新表达式。

控制器—controller
控制器管理模型的显示逻辑，并且还控制路线，模型和视图之间的操作。它从路由获取模型，并在视图，模型和模板之间建立连接。 Ember.js自动创建控制器。

路由—router
路由是应用程序对象的URL表示，并将其转换为嵌套模板。它从它们的模型钩子查询模型，以便在控制器和模板中可用。它在单例路由器对象中声明。

APP（一般是从route、controller或者component发请求）请求数据。

请求并没有直接发送到后端服务而是先在store(ember data其实就是一个store)缓存中查找，ember之所以能实现动态更新模板数据也是因为有了store。

如果请求的数据存在在store中，则直接返回到route、controller或者component；如果在store中没有发现请求的数据，所以请求的数据是首次，数据还未缓存到store中，则请求继续往下到了apdater层。

在adapter中，adapter会根据请求的调用方法构建出对应的URL。比如在route、controller或者component中执行方法findRecord(‘user’, 1)，此方法作用是查询id为1的user数据。适配器构建出来的URL为: http://domain/user/1，然后发请求到后端。

适配器会对比后端接受的数据格式与ember data发送的数据格式，如果不一致需要在适配器的``方法中格式化发送的数据格式。请求经过适配器构建得到URL后发送到后端服务，后端服务根据URL请求查询数据库然后格式化数据格式返回到适配器。

适配器根据得到的数据和ember data所接受的数据格式匹配，如果格式不一致需要在适配器的``方法中格式化后端返回的数据。

经过适配器之后数据转到ember data（store）中，首先缓存到store中，然后返回到调用处（route、controller、component）

数据请求完毕

注意：findRecord(‘user’, 1)方法执行过程，请求的findRecord(‘user’, 1)方法会在Ember Data内部解析为find方法，find方法会首先在store缓存中查数据，如果没有则会流转到adapter中组装URL并格式化请求数据，然后发送到后端服务。

从图中看到从适配器返回的数据是promise所以调用findRecord方法获取数据的时候需要then()。同时可见这是个移步请求，只有promises执行成功才能得到数据。也就是说如果考虑周全的话还需要在findRecord的时候处理promises执行失败的情况。

另外如果你想跳过store不需要这层缓存也是可以的。会可以这样做：store.findRecord(type, id, { reload: true })使用reload属性设置为true让每次请求都跳过store直接发送请求到后端，对于实时性要求高的APP则需要这样处理。

介绍完架构之后将追个介绍其中的每个主要的功能特性。
需要说明的是：Models, records, adapters以及store都是Ember Data最核心的东西，他们是包含的关系，只要使用了Ember Data才能使用model、store功能。有些初学者老是问这几个东西的关联，希望看到这里的同学不要在提这样的问题了