没有合适的资源?快使用搜索试试~ 我知道了~
如何一步一步打造高可扩展性的应用程序?
0 下载量 101 浏览量
2021-03-02
05:43:06
上传
评论
收藏 422KB PDF 举报
温馨提示
试读
11页
随着项目的规模越来越大,项目的维护性可能会变得越来越差,有时可能会出现牵一发而动全身的情况。如果需要修改某个功能的代码,就会耗费大量的人力和时间。此时,高可扩展性、低耦合的应用程序就变得非常重要了。随着项目的规模越来越大,项目的维护性就可能会变得越来越差,有时可能会出现牵一发而动全身的情况。如果需要修改某个功能的代码,或者添加某项功能,会耗费大量的人力和时间。这种情况下,高可扩展性的、低耦合的应用程序就变得非常重要了。本文通过构建一个时钟程序,来讲解高扩展的应用程序是如何一步一步搭建的。一个可扩展的应用程序应该能够以某种方式实现增长,并且添加、删除、增强、重构某些组件,对于其他组件的影响微乎其
资源推荐
资源详情
资源评论
如何一步一步打造高可扩展性的应用程序?如何一步一步打造高可扩展性的应用程序?
摘要:随着项目的规模越来越大,项目的维护性可能会变得越来越差,有时可能会出现牵一发而动全身的情况。如果需要修改
某个功能的代码,就会耗费大量的人力和时间。此时,高可扩展性、低耦合的应用程序就变得非常重要了。
随着项目的规模越来越大,项目的维护性就可能会变得越来越差,有时可能会出现牵一发而动全身的情况。如果需要修改某个
功能的代码,或者添加某项功能,会耗费大量的人力和时间。这种情况下,高可扩展性的、低耦合的应用程序就变得非常重要
了。
本文通过构建一个时钟程序,来讲解高扩展的应用程序是如何一步一步搭建的。
什么是可扩展的应用程序?
一个可扩展的应用程序应该能够以某种方式实现增长,并且添加、删除、增强、重构某些组件,对于其他组件的影响微乎其
微。
再大的应用程序,往往都是从很小的规模开始,然后一点一点发展起来的。但有时可能会由于增长过快,规模变得越来越大,
导致项目难以管理,最终软件可能需要完全重写。
开发人员在一开始编码时就要充分考虑到这种情况。本文以编写功能独立的JavaScript应用为例来说明如何构建可扩展的应用
程序,同时还将讨论如何编写可测试、可维护、可调试、直观的代码。
本文将使用soma.js框架来编写一个高可扩展性的JavaScript时钟应用。
什么是soma.js?
构建高扩展性的应用的要点在于构建组成该应用的小的、单个的模块。soma.js是一个JavaScript框架,它提供了一系列工具
来帮助开发者创建一个可分解为若干个块的松耦合的架构。
soma.js不依赖于特定的架构模式。该框架可以作为一个MVC 或 MV* 框架,此外, soma.js也可以用来管理独立的模块、创
建独立的窗口小部件或其他任何的体系结构。
耦合问题
让我们想象一种常见的场景,“A”组件需要组件“B”才能运行,这意味着A对B有一个直接的依赖。如果代码中的组件对彼此的依
赖性非常大,就称为高耦合的代码。这种代码最终会导致项目很难维护和更改,一更改就会影响其他部分代码。
高、低耦合的代码在开发人员的工作中有很大的差别,最直接的体现是,在修改部分模块代码所需的时间上,低耦合的代码可
能需要5分钟,而高耦合的代码可能会需要5个小时。
解决办法是——编写自包含、自封装、不影响其他组件的代码,最大化地减少依赖。这在理论上很简单,但实践起来非常难。
同时,减少依赖还会带来了另一个问题:如果组件彼此之间无联系,那么组件之间如何进行通信?此时,设计模式就有了用武
之地。
soma.js中提供了一系列用于架构解耦和测试的工具,以及各种设计模式解决方案,比如依赖注入(dependency injection)、
观察者模式(observer pattern)、中介者模式(mediator pattern)、外观模式(facade pattern)、命令模式(command
pattern),面向对象(OOP)工具集,并提供了一个DOM操作模板引擎作为可选插件。
示例应用
下面来看一个示例应用,该应用可以在屏幕中创建3种不同的时钟:数字时钟、模拟时钟和极性时钟。可以通过不同的设计模
式,来使得项目中的元素可以重用于该项目之外。
观看演示:时钟应用
下面来看看这个程序是如何构建的。
项目规划和元素去耦
项目规划和功能分解(元素去耦)是编写代码前的一个非常重要的步骤,在下面的练习中,将有两种不同类型的函数:
1.没有依赖性的函数(理想情况下,所有的模型和视图都应该是这样,以便可重用)
2.从其他组件中移除依赖性的函数
通过分析,该应用程序中应该包含以下这些不同的实体:
1.一个作为起始组件的应用实例——/js/app/clock.js (ClockDemo)。用于准备应用程序所需要的东西,作用是定义依赖关系和
创建元素。它接收DOM元素来作为参数,所以应用程序中没有硬DOM引用。一个保存应用程序的状态(时间)的模型
——/js/app/models/timer.js (TimerModel)。用于提供必要的时间信息,以便view层可以显示当前时间。
2.3种时钟的视图。作用是在屏幕上以不同的方式显示一个时钟,所有视图实现相同的接口,以便它们可以以同样的方式收到
时间信息。
/js/app/views/clocks/analog/analog.js (AnalogView)、
/js/app/views/clocks/digital/digital.js (DigitalView)/js/app/views/clocks/polar/polar.js (PolarView)
3.一个中介者(mediator)——/js/app/mediators/clock.js (ClockMediator),表示一个DOM元素的。其作用是隐藏和创造时
钟,它还连接timer模型到view层,以便可以接收时间。中介者封装了通信事件,并从model层和view层中消除了依赖。
4.一个selector视图——/js/app/views/selector.js (SelectorView),用来创建3种不同时钟的按钮。其作用是调度事件,并通知
元素需要删除当前的时钟,再创建一个新的时钟。
应用程序的文件结构和体系结构如下图所示。
对接口的思考
尽管接口在JavaScript语言中不存在,但其广泛用于Java或其他语言中。因此,我们也可以在JavaScript程序中应用接口的概
念。
接口是对一组公共方法和属性的描述。一个函数如果要实现接口,那么也需要去实现接口中的所有方法。
在面向对象编程中,接口可以解决许多代码重用相关的问题。一些严格的JavaScript的超集(如Typescript)也包含接口功
能。看下面这个例子,在Typescript中实现“汽车”接口的代码如下:
interface ICar {
engine: IEngine;
basePrice: number;
state: string;
make: string;
model: string;
year: number;
}
class Car implements Icar {
// must implement the ICar signature in this class
}
在JavaScript中,接口不是一个内置的功能,但可以通过编写几个函数来实现相同的功能。
首先开发者应该思考应用程序内的哪些元素的接口需要是独立、可重用的?比如,clock视图必须是可互换、可重用的,并提
供完全相同的方法,以便它们可以在不影响其他元素的情况下进行互换。
timer模式和clock视图的接口代码如下:
interface ITimerModel {
add(callback: function);
remove(callback: function);
update();
}
interface IClockView {
update(time: Object);
dispose();
}
下图显示了时钟应用程序中的不同的接口实现:
剩余10页未读,继续阅读
资源评论
weixin_38733333
- 粉丝: 4
- 资源: 923
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功