天天看点

Javascript的一种代码结构方式——插件式

上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重、拓展、修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤九剑一样.....)。

代码结构

 这直接上代码结构图(javascript部分)

Javascript的一种代码结构方式——插件式

ps:箭头的指向a->b,表示a调用b

由上面可以看到四种类型的东西:

控制类:提供一个全局的命名空间、保存上下文信息、组件、组件提供的全局方法,负责调用组件初始化。

代码示例如下(不完整):

Javascript的一种代码结构方式——插件式
Javascript的一种代码结构方式——插件式

工具类:提供工具方法,不属于组件和基础类的方法将会放在这里。

基本类:最基础的类,供给组件使用,原则上一个能称为对象的东西都应该写成一个类。

例,下面组件的接口实现类:

Javascript的一种代码结构方式——插件式
Javascript的一种代码结构方式——插件式

组件:例如导航栏、工具栏、任务栏、桌面组件,都是以一个组件形式存在。

在组件里面,组件的创建、初始化、数据渲染、事件绑定都自己解决(有点像自治区)。

Javascript的一种代码结构方式——插件式
Javascript的一种代码结构方式——插件式

组件之间怎么联系呢?

组件与组件之间进行沟通的手段只有一个——就是将自己给其他组件使用的方法提供给控制器(调用控制器的addglobalmethod),控制器保存你的方法,当其他组件使用你的方法时候,就向控制器要(调用控制器的execglobalmethod )。

为啥这种结构叫插件式呢?

看过控制类和组件的代码就知道,控制类只负责帮助调用已经注册到控制类里的组件的初始化方法、组件完成关于自己的所有事。所以当我们需要做一个新的组件时候,只需完成自身的创建、渲染、事件绑定,然后注册到控制类里,控制类就会帮你初始化,组件间互不干涉,这就是插件式(好吧,这是我的理解,并没有这种官方的定义)!!! 

优点?

1、组件的维护、拓展非常简单,因为都是独立开来

2、添加新组件对已存在的组件几乎没有影响(当然你写的组件也不要影响他其他组件、例如样式、html)

缺点!

1、这种结构有应用场景要求,更偏向富web应用使用

转自:http://www.cnblogs.com/lovesong/p/3427855.html

继续阅读