做前端开发

做前端开发

做前端开发快有3年时间，今天跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从WEB标准开始吧。WEB标准是什么？

呵呵，说是WEB标准，不过我这里主要是对XHTML1.1和CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了DIV+CSS，呵呵，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而CSS显示是指的CSS样式表了。采用WEB标准开发的好处

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？1、节约运营成本，省钱啊！

呵呵，能帮你省钱的东西，你会不会有兴趣？当然是十分的有兴趣了。看看我们的WEB标准制作方法是如何做到的？

采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。

而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。

2、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问我们网站的人）；第二类：搜索引擎；

采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。

一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？呵呵，这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以您现在需要学习WEB标准啊。^-^!

呵呵，温习完了基础课程，现在正式开始讲XHTML和CSS的技巧了。合理的布局

有朋友会开始问了，怎么一开始就开始讲合理的布局了呢?呵呵,前面我们提到了一些知识点“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。

那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？恩，这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。

在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：

web前端开发学习经验总结

开博第一篇文章。谨以此文祭奠大学逝去的时光。

web开发大概分为前台和后端，前台又可以分为美工，交互设计，js编程。后端了解不多，前端的话，可以按如下思路系统学习：基础知识：

1.html+css。这部分建议在上学习，边学边练，每章后还有小测试。之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《headfirsthtml与css中文版》，不过这本书讲的太细了，我没能拿出耐心细读。2.javascript。要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

进阶：

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还学进一步学习。CSS。必看《精通css》，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《css艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。

Javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：1.

框架。推荐jQuery，简单易用，我的第一web项目就是在w3school简单学习后，直接上手jQuery完成的，真的很难简单，很好用。但jQuery适用环境有限，对于那些对性能要求很高的页面无法胜任。推荐了解一下YUI或百度的tangram，都很好用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与web开发学习的精髓部分。

javascript语言范式。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数是语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《objectorientedjavascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说。

javascript语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，this指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。另外，你必须理解json。

dom编程，这个web前端工程师的核心技能之一。必读《JavascriptDom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。

ajax编程，这是另一核心技术。ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对ajax有良好的封装，编程并不复杂。

了解浏览器差异性。这部分包括css和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。

2.3.

4.5.

6.

再进一阶：有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但写出可以运行的代码，只是编程的最初级阶段。更高要求大概还有三方面：1易维护，2可测试，3高性能，如果页面流量有要求，那第四个就是低流量。1.

易维护。对于页面你该理解样式，数据，行为三者分离，对应的当然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。

2.可测性。js代码可测性的主题，我正在研究，欢迎感兴趣的同学联系我，共同学习。3.高性能。必读《高性能javascript》。

4.低流量。技巧性太强，非一朝一夕之功，不多说补充：

对于前段开发，核心部分基本就这些了，可以根据自己的兴趣爱好选择性学习以下内容。1.2.3.

美工。大公司都有专业的美工人员，不过如果爱好也可以了解。推荐《写给大家看的设计书》。

交互设计。大公司依然有专业人士搞这些，不过如果爱好也可了解。推荐《简约至上》。

后端。前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是php了。这部分又可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，php的zend，asp.net的asp.netmvc等等太多了，好还框架的设计思想都大同小异。

flash。我并没有把flash作为前端工程的核心技能之一，因为我不会，不过

ActionScript应该和js没有太大区别，可以根据工作需要学习。不过我的原则是能不用就不用，其实很多效果通过js，css都可以实现，完全不需要flash。而且随着html5的发展flash早晚会淘汰。

html5和css3。html5的标准到现在还没有正式发布，不过目前几乎所有新的浏览器都已经开始支持，手机上就更是如此，建议学习，很好，很强大。

4.5.

前端开发需要学习的内容很多很杂。美工，交互设计，flash，js，html+css，后端，随便哪种技能，如果学的特别牛，都可以保证你拥有一个职业。想通吃，没个几年怕是不成。关键是选准自己的爱好，深入学习一项，面要铺开，但深度更重要。

爱前端正在使用多说

1.

扩展阅读：做一个有信仰的前端开发人员

做一个有信仰的前端开发人员--4/19演讲稿

此文有博看文思()学员提供

做一个有信仰的前端开发人员

1．提问，阐述浏览器用户开发人员的关系（提问阐述中举例VCD具体阐述关系）

浏览器为什么有现在这么大？处理速度是现在这样的？浏览器开发人员用户浏览器需要用户，所以浏览器其实是根据用户的需要去做，即使是去做的遵循标准，最初目的也是为了用户。为什么浏览器有纠错性，为什么曾经的一个标准要错误的标签必须报错，不能正常显示页面。浏览器是为了用户好，用户好自己才能活下去；标准也是为了用户好，让用户知道自己技术是对用户有利的。但是为什么浏览器和标准却有如此大的不同。因为这中间插了一层人，就是我们开发人员。因为我们开发人员的不同行为方式，从而导致了浏览器和标准一些截然不同的行为。

