js 高级三 基础篇 (一)

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

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>

4

<noscript>
  对于不支持的js显示
</noscript>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。