icodding愛程式

什麼是 DOM？ 文件物件模型（Document Object Model，DOM）是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述（representation），讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。 所有網頁設計師可操作及建立文件的屬性、方法及事件都以[物件]來展現（例如，document 就代表「文件本身」這個物件，table 物件則代表 HTML 的表格物件等等）。這些物件可以由當今大多數的瀏覽器以 Script 來取用。 DOM 最常被用以[與 JavaScript 溝通]，也就是說雖然程式以 JavaScript? 寫成，但使用 DOM 來存取頁面及其元素。無論如何，DOM 本身是設計為一種獨立的程式語言，以一致的 API 存取文件的結構表述；是以雖然本站的焦點放在 JavaScript? 上，但 DOM 其實可以與[任何程式語言]共同運作。 [全球資訊網協會]（World Wide Web Consortium，W3C）建立了 [DOM] 的標準，稱之為「W3C DOM」。在當今主要瀏覽器都已正確實作的情況下，W3C DOM 使強大、跨瀏覽器的應用程式成真。這是眾網頁設計師在 Netscape 4 與 MSIE 多不相容的時代從未夢想過的事情。

Backbone.JS 支援 REST 的開發風格，可以讓你用比較正確的方式使用 Web 標準來寫 code。例如當遇到一些典型的資料操作 CRUD – Create, Read, Update, Delete 邏輯時，可以很容易地對應到 POST, GET, PUT, DELETE 等 HTTP 方法來達成任務，避免無謂的再造輪子。 底下的範例是基於先前介紹過的 Model 和 Collection 等基礎觀念，再加上讓前端 Model 在 CRUD 操作時能夠直接和後端的資源（URL）做到同步能力。 此範例的環境設定比較複雜，需要準備好一臺後端的 HTTP Server 和資料庫，如果您無法做出這樣的環境，歡迎到這裡來看看DEMO程式（記得開啟JavaScript主控台）。而對後端 API 有興趣的話也可以到這裡參考原始碼，但請注意這個後端程式純屬 DEMO 用， Update 和 Create 的功能都沒有實作出來，只是剛好做出示意的環境來說明原理，實際要用還是需做修改及調整。 非常強烈建議閱讀本章的同時要打開 JavaScript 的 Console （或是 FireBug 這類的工具），並且觀察網路的狀況，仔細看送給後端的 HTTP header 資料。 緊接著，讓我們來看看原始碼吧： 一開始的 Backbone.emulateHTTP 和 Backbone.emulateJSON 是為了和舊的 HTTP Server 相容所設的（畢竟我們無法確保所有的 Server 都能完整支援 HTTP 的各種方法）。，emulateHTTP 是利用 For example, a popular free slot machines might have 12 possible payouts ranging from 1 to 1, up to 2,000 to 1. POST 來模擬 PUT 和 DELETE 兩個 HTTP 做向下相容，模擬的方式是在 Form Data 的後面加上 _method 屬性來說明這個 POST 是 PUT 還是 DELETE。而 emulateJSON 則可以把要送給出的 JSON 在序列化（Serialize）之後，偽裝成 HTML Form 的 MIME 資料達到相容的效果。 接著，我們利用 Pers...

在開始之前可以到 JSFiddle 取得範例程式碼並一邊閱讀底下的介紹。 環境的基本與過去大致相同： Collection 簡單來說就是一組 Model 的陣列版本，如果有一堆 Model 需要被當做陣列（或類似的有序資料結構 – ordered set）來操作，而更重要的是，Collection 可以無縫的整合 RESTful web service，大大減低與後端溝通的阻礙。此外，Collection 可以直接對監聽 Collection 本身或 Collection 裡的 Model 所發出的各種事件（event），例如 change, add, remove 等等。 來看看底下這個例子，假設我們有一種 Model 叫做 Person： 如果我們想要有一個代表一群人的物件，可以用 Collection 建出代表一群人的 Collection： people，只要在建構的屬性裡面指定 Model為 Person 即可：產生一個 Person 或 People 的方法就像我們過去所知道的方法類似：從 People (人群) 增加一個 Person (人)的方法：people.add(person); 或是一些人 people.add([{name:"Bob"}, {name:"Jim"}]); 除此之外，也可以把 Collection 當做堆疊（stack），透過 push/pop 來操做： people.push([{name:"Bob"}, {name:"Jim"}]); people.pop(); 也可以用 reset 來新增 Model。reset 和 add 唯一的差別在於 reset 會清除掉原本的所有 Model： people.reset([{name:"Bob"}, {name:"Jim"}]); /* 或是 */ people.reset([{name:"Bob"}, {name:"Jim"}], person); 想刪除一些人也沒問題： people.remove(person); 值得注意的是上面的 add, reset 和 rem...

