fbpx
Category

網頁前端

Javascript工程思維網頁前端

如何在主流 JavaScript 框架中做選擇？横向對比 Vue, React, AngularJS, and Angular2

本文原文撰寫於2017年，部分資料可能因時空背景而有不同。 如果你不曉得該如何為你的產品選擇一個合適的前端框架，這篇文章也許可以給你一些啟發。 一個有趣的事實是：IBM 發表的 2017 年最值得學習編程語言名單中，JavaScript 榜上有名。 正是這位 IT 巨頭指出，JS 在網站中驚人地達到 94.4％ 的使用率，而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁，因為它負責整個 web 界面，包括動畫和交互」。 不管你怎麼看，JavaScript 很重要。 這也指明了潛在 Web 開發人員的方向：如果你深入前端，你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。 讓我們假設你知道 JavaScript 基礎知識，不是一無所知的那種，如果假設是正確的，…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH3 Vue實例

上回這裡成功的建置環境後，進入下個環節的討論。就是在接觸框架之前，其實並不是非常明白所謂的架構，就會常常出現各種功能混在一起的情況，像是一個Js事件需要同時處理「資料變動」、「樣式修改」或是「資料處理」以及「後端互動」，雖說在開發時都算順利，但過了幾天後回來開發，或是後來要針對網站進行改動維護，卻完全不知該從何下手，而這也就是框架最大的價值，他讓我們在開發時，每一段Code可以專注處理某一個部分的任務，結構分明，在維護上也能更加輕鬆。   開始使用Vue.js   在Vue的官網其實有明確指出「建議不熟悉Vue或是node.js環境使用的開發者先不要使用Vue-Cli」，所以建議一開始接觸Vue.js框架可以先從CDN開始熟悉，基本上只需要在HTML檔的 <head> 中引入CDN即可使用： //開發者模式版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //產品開發使用的穩定版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script>   創建Vue實例 在引入CDN之後，要讓網頁能夠成功顯示需要有兩個要件，分別是模板 (Template)與實例 (Vue Instance)，模板可以直接建立在HTML檔中，而實例則是Vue的Javascript物件實例，首先我們先從實例開始說起。 Vue的實例主要是關注資料面的操作，他會負責控管資料以及處理資料，而在Vue的實例中，物件的屬性與方法是有既定寫法的，最核心的屬性設定有 el 以及 data ，el 是指Vue實際掛載在DOM的哪一個節點，通常這個屬性會設定為 "#app" ，這個「掛載」的觀念會在後面的章節中做解釋，這邊可以先把他理解為Vue實際能在DOM中的作用範圍，如果超出這個節點，Vue就無法控制了；接著 data 則是這個頁面會使用到的資料，寫法就是 Object ，key是在模板使用的資料名稱，Value是資料的實際內容，像下方的範例就是我們在Vue中建立了一筆資料，資料的變數名稱叫作 text ，而資料內容是 "Hello World!"： var vm = new Vue({ el:…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH2 環境建置

在上回這裡對Vue有了基礎概念後，在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦～不過其實在建置Vue.js的環境我個人覺得還算友善，不像某Tensor開頭的機器學習框架，要建立GPU計算的環境真的是弄到懷疑人生......，今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況   首先，那個Node.js與NVM (Node Version Manager)   因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發，基本上沒有接觸過本地端的開發方式，所以也沒有使用過Node.js的經驗，所以在安裝Vue之前必須先進行Node.js的環境安裝，基本上這也是在所以過程中最讓我印象深刻的地方。   安裝Node.js有幾種方式，第一種就是直接上Node.js的官方網站下載直接安裝，我一開始也是直接利用這種方法，但後來後悔了；第二種是利用Node的版本控制工具 - NVM進行安裝，這是我蠻推薦的作法，畢竟在開發或維護不同的專案時，每個專案開發時的Node版本可能不盡相同，所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換，不用再刪除重裝之類的。   要安裝NVM的方法基本上非常簡單，只需要使用他們官方的Github上說明的指令，即可在Terminal進行安裝： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號，就代表NVM安裝成功了，接著就可以進一步利用NVM安裝Node.js。   利用NVM安裝Node.js…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH1 新的開端

