前端工程师编写高质量代码

其实，友情也好，爱情也好，久而久之都会转化为亲情。说也奇怪，和新朋友会谈文学、谈哲学、谈人生道理等等，和老朋友却只话家常，柴米油盐，细细碎碎，种种琐事。很多时候，心灵的契合已经不需要太多的言语来表达。

先说下网站重构吧，
下面是自己从事工作中的一个积累总结，也有在书本上看到的。基本上都有用到项目中，也是很实用的，也希望看到这个博客的前端开发者学习，有好的建议可以提出来。
1，零乱的页面实现，对于后期的维护很头痛的一件事情。
2，web的标准：结构，样式，和行为的分离。网页源代码由三部分组成：.html,.css,.js  标签中混有样式和行为的写法是不推荐的。标准本身是手段不是目的，目的是让代码更易于维护。
提高可维护性：精简，重用，有序。
3，为用户提供良好的交互体验。
4，Ajax提交数据的方式：Ajax是一种利用javascript和XMLHttpRequest对象在客户端和服务器传送数据的技术。
XMLHttpRequest对象是用Javascript来创建的对象。Ajax是JS的一个子集。
5，我们要提高可读性：注释
6，提高重用性：公共组件和私有组件的维护。
7，我们有时候会遇到冗余和精简的矛盾冲突：选择集中还是分离。。。。（下面有说明或者明天，慢慢道来）。
8.古人云，磨刀不误砍柴工：前期的构思很重要，（不管是程序员搭建数据库，还是前端的前期设计）。规范的制定，公共组件的设计。和复杂功能的技术方案。。（后面还会有一个前端的规范的一个文档的。）

前端无外乎就是HTML，CSS，JS。

下面来说，好的HTML也就是高质量的HTML，需要具备的。
HTML
先来比较下table和css布局。
1，table布局的网页特点：1，代码量大，结构混乱。
                                         2，标签语义不明确对搜索引擎不友好。。（语义）
2，CSS布局（DIV+CSS）有点：1，代码量少，结构精简。
                                                    2，语义清晰。语义清晰就会对搜索引擎更友好。
（搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义。）
3，有很多人都在问对于HTML，CSS，Javascript的这三大元素中，我认为HTML是重要的，因为结构才是重点，样式是用来修饰结构的。正确的做法是：先确定HTML，确定语义的标签，再来选用适合的CSS。
4，还有我们是如何确定你的标签是否语义良好。一个很简单的方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。浏览器也会根据标签的语义给定一个默认的样式。。。
5，常见模块我们真的很了解吗？
    1，标题和内容。
    2，表单
（每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置“for=someld”来让说明文本和相应的input关联起来。）
    3，表格
（表格标题要用caption，表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单元格要区分开，表头有用th，一般单元格用td。）
语义化标签应注意的一些其他问题。
1，尽量少用无语义的标签DIV和span
2，在语义不明显，既可以用P也可以用div的地方，尽量用P,因为P默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利。
3，不要使用纯样式标签。例如;b,font,u等。改用css设置。语义上需要强调的文本可以包在strong或者em标签里。有强调的语意。strong默认是加粗，em默认是斜体。。

下面讲讲CSS，编写高质量的CSS
1，怪异模式和DTD
    标准模式和怪异模式这两种模式的差异比较大，比较典型的就是IE对盒模型的解析：在标准模式中，网页元素的宽度是由padding，border，width三者的宽度相加决定的。在怪异模式中，width本身就包括了padding和border的宽度。此外，标准模式下块级元素的经典居中的方法是设定width，然后margin：0 auto；在怪异模式下也无法正常工作。
    怪异模式的目的就是为了兼容老式浏览器下的代码，它的很多解析方式是不符合标准的。所以，一般情况下，我们应该避免触发怪异模式，应选用标准模式。
      那么怪异模式是如何被触发的呢？与DTD有关，DTD是一种保证HTML文档格式正确的有效方式。
DTD的类型包括（HTML4.01） 严格型（strict），过渡型（loose），（XHTML1.0），严格型（transitional），过渡型（strict）。
如果漏写DTD声明，FF仍然会按照标准模式来解析网页，但在IE中（6.7.8）就会触发怪异模式。
2，如何组织CSS
      1，base层，是提供css reset功能和粒度最小的通用类，原子类。
      2，common层
      3，page层
通用原子类里有几个类比较特殊，需要特别说明一下。
.fl类和.fr类。这两个类，除了设置float：left和float：right之外。还设置了display：inline。熟悉cssbug的工程师应该一眼就能认出其作用——解决IE6的双外边距BUG。在IE6 下，如果对元素设置了浮动，同时又设置了margin-left或者margin-right。margin值会加倍。例如，设置margin-left：10px在IE6 下会显示为margin-left：20px。解决这个BUG的办法就是设置display：inline。所以我们在设计通用原子类时，将display：inline直接添加到.fl和.fr类时。可以避免挂浮动类时引入BUG。
.clearfix类。这个类用于在父容器直接清楚子元素浮动。通常情况下，为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度。有三种做法：1，让父容器浮动起来。2，让浮动元素后面紧跟一个用于清除浮动的空标签。3，给父容器挂一个特殊class。即clearfix
.clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{ height:1%;}
清楚CSS浮动。高度自适应。。
.zoom类。在IE7发布之前，用height：1%来触发hasLayout。因为IE6为将height按照min-height来解析，所以用height：1%不会引入副作用。但是IE7发布以后，这种方式就不适用了，更好的触发hasLayout的方式是设置zoom：1，不用担心引入任何副作用。