Router 是 backbone.js 的一個很特別的技術，但並不像 Model 和 View 一樣關鍵，並不是一個必學的項目，因此就算沒有使用 Router 也可以順利做出功能齊全的網頁或 App。 在開始 Router 之前先介紹一下 fragment 的觀念，指的是在一段 URL 當中，緊接在 # (hash tag) 後面的字串（在 RFC3986 當中這段字串叫做分段識別器 Fragment identifier，簡稱 fragment）。例如 http://www.example.org/foo.html#bar 的 bar，就是一個 fragment。 能夠針對不同的 fragment 可以給與相對應的 handler (callback) function，觀念上有點像是 DOM 上的 event listener。因此我們可以針對幾組 fragment 定義被執行或點擊時所要對應到產生的行為，例如讓使用者藉由瀏覽器的「上一頁」或「下一頁」瀏覽同一個頁面內的不同部分且便於觀察瀏覽記錄。 本篇的範例可以到 JSFiddle 取得完整程式碼、瀏覽並練習。 環境的基本設定大致上和過去差不多： 最底下可以看到總共有三個超連結，每個 anchor 都對應到一個 fragment，接著，透過 Backbone.Router.extend 來定義這些連結被執行時要對應到的行為。一個簡單的客制化 Router class 可寫成這樣： 第一個屬性 routes 是一個 map，定義了不同的 fragment 的樣式（pattern）所要呼叫的 handler function。 Fragment 的樣式有兩種，一種叫做 parameter parts，另一種叫做 splat parts。每一個 parameter part 會對應到 URL US Casinos 當中用被斜線 / 隔開的字串。而 splat part 代表的是 # 後面一整串的網址。 在 routes 底下的第一個樣式 “:foo" 表示的是網址內的 # 符號後面的「第一個」字串，而且後面沒有其他的斜線 / 存在。以 http://example.com/#happy 這個例子來說，foo 指的就是 happy，在 http://example.com/#...

在開始之前，推薦大家使用 JSFiddle，這是一個能讓人一邊看範例程式一邊動手修改，且能立刻看到執行結果的免費服務平台。文中的例子在可以在 http://jsfiddle.net/rightson/xp4pD/ 取得，歡迎多多利用，相信能讓大家看文章的過程更有感覺！ 底下的範例希望能讓大家瞭解如何用 Backbone 的 View 和 Model 巧妙搭配，輕鬆寫出 Model 和View 乾淨抽離的好程式。如果對 Backbone.js 的 Model 原理跟觀念感到陌生的話，也請先閱讀上一個單元之後再繼續往下瀏覽。 我們的目標很簡單：希望在按一下 button 之後，在畫面上印出相對應的內容。 這次除了 Underscore.js 以及 Backbone.js之外，我們還引進了jQuery，請參考底下的原始碼： 接著，讓我們先建立一個簡單的 Model 物件，這物件存著文字（text）和超連結（href）的資料，將會被等一下要建立的 View (template) 拿來使用。 現在要正式進入重頭戲囉：建立 Backbone 的 View 衍生類別。透過呼叫 Backbone.View.extend 這 API ，我們可以傳入客制化的 View 所需要的各種屬性： initialize 是 View 的建構子，是當 View 物件被建立起來第一時間會執行一次的 method。 el 指的是 View 對應到的 DOM 物件，這個 DOM 上被觸發的 event 都會限制在這 DOM 物件底下被 Backbone.View 捕捉到。 在這例子當中，myView 會監視 “#container" 這個 DOM 物件，任何想監聽的相關 event 都可以被掌握。 events 是非常酷的東西，可以在裡面註冊 el 綁定的 DOM 的 event handler。 直覺的寫法是： 代表的是當 button 的 “click" event 觸發的時候，呼叫 render 這個 method。 也可以寫成： 這表示只要這個 DOM 被 click 就會呼叫 render，很酷吧！ template 是指繪製 View 的時候的一份可套用的 DOM 。 這例子裡面 template 指定給 Id 為 “l...