接觸前端到現在也差不多快一年半了，過去在開發前端的時後，都是使用原生javascript與jQuery以及php進行開發，雖然隨著時間推移接觸到的東西越來越多，開始有了有系統性開發與後續維護的需求，剛開始頂多就是將JS與php物件化，但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離，所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新，順便寫篇系列紀錄一下～ Beginner of Vue 在約莫半年前的時候其實就有試著自學Vue框架的想法了，但當時自己的背景知識量還不大夠，包括AJAX的運作以及同步異步的線程阻塞問題等，在當時都是我無法掌握的技術，最近把這些東西補齊並且看了根webpack相關的技術之後，才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點，尤其是對於英文較不熟練的開發者而言，因為開發Vue框架的工程師是來自中國的，所以他本身官網的技術文件都支援簡體中文，如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD，在進入實作之前還是得先來了解一下這個框架本身的特性。 Components 組件的概念 在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝，依照不同的頁面需求，引入不同的components 到根(Root) 或是常見的App頁面，在這個框架中，其實整個網站結構很像一個葡萄串，從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串，最終變成一個不斷串連組裝的網站結構，像我的Blog 結構大概長這樣： 整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面，這五個頁面會附著於#APP這個根上，而每一個頁面各自會使用到不一樣的組件進行組裝，這些組件的方便之處就在於：像是首頁與分類頁面都會使用到卡片作為文章的顯示方式，在一般的情況我們需要把相同的版型寫在不同的頁面，這就會造成在維護上的麻煩，尤其又是使用PHP生成內容的時候，只會使頁面變得越來越複雜，然而在Vue框架中，我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板，在需要使用到這個模板的時候，我們只需要引入這個版型即可，像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 - CardUi 所架構，而組件的運作方式在之後的文章中，我會在獨立介紹他。 資料驅動一切 在Vue框架當中，有另一項特色就在於它是利用資料驅動所有變化的，當資料發生變化時，Vue會根據我們設定的情況做出相應的改變，首先在這個架構中，資料與模板是獨立分離的，在一開始寫網頁時，我們會直接將內容寫在HTML的標籤當中，或是透過PHP在預處理階段時生成，但在Vue框架中，資料會獨立存取在Vue物件的Data中，然後在物件被實例化的Creat階段時渲染(Render) 進模板當中，像是這樣：…
學程式助教
March 11, 2020
HTMLJavascript工程思維技術問題網頁前端資源整理

盤點10個超多人使用的前端動畫庫！

在網頁設計上，你可能固定使用某幾個動畫庫，但你知道 GitHub 上面其實有超多超夯的前端動畫庫嗎？ 前端動畫不僅能代表該網頁製作者與單位的用心，同時也能增加使用者好的體驗， 這篇文章幫喜愛網頁互動動畫的你整理了10個超多人推薦的前端動畫庫！ 我們趕快往下看吧！ 1. jQuery.countdown 創立者：hilios GitHub 人氣：2.2K stars GitHub 傳送門：https://github.com/hilios/jQuery.countdown 2. aniJS 創立者：anijs GitHub 人氣：3.6K stars GitHub 傳送門：https://github.com/anijs/anijs 3. matter-js 創立者：liabru…
學程式助教
March 4, 2020
Javascript專案思維網頁前端

[筆記] 從零接觸 Google Map API 2：在 Vue.js 中使用 Geocoding 將地址轉換成地標

為了準備 Bootcamp 畢業前的 Final Project — 製作類似訂餐平台 — 開始接觸和學習 Google Map API，上一篇筆記是從零開始學習，並在 Vue.js 中嘗試使用，透過 Maps JavaScript API 服務實作地圖、地標、訊息視窗功能 — 最終將不同行政區的數間假餐廳展示在地圖上，提升使用者體驗 — 本篇將筆記使用 Maps JavaScript API 的另一項功能「Geocoding Service」 (more…)
學程式助教
December 11, 2019
Javascript專案思維網頁前端

