分类: Web开发应用

 一、何为Web前端project师?

    

     前端project师,也叫Web前端开发project师。他是随着web发展。细分出来的行业。Web前端开发project师。主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码,并添加交互动态功能,开发JavaScript以及Flash模块。同一时候结合后台开发技术模拟总体效果。进行丰富互联网的Web开发,致力于通过技术改善用户体验。

Web前端project师成长之路——知识汇总

 图1、前端技术MSS





     Web前端开发技术主要包含三个要素:HTML、CSS和JavaScript!

    它要求前端开发project师不仅要掌握主要的Web前端开发技术。站点性能优化、SEO和server端的基础知识。并且要学会运用各种工具进行辅助开发以及理论层面的知识,包含代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。

    随着近两三年来RIA(Rich Internet Applications的缩写。中文含义为:丰富的因特网应用程序)的流行和普及带来的诸如:Flash/Flex,Silverlight、XML和server端语言(PHP、ASP.NET。JSP、Python)等语言,前端开发project师也须要掌握。

    前端开发的入门门槛事实上非常低,与server端语言先慢后快的学习曲线相比。前端开发的学习曲线是先快后慢。

HTML 甚至不是一门语言。他不过简单的标记语言!

CSS 仅仅是无类型的样式修饰语言。当然能够勉强算作弱类型语言。

    Javascript 的基础部分相对来说不难,入手还算快。





   

     也正由于如此,前端开发领域有非常多自学成“才”的同行,但大多数人都停留在会用的阶段,由于后面的学习曲线越来越陡峭,每前进一步都非常难。 Web前端技术有一些江湖气。知识点过于琐碎,技术价值观的博弈也难分伯仲,即全局的系统的知识结构并未成体系,这些因素也客观上影响了“正统“前端技术的沉淀!并且各种“奇技淫巧”被滥用,前端技术知识的传承也过于泛泛,新人难看清时局把握主次。

因此,前端技术领域,为自己觅得一个靠谱的师兄,重要性要盖过项目、团队、公司、甚至薪水。





    还有一方面,正如前面所说,前端开发是个很新的职业,对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来,比如CSS sprite、负边距布局、栅格布局等。各种JavaScript框架层出不穷,为整个前端开发领域注入了巨大的活力。浏览器大战也越来越白热化,跨浏览器兼容方案依旧是五花八门。

为了满足“高可维护性”的须要。须要更深入、更系统地去掌握前端知识,这样才可能创建一个好的前端架构,保证代码的质量。





    随着手持设备的迅猛发展。带动了 HTML5行业标准的高速发展。web领域的技术。大概有10年都没有大的更新了!

如今市场非常须要优秀的、高级的前端project师。一方面是由于这是一个比較新的细分行业,并且前端程序猿大都自学一部分。知识结构不系统;还有一方面。大学里面没有这样的课程,最最重要的是:北大青鸟这类培训机构也没有专门的前端project师的培训课程!







    吴亮在《JavaScript 王者归来》第一张的序里面说:大多数程序猿觉得 Javascript 过于简陋,仅仅适合一些网页上面花哨的表现。所以不愿花费精力去学习。或者以为不学习就能掌握。实际上,一门语言是否脚本语言,往往是她的设计目标决定,简单与复杂并非区分脚本语言和非脚本语言的标准。

其实,在脚本语言里面,Javascript 属于相当复杂的一门语言,他的复杂度即使放在非脚本语言中来衡量。也是一门相当复杂的语言!Javascript 的复杂度不逊色于 Perl 和 Python!









 二、怎样学习前端知识?

    

     作为一名最基础的前端project师你必须掌握HTML、CSS和JavaScript。三者必须同一时候精通,类似我字样对前端知识一知半解的,一遇到问题就停下工作就四处搜索解决方式的,首先就算不上一个合格的前端人员。

像我这种假设当了前端project师那工期肯定是不能保证的。合格的前端project师第一要学会的就是在没有不论什么外来帮助的情况下(包含搜索引擎),可以完毕大多数任务。

下面知识点是作为一个前端project师必须了解和熟悉的:





    DOM结构——两个节点之间可能存在哪些关系以及怎样在节点之间随意移动。

    DOM操作——如何加入、移除、移动、复制、创建和查找节点。

事件——如何使用事件以及IE和DOM事件模型之间存在哪些主要区别。

    XMLHttpRequest——这是什么、如何完整地运行一次GET请求、如何检測错误。

    严格模式与混杂模式——怎样触发这两种模式。区分它们有何意义。

