大家好，今天Win10系统之家小编给大家分享「如何构建前端项目」的知识，如果能碰巧解决你现在面临的问题，记得收藏本站或分享给你的好友们哟~，现在开始吧！

1.个开发项目（web前端），需要做哪些准备

　　web前端开发工程师，做的工作与网站前/后台系统的页面相关，使用到的主要技术包括：HTML、CSS、JavaScript，如果能会后台编程语言，当然会更好。
现代web前端开发已经不能像传统web开发已经简单的描述成切图、css、js了（这是 @脑子不大 的回答）。在新的HTML5规范中，加入很多新的特性，这样就对web前端工程师有了更高的要求，比如数据库操作，使用cancvs、css3绘图。
切图这个概念已经是过去时了，早期由于技术匮乏，所以要将设计图切成一块一块，并拼接成网页。现在则能使用html5组织页面，使用css3绘图，很多元素已经不需要再使用图片还原设计，这是一个最大的进步。
JavaScript也在向更强大的编程语言发展，新的ECMAScript6的标准也在制定中。
最后，最重要的一点，Web前端技术的生态环境现在在发展，Chrome OS、Firefox OS都是未来能直接使用原生前端技术开发程序的系统。包括现在很多浏览器的插件，也是直接使用前端技术开发。NodeJS也是未来的一个大热门方向，它让前端技术可以做后台开发。

2.如何成为一个前端工程师

　　只要有兴趣、想学，成为一个（WEB、HTML5）前端工程师的难度不是很大。
　　Tips：了解一下HTML5是什么，HTML5能够做什么以及HTML5行业的状况，然后自己去分析一下，自己喜不喜欢编程，喜不喜欢WEB前端开发。
　　需要具备以下技能（大概罗列一下）
　　(h2)掌握Photoshop

　　WEB前端开发工程师得根据网页设计师设计的PSD（网页设计稿）来开发网页，通过Photoshop来测量PSD里面元素的大小与位置来实现网页的布局，再利用Photoshop把需要用到的图片从PSD里面扣出来（这个步骤叫抠图）。当然有时候还需要你掌握一些其他的Photoshop的技能，便于你更快的实现测量数据与抠图操作。
　　(h2)掌握HTML5
　　首先，要掌握HTML+CSS来实现静态的网页；
　　其次，掌握JavaScript在静态网页的基础上增加网页交互效果，比如网站中的轮播大图、返回顶部按钮等都是网页交互效果。
　　最后，前端工程化、后端技术方面、网络技术等相关知识也是需要你去了解一下，在工作中多多少少都会涉及到。
　　Tips：掌握一门后端语言有利于你能够更好的写好WEB前端代码，因为WEB网页最终还是要与后端语言进行结合形成一个真正的动态网站。
　　总结一下，需要掌握HTML+CSS+JavaScript（熟练或者精通）、后端技术语言（掌握一些前后端交互）、前端工程化（懂得应用即可，毕竟那个就是工具）。
　　最后给你推荐几个学习资源：
　　根据自己平常学习HTML5接触到的学习资源给你推荐一下吧。
　　HTML+CSS：《HTML5布局之路》
　　JavaScript：《JavaScript权威指南》
　　HTML5分享平台：HTML5学堂

3.如何成为前端工程师？

