注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

海鱼的博客-飞在空中的鱼

飞是一种梦想,也会是一种姿态

 
 
 

日志

 
 

读书笔记(一)--<<编写高质量代码-Web前端开发修炼之道>>  

2013-01-16 17:32:21|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1.Web前端开发工程师要掌握的内容有:

 (1)必须掌握基本的前端开发技术,其中包括:CSS,HTML,DOM,BOM,Ajax,JavaScript等,在掌握这些技术的情况下,还要清楚地了解他们在不同浏览器上的兼容情况,渲染原理和存在Bug.随着RIA的流行和普及,Flash/Flex,Silverlight,XML也是应该掌握的.

 (2)在一名合格的前端开发工程师的知识体系结构中,网站性能优化,SEO和服务器端的基础知识也是必须掌握的.

 (3)必须学会运用各种工具进行辅助开发.

 (4)除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性,组件的易用性,分层语义模板和浏览器分级支持等等.

2.网站重构和团队合作:

(1)网站重构的原因一,根据W3C标准进行重构后,可以让前端的代码组织更有序,显著改善网站的性能,还能提高可维护性,对搜索引擎也更友好.原因二,重构后的网站能够带来更好的用户体验,用XHTML+CSS重新布局后的页面,文件更小,下载速度更快.DHTML可以让用户的操作更炫,更吸引眼球,ajax可以实现无刷新的数据交换,让用户体验更流畅.

(1)网站重构的本质是构建一个前端灵活的MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller).代码需要很好的复用性和可维护性.这是高效率,高质量开发以及协作开发的基础.

3.Web标准就是将网页结构,样式和行为分离开来,所以就包括结构标准,样式标准和行为标准.其中结构标准包括:XML标准,XHTML标准,HTML标准;样式标准主要是指CSS标准;行为标准主要包括DOM标准和ECMAScript标准.

4.一个标准的网页,标签中的标签名应该全部都是小写,属性要加上引号,样式和行为不要夹杂其中,而应该单独存放在样式文件和行为文件中.理想状态下,网页源码由三部分组成:.html文件,.css文件和.js文件.标签中混有样式和行为的写法是不推荐的.

5.网页的维护工作越来越难的原因,主要来自三个层面:一是浏览器层面,浏览器向前兼容使得前端被淘汰的技术,不推荐的方法依然广为流传和应用.  而新一轮的浏览器大战越演越烈,除了Firefox,Opera,Safari,Chrome这些IE的挑战者外,IE本身也同时流行着IE6,IE7,IE8三个不同版本.不同的浏览器对网页代码的解析或多或少的存在差异.二是技术层面,Web标准被重视和普遍采用的时间还不长,对此还停留在概念层面,对"好的实现方案"还处在摸索阶段.三是团队合作层面,随着用户对使用体验的要求越来越高,对网页的表现力要求越来越高,从而导致实现越来越复杂.如果合作不默契,很可能需要不停地打补丁.

6.所谓高质量的前端代码,是指在Web标准的思想指导下,在实现结构,样式和行为分离的基础上,还要做到三点:精简,重用,有序

7.需要掌握的技能:第一,CSS布局是前端开发工程师的基本功,一定要熟练.一般占到工作的50%~70%,甚至更高.对于CSS最基本的要求就是能兼容主流浏览器.第二,对Javascriptr的使用有所要求,不仅要求使用原生的JS,还要使用JS的类库(jquery,mootools)和Ajax.

8.增加代码的可读性--注释;提高重用性--公共组件和私有组件的维护.设计公共组件时,考虑让接口保持弹性,并且高度模块化;

9.对于一个中大型的设计,前期构思非常重要,构思内容主要包括规范的制定,公共组件的设计和复杂功能的技术方案.前期构思占整个项目时间的30%~60%都是正常的,正所谓磨刀不误砍柴工.

10.HTML专注于结构,一般来说,其中标签的职责只限于告诉你"这是一个标题","这是一个段落",而不是说"这是红色的","这个有500px宽"等.

11.在HTML,CSS,JavaScript三大元素中,HTML是最重要的,结构才是重点,样式是用来修饰结构的.正确的做法是:先确定HTML,确定语义的标签,再来选用合适的CSS.

12.不用任何CSS,网页还是有样式的,因为浏览器会根据标签的语义给定义一个默认的样式.

     (1)判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性.

     (2)除了去样式后的可读性外,值得重点提及的还有h标签.h标签的含义是"标题",搜索引擎对这个标签比较敏感,尤其是h1和h2.一个语义良好的页面,h标签应该是完整有序没有断层的.也就是说,按照h1,h2,h3,h4...这种顺序依次排下来的.


13.主要模块显示:

(1)标题和内容模块:当页面标签无法满足设计需求时,才适当添加div和span等无语义标签来辅助实现

(2)表单模块:一般来说,表单域要用fieldset标签包起来,并用legend标签说明表单的用途.因为fieldset默认有边框,而legend也有默认的样式,为满足设计需要,我们可以将fieldset的"border"设为"none",把legend的"display"设为"none".每个input标签对应的说明文本都需要使用label标签,并且通过input设置id属性,在label标签中设置"for=someId"来让说明文本和相应的input关联起来.

(3)

  评论这张
 
阅读(43)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018