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

[周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript es6 和 es5,学哪个呢?

    以下是我个人看法,全部都是片面的,请不要相信。 ES6 确实是在JS本身上添加了一些新东西,但真心不多,而且现在各个浏览器对它的支持还有待提高。 那是不是就不学...

    web前端教室
  • 逆向的前端学习思路

    一般学习前端开发,基本上都是要从JS,HTML,CSS开始学习。这是传统的WEB前端开发的入门学习路径。对于大多数人都比较适用,没有什么惊喜,也不会有什么速成。...

    web前端教室
  • JavaScript-事件委托(事件代理)

    今天给自己的知识结构填个坑,再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件...

    web前端教室
  • MySQL5.7 JSON实现简介

    本文主要介绍在MySQL 5.7.7开始引入的非结构化数据类型JSON的特性以及具体的实现方式(包括存储方式)。首先介绍为什么要引入JSON的原生数据类型的支持...

    ivansqwu
  • PHP json_encode 的使用方法

    今天在进行接口加签的时候,发现一个问题,数据一直加签失败; 再查找一番原因后发现原来 json_encode 对反斜杠进行了转义,导致数据一直加签失败 解决办法...

    hedeqiang
  • Javascript[0x04] -- JSON必知必会

    通常在写简历的时候,对于某项技术而言,我们可以用“精通”,“熟悉”和”了解“三种词汇来描述你对它的掌握情况,在写这篇文章的时候,是笔者阅读完《JSON必知必会...

    丰臣正一
  • 9 款你不能错过的 JSON 工具

    JSON 吸引了工具构建者的注意,它们开发了用于重新格式化、验证和解析 JSON 的众多工具,这不足为奇。这些工具既有在 Web 浏览器中运行的在线实用程序,又...

    用户6543014
  • Go JSON

    如今在网络编程中JSON这种数据格式占据了较大的市场,如果不出意外,几乎新开发的数据交互,都会使用JSON这种轻量级的数据格式来处理数据交互。所以,怎么解析,转...

    icepy
  • 推荐 9 个 爱不释手的 JSON 工具!

    链接:developer.51cto.com/art/201910/604745.htm

    Java技术栈
  • SQL Server 2016 JSON原生支持实例说明

    背景 Microsoft SQL Server 对于数据平台的开发者来说越来越友好。比如已经原生支持XML很多年了,在这个趋势下,如今也能在SQLServer2...

    用户1217611

扫码关注云+社区

领取腾讯云代金券