Backbone.js 提供了非常簡單的方式創建模型 (model) 和視圖 (view) 幫助開發者可以很自然而然的明確區隔使用者操作介面 (view) 的行為及背後資料處理 (model) 的邏輯，讓程式碼井然有序。 事實上，Backbone.js 並不是真正的 MVC framework，她並沒有 controller，但這卻不構成問題。通常 controller 比較適合於 client-server 的架構，controller 會攔截需求 (request) 以決定要調用哪個 model。 這種所有事情都跑在 client 端的情況來說，view 可以直接和 model 溝通而無需再透過 controller 。 Backbone.js 的 model 是透過 observer pattern 的方式，讓 view 可以直接監聽 model 上的任何 event ，並且立刻更新 view 本身。Backbone.js 也直接內建支援 jQuery 或 Zepto 操作 DOM。除此之外還提供了 collections (相當於 model casino 的 array)，並提供支援 RESTful JSON interface 的 API。 構成 Backbone.js 的基本元素有底下四種類別： Model View Router Collection 我們會針對各種類別逐篇介紹，而這一系列的介紹文章取材自於 Joe Zimmerman 的 Javascript Blog 影片教學單元，我們希望能藉由擷取影片中的重點，讓大家便於學習、複習整個 Backbone.JS 的基礎觀念。把影片翻譯成文章不是一件很容易的事，若內容有不夠周詳完整的地方，也懇請不吝告知。 在開始之前，請先把 Backbone.js 以及其所依賴的函式庫 Underscore.js 加進來： 緊接著就讓我們開始吧~ Model 顧名思義是用來存放資料的類別，使用 Backbone 的 model 的好處是可以很容易地和其他 Backbone casino online 的類別作互動，這部分從底下的例子可以先看出一些雛形。 廢話不多說，首先我們來新增一個 model：Backbone.js 的 constructor 的名字是 initialize...

什麼是 JSON JSON 是個以純文字為基底去儲存和傳送簡單結構資料，你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件)，也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料，就可以非常簡單的跟其他程式溝通或交換資料，因為 JSON 就只是純文字個格式。 JSON 的優點如下:     相容性高     格式容易瞭解，閱讀及修改方便     支援許多資料格式 (number,string,booleans,nulls,array,associative array)     許多程式都支援函式庫讀取或修改 JSON 資料 JSON 應用在哪些地方 JSON 最常用用在 Web 網頁程式從 Server 端傳送資料給 browser，典型範例就是透過 AJAX 方式交換 JSON 資料，底下簡單舉個範例     使用者點選了線上產品縮圖     JavaScript 透過 AJAX 方式將產品 ID 傳送給伺服器端     伺服器端收到 ID，將產品資料 (ex 價格,描述) 編碼成 JSON 資料，並且回傳給瀏覽器     JavaScript 收到 JSON 資料，將其解碼 (decode) 並且將資料顯示在網頁上 您也可以透過網頁將 JSON 資料傳到伺服器端，這都是可以的，把 POST 或 GET 資訊編碼成 JSON 格式即可，如果有在使用 jQuery，它提供了兩個函式處理 JSON，分別是 getJSON 跟 parseJSON。 如何建立 JSON 字串 可以透過底下規則來建立 JSON 字串     JSON 字串可以包含陣列 Array 資料或者是物件 Object 資料     陣列可以用 [ ] 來寫入資料     物件可以用 { } 來寫入資料     name / value 是成對的，中間透過 (:) ...