❶ 关于前端开发的20篇文档与指南
英文原文:Another
20
Docs
and
Guides
for
Front-End
Developers
相信在
2015
年很多这个行业的人都会有这样的两种感受:
真的不知所措,这个行业到底有多少东西需要去学习;
渴望更多,并迫不及待的为接下来的学习寻求一些思想方向。
第一个来自于我们的个人感受,而第二个则是纯粹的必要性了。所以本文整理一些有用的信息,希望可以帮助相关领域的前端开发人员。
1.
I
want
to
use
基于
Can
I
use
的数据和功能,这款应用给予你选择一组前端开发特性的能力,并会读取出一个全球性用户能够使用它的百分比。
2.
Regulex
JavaScript
正则表达式的可视化工具,在线输入表达式后,动态生成表达式图片。非常不错的一个可视化
Web
在线正则表达式设计工具。
3.
Mastering
the
:nth-child
一个单页网站,帮助你理解如何去使用各种有用但又复杂的基于选择器组合的
nth-child。
4.
HTML
5
视频事件和
API
这个页面展示了新的
HTML
5
视频元素、媒体
API
和媒体事件。播放、暂停、搜索整个视频、改变音量、静音、改变播放速度(包括进入负值),查看视频和潜在事件与属性上的效果。
5.
Excess
XSS
这可能是所有开发者都应该熟悉的一个话题,并且这可能是一个很好的着手点。它是一个跨站点脚本编制综合教程。
6.
RSCSS
意思为Reasonable
Standard
for
CSS
Stylesheet
Structure(CSS
样式表结构合理的标准),记录一些针对大项目的
Sass/CSS
编写技巧和技术。
7.
CodeFightClub
一个由
Andrew
Hathaway
建立的项目,目的是帮助其他开发者学习如何用最好、最有效以及首选的方法编写代码。
8.
Sass
Guidelines
Hugo
Giraudel
写的
Sass
Guidelines
目前已经被翻译成其他六种语言。
9.
Flexbugs
如果你的目的是使用
flexbox
构建一个网站,而事情却并没有像你所期望的那样进行,你可以在这里找到解决方案。
10.
A
Front
End
Engineers
Manifesto(一个前端工程师的宣言)
没什么深入的东西,只是一些简单的事情提示,所有的前端开发者应该考虑将其结合到开发过程和工作流中。
11.
ES5
中的
ECMAScript
6
等价物
ES6
特性转换到
ES5-compatible
代码的一个很好的参考。
12.
Flexbox
Adventures
来自开发者
Chris
Wright
对
Flexbox
深入、实际看法。
13.
BEM
一个全面推广和培养
BEM
CSS
使用方法的网站。
14.
Sass
Compatibility
记录不同
Sass
引擎之间的不兼容性问题。
15.
HTMLelement.info
一个整洁、逻辑、易使用的指南规范,在不同的
HTML
元素上获得信息。
16.
JSLint
Error
Explanations
你可能跟随过很多
JavaScript
最佳实践,却并不明白所有这些技术背后的原因。本站旨在揭露
JSLint、JSHint、和
ESLint
工具里错误和警告。
❷ BAT等大公司有前端开发规范文档和UI规范文档吗
有的,大公司规范较多,可能不采用外面流行的框架,有公司自己内部的框架,一些规范文档都是自己公司编写的
❸ 前端需求分析,首页面结构有哪些
大体上根据设计来,通常情况是有基本框架,然后一个显示系统名称,用户,等等基本信息的banner,一个导航栏,还有就是主页页面主体了,页面主体两旁是否有侧边栏根据设计决定,最后就是公司信息,和其他链接的尾部。
❹ 前端原型图长什么样,需求文档见过吗
……我没听过前端原型图。
只看过Javascipt 原型图,如果是,附带一张给你:
❺ 产品需求文档模板
首先告诉你产品需求文档肯定是有的!一个经过实际工作检验、经历过“质疑”、“挑战”和“斗争”之后沉淀下来的模板,肯定是已经吸收了各类人的偏好、意见,固化了很多符合实际业务必须的内容要求,能够起到很好的业务承接作用。格式化、标准化本身是一个很好的思维、工作方式,可以让你在编辑文档和接受文档的双方关系中建立一种“标准”的沟通机制和预先定义的沟通基础,减少额外的沟通成本,提高效率。
不过,在享受别人智力和经验梳理好的模板进行需求编写的同时,还是应该了解模板形成的原因,并在此过程中形成自己对于模板的理解,进而形成对于产品需求文档的理解,在理解中使用,裁剪和优化。
要理解和分析模板,理解和分析产品需求文档,可以运用以下几个方法:
一、描述-解释-预测-监控
描述,是对观察过程和观察结果的描述。观察的对象因不同的研究而有差异,其目标是尽可能完整地将观察者根据自己的观察得到的现象、由此现象所产生的思想和感觉,以及在观察过程中选择纳入的过程参与者对现象的反应等信息进行描述。
解释,是回答 “为什么”,是对于描述的理解、归类、定义和解释。其目标是将描述内容背后的成因、原理、动机,内容中各部分之间的相关,依存、依赖和影响关系等进行说明,以便对于描述内容有更清晰、更细致、全面的了解。
预测,根据以因果关系为内容的内在联系,相互影响来推导未来的发展或者将要发生的事情。通过研究解释内在的联系,准确地表达内在联系,从中推导出正确的预测。
监控,是对于预测行为、现象的观察和监督,包括了观察到的预测中的行为、现象的发生或者预测以外的行为、现象的外发生,以及因此而采取的对应的反映动作;这些反映动作是预测过程中根据内在联系制定的“响应”机制,并任其自然发生或者通过提供“系统”的自制能力来实现。
二、需求准备、编写和检查
回归到产品经理的日常工作中,在时间占比上较为集中的就是产品需求管理了,包括了需求的准备、分析、编写和检查过程。在这个过程中,描述——解释——预测——监控这个通用的科学分析过程也同样使用,且可以贯穿其中,并可以帮助理解、形成并固化成我们前文提到的需求文档的模板。这个科学分析的过程、方法在不同阶段运用的侧重点会有所不同。
1. 描述
描述的过程是客观的进行“需求向”描述的过程,是一个“背景”信息的补充,用来说明,这个需求文档的源出是什么,是针对什么问题,这个问题是在具体什么领域,在怎样的范围内,涉及到的是那些人;在需求相应的功能设计实现之前,当前的解决方案存在的问题是什么,参与者是怎么解决的,解决的情况怎么样,是好,还是不好,还是勉强可以,对于新的需求的紧迫性是什么样的。此外,描述的过程还需提供一个基础的概念和流程的解释,用来统一作为背景去理解一个现实的业务场景和“沟通字典”,避免在沟通中因为误解而产生不必要的偏差。
需求准备的过程:了解需求来源(管理部门、市场部门、运营部门等),需求背景(行业、同业规则现状等);
需求分析的过程:了解需求目标、预期效果(时间、结果等)、使用者习惯、相关人影响;
需求编写的过程:描述需求目的、背景、时间和结果要求、业务流程、交互过程、系统架构、干系人角色和影响范围;
需求检查的过程:需求的背景、目标、过程、干系人、结果预测和预防的完整性检查;
2. 解释
解释在需求来源的基础上描述了 “为什么”接下来这个需求可以解决遇到的问题,同时还加入了“是什么”和“怎么样”的部分。就是这个需求是通过怎么样的方法解决了“描述”过程中提到的问题,这个新的解决方法需要要做什么,对于原有的业务过程有哪些改变,会提升什么,会降低什么,会影响哪些人、哪些业务部分、哪些业务系统以及哪些数据的产生。这个部分,是需求文档的最主要、最核心的内容部分,也是在内容上占比最大的一部分。
这里的解释根据产品需求面向的要解决的问题不同,而可能存在多个层面,多个维度的层面,比如对于运营的影响,对于前端市场的影响,对于用户的影响,对于财务、法务的影响;从技术开发、技术实现维度,比如对于前端开发的影响、对于服务端开发的影响、对于数据平台的影响,还可能涉及到对于运维资源的影响等;因此对应到实际的产品需求工作中:
需求准备的过程:了解需求可能涉及的相关业务系统及系统对应的数据流程和逻辑、了解需求可能涉及的外部服务的数据流程和逻辑;了解面向的内外部用户的产品使用水平、学习能力和使用习惯;
需求分析的过程:选择和制定最有效的,满足时间、资源投入等要求的方案;
需求编写的过程:详细描述需求的业务流程,通过各种图表格式说明新的解决方法在各服务系统之间、各业务部门之间、用户与产品,产品与后服务之间的数据、文件和行为的交互过程、详细的信息输入、信息处理和信息输出;每个业务节点明确的输出物和节点标志,重要性和优先级;系统架构、干系人角色和影响范围;
需求检查的过程:需求的流程、用户交互动作、系统信息交互等完整性检查;
3. 预测与监控
预测与监控在产品需求文档的管理上是联动的,是对于预测的事件发生的时候,进行管理的机制,监控=预测+干预。在产品需求文档的管理上,对于设计好的业务流程、使用功能,在实际过程中可能会出现这样或者那样的 “非规划”的使用,也就是我们通常说的“用户并不总是按照产品设计的方式来使用产品,而且,往往相反。”因此,这部分内容很大的比例需要来对于用户的行为进行预测和监控,并提供“预防”或者“解决”方案。其中:
预防在于,预测产品的用户在使用的过程中,可能会进行的一些超过产品使用半径的操作,一旦进行这些操作,操作的任务流程会中断,掉出,进入其他业务流程中且无法回滚,从而使得操作无法进行下去,功能使用失败,使用者会感觉产品、功能没有包容性,缺乏引导性,导致了最后操作的失败,预想的结果没有实现,而且造成了一定的挫败感,甚至造成了一定的损失。预防的具体方法多采用导航、提示等,不同的系统都有各自标准化的控价,我们在这里不做展开。
解决在于,预测产品的用户在使用产品的过程中,因误解、操作手误而进行了“非标”、“超规”使用“掉出”原本设计的业务流程和操作流程的情况下,需要提供额外的流程和控制来“回转”用户的操作,来帮助用户回到预先设定和他所需要的流程上来。解决的具体方法多通过“导航”引导“跳转”和“返回”、“回退”来实现。对应到实际的产品需求工作中:
需求准备的过程:了解用户特征和使用水平、评估、比较不同方式实现需求对于用户行为的可控性和“非常规”操作的危害程度;
需求分析的过程:选择和确定需求实现方案,评估行为管理方式和管理机制;
需求编写的过程:详细描述需求的业务流程和交互过程中可能出现的用户异常操作,相应异常操作中系统反应,系统对应的控制和引导;
需求检查的过程:需求“异常”流程和相应引导、控制地完整性检查;
在需求管理的过程中,就可以按照这个 描述——解释——预测——监控流程来进行。这四个既是步骤,是需求文档内容的组成部分,也是需求编写完成之后的检查。
四个模块构成了需求文档的完整性,且同时有各自独立,有对应的说明,引导、要求和标准。所谓标准文档,就可以按照这四个模块作为框架、内容和格式。
写在最后
产品需求文档作为产品经理同视觉设计、交互设计以及技术开发人员进行需求沟通的一个载体,我平时用的比较多的是摹客的服务进行创作。一个完整的、充分沟通确认,并最终达成多方理解和共识的产品需求文档,能够最大限度的还原产品、功能的设计,保证产品、功能的实现,最大限度的减少因为各方理解的偏差而造成的时间、人力和经济资源的浪费及复工。
❻ 前端开发做一个网页,要交一份需求文档,写什么呢
布局交互,和对ui的要求,控件啥的自己挣
❼ 求一份APP前端设计(包括从流程图到效果图,到前端开发实现)的开发时间评估文档模板
前端工作是指售前?、
还是说开发展现层?
j2ee方向的我给你提供点信息吧:
1、JSP,HTML,CSS,JS(常用的库,和基本语法)、ajax技术。
2、java基础语法,常用的框架,如:struts,hibernate,spring,ibatis,mybatis
3、数据库:MYsql,sqlserver,oracle等
4、工具:数据库设计工工具,流程图工具,office,邮件
5、服务器:linux,windows
6、计算机相关:硬件,内存,操作系统相关知识等等。
太多了,你具体说说你想知道哪些?
❽ 前端项目的开发流程
前端开发流程概述
前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段,下面分别进行叙述。
2.1 需求分析
这个环节中,首先是和客户进行交流,了解客户的需求,然后分析项目的可行性,撰写项目需求文档。如果项目可行,则起讨论具体方案,分模块分步骤进行规划,分析项目进度安排、所需成本,进行原型设计(包括页面布局图,页面逻辑流程图,说明文档等。通过原型设计,可以让项目组和客户都可以对项目有一个直观感受,同时可以低成本高效率的复现业务场景和各模块流程)。
可以说需求分析阶段是整个前端项目的基础,基础不牢,地动山摇。可以试想,如果和客户沟通不顺畅,有的方面客户没搞清楚是什么效果,开发完成后就可能与客户发生纠纷;如果可行性有问题,有的模块很难实现或成本超出预算,就很难处理。
2.2 开发阶段
这个环节是前端工程师主要参与的部分,按照需求分析阶段的规划按步骤完成任务。
根据产品需求分析文档和原型图进行UI设计,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
根据UI设计进行规划,提取界面中可以复用的模块方便重复利用,分析界面是否有实现难度比较困难的地方,进行沟通和功能排期,按功能大小以及难度进行功能时间的评估,和后端沟通好排期时间,保证大家能够更有效地开发合作,针对功能复杂的地方要先理清思路。
不要盲目开发前端搭建框架。根据设计图进行前端界面开发,以及遇到的问题及时与产品、UI、后台人员沟通,保持大家信息一致,针对不清楚的地方也要及时沟通,以免做错功能。
根据后端接口进行字段填充,以及部分功能开发。针对缺少的字段或者数据结构进行提出,及时与后端反应,尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发,针对不规范的地方要给与提出、指正,营造出规范的工作模式,以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计,也不必等后端,可以自行开发nodejs服务器配合postman等接口软件进行开发。
前后端功能联调、完成自测。检查功能完成情况,看是否有遗漏,出现问题及时沟通解决。
2.3 测试阶段
发布测试、修改bug、发布上线,自测完成后提交测试,测试根据提交的项目以及需求进行测试,提出bug给相关人员修改,开发人员周期性的配合修改bug,保证今天能够修复昨天的bug。
发布dev环境,配合测试,修复bug以及需求优化
发布test环境,修复bug以及需求优化
发布it环境,修复bug以及需求优化
发布pre环境,修复bug以及需求优化
pre验收之后,发布线上环境,产品进行验收
2.4 维护阶段
如果客户验收通过,项目就进入了维护阶段,程序的维护包括程序上线后后续bug的修复和程序版本的更新。
3 个人经验总结
3.1 文档很重要
前端项目的文档似乎已经作为前端工程化的标准流程之一了,文档写的好,可以便于同事快速了解你的代码功能和需求,便于协作。可以想象,随之项目复杂度增加,体量越来越庞大,开发团队人数也越来越多。这种情况下,如果像变魔术一样隐匿中间流程而直接得出结果,后果可想而知:项目复杂度越增加就越难以管理,开发效率低,合作混乱,结果甚至导致项目死亡。
好的文档看起来就像一个产品说明书,但作用却远远超过了说明书,不仅仅告诉你如何使用,还应该告诉你项目的设计思路,用了哪些组件,哪些部分不完善,将来有什么规划等等。这是一份比较好的说明文档。
3.2 与客户及时沟通很重要
3.3 扎实的基本功很重要
尽管当下框架、函数库、工具包等更新迭代非常快,前端工程师有很多新的知识要学,但原生JS、HTML和CSS依然是重要的基本功,在学习前沿工具的同时不能放弃基本功的训练。
❾ 前端开发的技术文档怎么写
可以从项目背景,功能模块,目录结构,接口列表来写,还可以配合jsdoc自动生成各个js文件的详细文档
❿ 前端开发应该如何写技术文档
一名合格的前端开发工程师,不单单需要掌握前端必须的各种技术,同时还要掌握其它技术,需要掌握一点后台的知识,同时也要对网站构架有一定的了解,这样才可以称之为一个合格的Web前端开发工程师。
如果你想要快速学习Web前端技术,专业全面的学习方式比较好。适合零基础的小白迅速成长,学习曲线先快后慢,也适合有一定基础的学员进阶学习,巩固知识的基础上,稳步进步突破职业瓶颈。