盒模型——外边距、内边距和边框之间的关系,IE < 8中的盒模型有什么不同。

块级元素与行内元素——怎么用CSS控制它们、它们如何影响周围的元素以及你认为应该如何定义它们的样式。

    浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

HTML与XHTML——二者有什么差别。你认为应该使用哪一个并说出理由。

JSON——它是什么、为什么应该使用它、究竟该怎么使用它,说出实现细节来。

上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识,也还需学会至少一门后端编程语言,让你自己学会怎样与后端进行更好的交互。非常多前端project师对一些库非常的熟悉,jQuery。Bootstrap等。可是对于库的熟悉并不能提现你的优秀,整整优秀的是那些理解库背后的机制,特别是可以徒手写出一个自己的库的人。

真正合格的前端project师是能实现详细的功能要求。而优秀的前端project师须要解决的问题是寻找一个最优的解决方式。

再者,优秀的前端project师须要具备良好的沟通能力,由于前端project师至少都要满足四类客户的需求:





    产品经理。

这些是负责策划应用程序的一群人。

他们会想出非常多新奇的、奇怪的、甚至是不但是实现的应用。一般来说,产品经理都追求丰富的功能。

UI设计师。这些人负责应用程序的视觉设计和交互模拟。

他们关心的是用户对什么敏感、交互的一贯性以及总体的好用性。一般来说,UI设计师于流畅靓丽、但并不easy实现的用户界面,并且他们常常不满前端project师造成 1px 的误差。

    项目经理。这些人负责实际地执行和维护应用程序。项目管理的主要关注点,无外乎正常执行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化,以及不在升级更新时引入新问题。

    终于用户。指的是应用程序的主要消费者。虽然前端project师不会常常与终于用户打交道,但他们的反馈意见至关重要。

终于用户要求最多的就是对个人实用的功能,以及竞争性产品所具备的功能。  





     

     Yahoo公司 ,YUI的开发project师 Nicholas C. Zakas 觉得:前端project师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了,为了在多种平台中使用,多种技术都借鉴了大量软科学的知识和理念。成为优秀前端project师所要具备的专业技术,涉及到广阔而复杂的领域。这些领域又会由于你终于必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端project师的大门,但仅仅有运用该技术创造的应用程序以及你跟他人并肩协同的能力。才会真正让你变得优秀。





 三、提升无止境





Web前端project师成长之路——知识汇总

 图2、Web前端project师知识架构





    优秀的前端project师应该具备高速学习能力。

推动Web发展的技术并非精巧不动的,这些技术差点儿每天都在变化,假设没有高速学习能力。你就跟不上Web发展的步伐。你必须不断提升自己。不断学习新技术、新模式;只依靠今天的知识无法适应未来。

