文档章节

前端页面开发规范流程化(基于云端的前端)

Smallwei小伟
 Smallwei小伟
发布于 01/04 22:14
字数 1173
阅读 258
收藏 1

现在是22世纪了,人们常常说的一个字就是“云”,咱们前端人员也来赶赶潮流。并且让我们很好的与业务人员,美工人员后台人员等多名人员“华山论剑”。

一般前端开发的我们需要和业务人员沟通,UI人员沟通,产品经理沟通,那可是重重之重啊!

所以我们也需要确定一条明确清晰的开发设计路线,这样才可以很潇洒的去写我们的代码。

需求讨论

    我们开发的页面中包含了大量的交互,而这些所说的交互便是我们经常需要谈及的业务需求,如果需求不明确可能需要以下问题

这个如何弹出!这个按钮跳转到哪里!谁来点这个按钮!按钮点完要不要消失!

这就是需求不明确的后果,从而导致我们代码写的很不爽!

我们要充分的和业务人员沟通需求,把合理的业务梳理出来放入你的大脑中,这样才不会走弯路!

什么?你的大脑不够用?记不住?别怕!

“百度脑图"可以很好的帮你解决问题,不用往你的大脑里塞东西了!

下面是一个用户信息认证模块的梳理图

百度脑图传送门

原型设计

既然模块的业务需求已经很清楚了,接下来就是界面的原型设计了,大部分同学可能在初创公司听到这样的声音

没有美工!需要你自己来设计!前端不就是干设计的?这个很简单了,你自己设计下了!

没错就是这样的,大部分情况下我们只能城府,自己动手丰衣十足,很多小伙伴可能直接就用css+div开始了自己的设计之路,弄好了感觉这里不对!这里颜色还差点!好像不如刚才好看,还原吧!这样让我们效率边的及其的低,有没有不写代码,界面拖拖拽拽就出来的?还能随时还原的?

“墨刀”是一款在线的原型设计工具,可以实现轻轻松松妥妥拽拽出来界面的效果,并且还有历史功能,随时还原触手可及!

下面是一个用户信息认证模块的原生设计图(当时只用了5多分钟,可比代码快多了)

墨刀传送门

接口对接

前端面临最大的一个困难就是api接口对接,当你过了业务和UI的门槛时就要面临大敌人后台工程师,当你需要对接接口时你会听他说

我没有时间啊,你自己找找!这个很简单的,自己找得到!去数据库看看,找得到!

这个时候不要慌,还要靠自己,我们找后台人员花几分钟的时间去梳理一个api接口列表来帮助我们开发,这个时候没有模板文档,没有模拟数据,没法测试啊,后台接口还没有写好。还是自己动手丰衣足食吧,apizza是一款简单的在线生成api文档和mock数据的集成网站,可以在极短的时间内构建出api接口文档,还支持mock数据,再也不用等后台了!

下面是一个用户信息认证模块的接口设计+MOCK(生成后可以直接粘贴到接口文档里交付-偷懒)

apizza传送门

好了这三款工具可以让门很爽的去写代码,充当一个极客达人,而且这三款工具都是基于云端的,也就是说只有有网随时随地都能修改,增加,并且还能实时分享给他人,最重要的是免费的!免费的!免费的!

这样我们可以很好的和后台,美工,业务人员进行完美的对接。规范开发对自己的职业规划也是有好处的,并且效率绝对比你拿起代码就写的效率高,并且错误也会减少大部分。

© 著作权归作者所有

共有 人打赏支持
Smallwei小伟
粉丝 16
博文 12
码字总数 7496
作品 1
集宁
程序员
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
01/08
0
0
前端协作流程

Web系统   在介绍协作流程之前,首先简单地了解Web系统的结构   从宏观上来说,Web系统是部署在服务器上用于为web客户端提供服务的系统。不同的Web客户端根据不同的需求,发送请求到服务...

sshpp
2017/07/24
0
0
mobile web 前端研发流程 【转载】

接触Mobile WEB前端开发将近一年时间了,在这不算短的时间里,通过吸取圆心、沉鱼等前辈们的经验以及不断的摸索和实战,总结出一套自己的Mobile WEB“研发流程”。为什么叫“研发”流程而不是...

石秋风
2012/04/18
0
2
淘宝玉伯引发Web前后端研发模式讨论

淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery。不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于 Web 前后端研发模式的思考。 他首先指出了前端的产品...

bobo_lu
2012/12/06
0
1
Hass硬件开发软件化——Hardware As A Service硬件变成API(第二届阿里云API大事参赛感悟)

阿里云API大赛加深了对API的认识 和API的第一次亲密接触,应该是在2000年左右的时候。那会还在上大二,刚开始编程不久,当时还是用VB在写程序,想要在打开文件的对话框里增加一个预览功能,费...

ddwei
04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
今天
1
0
WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
16
2
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部