搜索框的实时显示——活动图

      什么是UML呢?借用官方的说法:UML:Unified Modeling Language统一建模语言。看到这里,不懂的人都是一脸蒙逼的。这是什么鬼?别急,我是这么理解的:通过图形化来表现项目的开发流程及理解项目的设计理念,主要用来分析和交流。又有问题了,分析什么呢?和谁交流呢?这个问题待会告诉你。

      UML图比较多,但是我最常用的是以下几种:用例图、类图、时序图、状态图、活动图、协作图。

      活动图描述的是某流程中的任务的执行,活动图描述活动是如何协同工作的,当一个操作必须完成一系列事情,而又无法确定以什么样的顺序来完成这些事情时,活动图可以更清晰地描述这些事情。

      活动描述:当触发的输入框时检测是否用输入,如果没有结束程序;如果有了,获取用户输入数据并用ajax提交数据到后台,将返回的数据显示在页面。

      活动图:

       唤醒疯子博客

      上图绘制的就是搜索框的实时显示的活动图,通过这种图形化模型可以把动作的流程性表达的更加清楚,动作的内容、流程、判断、交互、并发都能很好的表达。

      到这就明白了,上面所说的问题了。

      分析:系统内各对象的不同活动间的交互。

      说一个例子,一个朋友的上级让他做一个功能,什么功能呢,经理当面和他说了一下。朋友立即回去将自己理解的做出来,很高兴的跟经理说我做好了。理想总是美好的,经理说:你为什么做这个跟需求无关的?我有让你做吗?朋友:不是你说的吗....(省略以下内容)

      交流:交流的对象可以同行的交流、不同行的交流等等

      我们来分析一下活动图:

      开始与结束:活动图只能有一个起点,但可以有多个终点的。

        唤醒疯子博客

      判断:菱形代表分支判断。

       唤醒疯子博客 

      分叉与汇合:两个必须组合使用,表示并发动作。分叉表示一个活动完成后产生后续的多个并行的活动;汇合表示多个活动全部完成后再进行下一个活动。

      唤醒疯子博客

      活动:圆角矩形表示动作。

    唤醒疯子博客

    好了,活动图就说到这里了。

    按照这个来写代码,我最后实现的效果如下:

    唤醒疯子博客

评论

唤醒疯子博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论