Web的明天与今天必将有天差地别,而你的工作就是要搞清楚怎样通过自己的Web应用程序来体现这样的翻天覆地的变化。









 四、前端开发知识架构





 前端project师





    浏览器

        IE6/7/8/9

         Firefox

         Chrome/Safari/Opera

     编程语言

        JavaScript/Node.js

         JavaScript语言精粹

    切页面

        HTML/HTML5

         CSS/CSS3

         PhotoShop/Paint.net





         开发工具

            IDE

                 VIM/Sublime Text2

                 Notepad++/EditPlus

                 WebStorm

             调试工具

                Firebug/Firecookie

                 YSlow

                 IEDeveloperToolbar/IETester

                 Fiddler

             版本号管理

                Git/SVN

                 Github/Bitbucket/Google Code





         代码质量

            Coding style

                 JSLint/JSHint

                 CSSLint

                 Markup Validation Service

             单元測试

                QUnit/Jasmine

                 Mocha/Should/Chai

             自己主动化測试

                WebDriver





         前端库/框架

            jQuery/Underscore/Mootools/Prototype.js

             YUI3/Dojo/ExtJS

             Backbone/KnockoutJS/Emberjs

         前端标准/规范

            HTTP1.1

             ECMAScript3/5

             W3C/DOM/BOM/XHTML/XML/JSON/JSONP

             CommonJS/AMD

             HTML5/CSS3

         性能

            JSPerf

             YSlow 35 rules

             PageSpeed

             HTTPWatch

             DynaTrace’s Ajax

             高性能JavaScript

         编程知识储备

            数据结构

            OOP/AOP

             原型链/作用域链

            闭包

            函数式编程

            设计模式

            Javascript Tips

         部署流程

            压缩合并

                YUI Compressor

                 Google Clousure Complier

                 CleanCSS/UglifyJS

             文档输出

                JSDoc

                 Dox/Doxmate

             项目构建工具

                make/Ant

                 GYP

                 Grunt

                 Yeoman





         代码组织

            类库模块化

                CommonJS/AMD

                 YUI3模块

            业务逻辑模块化

            文件载入

                LABjs

                 SeaJS/Require.js





         安全

            CSRF/XSS

             ADsafe/Caja/Sandbox

         移动Web

             HTML5/CSS3

             响应式设计

            Zeptojs/iScroll

             V5/Sencha Touch

             PhoneGap

             jQuery Mobile

         JavaScript生态

            MongoDB/CouchDB

         前沿技术社区/会议

            D2/WebRebuild

             NodeParty/W3CTech/HTML5梦工厂

            JSConf/沪JS(JSConf.cn)

             QCon/Velocity/SDCC

             JSConf/NodeConf

             YDN/YUIConf

         计算机知识储备

            编译原理

            计算机网络

            操作系统

            算法原理

            软件project/软件測试原理

        软技能

            知识管理/总结分享

            沟通技巧/团队协作

            需求管理/PM

             交互设计/可用性/可訪问性知识

        可视化

            SVG/Canvas/VML

             D3/Raphaël/DataV





     后端project师

        编程语言

            C/C++/Java/PHP/Ruby/Python/…

        数据库

            SQL

             MySQL/MongoDB/Oracle

         操作系统

            Unix/Linux/OS X/Windows

         数据结构













 五、Web前端学习书籍

    

     HTML、CSS 类别书籍,都是大同小异,在当当网、卓越网搜索一下非常多推荐。

假设感觉学的几乎相同了,能够关注一下《CSS禅意花园》,这个非常有影响力。

Javascript 的书籍 推荐看老外写的,国内非常多 Javascript 书籍的作者对 Javascript 语言了解的都不是非常透彻。

    这里推荐几本 Javascript 书籍:

    ——0基础读物:——

    《JavaScript高级程序设计》:一本很完整的经典入门书籍。被誉为JavaScript圣经之中的一个,具体解释的很具体。最新版第三版已经公布了,建议购买。

    《JavaScript王者归来》百度的一个Web开发项目经理写的,作为刚開始学习的人准备的入门级教程也不错。

    ——中级读物:——

    《JavaScript权威指南》:另外一本JavaScript圣经,解说的也很具体。属于中级读物,建议购买。

    《JavaScript.The.Good.Parts》:Yahoo大牛,JavaScript精神领袖Douglas Crockford的大作,尽管才100多页。可是字字珠玑啊!强烈建议阅读。

    《高性能JavaScript》:《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。

    《Eloquent JavaScript》:这本书才200多页,很短小,通过几个很经典的样例(艾米丽姨妈的猫、悲慘的隐士、模拟生态圈、推箱子游戏等等)来介绍JavaScript方方面面的知识和应用方法。

高级读物:

    《JavaScript Patterns 》:书中介绍到了各种经典的模式,如构造函数、单例、工厂等等,值得学习。

《Pro.JavaScript.Design.Patterns》:Apress出版社解说JavaScript设计模式的书,很不错。

《Developing JavaScript Web Applications》:构建富应用的好书,针对MVC模式有较为深入的解说,同一时候也对一些流程的库进行了解说。

《Developing Large Web Applications》:不仅有JavaScript方面的介绍,还有CSS、HTML方面的介绍。可是介绍的内容却都很不错,真正考虑到了一个大型的Web程序下。怎样进行JavaScript架构设计,值得一读。

    要做优秀的前端project师,还须要继续努力:《高性能站点建设指南》、《Yahooproject师的站点性能优化的建议》、“YSLOW”性能优化建议、《站点重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”…… 这些都要深入研究!





    万事开头难。假设你能到这个境地,剩下的路自己就能够走下去了。假设单纯仅仅是学习前端编程语言、而不懂后端编程语言(PHP、ASP.NET,JSP、Python)。也不能算作是优秀的前端project师。在成为一个优秀的前端project师的道路上,充满了汗水和辛劳。