[筆記] 從零接觸 Google Map API 1：在 Vue.js 中實作地圖、地標、訊息視窗

最近在準備 Bootcamp 畢業前的 Final Project，由於專案和訂餐平台有關，想說若使用者能透過地圖快速瀏覽營運中的餐廳，或能在訂單上看到地圖顯示領餐地點，可以增加使用者的體驗。由於之前還沒有碰過 Google Map API，更不用說在 Vue.js 當中使用，想說趁專案開始前，能嘗試自學一下，也看一下實作的可行性與成果。以下將筆記「從零接觸 Google Map API，在 Vue.js 中實作地圖、地標、地標訊息視窗」 (more…)
學程式助教
December 10, 2019
HTMLPHP網頁前端

動態網頁是什麼？非工程人員你也要知道的網頁知識

前言 在這個網路越來越發達的時代，大家每天都在上網，使用瀏覽器查詢資料、看影片、購物等等，都與網頁有關，當你在使用時，你有沒有想過網頁也有區分為靜態網頁以及動態網頁呢，可能會有人覺得動態網頁就是在頁面上有動畫，會動的就是動態網頁，而頁面靜止，不會動的就是靜態網頁，其實不然。以下內容我們將介紹何謂動態網頁以及靜態網頁，讓你可以更加了解平時所使用的網頁喔。 靜態網頁 在了解動態網頁以前，也需要先了解靜態網頁究竟是什麼，這樣才能夠真正搞懂靜態跟動態究竟差在哪裡。 超文件標示語言HyperText Markup Language，簡稱：HTML，HTML是網站建置的基礎技術，常與CSS與Javascript配合成一個適合觀看的網頁，讓瀏覽器去讀取，一般判斷方式為網頁副檔名為html或htm皆為靜態網頁，靜態網頁的優勢為容易為搜尋引擎所接受，所以很多動態網頁會將動態網頁轉變成靜態方式，就是所謂的【偽靜態網頁】來提高搜尋引擎的友善度達到排名優化的成效。 當用戶瀏覽器通過HTTP協議向Web伺服器請求提供網頁內容時，伺服器僅僅是將原先的HTML文檔文檔傳送給用戶瀏覽器，用戶看到的內容是標準的HTML文黨的內容，可能在另外加上GIF格式的動態圖片或是Flash動畫等等，如果想更改網頁上的內容，就必須手動更改HTML文檔。 (more…)
學程式助教
November 28, 2019
網頁前端資源整理

網頁速度好慢？你真的知道什麼是網頁速度嗎

前言 對於使用者而言，當你在開啟一個網頁時，如果需要等上一段時間，或是每次在開啟某個網頁時就是比其他網頁來得慢，那麼你是不是下次就會不太願意再來造訪這個網頁了呢。那麼為什麼有些網頁的開啟速度總是比較慢，當然有時候可能跟使用者所處環境的因素導致訊號不佳，但是對於網頁經營者而言，網站若要長久經營，便要考慮使用者的感受。 (more…)
學程式助教
November 28, 2019
Javascript網頁前端

Node.js 是什麼?基礎入門介紹！

這篇文章適合誰 這篇文章適合想學習Node.js這個框架對於JavaScript並且對於JavaScript有一些認識的讀者，本篇文章將用hello world這個在學習每個程式語言時都會先接觸到的範例，讓你先初步認識Node.js。 何謂Node.js Node.js顧名思義便是使用JavaScript語言作為基礎的框架，特別的是，相對於jQuery或是YUI等在瀏覽器中運行使用的JavaScript框架，Node.js是作為網站程式的後端框架，就如同PHP或是Java一般開發網站。 換句話說，JavaScript不只可以跑在瀏覽器中，還可以當做網站的伺服器。主要的原因是在於隨著Gmail等AJAX網站以及技術的興起，許多的程式開發者紛紛投入心力鑽研JavaScript，並且有許多開發心得、優化技巧陸續被發掘，加上瀏覽器之間的競爭越來越激烈，JavaScript的執行效能持續性的突破，因此最終便誕生了Node.js。 (more…)
學程式助教
November 28, 2019