　　一、技术的必须的
　　作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通，类似我字样对前端知识一知半解的，一遇到问题就停下工作就四处搜索解决方案的，首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下（包括搜索引擎），能够完成大多数任务。
　　以下知识点是作为一个前端工程师必须了解和熟悉的：
　　DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
　　DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
　　事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
　　XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
　　严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
　　盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
　　块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
　　浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
　　HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
　　JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
　　上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。
　　很多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，整整优秀的是那些理解库背后的机制，特别是能够徒手写出一个自己的库的人。
　　真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。
　　二、沟通很重要
　　优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。
　　产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。
　　UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。
　　项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
　　最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
　　不要在没有作出评估之前就随便接受某项任务。你必须始终记住，一定先搞清楚别人到底想让你干什么，不能简单地接受“这个功能有问题”之类的大概其的说法。而且，你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理，问一问这个按钮有什么用处，然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师，这种沟通至关重要。
　　那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。
　　专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。
　　三、提升无止境
　　优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
　　四、前端开发知识架构
　　前端工程师
　　SVG/Canvas/VML
　　D3/Raphal/DataV
　　知识管理/总结分享
　　沟通技巧/团队协作
　　需求管理/PM
　　交互设计/可用性/可访问性知识
　　编译原理
　　计算机网络
　　操作系统
　　算法原理
　　软件工程/软件测试原理
　　D2/WebRebuild
　　NodeParty/W3CTech/HTML5梦工厂
　　JSConf/沪JS(JSConf.cn)
　　QCon/Velocity/SDCC
　　JSConf/NodeConf
　　YDN/YUIConf
　　MongoDB/CouchDB
　　HTML5/CSS3
　　响应式设计
　　Zeptojs/iScroll
　　V5/Sencha Touch
　　PhoneGap
　　jQuery Mobile
　　CSRF/XSS
　　ADsafe/Caja/Sandbox
　　类库模块化
　　业务逻辑模块化
　　文件加载
　　CommonJS/AMD
　　YUI3模块
　　LABjs
　　SeaJS/Require.js
　　压缩合并
　　文档输出
　　项目构建工具
　　YUI Compressor
　　Google Clousure Complier
　　CleanCSS/UglifyJS
　　JSDoc
　　Dox/Doxmate
　　make/Ant
　　GYP
　　Grunt
　　Yeoman
　　数据结构
　　OOP/AOP
　　原型链/作用域链
　　闭包
　　函数式编程
　　设计模式
　　Javascript Tips
　　JSPerf
　　YSlow 35 rules
　　PageSpeed
　　HTTPWatch
　　DynaTrace’s Ajax
　　高性能JavaScript
　　HTTP1.1
　　ECMAScript3/5
　　W3C/DOM/BOM/XHTML/XML/JSON/JSONP
　　CommonJS/AMD
　　HTML5/CSS3
　　jQuery/Underscore/Mootools/Prototype.js
　　YUI3/Dojo/ExtJS
　　Backbone/KnockoutJS/Emberjs
　　Coding style
　　单元测试
　　自动化测试
　　JSLint/JSHint
　　CSSLint
　　Markup Validation Service
　　QUnit/Jasmine
　　Mocha/Should/Chai
　　WebDriver
　　IDE
　　调试工具
　　版本管理
　　VIM/Sublime Text2
　　Notepad++/EditPlus
　　WebStorm
　　Firebug/Firecookie
　　YSlow
　　IEDeveloperToolbar/IETester
　　Fiddler
　　Git/SVN
　　Github/Bitbucket/Google Code
　　HTML/HTML5
　　CSS/CSS3
　　PhotoShop/Paint.net
　　JavaScript/Node.js
　　JavaScript语言精粹
　　IE6/7/8/9
　　Firefox
　　Chrome/Safari/Opera
　　浏览器
　　编程语言
　　切页面
　　开发工具
　　代码质量
　　前端库/框架
　　前端标准/规范
　　性能
　　编程知识储备
　　部署流程
　　代码组织
　　安全
　　移动Web
　　JavaScript生态
　　前沿技术社区/会议
　　计算机知识储备
　　软技能
　　可视化
　　后端工程师
　　Unix/Linux/OS X/Windows
　　SQL
　　MySQL/MongoDB/Oracle
　　C/C++/Java/PHP/Ruby/Python/…
　　编程语言
　　数据库
　　操作系统
　　数据结构
　　参考链接：
　　http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html
　　JacksonTian/fks · GitHub

以上就是关于「如何构建前端项目」的全部内容，本文讲解到这里啦，希望对大家有所帮助。如果你还想了解更多这方面的信息，记得收藏关注本站~

【★此文为Win10系统之家Ｗww.gＨosｔ58０.ｎeｔ*文章！】