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

【编写高质量代码】
一、注释的必要性：增长代码的可读性。
二、web标准：由一系列的标准组合而成，其核心理念是将网页的结构、样式、行为分离，因此他可分为：结构标准、样式标准和行为标准。
三、一个符合标准的网页，标签中的标签名应该所有都是小写，属性要加上括号，样式和行为不要夹杂在标签中，而应该分别单独存放在样式文件和脚本文件中。理想状态下，网页源代码有三部分组成：.html文件、.css文件、.js文件。
四、所谓高质量的代码，在web标准的指导下，在实现结构、样式和行为分离的基础上，还要作到三点：精简、重用、有序。
五、闲聊原生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代码的冲突：
一、用匿名函数将脚本包起来，能够有效控制全局变量，避免冲突隐患。若是要实现两个功能的之间的通讯，有时咱们能够定义一个全局变量，利用全局做用域的变量在各个匿名函数间搭起桥梁。
二、若是添加的全局变量太多，就违背了用匿名函数的初衷，因此应该严格控制全局变量的数量 。这时，咱们就能够有”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做为全局变量的变量名。
三、为了解决全局变量的冲突，咱们可使用命名空间。命名空间是一个特殊的前缀，在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>

四、由于生成命名空间是一个很是经常使用的功能因此咱们能够进一步将生成命名空间的功能定义为一个函数，方便调用，如：

<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方法，就能够在须要的命名空间的匿名函数中调用。
五、改善这种代码后，咱们就须要给代码添加适当的注释，以提升代码的可维护性。让js不产生冲突，须要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释。

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

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

javascript的分层概念与javascript库
一、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。