[周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假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 条评论
登录 后参与评论

相关文章

来自专栏BIT泽清

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

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

4483
来自专栏落影的专栏

GPUImage详细解析(八)视频合并混音

回顾 GPUImage源码解析、图片模糊、视频滤镜、视频水印、文字水印和动态图片水印GPUImage的大多数功能已经介绍完毕,这次的demo是源于简书的一位简友...

3495
来自专栏phodal

「微信小程序」剖析(二):框架原理 | 在桌面浏览器上运行的尝试

本来想的是昨天晚上写这篇文章的,后来昨天在写一个Cordova上的iOS插件的时候各种不顺。对接的第三方SDK不给力,于是六点多回到家的时候,我就就开始娱乐了...

2699
来自专栏Java3y

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

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

84.3K17
来自专栏web前端教室

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

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

1876
来自专栏大数据挖掘DT机器学习

如何用R语言从网上读取多样格式数据

第一部分:数据信息 生活中,我们面临着各种各样的数据:比如你的成绩单,比如公司的财务报表,比如朋友圈的一些状态,比如微信里的一段语音……我们生活的大数据时代的一...

3485
来自专栏freesan44

python 携程爬虫开发笔记

最近购买了《Python3 爬虫、数据清洗与可视化实战》,刚好适逢暑假,就尝试从携程页面对广州的周边游产品进行爬虫数据捕捉。 因为才学Python不够一个星期...

5881
来自专栏一场梦

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

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

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

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

1721
来自专栏何俊林

Python爬取腾讯视频

3.2K5

扫码关注云+社区

领取腾讯云代金券