[周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? &下一个前端组件“日历”

大家好,时间飞快一晃又到了周末了,今天要跟大家一起学习的有以下这些内容:

-- 什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据?

-- 进入下一个前端组件“日历”。

先来说第一个,页面业务流程。什么样的页面会有业务流程呢?

第一,业务型,电商网站、

第二,强交互型,知呼、QQ空间、音乐播放器

第三,展示型,随着鼠标滚动或页面拖动,菜单或页面有不同显示切换

常会有同学说不知道如何

下手写JS,不知道从哪开始写,不知道操作什么。这就是业务不清晰。

你这个业务,想要实现。那么每一阶段业务,是哪几个模块,是哪几个容器?你把ID给谁,把谁独立出来,让谁操作?

那么这个业务流程分析的思维导图,具体怎么画呢?

其它的各行各业的不同岗位的业务分析方法咱们不管,这里我只讲我自己经常用的一个很简单的方法,只是把它的业务按顺序理一遍

现在咱们以“静态页面切图小组”的一张UI设计图为例,

看这张设计图,先把它的需求搞清楚,哪哪有什么交互,然后切图。前端开发嘛,很大程度上,就是看图说话。

具体如何切图做HTML页面,我在这里是不讲的。

html页面做完之后,就假设你是用户,你现在开始操作这个网页了。 然后一步一步的往下进行,每进行一步,就是思维导图上的一个节点;每一个操作分支,就是一个分支节点,把它整个的流程都过一遍,当前这个页面的业务流程,也就是操作的顺序,你就基本了解了。

它的作用,主要就是让你对这个网页做到心中有数。

那这个假数据怎么写呢?首先它肯定是JSON的,然后,从起点开始,你就看这个操作,是否需要数据,如果是那它的数据是哪些?然后用JSON给它组织起来。

那现在我一边讲一边在黑板上画,把它的所有可能需要用JSON数据生成的地方,都画出来。

首先看它的nav导航栏,这个栏目可能是可以自定义数量的。这个数量是多少?取决于JSON的值.

然后它的主导航条每个下来还有子下拉菜单,这个必然也是JSON生成,

然后是大通栏BANNER广告,它的数量有多少?也取决于后台传来的JSON。

这就是三个地方需要JSON了。

再往下,产品展示这里,它所属的NAV,也是可以用JSON来生成的,

还有产品展示所属的滚动轮播,这个也可以用JSON。

这又是二个用JSON的,

再往下是加盟店展示,它的数量也是可以用JSON来生成的。

算到这里,一共是6个地方可以用JSON。

你看我现在已经把这6个可能需要的JSON和它的结构,都在这边写出来了。现在我们把它们装在一起就是你需要从后台获得的总的JSON。

//这就是根据页面业务逻辑,而来的JSON假数据。

然后这个假数据,就是根据业务,来编写一些本地的JSON数据。用来验证页面的业务逻辑能否走的通。

一个点是这样,十个节点也是这样;然后到分支节点了,你看它的分支条件是什么?用什么来判断分支比较好?

就这样,把这些节点的JSON,都定出来之后,你再用一个父级的JSON,把它们包起来,这样一个大的JSON,就出来了。

当然你也可以不把这6个JSON拼合,而是把它们做为6个API接口。

刚才讲的这些东西呢,可以是在开始动手做的时候用,也可以在开会讨论谈工期的时候用。别人问你,啊老尚啊,这个东西做出来大概要多久呀?

你就可以跟他们一边画一边说,这个我得需要XX时间啊,那个我得需要xx时间啊,然后这些时间加在一起,我还得有个余量,还得测试调整,这个东西我至少需要二个月以上!!

这个时候,别傻呼呼的觉得自己报的时间少显的自己牛B。

开发工期是固定的,你报的少了,别人的时间就多了,你报的时间多,别人的时间就少。谁报时间少,谁加班!

要不为什么开会总是开着开着就吵起来呢,,多数就是因为这个

这东西吧,潜移默化,现在听我讲这些,可能没什么感觉,但以后上班时间长了,可能说不定什么时候就想起来,哎,这个情况,老尚以前讲过,。。

能有这个效果,就说明我没白讲。

====================

第二段内容,就是新的前端组件,日历。

这个日历组件,简直是常用的不能再常用了。几乎到处都有它的影子。

现在我们先来画一个日历,

首先,最上一排是星期一至星期日,第二排至最后一排是当月的日期。

然后第二排的左起前几个格要空着,为啥呢,因为当月的第一天可能不是当月的星期一,就是说,当月的1号是星期几,1号之前就空几格。

咱们先来验证思路,什么闰年啊,点击按钮月份切换啊,咱们都不管。先来实现一个最简单的日历,它只有一个功能,就是显示当前月份的日历。

日历组件,实际上是操作Date日期对象。如果不熟悉它,这个日历是没法写的。

首先,我们来获取相应的日期,先是new一个日期对象,

var nstr=new Date(); //当前Date资讯

然后是获得年份

var ynow=nstr.getFullYear(); //年份
var mnow=nstr.getMonth(); //月份
var dnow=nstr.getDate(); //今日日期

//把年,月,日是1,把它们传入日期对象,会返回当年当月第一天的日期信息

var n1str=new Date(ynow,mnow,1);

//用n1str来调用.getDay()方法,来获得当月第一天是星期几,

这个很重要,每个月的1号左边空几格,就靠它了。

var firstday=n1str.getDay();

日期信息都有了,现在再来搞一个12个月份的每月天数的数组:

var m_days=newArray(31,28,31,30,31,30,31,31,30,31,30,31);

然后来算一下当前这个月的日历有几行。我们已经确定日历有7列,因为一周七天嘛。

然后每个月有多少天是固定的,已经写在上面的数组里了。唯一变化的就是每个月的第一天是星期几不一定。所以要在每个月的天数这个数字上,再加上是1号是星期几,这样就是当月的日数和1号左边的空白格。

就是下面这行,

var tr_str=Math.ceil((m_days[mnow] +firstday)/7);

接下来就开始用for循环画日历了,肯定是for for嵌套循环了。外层for循环画每一行,内层for循环画每一行里的每一个列,就是格。

就这样一行一行的,把日历画出来了。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-11-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

Flutter最佳入门方式:写一个计算器

工作以来,我在学习新知识的时候,常常与在应试教育阶段被传授的方法作斗争——把书本的内容100%复制到脑中才算学会吗?不会被使用或者不常用的知识,花费大量功夫去记...

1302
来自专栏BIT泽清

上传到App Store 含第三方支付被3.1.1被拒解决方案

最近在做项目时,涉及用户付费。于是就找来了支付宝和微信支付的集成教程,按照要求分别开通各自开发平台的开发者账号和商户号。在后台加入了支付的支持,一步步的集成和测...

3463
来自专栏数据小魔方

sparklines迷你图系列3……Evolution(Line)

该类型图表既然被划分到Evolution类型,想必大家也能大概猜出其用途,就是用于评估指标走势的优劣、好坏与波动区间范围。 这样形式可以更好的呈现一类指标一段时...

32910
来自专栏游戏开发那些事

【python游戏编程之旅】第九篇---嗷大喵快跑小游戏开发实例

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

1221
来自专栏一场梦

将照片变成字母符号组成的文字软件

1945
来自专栏Crossin的编程教室

工欲善其事必先利其器:用什么写Python?

通常来说,每个程序员都有自己趁手的兵器:代码编辑器。你要是让他换个开发环境,恐怕开发效率至少下降三成。然而,每个人对编辑器的喜好各不相同,甚至引发出诸如“神的编...

1252
来自专栏FreeBuf

两张图片告诉你为什么域名会被解析到65.49.2.178

2014年1月21日中国出现重大网络事故,大量域名被解析到一个65.49.2.178 这个IP了。 中国的一家DNS服务商DNSPOD于 2014 年 1 月...

2987
来自专栏Java3y

海量视频资源【网盘直接取】

资源均来源于网络,在自学/开公众号的时候收集而来。如果侵权请联系我,会第一时间删除。

50.5K17
来自专栏web前端教室

领读《深入浅出NODEJS》—快速阅读第二章

image.png 昨天跟大家介绍了2.2 node的模块实现,这一章节的内容。今天我们继续往下看,这本书到目前为止,写的都是偏向理论的东西,也许它整本书都是这...

1856
来自专栏无原型不设计

国外设计师眼中的原型工具Mockplus

今天,我们评述一款新型设计工具,Mockplus,专为设计师而打造的创新性原型设计工具。Mockplus适合于各种应用软件的制作,无论是手机应用,网页应用,亦...

3774

扫码关注云+社区