专栏首页web前端教室实际演示,怎么搞一个demo的业务逻辑、需求分析?

实际演示,怎么搞一个demo的业务逻辑、需求分析?

今天是周日,今天晚上20:00的时候,咱们进行了每周日都会有的先行者视频直播课程,主要内容是,通过一个实例,怎么去分析它的需求、设计它的js的结构。

因为这是收费的课程,所以下面文是今晚的学习笔记的节选,配的图片也是小图。

<!-- -->

咱们设计一个结构,一定是先从整体去考虑,然后再去细化每一个局部的细节。

不要一开始就集中在细节上,

我一定要先设计好一个细节,

然后再下一个细节,这样会缺乏整体的思考 。

在设计前端demo、项目的前端架构的时候,

先罗列它的需求、功能点。

在做这个事情的时候,要先确定“交互操作”的逻辑顺序。

<!-- 直白点讲,“就是点击操作的顺序”。例如,你要先登录,才能看邮件... -->

因为业务逻辑,它决定了需求、功能点的操作顺序。

在一定程度上,也决定了前端数据json它们的流向、顺序。

例如,你先要登录,那么输入用户名、密码,再点击登录按钮,

肯定是先发送name、password了,这是第一个数据;

然后服务端给你返回结果 ,这是第二个数据;

那么你在写js的时候,登录和它的结果的处理,肯定是有一个先后的关系。

那这个先后的关系,很大程度上,它就可能是一个“回调”。

<!-- -->

列出项目的需求点、功能点,最常用的方式就是“树状结构”,

很好的分辨别类嘛。

<!-- 思维导图我使用xMind,这东西免费的,网上查一下就有了 -->

播放器,它的结构,咱们怎么分析一下呀,

<!-- 第一步 -->

<!-- 看,20181014_播放器-需求分析.xmind -->

图片.略

思维导图中的每一个点,都相当于是给js当中的代码起了一个别名。

因为你现在没有js。

然后你要把它这些东西,嵌入到前端结构当中去,

那么整个的结构就出来了。

<!-- -->

说“嵌入到前端结构当中去”,前端结构在哪?

<!-- 第二步 -->

<!-- 看,20181014_播放器-代码实现(伪).xmind -->

图片.略

为什么叫“伪”?

因为你毕竟不是真实的js代码。

这一步,要把需求分析的那些环节,

放到代码实现的这个场景中,

<!-- 第三步, -->

<!-- 把第二步的东西,给翻译成js -->

<!-- 我这写的肯定是伪代码,只是为了表明思路 -->

<script type="text/javascript">

// 播放器对象

function PlayObj(){

// 歌曲的索引,初始为0

this.songInx = 0;

}

// 原型模式

PlayObj.prototype = {

/*补全原型链*/

constructor : PlayObj,

init(){

// 初始化方法

getAjax();

},

getAjax(){

// 请求各个接口

createDom()

},

createDom(){

// 生成dom节点

eventPlayBtn();

eventPrevSongBtn();

eventNextSongBtn();

},

eventPlayBtn(){

// 播放第一首歌

},

eventPrevSongBtn(){

// 上一首,这是思路,不是具体的代码实现,

// 通过++和--的类似操作,来实现歌曲列表索引的跳转。

this.songInx--

},

eventNextSongBtn(){

// 下一首,这是思路,不是具体的代码实现,

// 通过++和--的类似操作,来实现歌曲列表索引的跳转。

this.songInx++

},

// 进度条,下次再说,

}

</script>

上面是播放器demo的整体的考虑,

然后再去细化每一个方法函数的细节。

这样搞下来,思路不会乱,结构也会很工整。

今晚的整个的课程视频已经上传到了百度网盘,不能参加的同学可以自行下载观看。

以后的课程方向、重点,都向需求分析、前端js结构设计、业务逻辑梳理的方向倾斜。有意参加的同学,请点击下面的链接/。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

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

原始发表时间:2018-10-14

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 怎么样避免“一年经验用十年”?谈前端认知层次的提升。

    经常会看到有些文章说,某些所谓的前端大牛,他们虽然工作了十多年,但它们只是把一年的经验用了十年而已。 这种人虽然比较少,但确实存在。他们的问题在于,没有明确的定...

    web前端教室
  • 前端大牛们都学过哪些东西?

    单纯的技术层面也就是上述的那些个东西。如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢?

    web前端教室
  • 零基础,怎么学习,才能学成一个优秀的web前端开发?

    很抱歉,优秀的web前端开发都不是学出来的。都是练出来的。 一、要多写,因为很多js的书,只是看的话,是看不明白的。要写了才有自己的亲身的感受,才能没有遗漏的...

    web前端教室
  • 怎样成长为一个优秀的 Web 前端开发工程师?

    前端工程师……跟其他语言方向的程序员相比,前端工程师反而更像是幕后的人,虽然名称很前端。作为一个入门简单、进阶难的工作,前端是很多程序员的选择,想要成为优秀的前...

    企鹅号小编
  • 慕课网微信点餐系统之商品信息加载不出来解决方案

    参考1:https://blog.csdn.net/mingdsa/article/details/85319812

    别先生
  • 我的职业是前端工程师:我要成为一个前端设计师

    我年轻的时候,是一个前端工程师。那时候,有这样一个传说:美工是最受妹子的欢迎,其次是半个美工的前端工程师。 本故事纯属瞎掰,如有雷同纯属巧合——Phodal @...

    Phodal
  • Web前端 研发模式演变过程

    可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。基...

    Javanx
  • 为什么前端工程师薪资越来越高?

    外媒网站Randstad US收集了目前IT领域各行业的数据,分析了劳动力趋势等数据,预测出在2018年,前端开发是三大最具有就业前景职业之一,而前端开发行业的...

    前朝楚水
  • 深入浅出全栈工程师: 编码篇序

    在我们真正开始去写代码之前,我们可能会去考虑一些事情。怎么去规划我们的任务,如果去细分这个任务。 如果一件事可以自动化,那么就尽量去自动化,毕竟你是一个程序员。...

    Phodal
  • 网易公共技术Java面经

    本人弱鸡,整体面试过程给人感觉还是挺nice的,除了等待时间有时候有点久,Java一共有32个组,所以不同的面试官的面试风格会有不少差距,这时候就看人品啦~ 通...

    牛客网

扫码关注云+社区

领取腾讯云代金券