• <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>
    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>
            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>

            f(sixleaves) = sixleaves

            重劍無(wú)鋒 大巧不工

              C++博客 :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
              95 隨筆 :: 0 文章 :: 7 評(píng)論 :: 0 Trackbacks
            今天完成了圖片庫(kù)的改進(jìn),不得寫下關(guān)于這個(gè)的深切感觸,獲得的寶貴經(jīng)驗(yàn)!。不羅嗦直接看先看代碼
            1.平穩(wěn)退化
                要支持平穩(wěn)退化,也就是在瀏覽器禁用js時(shí),不會(huì)造成無(wú)法瀏覽,知識(shí)用戶體驗(yàn)變差了而已,功能還是實(shí)現(xiàn)了的。此時(shí)就不能使用javascript偽協(xié)議加href屬性來(lái)解決。如下。
            2.分離js
                分離js的關(guān)鍵技術(shù)就是要結(jié)合HTML生命周期,和window對(duì)象的onload方法以及元素對(duì)象擁有事件函數(shù)進(jìn)行相應(yīng)的自定義函數(shù)綁定。
            3.兼容性(對(duì)象檢查技術(shù)、其實(shí)用來(lái)確定代碼錯(cuò)誤位置也很好用)
            4.優(yōu)化代碼(使用特定壓縮工具,壓縮js代碼)
             1 <!DOCTYPE html>
             2 <html>
             3     <head>
             4         <meta charset="utf-8" />
             5         <title>Image Gallery</title>
             6     </head>
             7     <body>
             8         <h1>Snapshots</h1>
             9         <ul id = "imagegallery">
            10             <li>
            11                 <href="images/fireworks.jpg" title="A fireworks display">
            12                 Fireworks
            13                 </a>
            14             </li>
            15             <li>
            16                 <href="images/coffee.jpg" title="A cup of black coffee">
            17                 Coffee
            18                 </a>
            19             </li>
            20             <li>
            21                 <href="images/rose.jpg" title="A red. red rose">
            22                 Rose
            23                 </a>
            24             </li>
            25             <li>
            26                 <href="images/bigben.jpg" title="The famous clock">
            27                 Big Ben
            28                 </a>
            29             </li>
            30         </ul>
            31         <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
            32         <id="desp">Choose an Image</p>
            33         <script type="text/javascript" src="./scripts/showPic.js">
            34         </script>
            35     </body>
            36 </html>
            g 1 function showPic(whichPic) {
             2     alert("showPic");
             3     var source = whichPic.getAttribute("href");
             4     var placeholder = document.getElementById("placeholder");
             5     placeholder.setAttribute("src",source);
             6     var text = whichPic.getAttribute("title");
             7     var txtNode = document.getElementById("desp").firstChild;
             8     txtNode.nodeValue = text;
             9     return false;
            10         /*
            11         經(jīng)驗(yàn)總結(jié):
            12         1.由于js是動(dòng)態(tài)語(yǔ)言,所以存在一個(gè)很嚴(yán)重的問(wèn)題,
            13         那就是你自己取的變量名稱時(shí),盡可能的采用駱駝峰寫法,
            14         并且最后借助好的編輯器,有自動(dòng)補(bǔ)全功能的編輯器,一面
            15         拼寫錯(cuò)誤,這種錯(cuò)誤低級(jí),而且查找起來(lái)十分困難。
            16 
            17         2.如果站點(diǎn)用到多個(gè)js文件,因該把它合并到一個(gè)文件中。以減少請(qǐng)求次數(shù),提高性能。
            18 
            19     */
            20 }
            21 
            22 function addLoadEvent(func) {
            23     var oldLoad = window.onload;
            24     if(typeof oldLoad == 'function') {
            25         window.onload = function() {
            26             oldLoad();
            27             func();
            28         }
            29     }else {
            30         window.onload = func;
            31     }
            32 }
            33 
            34 function prepareGallery() {
            35     //使用對(duì)象檢查技術(shù),檢查所要用到的方法是否可以用。
            36     //在js dom中,一切都可視為對(duì)象,包括方法,
            37     //所以說(shuō)這是對(duì)象檢測(cè)技術(shù),檢測(cè)這個(gè)對(duì)象存不存在
            38     //下面主要是檢查瀏覽器是否支持這些DOM接口
            39     //alert("jsss");
            40     
            41     if(!document.getElementsByTagName) {alert("tag");return false};
            42     if(!document.getElementById) return false;
            43     if(!document.getElementById("imagegallery")) return false;
            44     var gl = document.getElementById("imagegallery");
            45     var links = gl.getElementsByTagName("a");
            46     //alert(typeof links);
            47     for(var i = 0; i < links.length; i++) {
            48         links[i].onclick = function() {
            49             return showPic(this);
            50         }
            51     }
            52     //alert("end");
            53 }
            54 addLoadEvent(prepareGallery);
            55 /*
            56 這里介紹下HTML的聲明周期,當(dāng)HTML文檔完成加載時(shí),此時(shí)DOM節(jié)點(diǎn)樹(shù)立即構(gòu)建起來(lái),此時(shí)會(huì)出發(fā)window對(duì)象的onload事件
            57 所以我們?cè)谶@個(gè)時(shí)候執(zhí)行prepareGallery()函數(shù)進(jìn)行,相應(yīng)節(jié)點(diǎn)對(duì)象上的事件綁定是最合適的,因?yàn)榇藭r(shí)我們能確保整顆節(jié)點(diǎn)
            58 樹(shù)已經(jīng)構(gòu)建完畢,我們綁定只要代碼不出錯(cuò),就肯定不會(huì)出錯(cuò)。要是不用這個(gè)事件來(lái)處理。而只是通過(guò)srcipt標(biāo)簽引入,不管是放在
            59 head區(qū)域還是body結(jié)束之前,都無(wú)法保證此時(shí)DOM節(jié)點(diǎn)樹(shù)已經(jīng)構(gòu)建完成,所以要實(shí)現(xiàn)js分離我們一定要用到HTML的聲明周期中的加載完成
            60 ,構(gòu)建完成DOM節(jié)點(diǎn)樹(shù)而觸發(fā)的window.onload事件,有人會(huì)問(wèn)此時(shí)document對(duì)象是否存在,在BOM中,window對(duì)象含有一個(gè)成員變量,
            61 就是document,所以有window對(duì)象,就有document對(duì)象。
            62 */
            63 
            g
            代碼中的注釋已經(jīng)詳細(xì)說(shuō)明了代碼是要來(lái)干什么的。其實(shí)今天改進(jìn)版本的圖片庫(kù),本來(lái)是想學(xué)習(xí)下HTML生命周期和DOM節(jié)點(diǎn)樹(shù)的關(guān)系,以及和window.onload的關(guān)聯(lián)。還有學(xué)習(xí)怎么平穩(wěn)退化。結(jié)果卡殼,卡了半天,差錯(cuò),差了半天,起初是其中一個(gè)字符編碼有問(wèn)題,運(yùn)行結(jié)果不對(duì)。找了半天才找到。
            這里總結(jié)寫js的快速調(diào)試辦法,當(dāng)然有點(diǎn)麻煩。
            我們?cè)趯慾s時(shí),如果在定位元素時(shí),我們應(yīng)該分步定位,步步縮進(jìn),在定位時(shí),利用對(duì)象檢查技術(shù),我們可以很輕易找到我們出錯(cuò)的地方。本來(lái)這項(xiàng)技術(shù)是用來(lái)保證兼容性的,但是我們還可以用它來(lái)定位錯(cuò)誤!,在沒(méi)有該對(duì)象的時(shí)候使用alert進(jìn)行提示。在調(diào)試時(shí),我們就可以快速定位錯(cuò)誤的位置,因?yàn)榇蠖鄶?shù)時(shí)候我們寫的代碼在我們理解的邏輯上是不會(huì)有錯(cuò)的,但是我們有時(shí)可能為定位某個(gè)元素,給其加了給id,但是定位時(shí)卻拼錯(cuò)了,這時(shí)我們通過(guò)對(duì)象檢查技術(shù),就可以很快找到錯(cuò)誤的地方。
            2014.07.11
            02:44
            于福州
            posted on 2014-07-11 02:41 swp 閱讀(143) 評(píng)論(0)  編輯 收藏 引用 所屬分類: Web
            久久精品国产精品亚洲| www亚洲欲色成人久久精品| 久久久无码精品亚洲日韩蜜臀浪潮| 久久国产综合精品五月天| 精品国产热久久久福利| 亚洲精品NV久久久久久久久久 | 久久国产免费直播| 精品国际久久久久999波多野| 国内精品伊人久久久久AV影院| 日本一区精品久久久久影院| 久久成人精品| 久久精品国产亚洲av日韩| 久久久久久久国产免费看| 亚洲AV日韩AV天堂久久| 久久久久国色AV免费观看| 精品久久久久久无码专区不卡 | 久久精品中文无码资源站| 国内精品久久久久国产盗摄| 漂亮人妻被黑人久久精品| 久久久久无码精品| 国产精品久久久久久| 中文国产成人精品久久不卡| 国产精品免费久久久久影院| 浪潮AV色综合久久天堂| 亚洲伊人久久成综合人影院 | 人人狠狠综合久久亚洲| 久久久老熟女一区二区三区| 日日狠狠久久偷偷色综合0 | 久久久久国产精品麻豆AR影院| 久久精品国产网红主播| 久久国产欧美日韩精品免费| 狠狠色噜噜狠狠狠狠狠色综合久久| 三级三级久久三级久久| 久久伊人影视| 日韩欧美亚洲综合久久影院Ds| 青青草国产精品久久久久| 久久亚洲日韩精品一区二区三区| 漂亮人妻被中出中文字幕久久| 久久无码一区二区三区少妇 | 精品久久久久久无码中文字幕| 欧洲成人午夜精品无码区久久 |