脫離資料分散的問題,從jQuery 換到Vue.js – 電腦玩瞎咪 | vue jquery比較
前後端工程師,善用JavaScript、HTML5、CSS3和Golang與PHP、Node.js、C#。目前正為台灣的社群網站進行趕工,然而這東西卻趕了很久。在剛接觸前端設計時,我們常會聽見兩個東西,不外乎就是 Bootstrap[1] 和 jQuery[2],今天要談論的則是其中的jQuery。jQuery是個跨瀏覽器的JavaScript函式庫,透過簡單的幾個函式,就能夠輕鬆地操控頁面上的DOM、元素。其方法用起來真的夭壽簡單,但這僅限於你要開發單個頁面而已。倘若你正在開發一個小型網站,或是基本的文章頁面,就會慢慢地發現不易掌控資料,資料分散在頁面的各個角落。資料...
前後端工程師,善用 JavaScript、HTML 5、CSS 3 和 Golang 與 PHP、Node.js 、C#。目前正為台灣的社群網站進行趕工,然而這東西卻趕了很久。
在剛接觸前端設計時,我們常會聽見兩個東西,不外乎就是 Bootstrap[1] 和 jQuery[2],今天要談論的則是其中的 jQuery。jQuery 是個跨瀏覽器的 JavaScript 函式庫,透過簡單的幾個函式,就能夠輕鬆地操控頁面上的 DOM、元素。
其方法用起來真的夭壽簡單,但這僅限於你要開發單個頁面而已。倘若你正在開發一個小型網站,或是基本的文章頁面,就會慢慢地發現不易掌控資料,資料分散在頁面的各個角落。
資料分散,太過依賴 DOM、元素內容因為 jQuery 如此好用,所以就會開始有人寫的很糟糕(就像 PHP 是世界上最好的語言[3],太過方便,所以被很多人鄙視。)
如果我們要做一個商品頁面,可能就會有購物車計數器,用來顯示你的購物車有多少個物品,但一個頁面可能有兩個購物車計數器,所以看起來像這樣。
<div class="counter">0</div> <div class="counter-2">0 個商品</div> // 透過 Ajax 取得目前購物車的商品數量。 $.get(/get_count.php).done(function(data){ // 將取得的商品數量顯示在頁面的元素上。 $(".counter").text(data.count); $(".counter-2").text(data.count + " 個商品"); });那麼假設我們要在這兩個購物車計數器累加呢?一些剛上手的 jQuery 初學者可能會寫成這樣。
// 將 .counter 的數字轉換成數值型態。 var count = parseInt($(".counter").text(), 10...