控件开发手册

概述

控件是一个可以独立运行的系统或者模块,其目的是为了将程序模块化,使各个模块之间可以单独开发,单独测试,以独立升级和减少不必要的组件之间的交互为基本原则,通过一定程度的分离,实现重用。 本文档主要介绍NEJ框架中对控件封装的一些要求及规范。

类模型

OOP的编程思想为控件的封装提供了很好的解决思路,因此在NEJ中对控件的封装会基于OOP的思想来实现,由于JS语言本身与纯OOP语言存在一定的差异,因此使用JS来实践OOP会有很多的方式,NEJ为项目在使用OOP的方式编程提供了一种解决方案,以下主要介绍NEJ框架对OOP的实践规范。

定义

NEJ框架中定义一个类统一使用NEJ.C方法,使用范例如下所示

img

通过此方法定义的类具有以下特性:

  • 类具有静态方法_$extend,可以从其他类继承
  • 实例具有init方法用来初始化控件,该方法中通过supInit调用父类__init方法

继承

通过NEJ.C定义的类具有静态方法_$extend,可以从其他类继承,使用范例如下所示 img

_$extend

img

实现

通过NEJ.C定义的类会有init方法来初始化类,该方法中可以通过supInit,使用范例如下图所示 img

__init

img

__supInit

img

控件体系

NEJ中封装的控件体系结构如下图所示

img

所有的控件支持事件驱动编程模型,因此在控件的底层会提供一套对事件驱动基础设施的支持,在此之上为控件行为的一个抽象 NEJ为上层应用提供两大类的控件支持,Util控件和UI控件,两类控件的主要区别在于主业务逻辑关注点的差异,Util控件主要关注于对控件主业务逻辑的实现,UI控件主要关注于对控件的视觉外观及结构的实现。 由于UI控件对外观及结构的耦合性比较强,而实际项目中这部分变化的概率会比较大,因此对于UI控件的封装会转化为两部分,一部分为封装控件外观及结构的UI控件,另一部分为封装控件主业务逻辑的Util控件,因此当项目中UI部分变化时只需调整UI控件即可,而Util控件则可以重用,以此来增强控件的可重用性。控件体系的实现关系如下图所示

img

控件基类

使用NEJ封装的控件统一采用分配、回收的使用机制,因此在封装一个控件时需遵循以下定义的规范

Util控件

NEJ中所有控件都继承自nej.ut._$$Event类,该类主要实现控件分配回收的业务逻辑及对事件驱动模型的支持。整个体系结构如下图所示

img

类方法

_$allocate

img

_$recycle

img

_$getInstance

img

实例方法

__reset

img

__supReset

img

__destroy

img

__supDestroy

img

__doInitDomEvent

img

_$recycle

img

事件方法

事件方法也是实例方法,控件封装时主要以使用为主

_$setEvent

img

_$batEvent

img

_$hasEvent

img

_$clearEvent

img

_$appendEvent

img

_$dispatchEvent

img

UI控件

UI控件继承至Util控件,因此具有Util控件的基本行为,因为UI控件主要关注控件外观和结构,因此会有自己的一些行为抽象。UI控件的外观和结构的实现基于NEJ中的模板系统,因此在这里可以先参阅NEJ模板使用手册。整个体系结构如下图所示

img

__initXGui

img

__initNode

img

__supInitNode

img

__initNodeTemplate

img

控件模板

###Util控件 img

###UI控件 img

控件范例

###需求 img

视觉交互逻辑

  • 上一页:首页时禁用,其他页码时点击修改页码至上一页
  • 下一页:尾页时禁用,其他页面时点击修改页码至下一页
  • 页码项:当前页选中状态,点击非当前页修改页码至点击页

页码显示逻辑

  • 首尾页码必须显示,剩余页码显示在中间剩余的页码项中
  • 首两项页码非连续时显示省略号,尾两项页码非连续时显示省略号
  • 页码小于页码项长度时隐藏多出的页码项
  • 当前页码在保证连续的前提下在中间段居中显示

###设计 根据前面章节的说明,在这里我们将该分页器控件分成两个控件实现,一个UI控件,主要关注分页器的视觉及结构;另一个Util控件,主要关注分页器的分页逻辑,各控件间关系如下图所示 img

实现

nej.ui._$$Pager

  • 重写__initXGui方法指定分页器的外观和结构

img

  • 重写__initNode方法初始化并保存需要使用的节点

img

  • 重写__initNodeTemplate方法动态生成结构模板

img

  • 重写_reset方法将分页逻辑委托给nej.ut.$$Page控件实现

img

  • 重写__destroy方法回收时销毁分页逻辑委托对象

img

nej.ut._$$Page

由于实际项目中会有很多的分页逻辑,因此在分页控件的Util部分会提取一个通用的基类,而实际的分页算法由具体子类负责实现,具体结构如下图所示

img

本例中我们使用的是$$Page控件 源码:$$PageBase、_$$Page

扩展

外观结构扩展

img

扩展nej.ui._$$Pager

img

重写__initXGui调整结构部分内容

img

重写__initNodeTemplate动态生成结构模板

img

结构功能扩展

img

结构部分实现同外观结构扩展实现方式 重写__initNode方法处理新增功能业务逻辑

img

实现新增功能业务逻辑

img

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus