风清扬

导航

H5-JavaScript（三） 用javaScript 需考虑的问题

一、兼容性

　　由于js 本身是依靠浏览器的解释器来执行的，所以必然存在兼容性问题。 通常叫做“向后兼容” or“平稳退化”，确保低版本的浏览器不会因为你的程序挂掉。

　　1、禁用 Javascript 脚本

 　　　以打开一个新窗口为例。 调用Bom 中的api window.open("url","new_window_name","others");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 平稳退化</title>
</head>
<body>
    <!-- 1、方法利用 javascript：伪协议。 不支持伪协议的浏览器直接打不开-->
    <a href="javascript:popUp('http://www.baidu.com')">Example</a> 
    <!-- 2、用a 标签的onclick 属性来调用js 脚本。遗憾的是和方法1 一样糟糕-->
    <a href="#" onclick="popUp('http://www.baidu.com');return false">Example</a> 
    <!-- 3、好的做法,当浏览器禁用javascript 还是可以使用 -->
    <a href="http://www.baidu.com" onclick="popUp('http://www.baidu.com');return false">Example</a>
<script>
    function popUp(winURL) {
        window.open(winURL,"popup","width=320,height=480");
    }
</script>    
</body>
</html>

　　2、老浏览器对Dom支持程度不够

<script>
    window.load = prepareLinks(); //注意原书中没有(),firefox实践中必须加入。
    function prepareLinks() {
        //检测浏览器对Dom 的支持
        if (!document.getElementsByTagName) return false;
        var links = document.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function() {   //onclick监听与function 挂钩
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
</script>

 

二、扩展性

　　在兼容性里边写的代码扩展性不好。应该学习css ，表示层和数据结构层分离，那行为层也应该和结构层分离。　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js分离</title>
</head>
<body>
    <a href="http://www.baidu.com">Example</a>
<!-- html 加载完毕后再加载script 脚本 归口：性能-->
<script src="js/popUp.js"></script>    
<script>
    window.load = prepareLinks(); //注意原书中没有(),firefox实践中必须加入。
    function prepareLinks() {
        var links = document.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function() {   //说明启动onclick监听
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
</script>
</body>
</html>

 

 

三、性能

　　1、减少对Dom 的访问

　　2、javascript 放置位置 </body>之前

　　3、浏览器协议传输的文件（js），包含中的所有注释，格式（空格，回车等字符），所以可以考虑 保存两份 js： 源代码一份， js_min 一份（用工具压缩过的脚步）

 

 

补充：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js 图片库 修正版</title>
 6     <link rel="stylesheet" href="css/layout.css" />
 7 </head>
 8 <body>
 9     <h1>Snapshots</h1>
10     <ul id="imagegallery">
11         <li>
12             <a href="img/firefox.jpg" title="A firefox display" >FireFox</a>
13         </li>
14         <li>
15             <a href="img/coffee.jpg" title="a cup of black coffee" >Coffee</a>
16         </li>
17         <li>
18             <a href="img/rose.jpg" title="A red,red rose" >Rose</a>
19         </li>
20         <li>
21             <a href="img/bigben.jpg" title="The Famous clock" >Bigben</a>
22         </li>
23     </ul>
24     <img id="placeholder" src="img/placeholder.jpg" alt="my image gallery">
25     <p id="description">Choose a img.</p>
26     <script type="text/javascript" src="js/showPic.js"></script>
27     <script type="text/javascript" src="js/preparegallery.js"></script>
28     <script type="text/javascript" src="js/addLoadEvent.js"></script>
29     <script>
30         addLoadEvent(preparegallery);
31     </script>
32 </body>
33 </html

 

 1 function showPic(whichPic) {
 2     if (! document.getElementById("placeholder")) return false;
 3     var source = whichPic.getAttribute("href");
 4     var placeholder = document.getElementById("placeholder");
 5     placeholder.setAttribute("src",source);
 6     if(document.getElementById("description")) {
 7         var title = whichPic.getAttribute("title");
 8         var description = document.getElementById("description");
 9         description.firstChild.nodeValue = title;
10     }
11     return true;
12 }
function preparegallery() {
            if (!document.getElementById) return false;
            if (!document.getElementsByTagName) return false;
            var gallery = document.getElementById("imagegallery");
            var links = gallery.getElementsByTagName("a");
            for (var i = 0; i < links.length; i++) {
                links[i].onclick = function(){
                    return !showPic(this);
                }    
            }
        }
 1 function addLoadEvent(func){
 2     var oldonload = window.onload;
 3     if(typeof window.onload != 'function'){
 4         window.onload = func();
 5     }else{
 6         window.onload = function(){
 7             oldonload();
 8             func();
 9         };
10     }
11 }


 






 




 






		

			posted on 
2017-09-23 11:08 
卜戈的博客 
阅读(475) 
评论(0) 
 
收藏 
举报