随着Web如何更好地模块化开发

随着Web端功能的日益复杂,人们开始考虑这样一些问题:

如何更好地模块化开发,业务数据如何组织,界面和业务数据之间通过何种方式进行交互在这种背景下,出现了一些前端MVC、MVP、MVVM框架,我们把这些框架统称为MV框架。这些框架的出现,都是为了解决上面这些问题,具体的实现思路各有不同,主流的有Backbone,AngularJS,Ember,Spine等等,本文主要选用Backbone和AngularJS来讲述以下场景。

1、数据模型

在这些框架里,定义数据模型的方式与以往有些差异,主要在于数据的get和set更加有意义了,比如说,可以把某个实体的get和set绑定到RESTful的服务上,这样,对某个实体的读写可以更新到数据库中。另外一个特点是,它们一般都提供一个事件,用于监控数据的变化,这个机制使得数据绑定成为可能。在一些框架中,数据模型需要在原生的Java类型上做一层封装。

defaults方法用于提供模型的默认值,initialize方法用于做一些初始化工作,这两个都是约定的方法,toggle是自定义的,用于保存todo的选中状态。除了对象,Backbone也支持集合类型,集合类型在定义的时候要通过model属性指定其中的元素类型。

如果你想学习一门IT技术,并希望从web前端开发这个最基础的编程技术入门。你可以来这个裙。前面是六  ⑤  7,中间是1 三 7 ,后面是九 O 六。

/uploads/allimg/190327/1-1Z32GH0580-L.jpg

在这里有最新的web前端开发技术课程,免费学习。也有很多人指导你进步,不需要你付出什么,只要你有一颗学习的心就可以了。不愿意认真学习或者自认为不需要学习的就不要加了!

数据模型也可以包含一些方法,比如自身的校验,或者跟后端的通讯、数据的存取等等,在上面两个例子中,也都有体现。AngularJS的模型定义方式与Backbone不同,可以不需要经过一层封装,直接使用原生的Java简单数据、对象、数组,相对来说比较简便。

2、 控制器

在Backbone中,是没有独立的控制器的,它的一些控制的职责都放在了视图里,所以其实这是一种MVP(Model View Presentation)模式,而AngularJS有很清晰的控制器层。

还是以这个todo为例,在AngularJS中,会有一些约定的注入,比如$scope,它是控制器、模型和视图之间的桥梁。在控制器定义的时候,将$scope作为参数,然后,就可以在控制器里面为它添加模型的支持。


3、视图

在这些主流的MV框架中,一般都提供了定义视图的功能。也有那么一些视图,需要依赖于界面上的已有元素,比如下面这个,它通过el属性,指定了HTML中id为todoapp的元素,并且还在initialize方法中引用了另外一些元素,通常,需要直接放置到界面的顶层试图会采用这种方式,而“部件”视图一般由主视图来创建、布局。改变模型可以随时反映到界面上在界面上做的操作(输入,选择等等)可以实时反映到模型里。而且,这种绑定都会自动忽略其中可能因为空数据而引起的异常情况。

4、模板

模板是这个时期一种很典型的解决方案。我们常常有这样的场景:在一个界面上重复展示类似的DOM片段,例如微博。但是使用模板技术,这一切可以更加优雅。

主流的模板技术都提供了一些特定的语法,有些功能很强。值得注意的是,他们虽然与JSP之类的代码写法类似甚至相同,但原理差别很大,这些模板框架都是在浏览器端执行的,不依赖任何服务端技术,即使界面文件是.html也可以,而传统比如JSP模板是需要后端支持的,执行时间是在服务端。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:没有了
下一篇:建立网站要怎样选择主机呢?

相关文章阅读