js 高级三基础篇（一）

浏览数：32 / 时间：2015年06月09日

还不容易开篇了，本来不知道写点啥还是记录一下自己发现的亮点：

1, 建议把全部引入的javascript 放在</body> 结尾的前面

2, <script> 的defer （延期）与 html5 的 async （异步）

　　defer: 在外部js 加入defer = "defer" 例如： <script type="text/javascript" src="jquery-1.8.3.min.js" defer = "defer"></script> 脚本会延迟到整个页面解析完成再加载但在现实中延迟脚本不一定会按照它们出现是顺序呢加载也不一定在DomContentLoaded 前加载：最好只包含一个延迟脚本 htm5 忽略给嵌入式脚本设置 defer 的属性； ie8 >= 完全支持 htm5规定的行为

async ：设置 async = "async" 这个属性和defer类似但与defer不同的是，标记 async的脚本不能保证按照指定的先后顺序执行。async 一定会在load事件前执行，但可能在DomContentLoaded事件之前或者之后执行。

一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。

3，在xhtml 中的用法：与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。

<script type="text/javascript">

　　function compare(a, b){

　　　　　　　　if(a < b){
                return ‘a 小于b‘;
            }else if(a>b){
                return ‘a 大于 b‘;
            }else{　　　　　　　
　　　　        return ‘a == b‘ 
            }
        }

    </script>


　　在html中这些规则是被解析的，但在xhtml是不被解析的这里语句中a<b中的小于号在xhtml 当做一个新标签来解析的但作为标签来讲 小于号后面是不能跟空格的，因此导致语法错误。两种解决方法：1是用html相应的（&lt;）替换代码中出现的所有的小于号( < )

　　代码如下：

　　<script type="text/javascript">
        function compare(a, b){
            if(a &lt; b){
                return ‘a 小于b‘;
            }else if(a>b){
                return ‘a 大于 b‘;
            }else{　　　　　　　
　　　　        return ‘a == b‘
            }
        }    
    </script>
这样是可以用 导致无法理解，CData片段来包含javascript代码；在xhtml 与xml 中 CData 片段是文档中的一个特殊区域；引入 CData 片段如下：

<script type="text/javascript">
        function compare(a, b){
            <![CDATA[
                if(a < b){
                    return ‘a 小于b‘;
                }else if(a>b){
                    return ‘a 大于 b‘;
                }else{　　　　　　　
    　　　　        return ‘a == b‘
                }
                }
            ]]>
            // 还有的是不支持     CDATA片段的 则把CDATA的标记注释掉        
            function compare(a, b){
            <![CDATA[
                if(a < b){
                    return ‘a 小于b‘;
                }else if(a>b){
                    return ‘a 大于 b‘;
                }else{　　　　　　　
    　　　　        return ‘a == b‘
                }
                }
            ]]>
    </script>