什么是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功能。有些初学者老是问这几个东西的关联,希望看到这里的同学不要在提这样的问题了