举个简单的例子。用户通过电视连VCD看光盘内容。但是光盘往往有错的时候，许多放这些碟子的VCD机器读到错误就卡死到那里了。刚开始的时候，用户会抱怨碟子不好，慢慢的用户就会放弃VCD机器，因为碟子普遍不好，还要VCD做什么。然后VCD厂家不能坐视不管吧。所以他们就研究出了纠错技术，读到错误的部分，跳过去，不影响大部分的浏览。用户感到爽了，自然就不会放弃VCD机器，至少暂时不会有此想法。但是发明VCD碟子的人们呢，他们希望VCD碟子不会被损害，而不是简简单单跳过去。所以他们可能会考虑改进碟子被损害的几率，因为如果他们不改进技术，那么VCD厂家将放弃这个技术市场，从而投向另外的技术市场，从此VCD的技术就会消失。然后可能出现的情况就是VCD技术升级了，可能成为WCD、XCD等等。但是这时候新的问题就要出现了。你这个技术升级了，我的机器也得跟着升级，但是升级代价多大，用户会不会接受你这个新技术，等等问题。当你这个升级的技术的升级代价很大，或者用户觉得无法适应的时候，厂家就会放弃这项技术。是的，这个技术又要面临完蛋的危险。因此升级的时候，如果升级带来的代价太大，就不得不考虑放慢步伐，让用户和厂家接受以后一部分之后再进行下一步。如此看来技术想要存活下去真的是夹缝中求生存啊。

浏览器就像VCD机，我们写的代码就是光盘。现在我们就不难理解我们的web标准它多么想一步到位但是却不能够，看看XHTML2.0的下场。是的，完全语义化很好，img和a的移除很棒，省多少代码哪。但是假如我们是厂商，我们不得不面临的一个问题是什么？问大家。换位思考。我们不得不面临的一个问题就是：现有解析引擎的全面崩盘，要做一个全新的解析引擎。所有浏览器厂家基本回到了原点……那么我们会接受这个标准么？问大家。如果有的人说会，那么问他，你是做标准的还是做市场的，如果都照你这么做公司就要破产了。一个公司首要的是要存活，然后才考虑信仰（良知不在此范围）。那好，用户看到的页面也是没什么变化的（表面上），现在一个正常的浏览器厂商老板都不会接受这个标准。除了GOOGLE可能会欢迎，因为它们首先是做搜索引擎其次是做浏览器的，标准有利于搜索引擎。然后新的问题就出来了，厂商不接受这个标准，怎么

办。没有人市场的标准就是一纸空文，没有意义。所以。XHTML2.0完蛋了。尽管它让代码更简洁，让搜索引擎更喜欢。

2．解决文初提到的问题。引申出开发人员的不坚定是整个问题的产生因素。告知大家保持信仰。

我想说的并不是浏览器用户开发人员三者的关系，我想说这三者的关系，只是想告诉大家，浏览器是根据市场来决定web标准的存活的，而用户就是市场的根本。大家想想，老师说过我们这行业里有多少混子，大家大部分也都加前端群里和那些工作前线的人交流过了，他们是什么水平想必大家心里都很清楚。他们写出来的代码能是什么样子的，前阵子郑晗给我看过一个table布局下的问题，全部table加img，背景色都截图到img里。大家想想是不是，这些代码如果按照标准来会怎么样。如果我们是厂商，再次换位思考，这样的代码泛滥带来是什么结果。问大家。带来的结果就是用户无论用什么浏览器看到的都是不对的页面。那么我们有没有办法整治那些混蛋开发人员呢？没有办法，他们也不是你的员工，别的办法也不能立即奏效，我们只能保住眼前利益，对吧。此处可以提问大家，遇到这种问题怎么办。那么我们就只能够增强浏览器的纠错性。那么好吧，浏览器就变大了，处理速度变慢了。假如我一开始就告诉你们，一切都是因为我们这些代码开发人员，可能你们接受不了。但是我这样带着大家换位思考下来，相信你们都能理解了。为什么浏览器厂商会这么做。因为它也是为了活下去。很简单的一个例子，搜狗里有纠错功能，输入错误的拼音能得到正确的词组。这也是搜狗成功的一个重要因素。

那么这样带来的结果是什么，就是浏览器不断变大，用户体验越来越不好，什么鸟浏览器，或者什么鸟网站，太TM慢了。更有小白会说，擦，升级了浏览器网速就变得这么慢。这是一个恶性循环。怎么解决？作为浏览器厂商，我们想解决这个恶性循环，我们会希望什么发生呢？想想，就是一个新的技术出来，不用过大的更改解析引擎，不用太大的代价。根源上的解决才能解决问题。但是实际上呢，他们不知道做标准的多么为难，他们有个解决的办法，但是升级代价太大，所以他们不得不忍耐的一步一步的慢慢实现升级。

哦了，讲这么多，想告诉大家，我们就是改变这个恶性循环的重要环节，如果我们每个代码开发人员都有良知，写好的代码，那么这个升级的过程就会快的很多很多。就像如果世界上每个劳动者都有良知，珍惜时间，在路上发生车祸的时候不停下来看热闹，在旁边发生口角的时候不停下来看热闹，那么整个世界的劳动力的浪费率将会提高多少？劳动成果将会提高多少呢？在经济学家眼里，这些小事，就是阻碍世界经济发展的重要因素，这些劳动力的浪费将给世界带来巨大的损失，同样这些劳动力自己也没有得到最大的回报。

所以我想说，为了所有人，做一个有信仰的前端开发人员。

201*年4月18日星期日

23:58

很久没演讲了。好激动。但是最近真的很忙很忙。今天晚上十一点赶工了一个小时才写完，准备的不是很充分。每次演讲都希望对大家有帮助，其次才是锻炼自己的思维，总结知识。本来还准备有个话题准备讲最近的实习经验，但是刚写了个部门实施方案，所以暂时不想谈那个话题了。下次有机会吧。希望大家都一起快速成长。

友情提示：本文中关于《做前端开发》给出的范例仅供您参考拓展思维使用，做前端开发：该篇文章建议您自主创作。

　　来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《做前端开发》
由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
http://m.bsmz.net/gongwen/626210.html

• 上一篇：web前端工程师的求职信

• 下一篇：有关JS兼容性的工作总结