[一对一讲什么] 之 测完了接口、搞好了目录,然后做啥?

[一对一讲什么] 之 切图之后做啥?要加入项目和测试接口 上回书说,切完了页面,把HTML文件啊,CSS,JS,IMG图片什么都扔到相应的开发环境目录里,把链接神码的都搞好,然后在开发环境里把你的页面能运行起来,就像这样,

你的自己电脑上搞好的页面的访问路径是这样的:

file:///D:/wesay/3/html5_1.html

如果你自己在本地电脑搞个apache服务,那么这个页面的访问路径是这样的,

localhost/wesay/3/html5_1.html

而如果你配置好开发环境之后,把项目跑起来,然后访问你的页面,它的路径应该类似于这样的,

http://231.235.35.22/wesay/3/xxx
//IP地址我随便写的
//.html文件后缀名没了

做好这些之后,上回书说,把接口也测试OK了。之后,就开始狂写JS了么?

NO NO NO。。。

接下来,要开始做前端的模块分析和JS的结构的设计。装B一点的说法,就叫做“前端架构设计”。

还是老样子,随便百度一张网页设计图,给大家演示一样。当然了,在一对一的课程中,是不会这样的。而是有一个我以前做过的电子商务的网站,1,2,3,4.。。各个步骤带你走

但是在这个小文章中,咱们就大概演示个套路就得了,原图挺长的我只用QQ截了个半截,

切图的时候是从页面的结构去考虑,而写JS的时候是写各种功能,要从功能上去考虑。

这个页面有以下几个功能点,

图中画红框的都是功能,有页面广播、审核通过、搜索、登录、导航、轮播图、show作品。

画成思维导图什么的就是这样,

这说明首页至少有7个功能块,

(1)广播肯定是全站范围的;

(2)审核通过也应该是多数页面可见的,但可能会有不同的展现形式,这说明它有二套或更多的view视图;

(3)搜索,全站级别,同(2);

(4)登录,全站级别,同(2);

(5)导航,首页应用。它的数量是否可以根据后端数据进行自动配置?数量是固定的么?

(6)轮播图必须可以通过API接口进行配置修改,这东西写好之后是要给编辑同学们用的;

(7)推荐作品,这块没什么说的,就是获取JSON,绑定事件,然后生成、展示;

好了,到这里,最基础的JS结构出来了。因为就是个说明套路的小文章,我也不打算展开的太复杂。

什么React啊,node啊,webpack,require...,这些我都不想提。因为这此东西都是,以功能的正确分析为出发点的。在一对一的视频课程中,每天二个小时,我会详细的讲解这方面的内容。

指望在一篇文章里把这里的事儿都写清楚,这想法有点太奢侈了。

好了,长话短说,至少这7个功能块,是7个function方法。到这里,你可以开始狂写JS了。

今天就到这里,明天咱们继续,聊一下全站级别的广播模块怎么去设计比较好。

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

原文发表时间:2016-12-01

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

小程序也有“home”键盘了!

微信小程序最近仿佛是消停了一会儿儿,没有深夜袭击,不过还是有不断地小更新,今天就来给大家唠叨两个新变化。 --小程序安卓用户更新 12月22日,微信更新了安卓版...

25050
来自专栏IT大咖说

通过QQ浏览器内核看browser性能优化

摘要 QQ浏览器内核架构组负责人,通过QQ浏览器X5内核在加载速度、流畅度方面所做的优化工作,带你了解浏览器内核的工作原理、展示前端优化的指导性原则、以及更佳的...

50950
来自专栏企鹅号快讯

四大微信小程序开发工具测评结果出炉!

微信小程序开放公测后,很多人已经迫不及待地开始注册账号了。但是在技术开发的问题上,却不知道该如何下手。经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛...

1.7K70
来自专栏知晓程序

Android 惊现小程序「入口」,有图有真相!

13430
来自专栏即时通讯技术

IM开发基础知识补课(二):如何设计大量图片文件的服务端存储架构?

一个完善的IM系统中通常充斥着大量的图片内容,包括:用户头像、图片消息、相册、图片表情等等,那么在做服务端架构设计时该如何存储这些图片呢?

31440
来自专栏腾讯社交用户体验设计

QQ Mac版 Touch Bar功能设计

17610
来自专栏liuchengxu

用 Vim 写 Python 的最佳实践

对于一些 Python 的小项目,使用 vim 是一个不错的选择。本文内容整理自我在知乎的回答 用 用 Vim 写 Python 的最佳实践是什么?,下面的内容...

23720
来自专栏jeremy的技术点滴

现代Web开发教程系列_01

30670
来自专栏安恒信息

旧版Java/ActiveX浏览器插件存安全漏洞,将遭IE屏蔽

虽然微软的IE浏览器在安全性上已经越来越好,但是由于其庞大的普及率及版本参差不齐,因此有许多旧版本的插件也会让新的IE浏览器成为受到攻击的目标。为...

33160
来自专栏京东技术

30分钟精通快应用

来这里找志同道合的小伙伴! 阅读全文大约需要10分钟,动手实践大约需要30分钟。 ? 徐建勇 京东Android开发工程师 京东JDReact多端融合平台组 ...

45390

扫码关注云+社区

领取腾讯云代金券