[心得]從 js 到 jQuery 之七：網頁元素的工廠美學

[TonyQ (沉默是金)]

※ [本文轉錄自 Web_Design 看板]

作者: TonyQ (沉默是金) 看板: Web_Design
標題: [心得]從 js 到 jQuery 之七：網頁元素的工廠美學
時間: Mon Aug 18 02:08:43 2008


        本來以為兩天就可以回軌道的 , 竟然用了五天, 而且時間還壓的很緊.orz

        我下週末應該兩天會在coscup 2008會場 , 因為所有講題看起來都蠻有趣的 ,
        有報名的版友或認識的朋友們可以約一約聚聚.^^~

        coscup 2008     http://coscup.org/2008/


        另外幫朋友打打廣告 yahoo! open hackday ! 在9月中旬要登場囉,
        有興趣參加的朋友請參考
              活動首頁   http://hackday.ithome.com.tw/yahoo/index.html
              活動討論區 http://tw.mb.yahoo.com/ydn/yui/board.php


        工商服務時間講的夠多了 , 接下來讓我們繼續進入jQuery 本文吧！

        ────────────────────────────────

        幫大家回憶一下 , 我們這章要講的主要是 Manipulation , 翻譯是運用、
        控制之類的字眼 , 實際上的核心概念就是不斷的刪除/新增/修改元素.

        讓我用一個 js coder 應該不會太陌生的元素 ,
        來做一點簡單的類比 , 那就是 innerHTML .


      ＠domObj.innerHTML ="<div>helloworld</div>"

        這主要是針對某元素用html 直接重定義其子元素內容,
        相信各位coder都不會太陌生 . (w3c link: http://0rz.tw/4a4D9 )


        雖然針對是要用innerHTML還是要用  document.createElement()
        這點還有很多爭議 , 不過既然這裡只是拿來做類比的對象 ,
        暫時就先丟開道德、標準議題不論, 來做一點介紹 .

        因為innerHTML的作法跟後面要介紹的 jQuery function 有一定程度的關係.


      ＠什麼狀況下要用 innerHTML ？


        我們可能會有這樣的狀況
        <div id="theNode"></div>

        然後我們今天可能做了ajax , 取了一個html回來 , 我們想把他放在theNode
        裡面 , 或者是我單純就想在theNode裡面加上helloworld.

        那我們就會這樣做

        document.getElementById("theNode").innerHTML="helloworld";

        前面的原始碼在瀏覽器解析中就會變成
        <div id="theNode">helloworld</div>


      ＠前面有提到createElement , 那是什麼？

        dom node在操作的過程中其實還是以document的元素結構為主 ,常態而言 ,
        比較不建議用html的方案來操作 , 而是透過建立元素跟新增/移除元素為主.


        也就是透過appendChild / removeChild 跟 createElement來做 , 不過這部
        份對開發者而言還蠻麻煩的 , 筆者以前常用一些簡單的函式來協助簡化.

        為避免非必要的重複 , 這裡僅提供參考文摘 , 有興趣者請自行參考 .
        http://www.ibm.com/developerworks/cn/xml/x-matters41.html

        這篇文摘是介紹createElement的簡化方案 以及dom刪改的一些操作技巧,
        是筆者兩年前看過就一直印象深刻的參考文章,推薦大家一讀.


      ＠寫html不就寫html嗎？  能有多少花樣？

        簡單列出一些有趣的需求，讓我們了解這部份為什麼值得開專欄探討。

        異動部份
            1.將html新增到指定的元素前方或後方 (before/after)
            2.將html新增到指定的元素成員中的最前方或最後方(append,prepend)
            3.將某個特定dom搬移到另一個位置（比方說table 兩個tr交換）
            4.直接改變整個元素中的html （innerHTML)
            5.將某段html轉換成dom物件
            6.複製一個現有的元素
            7.在現有的元素外面包上一個指定的父元素

        取值部份
            取元素已在ch2 selector,ch5 巡覽中提過,此處僅提取text/html.
            8.取得成員的html (innerHTML)
            9.取得含自己與成員的html (outerHTML)
           10.取得成員中的純文字內容（某些狀況下只需純文字,不需要html tag.）


      ＠雖然不多...但是好像做起來會很複雜？

        目前傳統js的作法雖然不是做不到,但仍然缺少一個簡單的介面.

        理由請看前面文摘 , 這也是以前蠻困擾我的問題, 因為dom提供的工具太少,
        所以連要列出一個解決方案列表 , 都需要處理各種複雜的組合.

        另外 , 載入html的部份 , 還包含一些其他的議題 ,
        比方說html中若包含<script> , <style> 也該要被執行之類的.

        像 <script src="xxx.js"></script> 的動態載入 ,
        更是每隔一陣子就會出現在ajax版討論的問題.


      ＠那 jQuery 怎麼做？

        jQuery提供多種處理方案 , 不過只提一些常用方法, 以達到簡化的目的,

        首先以 <div id="theNode"></div> 內容改為helloworld 來說.
        只要這樣寫

                $("#theNode").html("helloworld");


        html("hellowrld")可類比成該成員裡面的innerHTML=helloworld ,
        如果直接呼叫 $("#theNode").html() 則可類比成回傳裡面的innerHTML .



      ＠有別的範例嗎？

        問的好 , 讓我們來舉個比較複雜點的例子 ，以底下的book表格為例
        <table>
            <tbody>
                <tr>
                        <td>author</td>
                        <td>book</td>
                </tr>
           </tbody>
        </table>

        要在最後面加入一本書的話 .
        $("tbody").append("<tr><td>哈利波特</td><td>J.K.羅琳</td></tr>");

        要在tbody的最前面放一本書的話 .
        $("tbody").prepend("<tr><td>哈利波特</td><td>J.K.羅琳</td></tr>");

        要在table前面加個「這是書單」的話 ,
        $("table").before("這是書單");

        要在table後面加個「真是太有趣了」.
        $("table").after("真是太有趣了");


        以上我們共用了 html append prepend before after 等五個函式.

        簡單demo (btw 可以試著多按幾下看看重複執行的效果...)
        http://tonyq.org/jqtalk/jq7_jqHtmlDemo.html


      ＠等等 , 你剛剛不是告訴我不要用html操作 , 要用dom嗎？

        別緊張 , 雖然這裡我們都是用html的方式做處理 , 但是jQuery實際在
        操作時會透過regex解析文字並視需要轉換成dom , 也就是說我們根本
        無須考慮到dom跟html之間的轉換 , 把問題交給jQuery , 儘管放心的用吧!

        （有興趣想細究轉換的部份, 可看 jQuery原碼中的 clean function.）


      ＠關於dom元素的移動？

        基本上你可以透過
                $(selector).append(dom) 或
                $(selector).append($(selector2))的方式移動,

        比方說以這個例子, 我們能將table移到div裡面.
        http://tonyq.org/jqtalk/jq7_jqHtmlMove.html

        當然 html append prepend before after 等也都是支援這樣的處理的.


      ＠複製一個元素？

        既然我們知道$(sel1).append( $(sel2) )會把原本的資料給搬過去 ,
        那有時候我不想搬過去 , 那我就會需要給他一個複本 ,

        這時候我們就會這樣寫 $(sel1).append($(sel2).clone()  ) ,
        clone() 會複製一份不含事件綁定資料的元素.

        （如果想要連綁定的事件一起複製, 請使用 clone(true) .)


      ＠取得純文字內容 ？
        $(selector).text()

      ＠刪除元素？
        這就是我們在第二章討伐表格大魔王時用過的 remove()

      ＠用特定html把自己包起來？
        wrap( html )

        舉例來說 , $("table").wrap("<div></div>") 就可以
        從 <table>...</table> 變成 <div><table>...</table></div>.


      ＠那script跟style怎麼辦？

        如果是 script src , jQuery 會幫你載入 ,
        如果是 <script></script>的程式碼,jQuery 會幫你eval .
        如果是 style 他會幫你create style物件載入.
        *如果是 link rel="stylesheet" , 他會幫你載入.

        過去這些是讓開發者傷透腦筋的問題 ,
        現在幾乎都不用自己煩惱了!!!!!!


        （註：除link rel 在ie6底下測試還是有問題外 ,
              其他三個經測試都是ie6/fx2能正常處理的.)


      ＠將html轉換為 dom 或 jQuery物件
        只要簡單的透過 $(html)就可以變身成為 jQuery物件囉.
        for example $("<div></div>") 就可以建立一個div的jQuery物件.


      ＠那我可以把 html 都透過 jQuery寫嗎？

        雖然理論上你可以把大部分的html透過 js 及 jQuery處理 ,
        但建議是盡量不要直接把html寫在 js 中 ,

        雖然jQuery讓html異動變得簡單 , 但是把太多的html 嵌在js上是不佳的 ,
        一來是你的js會很難提出成為公用 , 二來是異動html時容易有漏網之魚.

        變成你在設計html時要異動 js, 異動js時又可能會影響到html, 這樣就會
        造成很複雜的狀況, 除非你是想寫widget , 否則非常不建議這麼做.


      ＠體驗時間
        我們今天要介紹的是jquery ui中的 datePicker , 也就是日曆選單.

        http://docs.jquery.com/UI/Datepicker

        簡易demo :p
        http://tonyq.org/jqtalk/jq7_datePicker.html


