编写高质量代码——html、css、javascript

【编写高质量代码】
1、注释的必要性：增加代码的可读性。
2、web标准：由一系列的标准组合而成，其核心理念是将网页的结构、样式、行为分离，所以他可分为：结构标准、样式标准和行为标准。
3、一个符合标准的网页，标签中的标签名应该全部都是小写，属性要加上括号，样式和行为不要夹杂在标签中，而应该分别单独存放在样式文件和脚本文件中。理想状态下，网页源代码有三部分组成：.html文件、.css文件、.js文件。
4、所谓高质量的代码，在web标准的指导下，在实现结构、样式和行为分离的基础上，还要做到三点：精简、重用、有序。
5、闲聊原生javascript、javascript类库和Ajax:
原生的javascript是浏览器默认支持的脚本语言，ajax是一种利用javascript和XMLHttpRequest对象在客户端和服务器端传递数据的技术，因为XMLHttpRequest对象也是用javascript来创建的对象，从某种意义上来说，ajax是javascript的一个子集。

【高质量的html】
标签的语义化：原因是搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义。
table布局的网页有如下特点：
代码量大，结构混乱；
标签语义不明确，对搜索引擎不友好。

正确的做法是：先确定html，确定语义的标签，再来选用合适的css。
当页面内标签无法满足设计需求是，才会添加div和span来辅助实现

语义化标签应注意的一些问题：
尽量少的使用无语义化标签div和span；
在语义不明显，即可用p也可以用div的地方，尽量用p。因为p默认情况下有上下间距，去样式后可读性更好，对兼容特殊终端有利。
不要使用纯样式标签，例如:b、font、u等。该用css样式。

【高质量的css】
怪异模型和DTD：有时候不遵从标准模型的的模式；DTD指的是document type definition，及文档类型定义，它是一种保证html文档格式正确的有效方法，一个DTD文档包含元素的定义规则、元素的关系的定义规则、元素课使用的属性，可使用的实体或符号规则。

如何 组织css:
人们比较推荐的组织方法：base、common、page，三个层次分别表示：base是最低层，会被所有页面引用，这一层与ui设计无关，无论任何风格的设计都可以引用他；common层，是组建级的css可以重用的csspage层，是最高层，每个页面的都不一样。

什么是css  reset?
html标签在浏览器里面有自己的默认样式，通过重新定义标签的样式，“覆盖”掉浏览器的默认样式，就叫做css reset。例如：*{margin：0；padding：0；}就是最早的css reset ，有些人喜欢在通配符“*”中写很多样式，但这是非常不好的，因为css的很多样式是具有继承性的，但是继承的权重是非常低的，比标签选择符的权重更低，这样的写法会破化css的继承性，设置样式时会增加很多额外的代码。

css命名——命名空间的概念
首先，css命名推荐使用英语，不要使用汉语拼音 ，我们可以根据内容来选用合适的英文单词来命名css，我们可以通过骆驼命名法和划线命名法来命名，骆驼命名法用于区别不同的单词，划线用于区别不同的从属关系。在css中还引入了面向对象编程的思想对css进行命名，及根据不同的盒子的从属关系来进行命名。

在给几个相同的盒子定义样式的时候：多用组合，少用继承。

margin的上下处理：如果对相邻的模块同时使用margin-top和margin-bottom，边距会重合带来不必要的麻烦，所以最好统一使用不同的margin-top或margin-bottom，不要混合使用。（总结：如果不确定模块上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用边距的原子类，模块最好不要混用，统一使用。）

低权重原则——避免滥用子选择器
当不同选择符的设置有冲突时，会采用权重高的选择符设置的样式。权重的规则是这样的：html 标签的权重为1，class的权重为10，id的权重是100，p的权重是1等。如果css选择符的权重相同，那么样式会遵循就近原则，那个选择符最后定义，就采用那个选择符定义的样式。
使用子选择器，会增加css选择符的权重，css的权重越高。样式越不容易被覆盖，越容易对其他选择符产生影响，为了保证样式容易被覆盖，提高可维护性，css选择符需要保证权重尽可能低。相比之下，新添class更利于维护。

css sprite
css sprite即将网站的背景图片合并在一张大纸上，图片的加载是会发出http请求的，一张图需要一个http请求，多张就要多条http请求，http请求越多，访问服务器的次数就越多，服务器的压力就越大，这样讲多张图合并在一张上，会大大减少网页的http请求，减少服务器的压力。但是他也会“降低开发效率”，“增大维护难度”。所以，是否使用css sprite 主要取决于网站的流量。

display：inline-block：它是行内的块级元素，他拥有块级元素的特点，可以设置宽度、长度，但是他却不可以独占一行他的宽度并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。

文档流： 网页虽然看上去是二维结构，但实际上他是有z轴的，z轴的大小由z-index控制，默认情况下，所有元素都在z-index：0 ；这层，元素根据自己的display类型、长度 等属性排列在z-index：0 这层，这就是文档流。

position：relative和position：absolute都可以改变元素在文档流中的位置，设置position：relative和position：absolute就会激活left、top、right、bottom和z-index属性，（默情况下，这些属性未经激活，是没有效果的）。当网页设置了position：relative和position：absolute是，网页的z轴被激活，这时设置的position：relative和position：absolute都会高于z-index：0；层；相比之下，position：relative会保留在z-index：0；层原有的位置（空间），只是相对于z-index：0；层高了一层；而position：absolute会完全脱离文档流，不再z-index：0；层保留占位符。对其做的定位都是相对于他自己最近的一个设置了position：relative和position：absolute的祖先元素或body元素。根据元素的不同定位概念，我们就可以对其进行一些相关的样式。

