[周末课程]什么是“页面业务流程”分析思维导图？如何编写页面假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循环画每一行里的每一个列，就是格。

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