web前端project师知识汇总的更多相关文章

  1. 想做web前端project师应该学习些什么?

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  2. 杂谈之WEB前端project师身价

    了解javascript语言规范么?+1000 知道各浏览器的css差异么?+1000 javascript差异呢?+1000 知道html各标签的含义并不是常好地运用么?+1000 知道怎样跨浏览器 ...

  3. Web前端必备-Nginx知识汇总

    一.Nginx简介 Nginx是一个高性能.轻量级的Web和反向代理服务器, 其特点是占有内存及资源少.抗并发能力强. Nginx安装简单.配置简洁.启动快速便捷.支持热部署.支持 SSL.拥有高度模 ...

  4. 前端project师的价值体如今哪里?

    这是一个非常老的话题"前端project师的价值体现在哪里?".有人说:"前端project师之于站点的价值宛如化妆师之于明星的价值."一位好的Web前端开发p ...

  5. 【前端】怎样成长为一名优秀的前端project师---

    浅谈本人的经验.也算是与大家交流吧,本人眼下也是从事前端的工作,时间并不长,说的不好,请见谅. 首先,前端project师必须得掌握HTML.CSS和JavaScript. 仅仅懂当中一个或两个还不行 ...

  6. 为什么整个互联网行业都缺前端project师?

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  7. 前端project师,确定你的目标吧!无能的人才管他叫命运

    导语: 你为自己定过一个不靠谱的目标,是20年前的事了吧. 长大你想干什么?你的回答是什么?现在实现了吗? 如今,你每天都坐在同一个格子间的同一个电脑前,会不会感到每天都像是在复印,感到前途是模糊的, ...

  8. 前端project师养成记:开发环境搭建(Sublime Text必备插件推荐)

    为了让自己更像一个前端project师,决定从开发环境開始武装自己. 本文将介绍前段project师开发的一些利器的安装步骤,主要包含了: 1.Node.js的安装 2.Grunt的安装及经常使用插件 ...

  9. 、web前端的这么知识应该是怎样的一个知识体系架构?

    .web前端的这么知识应该是怎样的一个知识体系架构?之前我以为可以以W3C为纲要,把W3C的东西学会了就够了.后来发现我错了,W3C还不全面. 真正全面的覆盖了web前端知识体系的东西是——浏览器内核 ...

随机推荐

  1. Quartz2D二维画图引擎

    Quartz2D二维画图引擎 这个二维画图引擎的功能很强大 一般苹果公司xcode 提供给我们的一些UI控件不能满足我们的需求 所以我们会自己定义控件 xcode 提供的全部控件都是由这个画图引擎画出 ...

  2. JavaScript的闭包理解

    因为本人是做java web 开发的,对js仅仅是存在非常浅的理解,js闭包的概念非常早就听说了,可是一直都不明确是什么意思,今天准备梳理一下闭关的概念; 闭包(closure)是Javascript ...

  3. elcipse 编译cocos2d-x android

    http://blog.csdn.net/eyu8874521/article/details/22605695 最開始学习cocos2dx.大多数人可能是被复杂的环境配置过程搞死的,尤其是和Andr ...

  4. infludb语法--官网

    https://docs.influxdata.com/influxdb/v0.8/api/query_language/ InfluxDB features a SQL like query lan ...

  5. MEF example code

    public interface IObjectResolver { } public class ObjectResolver:IObjectResolver { private Compositi ...

  6. mvel2.0语法指南

    虽然mvel吸收了大量的java语法,但作为一个表达式语言,还是有着很多重要的不同之处,以达到更高的效率,比如:mvel像正则表达式一样,有直接支持集合.数组和字符串匹配的操作符. 除了表达式语言外, ...

  7. Ubuntu下快速配置Caffe

    Caffe安装 实际上在windows上安装过多次caffe了,无论是BLVC版本的还是Microsoft版本的,ubuntu的按照也进行过,这段时间在自己笔记本上 又折腾了下caffe安装,发现其实 ...

  8. 编程范式(Programming Paradigm)-[ 程序员的编程世界观 ]

    编程范式(Programming Paradigm)是某种编程语言典型的编程风格或者说是编程方式.随着编程方法学和软件工程研究的深入,特别是OO思想的普及,范式(Paradigm)以及编程范式等术语渐 ...

  9. easyui的增删改

    陈旧的开发模式PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对”前端:“我改完了”后端:“功能交付”PM:“春节要加这个活动”后端:“这个先找 ...

  10. 一个helloword hibernate配置以及查询

    搭建一个Hibernate环境,开发步骤: 1. 下载源码 版本:hibernate-distribution-3.6.0.Final 2. 引入jar文件 hibernate3.jar核心  +   ...