---
        解釋一下為什麼是副標網頁元素的工廠美學 ,
        因為我們只負責給html當input 讓他去處理元素並產出結果 ,

        而不關心過程中是如何轉換成dom結構的處理,

        在design pattern中有個著名的工廠方法就是以這個概念為出發模式,
        我不關心你怎麼產的 , 我只關心你這間工廠出來的東西的品質對不對.:p

--
這章比較偏 usage  , 因為這章的方法其實都很簡單 ,
所以在內容上比較沒什麼好著墨的 ,下一章我們將接著介紹 ajax 議題,

預期將 ajax 做基本的名詞解釋 , 帶過 server side 對ajax設計的問題 ,
介紹 jQuery 提供的ajax函式 , 並對ajax 幾個歷史性的問題 ,
做一些基本的解釋與提供簡易解法 , 讓讀者不至於被ajax給唬住了 .:p

--
        What do you want to have ?  / What do you have?            
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。
        My PPolis , My past. http://ppolis.tw/user/Tony            

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
※ 編輯: TonyQ           來自: 220.132.59.247       (08/18 02:14)

--
        What do you want to have ?  / What do you have?            
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。
        My PPolis , My past. http://ppolis.tw/user/Tony            

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
※ 編輯: TonyQ           來自: 220.132.59.247       (08/18 02:21)
※ 編輯: TonyQ           來自: 220.132.59.247       (08/18 02:37)
推 aiyswu:推
推 wa120:
推 Turbine:有夠詳細^^
推 icycandle:推！！！
※ 編輯: TonyQ           來自: 220.128.219.202      (10/09 15:10)
推 bobju:讚讚!
→ kosgroup:推
※ 編輯: TonyQ           來自: 61.224.239.208       (12/16 00:01)