模块化css——在css中引入面向对象编程思想
1，模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。
2，挂多个class还是新建class——多用组合，少用继承。
3，如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用边距的原子类（例如mt10，mb20）。模块最好不要混用margin-top和margin-bottom。统一使用margin-top或者margin-bottom。
4，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。如果css选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。

讲讲CSS sprite
将多张图片合并成一张大图，优点：会大大减少网页的HTTP请求数，减少服务器压力。
缺点：降低开发效率和增大维护难度。如果对于流量并不大的网站来说，css sprite带来的好处并不明显，而它付出的代价却很大，其实并不划算。所以，是否使用csssprite主要取决于网站流量。。。
     css常见问题
1，css编码风格：多行式和一行式。
2，ID和class
一般情况下，建议尽量使用class，少用id。
3.css hack
              1，IE条件注释法，只在IE下生效<!--[if IE]>....................<![endif]-->
                                           只在IE6小生效<!--[if IE 6]>.....................<![endif]-->
                                           只在IE6以上版本生效<!--[if gt IE 6]>..................<![endif]-->
                                           只在IE7上不生效<!--[if ！ IE 7]>..................<![endif]-->
IE条件注释中间可以有外链css，style，script。
               2，选择符前缀hack法。如：*html只对IE6生效，*+html只对IE7生效。
选择符前缀法不能用于内联样式上，比如：<div style=""></div>
              3,样式属性前缀法_只在IE6下生效，*在IE6和IE7下生效。
4，解决超链接访问后hover样式不出现的问题。
              正确的伪类顺序、
关于啊标签的四种状态的排序问题，有个简单好记的原则，叫做love hate 原则，即，love hate
l（link）ov（visited）e h（hover）a（active）te
5，hasLayout ，前面一篇有讲过。
6，块级元素和行内元素。常见的：div，p，form，ul，ol，li。
                                                     span，strong，em
7，display：inline-block和hasLayout
如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特征。如：span{display：inline-block；}
例子就不写了。
8,relative,absolute,float
relative:会保留自己在z-index：0；层的占位，left，top，right，bottom值是相对于自己z-index：0层的位置。
absolute会完全脱离文档流，不再在z-index：0层，保留占位符，其left，top，right，bottom，值相当于自己最近一个设置了position：relative或position：absolute的祖先元素的。如果祖先没有设置，则相对boby的。

一，居中
1，水平居中
          （1）文本，图片等行内元素的水平居中{text-align:center；}
           （2）确定宽度的块级元素的水平居中{margin：0 auto；}
           （3）不确定宽度的块级元素的水平居中方法一：用table
                                                                                二：改变块级元素的display为linline类型，然后使用text-align：center来实现居中。
                                                                                三：通过给父元素设置float，然后父元素设置position：relative和left：10%，子元素设置position:relative和left：-50%来实现水平居中。
2，垂直居中
         （1）父元素高度不确定的文本，图片，块级元素的竖直居中。{通过给父容器设置相同的上下边距实现的。}
          （2）父元素高度确定的单行文本的竖直居中{height100px；line-height;100px;}
           (3) 父元素高度确定的多行文本，图片，块级元素的竖直居中。方法一：
                        方法二：对支持display：table-cell的IE8和firefox用display：table-cell和vertical_align:middle来实现居中，对不支持display：table-cell的IE6和IE7使用特定格式的hack，通过给父子两层元素分别设置top：50%和top：-50%来实现居中。 
二，网格布局，
z-index的相关问题以及Flash和IE6 下的select元素。
                Z轴在元素设置position为absolute或者relative后被激活。其大小由z-index设置，z-index越大，元素位置越靠上。
三，flash和IE6下select元素的显示问题。
flash嵌入网页中，有个wmode属性，用于指定窗口模式，其值有window（窗口），opaque（非窗口不透明），transparent（非窗口透明）三种。
四，IE6下select元素显示BUG
用iframe解决IE6下select与浮起元素的显示BUG
用iframe遮住select。
五，插入png图片
png格式因为其优秀的压缩算法和对透明度的完美支持，成为web中最流行的图片格式之一。
IE6下png的图片不显示透明效果。其他浏览器都挺好的。
为了解决IE6下png图片的般透明效果，的方案是：
一次性解决PNG透明度在IE6下显示问题的脚本

 

function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
       var imgID = (img.id) ? "id='" + img.id + "' " : ""
       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
       var imgStyle = "display:inline-block;" + img.style.cssText
       if (img.align == "left") imgStyle = "float:left;" + imgStyle
       if (img.align == "right") imgStyle = "float:right;" + imgStyle
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle     
       var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
    //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://xiaomiya2008.blog.163.com/blog/"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
    //alert(document.all[i].style.filter);
         }                                               
      }
   }
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}

 它的实现原理是当页面加载完成后，先遍历页面内所有的图片元素，找到后缀为.png的图片，将他们改成span标签，设置为display：inline-block的类型，长宽和原png图片一样，然后配上progid：DXImageTransform.Microsoft.AlphaImageLoader（src=‘png 图片路径’，sizingMethod=‘crop’）的滤镜，实现png的透明效果，再遍历页面内所有元素，检查他们是否有png的背景图，如果有，则将背景图去掉，改用滤镜。这种方式调用非常方便，只要将这段代码放入网页中任意地方，当页面加载完成后，png图片都可以实现透明。但他也存在一定问题。

1）当页面全部加载完成前，png图片的透明部分仍然会显示为浅蓝；
2）遍历所有元素，执行效率不高；
3）当png是以背景形式插入网页的，它可能有background-position和background-repeat属性，而滤镜是不支持者两个属性的，如果设置了这两个属性，这两个属性的效果会丢失。