【高质量的javascript】
在团队合作时，为了避免js代码的冲突：
1、用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。如果要实现两个功能的之间的通信，有时我们可以定义一个全局变量，利用全局作用域的变量在各个匿名函数间搭起桥梁。
2、如果添加的全局变量太多，就违背了用匿名函数的初衷，所以应该严格控制全局变量的数量 。这时，我们就可以有”hash对象“作为全局变量，如下代码：

<div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        var GLOBAL={};
    </script>
    <script type="text/javascript">
        (function(){
            var a=123; b="hello world";
            GLOBAL.str2=a;
            GLOBAL.str=b;
        })();
    </script>
    <div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        (function(){
            var a, c="abc";
        })();
    </script>
    <div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        (function(){
            var a=GLOBAL.str2,b=GLOBAL.str;
            var d="adang is very handsome";
            d=b+","+d+a;
        })();
    </script>

使用普通的变量作为全局变量，扩展性很差，所以我们可以使用一个{}对象类型的变量作为全局变量，如果匿名函数间需要多个变量来做通信桥梁，我们可以将这些变量作为全局变量的属性，这样既可以保证全局变量的个数，同时扩展性很好。大多数开发者推荐使用大写的GLOBAL作为全局变量的变量名。
3、为了解决全局变量的冲突，我们可以使用命名空间。命名空间是一个特殊的前缀，在javascript中她其实是一个 通过{}对象实现的。在不同的匿名函数中，我们根据功能不同生命不同的命名空间，然后每个匿名函数的GLOBAL对象的属性都不要直接挂在GLOBAL对象上，而是挂在此匿名函数的命名空间下，如：

<div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        var GLOBAL={};
    </script>
    <script type="text/javascript">
        (function(){
            var a=123; b="hello world";
            GLOBAL.A={};
            GLOBAL.A.str2=a;
            GLOBAL.A.str=b;
        })();
    </script>
    <div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        (function(){
            var a, c="abc";
            GLOBAL.B={};
            GLOBAL.B.str=c;
        })();
    </script>

如果一个匿名函数中的程序非常复杂，变量名很多，命名空间还可以进一步扩展，生成二级命名空间，如：

<div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        var GLOBAL={};
    </script>
    <script type="text/javascript">
        (function(){
            var a=123; b="hello world";
            GLOBAL.A={};
            GLOBAL.A.CAT={};
            GLOBAL.A.DOG={};
            GLOBAL.A.CAT.name="mimi";
            GLOBAL.A.DOG.name="tom";
            GLOBAL.A.CAT.move=function(){
                //
            }
            GLOBAL.A.str2=a;
            GLOBAL.A.str=b;
        })();
    </script>

4、因为生成命名空间是一个非常常用的功能所以我们可以进一步将生成命名空间的功能定义为一个函数，方便调用，如：

<div>
        xxxxxxxxxx
    </div>
    <script type="text/javascript">
        var GLOBAL={};
        GLOBAL.namespace=function(str){
            var arr=str.split("."),o=GLOBAL;
            for(i=(arr[0]=="GLOBAL")?1:0; i<arr.length;i++){
                o[arr[i]]=o[arr[i]] || {};
                o=o[arr[i]];
            }
        }
    </script>
    <script type="text/javascript">
        (function(){
            var a=123; b="hello world";
            GLOBAL.namespace("A.CAT");
            GLOBAL.namespace("A.DOG");
            GLOBAL.A.CAT.name="mimi";
            GLOBAL.A.DOG.name="tom";
            GLOBAL.A.CAT.move=function(){
                //
            }
            GLOBAL.A.str2=a;
            GLOBAL.A.str=b;
        })();
    </script>

我们给GLOBAL对象添加namespace方法，就可以在需要的命名空间的匿名函数中调用。
5、改善这种代码后，我们就需要给代码添加适当的注释，以提高代码的可维护性。让js不产生冲突，需要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释。

给程序一个统一的入口——window.onload和DOMReady
为了不让javascript代码零散的在独立的进行游击，我们需要在功能上对程序进行 职能划分，网页的javascript从功能上，应该分为两个部分——框架部分和应用部分。框架部分提供的是对javascript代码的组织作用，包括定义全局变量、定义命名空间方法等。他和具体应用无关。应用部分提供的是页面的功能逻辑。

在不分离的代码中，css一般放在页头，javascript一般放在页尾。

javascript的分层概念与javascript库
1、javascript也可以像css那样分为三层：base层、common层、page层。base层主要职责是封装不同浏览器下javascript的差异，提供统一接口，还有就是扩展javascript语言底层提供的接口，让他提供更多更为易用的接口；common层则是是提供可供复用的组件和页面的具体功能没有直接关系；page层是最顶层，写网页的具体功能。

（1）base层
下面是一些典型的javascript兼容性问题
透明度：在IE下透明度是通过滤镜实现的，而在firebox下透明度是通过css的opacity属性实现的。
为了实现兼容性，就可以将透明度功能封装成setopacity函数，如下：

function setopacity(node, level){
            node=typeof node=="string" ? document.getElementById(node):node;
            if(document.all){
                node.style.filter='alpha(opacity'+ level+')';
            }else{
                node.style.opacity=level/100;
            }
        }

event对象：在IE中，event对象是作为window的属性作用于全局作用域中，而在firebox中，event对象是作为事件的参数存在的，这样就会产生一些兼容性问题，对此，我们也可以通过封装函数来避免。

冒泡：对于一些事件的冒泡，我们也可以通过设置IE下event对象的cancelBubble属性为true来实现，在firebox下，可以通过调用event对象的stopPropagation方法来实现。

on、attachEvent 和addattachListener：我们一般对DOM节点进行监听事件，我们一般是采用on xxx方式，这样会造成前面事件的覆盖，为此，我们可以 用attachEvent 和addattachListener代替on xxx。