【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。 awesome-javascript 是 sorrycc 發起維護的 JS 資源清單，內容包括：包管理器、載入器、測試框架、運行器、QA、MVC框架和庫、範本引擎、數據可視化、時間軸、編輯器等等。
轉載自：微信小程式之家 / 原文位址：javascriptt功能外掛程式大集合，寫前端的親們記得收藏_微信小程式之家

伯樂在線已在 GitHub 上發起「JavaScript 資源大全中文版」的整理。 歡迎擴散、歡迎加入。

jobbole/awesome-javascript-cn

包管理員

管理著 JavaScript 庫，並提供讀取和打包它們的工具。

• npm：npm 是 JAVAScript 的包管理器。 官網
• Bower：一個 web 應用的包管理器。 官網
• component：能構建更好 web 應用的用戶端包管理器。 官網
• spm：全新的靜態包管理器。 官網
• jam：一個專注於瀏覽器端和相容 RequireJS 的包管理器。 官網
• jspm：流暢的瀏覽器包管理器。 官網
• Ender：沒有庫檔的程式庫。 官網
• volo：以專案範本、添加依賴項與自動化生成的方式創建前端專案。 官網
• Duo：一個整合 Component、Browserify 和 Go 官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理

載入器

JavaScript 的模組或載入系統。

• RequireJS：JavaScript 檔案和模組的載入器。 官網
• browserify：在瀏覽器端以 node.js 的方式 require（）。 官網
• SeaJS：用於 Web 的模組載入器。 官網
• HeadJS：HEAD 的唯一腳本。 官網
• curl：小巧、快速且易擴展的模組載入器，它能處理 AMD、CommonJS Modules/1.1、CSS、HTML/text 和歷史腳本。 官網
• lazyload：小巧且無依賴的非同步 JavaScript 和 CSS 載入器。 官網
• script.js：非同步 JavaScript載入器和依賴管理器。 官網
• systemjs：AMD、CJS（commonJS） 和符合 ES6 規範的模組載入器。 官網
• LodJS：基於 AMD 的模組載入器。 官網
• ESL：瀏覽器端的模組載入器，支援延遲定義和 AMD。 官網
• modulejs：輕量的 JavaScript 模組系統。 官網

打包工具

• browserify ：Browserify 讓你能在瀏覽器端使用 require（'modules'） ，打包所有依賴。 官網
• webpack：為瀏覽器打包 CommonJs/AMD 模組。 官網
• gulp：用自動化構建工具增強你的工作流程！ 官網

測試框架

框架

• mocha：適用於 node.js 和瀏覽器、簡易、靈活、有趣的 JavaScript 測試框架。 官網
• jasmine：簡單無 DOM 的 JAvaScript 測試框架。 官網
• qunit：一個易於使用的 JavaScript 單元測試框架。 官網
• jest：簡單的 JAVAScript 單元測試框架。 官網
• prova：基於 Tape 和 Browserify 的測試執行器，它適用於 Node & 瀏覽器。 官網
• DalekJS：自動化且跨瀏覽器的 JavaScript 功能測試框架。 官網

斷言

• chai：適用於 node.js 和瀏覽器的 BDD / TDD 斷言框架，並能搭配其它測試框架使用。 官網
• Sinon.JS：對 JAVAScript 進行 spies、stubs 和 mock 測試。 官網
• expect.js：簡約的、適用於 Node.js 和瀏覽器端的 BDD 式斷言工具。 官網
• should.js：適用於 Node.js 的 BDD 式斷言工具。 官網

覆蓋率

• istanbul：另一個 JS 代碼覆蓋率檢測工具。 官網
• blanket：一個簡單的代碼覆蓋率檢測庫。 它的設計理念是易於安裝和使用，且可用於瀏覽器端和 node.js。 官網
• JSCover：JSCover 是一個檢測 JavaScript 程式代碼覆蓋率的工具。 官網

運行器

• phantomjs：腳本化的 Headless WebKit。 官網
• slimerjs：一個內核為 Gecko 的類似 PhantomJS 工具。 官網
• casperjs：基於 PhantomJS 和 Slimer JS 的導航腳本和測試工具。 官網
• zombie：基於 node.js 、快速、全棧且無圖形界面的瀏覽器的測試工具。 官網
• totoro：一個簡單可靠且能跨瀏覽器運行的測試工具。 官網
• karma：一個優秀的的 JavaScript 測試運行器。 官網
• nightwatch：基於 node.js 和 selenium webdriver 的圖形介面自動化測試框架。 官網
• intern：下一代 JavaScript 代碼測試棧。 官網
• yolpo：在瀏覽器逐句執行的 JavaScript 解釋器。 官網

QA 工具

• JSHint：JSHint 是一個有助於發現 JAvaScript 代碼錯誤和潛在問題的工具。 官網
• jscs：JavaScript 代碼風格檢測工具。 官網
• jsfmt：格式化、搜索和改寫 JAvaScript。 官網
• jsinspect：檢測複製粘貼和結構類似的代碼。 官網
• buddy.js：發現 JavaScript 代碼裡的 魔術數位。 官網
• ESLint：完全外掛程式化的工具，能在 JAVAScript 中識別和記錄模式。 官網
• JSLint ：高標準、嚴格和固執的代碼品質工具，旨在只保持語言的優良部分。 官網

MVC 框架和庫

• angular.js：為網路應用增強 HTML。 官網
• aurelia：一個適用於行動裝置、桌面電腦和 web 的用戶端 JavaScript 框架。 官網
• backbone：給你的 JS 應用加入帶有 Models、Views、Collections 和 Events 的 Backbone。 官網
• batman.js：最適合 Rails 開發者的 JavaScript 框架。 官網
• ember.js：一個旨在創建非凡 web 應用的 JavaScript 框架。 官網
• meteor：一個超簡單的、資料庫無處不在的、只傳輸數據的純 JAvaScript web 框架。 官網
• ractive：新一代 DOM 操作。 官網
• vue：一個用於建構可交互介面的、直覺快速和可組合的MVVM框架。 官網
• knockout：Knockout 用 JavaScript 讓創建回應式的富 UI 更加容易。 官網
• spine：構建 JAvaScript 應用的輕量 MVC 庫。 官網
• espresso.js：一個極小的、用於製作使用者介面的 JavaScript 庫。 官網
• canjs：讓 JS 更好、更快、更簡單。 官網
• react：用於建構用戶介面的庫。 它是聲明式的、高效的和極度靈活的，並使用虛擬 DOM 作為其不同的實現。 官網
• react-native：一個用 React 構建原生應用的框架。 官網
• riot：類 React 庫，但很輕量。 官網
• thorax：加強你的 Backbone。 官網
• chaplin：使用 Backbone.js 庫的 JavaScript 應用架構。 官網
• marionette：一個 Backbone.js 的複合應用程式庫，旨在簡化大型 JavaScript 應用結構。 官網
• ripple：一個小巧的、用於構建回應介面的基礎框架。 官網
• rivets：輕巧卻擁有強大的資料繫結和樣本解決方案
• derby：讓編寫即時和協同應用更簡單的 MVC 框架，能夠在 Node.js 和瀏覽器同時運行。 官網derby-awesome：很棒的 derby 元件集合。 官網
• way.js：簡單、輕量、持久化的雙向數據綁定。 官網
• mithril.js：Mithril 是一個用戶端 MVC 框架（輕巧、強大和快速）官網
• jsblocks：jsblocks 是一個更好的 MV-ish 框架。 官網
• LiquidLava：易懂的、用於構建用戶介面的 MVC 框架。 官網
• Electron：用Html、CSS和JAvaScript構建跨平臺的用戶端應用程式。 官網，GitHub

基於 Node 的 CMS 框架

• KeystoneJS：強大的 CMS 和 web 應用框架。 官網
• Reaction Commerce：擁有即時的架構和設計的回應式（reactive） CMS。 官網
• Ghost：簡單、強大的發佈平臺。 官網
• Apostrophe：提供內容編輯和基本服務的 CMS。 官網
• We.js：適用於即時應用、網站或部落格的框架。 官網
• Hatch.js：擁有社交特性的 CMS 平臺。 官網
• TaracotJS：擁有快速、極簡風格特點且基於Node.js 的 CMS。 官網
• Nodizecms：為 CoffeeScript 愛好者準備的 CMS。 官網
• Cody：擁有所見即所得的編輯器的 CMS。 官網
• PencilBlue：CMS 和部落格平臺。 官網

範本引擎

樣本引擎允許您執行字串插值。

• mustache.js：是 JAVAScript 中帶有 {{mustaches}} 的最簡範本。 官網
• handlebars.js：是 Mustache 範本語言的擴展。 官網
• hogan.js：是 Mustache 範本語言的編譯器。 官網
• doT：最快速簡潔的 JavaScript 範本引擎，適用於 nodejs 和瀏覽器。 官網
• dustjs：適用於瀏覽器和 node.js 的非同步範本。 官網
• eco：嵌入式的 CoffeeScript 範本。 官網
• JavaScript-Templates：輕量（小於 1KB）、快速且無依賴的強大 JAvaScript 模版引擎。 官網
• t.js：小巧的 JAvaScript 範本框架，壓縮後約為 400 位元組。 官網
• Jade：健壯的、優雅且功能豐富的 nodejs 範本引擎。 官網
• EJS：高效的 JAVAScript 範本。 官網
• xtemplate：可擴充的範本引擎，適用於 node 和瀏覽器。 官網
• marko：快速輕量且基於 HTML 的範本引擎，支援非同步、流、自訂標籤和 CommonJS 模編譯後輸出。 適用於 Node.js 官網和瀏覽器。

Flux

Flux是Facebook用來構建用戶端Web應用的應用架構

• Reflux是根據React的flux創建的單向資料流類庫。 官網
• Redux是可預測javascript應用程式狀態的容器。 官網

數據可視化

Web 資料可視化工具

• d3：一個對 HTML 和 SVG 進行可視化的 JavaScript 庫。 官網
• metrics-graphics：更簡潔和擁有更規範的數據圖表佈局優化演算法的庫。 官網
• pykcharts.js：經過精心設計后，去除 d3.js 複雜性的 d3.js 圖表庫。 官網
• three.js：JAVAScript 3D 庫。 官網
• Chart.js：簡單的、基於 canvas 標籤的 HTML5 圖表庫。 官網
• paper.js：是向量圖形腳本中的瑞士軍刀 —— 使用 HTML5 Canvas 將 Scriptographer 移植到 JAvaScript 官網和瀏覽器。
• fabric.js：JavaScript Canvas 庫，SVG 與 Canvas 可以相互解析。 官網
• peity：進度條、線狀和餅狀圖。 官網
• raphael：JavaScript 向量庫。 官網
• echarts：商業產品圖表。 官網
• vis：動態的、基於瀏覽器的可視化庫。 官網
• two.js：一個渲染器無關的適用於 web 的二維繪圖 api 。 官網
• g.raphael：基於 Raphaël 圖表庫。 官網
• sigma.js：一個致力於圖形繪畫的 JavaScript 庫。 官網
• arbor：一個使用 web workers 和 jQuery 的圖像可視化庫。 官網
• cubism：可視化時間序列的 D3 外掛程式。 官網
• dc.js：與 crossfilter 無縫合作的多維圖繪製庫，使用 d3.js 渲染。 官網
• vega：一套可視化語法。 官網
• processing.js：Processing.js 基於 Web 標準使數據可視化，而無需任何外掛程式。 官網
• envisionjs：動態的 HTML5 可視化。 官網
• rickshaw：用於建置互動式即時圖表的 JavaScript 工具組。 官網
• flot：吸引人的、基於 jQuery 的 JavaScript 圖表庫。 官網
• morris.js：漂亮的時間序列線框圖。 官網
• nvd3：一個為 D3.js 構建可複用圖表和圖表元件的庫。 官網
• svg.js：一個輕量的、用於操作和添加 SVG 動畫的庫。 官網
• heatmap.js：基於 HTML5 canvas 的熱力圖 JavaScript 庫。 官網
• jquery.sparkline：一個直接在瀏覽器端生成小型走勢圖的 jQuery 外掛程式。 官網
• xCharts：一個基於 D3、用於構建自定義圖表和圖形的庫。 官網
• trianglify：基於 d3.js 的低多邊形（low poly）風格背景圖片生成器。 官網
• d3-cloud：創建詞雲（word cloud）效果的 JAVAScript 庫。 官網
• d4：一個基於 D3 、友好、可複用的 DSL 圖表庫 。 官網
• dimple.js：基於 d3 的簡易商業分析圖表庫。 官網
• chartist-js：簡單的回應式圖表。 官網
• epoch：一個通用的即時圖表庫。 官網
• c3：基於 D3 的可複用圖表庫。 官網
• BabylonJS：一個運用 HTML5 和 WebGL 構建 3D 遊戲的框架。 官網
• jquery.raty.js：一個星級評分外掛程式。 官網

也有一些很棒的收費庫，如 amchart、plotly 和 highchart。

時間軸

• TimelineJS： 一個用 JAvaScript 編寫的可敘事時間軸庫。 官網
• timesheet.js：用於建譯簡單的 HTML5 & CSS3 時程表的 JavaScript 庫。 官網

編輯器

• ace：Ace（http://Ajax.org Cloud9 Editor）。 官網
• CodeMirror：瀏覽器端的代碼編輯器。 官網
• esprima：用於綜合分析的 ECMAScript 解析器。 官網
• quill：一個帶有 API 的跨瀏覽器富文字編輯器。 （官網）
• medium-editor：http://Medium.com 所見即所得編輯器的克隆版。 官網
• pen：享受在線編輯（支援 markdown）。 官網
• jquery-notebook：一個易用的、簡潔優雅的文本編輯器。 靈感來源於 Medium 的魅力。 官網
• bootstrap-wysiwyg：小巧的、相容 bootstrap 的所見即所得的富文本編輯器。 官網
• ckeditor-releases：適用於每個人的 web 文本編輯器。 官網
• editor：一個 markdown 編輯器，但仍在開發中。 官網
• EpicEditor：一個可嵌入的 JavaScript Markdown 官網的編輯器，擁有全屏編輯、即時預覽、自動保存草稿和離線支援等功能。
• jsoneditor：查看、編輯和格式化 JSON 的 web 工具。 官網
• vim.js： 擁有持久化 ~/.vimrc 的 Vim 編輯器的 JavaScript 移植版本。 官網
• Squire：HTML5 富文字編輯器。 官網
• TinyMCE：JavaScript 富文字編輯器。 官網
• trix：由 Basecamp 製作，適用於每天寫作的富文本編輯器。 官網

檔

處理檔的庫。

• Papa Parse：一款強大的 CSV 函式庫，支援解析 CSV 檔/字串，也能匯出 CSV。 官網
• jBinary：對用聲明式語法描述檔類型和數據結構的二進位檔案，進行高級 I/O（載入、解析、操作、序列化、存儲）操作。 官網

函數式程式設計

函數式程式設計庫擴展了 JavaScript 的能力。

• underscore：JavaScript 的實用工具。 官網
• lodash：提供一致性、可定製、高性能和額外功能的實用庫。 官網
• Sugar：一個擴展了原生物件功能的 JAVAScript 庫。 官網
• lazy.js：類似 Underscore，但性能更優越官網
• ramda：一個針對 JavaScript 程式師的實用函數庫。 官網
• mout：模組化的 JavaScript 工具庫。 官網
• mesh：流數據同步工具。 官網

回應式程式設計

回應式程式庫擴展了 JAVAScript 的能力。

• RxJs：對 JAVAScript 進行回應式擴展。 官網
• Bacon：JAVAScript 的 FPR（函數式回應式程式設計）庫。 官網
• Kefir：受 Bacon.js 和 RxJS 啟發的 FRP 庫，專注於高性能和低記憶體消耗。 官網
• Highland：對 JAVAScript 實用工具的重新思考，Highland 能輕易地管理同步和異步訊息，而且僅使用標準 JAVAScript 和類 Node 流。 官網
• Most.js：高性能 FRP 庫。 官網

數據結構

數據結構庫用於構建一個更複雜的應用。

• immutable-js：不可變的數據集合，包括 Sequence、Range、Repeat、Map、OrderedMap、Set 和 sparse Vector。 官網
• mori：使用 ClojureScript 持久化資料結構和支援原生 JavaScript API 的庫。 官網
• buckets：完整的、經過充分測試和記錄數據結構的 JavaScript 庫。 官網
• hashmap：簡單的 hashmap 實現，支援任何類型的鍵值。 官網

日期

日期庫。

• moment：解析、驗證、操作和顯示日期。 官網
• moment-timezone：基於 moment.js 的時區庫。 官網
• jquery-timeago：一款支援自動更新模糊時間戳的 jQuery 外掛程式（如："4 分鐘之前"）。 官網
• timezone-js：讓 JAVAScript Date 對象擁有時區功能。 使用 Olson zoneinfo 檔記錄著時區數據。 官網
• date：擁有人性化的 Date（） 方法。 官網
• ms.js：小巧的毫秒轉換工具。 官網
• timeago.js：一個非常輕量級（~1.7 Kb）的用於將時間轉化成xxx時間前格式，例如：8分鐘前。 官網

字串

字串庫。

• selecting：一個允許你獲取使用者選定文本的庫。 官網
• underscore.string：擴展了 Underscore.js 的字串操作。 官網
• string.js：額外的 JavaScript 字串方法。 官網
• he：健壯的 HTML 實體編碼/解碼器。 官網
• multiline：多行字串。 官網
• query-string：解析和字串化 URL 查詢字串。 官網
• URI.js：URL 操作庫。 官網
• jsurl：輕量的 URL 操作庫。 官網
• sprintf.js：實現字串格式化。 官網
• url-pattern：讓 url 和其它字串進行比正則運算式匹配更簡單。 字串和數據可相互轉化。 官網

數位

• Numeral-js：對數位進行格式化和操作的庫。 官網
• odometer：流暢的數位過渡效果。 官網
• accounting.js：對數位、金錢、貨幣進行格式化的輕量庫——完全當地語系化和無依賴。 官網
• money.js：一個小巧（1kb）的貨幣轉換庫，適用於 web 和 nodeJS。 官網
• Fraction.js：一個有理數庫。 官網
• Complex.js： 一個複數庫。 官網
• Polynomial.js：一個多項式庫。 官網

存儲

• store.js：為所有瀏覽器封裝了 LocalStorage，而沒有使用 cookies 和 flash。 隱秘地使用 localStorage、globalStorage 和用戶數據。 官網
• localForage：改善後的離線存儲。 其封裝了 IndexedDB、WebSQL 和 localStorage，擁有操作簡單和強大的 API。 官網
• jStorage：jStorage 是一個簡單的鍵值對資料庫，用於在瀏覽器端存儲數據。 官網
• cross-storage：獲得許可權後，能跨功能變數名稱本地存儲。 官網
• basket.js：用 localStorage 載入和緩存腳本的資源載入器。 官網
• bag.js：可以緩存腳本和載入資源，與 basket.js 相似，但增加了鍵值對介面和對 localStorage / websql / 官網undexedDB 的支援。
• basil.js：智慧的 JAVAScript 數據持久層庫。 官網
• jquery-cookie：輕巧簡單的、用於讀取、編輯和刪除 cookie 的 jQuery 外掛程式。 官網
• Cookies：用戶端 Cookie 操作庫。 官網
• DB.js：基於 Promise 的、封裝了 IndexedDB 的庫。 官網
• lawnchair.js：簡單的用戶端 JSON 存儲。 官網

顏色

• randomColor：JavaScript 顏色產生器。 官網
• chroma.js：擁有各種各樣顏色操作的 JavaScript 庫。 官網
• color：JavaScript 顏色轉換和操作庫。 官網
• colors：更智慧的預設 web 顏色。 官網
• PleaseJS：隨機建立出賞心悅目的顏色和色彩配置。 官網
• TinyColor：快速、輕巧的顏色操作和轉換庫。 官網
• Vibrant.js：從圖像提取主要顏色。 官網

國際化和當地語系化（I18n And L10n）

當地語系化和國際化 JAVAScript 庫

• i18next：JAVAScript 最簡單的國際化（i18n）方法。 官網
• polyglot：小巧的國際化助手庫。 官網
• babelfish：i18n 提供友好易懂的 API ，並且內置多種支援。 官網

類

• ClassManager：世界上最快、最方便的類系統之一。 官網
• klass：用於創建極富表現力的類工具庫。 官網
• augment：世界上最小且最快的一流 JavaScript 繼承模式。 官網

控制流

• async：適用於 node 和瀏覽器的非同步工具庫。 官網
• q：實現非同步的 promise JavaScript 庫。 官網
• step：讓邏輯順序合理化的非同步控制流庫。 官網
• contra：利用函數風格實現的非同步流控制。 官網
• Bluebird：專注於革新功能和性能的，功能齊全的 promoise 庫。 官網
• when：快速可靠的、Promises/A+ 規範的 when（） 實現，而且擁有異步其它的優秀特性。 官網
• ObjectEventTarget：提供增加了事件監聽的原型（與 DOMElement 的 EventTarget 在瀏覽器行為一致）。 官網

路由

• director：一個小巧的、與 URL 同構的路由器。 官網
• page.js：受 Express router 啟發的小型用戶端路由器（約為1200位元組）。 官網
• pathjs：簡單、輕量的 web 路由器。 官網
• crossroads：JAVAScript 路由。 官網
• davis.js：使用 pushState、RESTful 風格和可降級的 JavaScript 路由器。 官網
• angular-ui-router：基於AngularJS的可嵌套路由。 官網

安全性

• DOMPurify：針對 HTML、MathML 和 SVG 的僅支援 DOM、快速、高容錯的 XSS 過濾器。 官網
• js-xss：透過白名單配置，即可過濾不信任的 HTML（防止 XSS 攻擊）。 官網

日誌

• log：帶有樣式的 Console.log。 官網
• Conzole：對 JAvaScript 原生 console 物件方法和功能進行封裝的 debug 面板，使其顯示在頁面內。 官網
• console.log-wrapper：將日誌清晰地記錄到 console，且相容所有瀏覽器。 官網
• loglevel：最輕量的 JavaScript 日誌記錄工具庫，向封裝後可用的 console.log 方法增加可靠的日誌等級。 官網
• minilog：輕量的、用流式 API 顯示的、可用於用戶端和伺服器端的日誌記錄庫。 官網

正則表達式

• RegEx101：線上的 JavaScript 正則運算式測試器和調試器。 同時支援 Python、PHP 和 PCRE。 官網
• RegExr：用於建立、測試和學習正則表達式的 HTML/JS 工具。 官網
• RegExpBuilder：使用鏈式方法創建正則運算式。 官網

媒體

• Ion.Sound：可用於任何網頁上簡單音訊。 官網

語音命令

• annyang：向網站添加語音命令的語音辨識庫。 官網
• voix.js：向網站、app 或遊戲添加語音命令的 JavaScript 庫。 官網

API

• bottleneck：強大的頻率限制器，使調節流量變得更容易。 官網
• oauth-signature-js：適用於 node 和 瀏覽器的 OAuth 1.0a 簽名生成器。 官網
• amygdala：為 Web 應用提供 RESTful HTTP 客戶端解決方案。 官網
• jquery.rest：一個讓 RESTful API 更易使用的 jQuery 外掛程式。 官網

視覺檢測

• tracking.js：在 web 上實現計算視覺的一種現代方法。 官網
• ocrad.js：透過 Emscripten 用 JavaScript 實現 OCR（光學字元識別）。 官網

瀏覽器檢測

• bowser：一個瀏覽器檢測器。 官網

UI

代碼高亮

• Highlight.js：JAVAScript 語法高亮器。 官網
• PrismJS：輕量、健壯和優雅的語法高亮器。 官網

載入狀態

指示載入狀態的庫。

• Mprogress.js：創建谷歌 Material 設計風格的線性進度條。 官網
• NProgress：在 Ajax'y 應用顯示細長型進度條官網
• Spin.js：一個旋轉的進度指示器。 官網
• progress.js：為頁面任何對象創建和管理進度條。 官網
• progressbar.js：用 SVG path 動畫製作的、漂亮和回應式的進度條。 官網
• pace：自動向你的網站添加一個進度條。 官網
• topbar：小巧漂亮的、與網站同寬的進度指示器。 官網
• nanobar：非常輕量的進度條。 不依賴 jQuery。 官網
• PageLoadingEffects：使用 SVG 動畫展現新內容的現代方式。 官網
• SpinKit：運用 CSS 動畫的載入指示器集合。 官網
• Ladda：內置在按鈕的載入指示器。 官網
• css-loaders：運用 CSS 動畫的旋轉載入指示器的集合。 官網

除了上述這些庫，還有收藏在 Codepen 的，另外還有 Ajaxload，Preloaders 和 CSSLoad 這些生成器。

驗證

• Parsley.js：不用寫一行 JavaScript 代碼即可在前端驗證表單。 官網
• jquery-validation：jQuery 驗證外掛程式。 官網
• validator.js：字串驗證和過濾（在使用使用者輸入之前清理使用者輸入中的有害或危險字元的操作）。 官網
• validate.js：受 CodeIgniter 啟發的輕量表單驗證 JavaScript 庫。 官網
• validatr：跨瀏覽器的 HTML5 表單驗證庫。 官網
• BootstrapValidator：是驗證表單域中最好的 jQuery 外掛程式。 要與 Bootstrap 3 一起使用。 官網
• is.js：檢查類型、正則運算式、是否存在、時間等。 官網
• FieldVal：多用途驗證庫。 同時支援同步和異步驗證。 官網

鍵盤封裝器

• mousetrap：處理鍵盤快速鍵的 JavaScript 庫。 官網
• keymaster：定義和調度鍵盤快捷鍵的小型庫。 官網
• Keypress：鍵入捕捉工具庫，任何鍵都可以成為一個修飾健。 官網
• KeyboardJS：一個用於綁定鍵盤組合的 JavaScript 庫，讓你脫離快捷鍵和快捷鍵組合衝突的痛苦。 官網
• jquery.hotkeys：jQuery Hotkeys 能讓你在代碼任何的地方監聽鍵盤事件，並幾乎支援所有按鍵組合。 官網
• jwerty：令人驚歎的鍵盤事件處理庫。 官網

瀏覽和引導

• intro.js：這是一個介紹新功能的很好方式，能一步步地引導用戶流覽你的網站和專案。 官網
• shepherd：通過引導讓用戶流覽你的應用程式。 官網
• bootstrap-tour：應用 Twitter Bootstrap 彈出框對產品進行快速簡單的引導。 官網
• tourist：簡單、靈活的應用引導介紹庫。 官網
• chardin.js：簡單的應用遮罩層介紹。 官網
• pageguide：使用 jQuery 和 CSS3 的 web 頁面元素互動引導庫。 官網
• hopscotch：讓開發者更容易向其頁面產品添加引導的框架。 官網
• joyride：基於 jQuery 的功能引導外掛程式。 官網
• focusable：通過向頁面其餘部分添加遮罩層，使焦點聚集在特定 DOM 元素。 官網

通知

• messenger：為你的應用添加 Growl-style 彈框和訊息（Crowl 是 Mac OS X 下的一個通知系統）。 官網
• noty：jQuery 通知外掛程式。 官網
• pnotify：適用於 Bootstrap、jQuery UI 和 Web Notifications Draft 的 JavaScript 通知庫。 官網
• toastr：用來顯示簡單的，會自動到期的訊息視窗）簡單的彈出框通知（toast notifications官網
• humane-js：一個簡單、時髦的瀏覽器通知系統。 官網
• smoke.js：與框架無關的、能夠自定義樣式的 JavaScript 彈框系統。 官網

幻燈片

• Swiper：使用硬體加速過渡的行動裝置觸控滑塊框架。 官網
• slick：你所需要的最後一個輪播外掛程式。 官網
• slidesJs：回應式的 jQuery（1.7.1+）幻燈片外掛程式，具有觸摸、 CSS3 過渡等特性。 官網
• FlexSlider：一款令人驚歎的、全回應式的幻燈片 jQuery 外掛程式。 官網
• unslider：最簡單的幻燈片 jQuery 外掛程式。 官網
• colorbox：輕量、可自定義的燈箱 jQuery 外掛程式。 官網
• fancyBox：提供了良好優雅的方式，為頁面上的圖片、html 內容和多媒體添加縮放功能的工具。 官網
• sly：基於項導航的、支援單向滾動的 JavaScript 庫。 官網
• vegas：向頁面添加漂亮的全屏背景的 jQuery 外掛程式，甚至允許幻燈片。 官網
• Sequence：用於建立回應式的幻燈片、演示、旗幟廣告和以步驟為基礎的應用的 CSS 動畫框架。 官網
• baguetteBox.js：易於使用的、用純 JAvaScript 實現的遮罩層腳本。 官網
• reveal.js：用 HTML 創建漂亮演示控制項的框架。 官網
• PhotoSwipe：適用於行動裝置和桌面電腦的、模組化和不無依賴框架的 JavaScript 畫廊控制項。 官網
• jcSlider：用 CSS 動畫實現的回應式投影片 jQuery 外掛程式。 官網
• basic-jquery-slider：易於使用、指定主題和定製化。 官網
• unslider： 這是最簡單的幻燈片 jQuery 外掛程式。 官網
• viewerjs：原生js實現的圖片查看器。 官網
• jQuery.adaptive-slider：帶有自適應顏色標題和導航的幻燈片 jQuery 外掛程式。 官網
• slidr：可添加一些幻燈片效果。 官網
• Flickity：可觸摸的、回應式的和可輕彈的畫廊。 官網

滑塊控件

• Ion.RangeSlider：強大的、易於自定義的範圍滑塊選擇庫，支援很多配置和皮膚。 官網
• jQRangeSlider：支援日期的滑塊選擇庫。 官網
• noUiSlider：輕量無冗餘的、高度定製化的滑塊選擇庫。 官網
• rangeslider.js：HTML5 input 區域滑塊元素。 官網

表單元件

輸入

• typeahead.js：快速的、功能齊全的自動補全庫。 官網
• tag-it：處理多標籤欄位以及標籤建議/自動完成的 jQuery UI 外掛程式。 官網
• At.js：向你的應用添加類似 Github 的自動完成提示功能。 官網
• Placeholders.js：JAVAScript 補全 HTML5 占位符的屬性。 官網
• fancyInput：利用 CSS3 效果讓輸入更有趣。 官網
• jQuery-Tags-Input：利用這個 jQuery 外掛程式，可奇妙地將一個簡單的文本輸入轉換成一個酷酷的標籤清單。 官網
• vanilla-masker：一個純 JAvaScript 實現的輸入控制庫。 官網
• Ion.CheckRadio：一個為複選框和單選按鈕添加樣式的 jQuery 庫，支持多種皮膚。 官網

日曆

• pickadate.js：對行動裝置友好的、回應式的和輕量的 jQuery 日期 & 時間輸入選擇器。 官網
• bootstrap-datepicker：基於 bootstrap 的日曆選擇器。 官網
• Pikaday：一個嶄新的 JavaScript 日期選擇器 —— 輕量、無依賴和模組化的 CSS。 官網
• fullcalendar：全尺寸、支援拖放事件的行事曆（jQuery 外掛程式）。 官網
• rome：可定製的日期（和時間）選擇器。 無依賴，可選 UI。 官網
• datedropper： datedropper 是一個 jQuery 外掛程式，它提供了快速簡易的方式去管理日期輸入框。 官網

選擇

• selectize.js：Selectize 是文字框和選擇框的混合體。 它基於jQuery，擁有自動完成和鍵盤感應下拉清單功能，可用於標籤、聯繫人清單等。 官網
• select2：它基於 jQuery，是選擇框（select box）的替代品。 支援搜索、遠程數據集和無限滾動。 官網
• chosen：可以讓冗長不便的選擇框更友好的庫。 官網

文件上傳

• jQuery-File-Upload：File Upload 是一個支援多檔案選擇、檔拖放、進度條、驗證和圖片、音訊、視頻預覽的 官網jQuery 外掛程式。
• dropzone：Dropzone 是一個易於使用且支援多檔拖放的庫。 其支援圖片預覽並且擁有很好的進度條效果。 官網
• flow.js：一個透過 HTML5 的 File API ，提供多個同時連結的、穩定的、容錯的、可恢復的/可重新開始的檔上傳庫。 官網
• fine-uploader：一個帶有進度條、拖放功能和支援直接上傳到 S3 （Amazon Simple Storage Service，亞馬遜簡易存儲服務）的多檔上傳外掛程式。 官網
• FileAPI：JavaScript 檔案工具集合。 支援多檔上傳、拖放和檔分塊上傳。 對於圖像，支援裁剪、調整大小和根據 EXIF 自動調整方向。 官網
• plupload：處理檔案上傳的 JavaScript 官網API，其支援多檔案選擇、檔案類型過濾、分塊請求、用戶端圖片縮放和根據不同的運行環境選擇 HTML5、Silverlight 和 Flash。

其它

• form：jQuery 表單外掛程式。 官網
• Garlic.js：自動在本地保存表單文本和選擇框的值，直到表單被提交。 官網
• Countable：對某個 HTML 元素包含文字的段落數、單詞數和字元數進行統計的 JavaScript 函數。 官網
• card：只需一行代碼，讓信用卡表單變得更友好。 官網
• stretchy：自適應大小的 form 元素，表單本應該是這樣的。 官網
• list.js：向表格、清單等 HTML 元素添加搜索、排序、過濾和自適應功能的庫。 在已有 HTML 上增加可視化。 List.js的官網

提示

• tipsy：基於 jQuery 的 Fackbook 風格的提示工具（tooltip）。 官網
• opentip：開源且基於 prototype 框架的 JavaScript 工具提示庫。 官網
• qTip2：非常強大的工具提示庫。 官網
• tooltipster：一個工具提示 jQuery 外掛程式。 官網
• simptip：用 Sass 製作的、簡單的工具提示。 官網
• jquery-popup-overlay：是一個回應式的和可訪問性強的模態框（modal）和工具提示框 jQuery 外掛程式。 官網

模態框和彈出框

• Magnific-Popup：專注於性能、輕量、回應式的燈箱（lightbox）腳本。 官網
• jquery-popbox：jQuery 提示框外掛程式。 官網
• jquery.avgrund.js：一種新的定於彈出的模態框 jQuery 外掛程式。 官網
• vex：新的、擁有高度可配置和易於改變樣式功能的對話方塊庫。 官網
• bootstrap-modal：對 Bootstrap 預設的模態框類進行擴展。 其支援回應式、可堆疊和 ajax 等。 官網
• css-modal：純 CSS 打造的模態框。 官網
• jquery-popup-overlay：是一個回應式的和可訪問性強的模態框和工具提示框（tooltips）jQuery 外掛程式。 官網
• layer：國內最多人使用的web彈層元件。 官網

滾動

• scrollMonitor：滾動發生時，可以監聽元素的、簡單、快速的 API。 官網
• headroom：除非你需要顯示頁面頭部（header），否則將隱藏它，以騰出頁面頭部空間。 官網
• onepage-scroll：創建一個類似 Apple 的單頁面滾動網站（iPhone 5S 網站）。 官網
• iscroll：高性能、輕量、無依賴、相容多平臺的 JavaScript 滾動元件。 官網
• skrollr：獨立（不依賴 jQuery） 的視差滾動庫，適用於行動裝置（Android + iOS）和桌面電腦。 官網
• parallax：面向智慧設備的視差引擎。 官網
• stellar.js：讓視差滾動變簡單。 官網
• plax：基於 jQuery 的視差庫。 官網
• jparallax：創建可交互視差效果的 jQuery 外掛程式。 官網
• fullPage：簡單和易於使用的、用於創建全屏滾動網站的外掛程式（也被稱為單頁面網站）。 官網
• ScrollMenu：讓老舊無聊的滾動條煥然一新。 官網

功能表

• jQuery-menu-aim：當用戶游標放在特定下拉菜單項時觸發事件。 可製作回應式的、大數據量的下拉菜單，如 Amazon 的。 官網
• jQuery contextMenu：右鍵功能表（contextMenu） 管理工具。 官網
• Slideout：為行動裝置的 web 應用製作出回應式的、可觸摸滑出的導航功能表。 官網
• Slide and swipe：一個基於 touchSwipe 庫的滑出功能表外掛程式。 官網

表格/柵格

• jTable：基於 CRUD 表建立 AJAX 的 jQuery 外掛程式。 官網
• DataTables：這是一個非常靈活的工具，在漸進增強的基礎上，將高級的交互效果加到 HTML 表格。 （jQuery 外掛程式）官網
• floatThead：（jQuery 外掛程式）鎖定表格頭部，只允許表格內容滾動。 適用於任何表格，而且不需要額外的 html 或 css。 官網
• Masonry：瀑布流式的網格佈局庫。 官網
• Packery：使用裝箱演算法（bin-packing）的網格佈局庫。 支援拖拽佈局。 官網
• Isotope：可過濾和可排序的網格佈局的庫，它能實現 Masonry、Packery 等佈局。 官網

框架

• Semantic UI：擁有大量主題和元素的 UI 套件。 官網

手勢

• hammer.js：擁有多種觸摸手勢的 JavaScript 庫。 官網
• touchemulator：在桌面電腦模仿觸摸輸入。 官網
• Dragula：超級易於使用的拖拽庫。 官網

觸摸

• fastclick.js：去除觸屏使用者300ms點擊延誤。 官網
• dropload.js：移動端下拉刷新，上拉載入更多。 官網
• touchslide.js：觸屏滑動特效。 官網

地圖

• Leaflet：對行動裝置友好的、可互動的地圖 JavaScript 庫。 官網
• Cesium：開源的、基於 WebGL 實現的虛擬地球儀和地圖引擎。 官網
• gmaps：以最簡單的方式使用 Google 地圖。 官網
• polymaps：免費的、相容現代 web 瀏覽器的、用於製作動態可互動的地圖 JavaScript 庫。 官網
• kartograph.js：開源的 Kartograph SVG 地圖渲染器。 官網
• mapbox.js：Mapbox 的 API，Leaflet 的外掛程式。 官網
• jqvmap：向量地圖 jQuery 外掛程式。 官網
• OpenLayers3：高性能的、功能豐富的庫，能滿足你對地圖所有需求。 官網

視頻/音訊

• prettyembed.js：更完美地嵌入 YouTube —— 擁有很好的選項，如高解析度的預覽圖、嵌入選項的高級定制和可選的 官網FitVids 支援。
• html5media：能在所有主流瀏覽器播放多媒體標籤中定義的多媒體檔。 官網
• Play-em JS：Play'em 是一個 JavaScript 元件，它能管理音樂/視頻播放順序，通過在一個 DIV 元素裡嵌入幾個播放機（Youtube、Soundcloud 和 Vimeo）來控制一系列歌曲的播放。 官網
• polyplayer：將 YouTube、Soundcloud 和 Vimeo 播放機的 API 統一成一套。 官網
• flowplayer： HTML5 視訊播放器 官網，Github
• mediaelement：讓 HTML5、 Flash 播放器和模仿 HTML5 媒介元素 API 的 Silverlight shim，在所有瀏覽器擁有一致的 UI。 官網，Github
• SoundJS：讓音訊在 web 上運行更簡單的庫。 它為不同瀏覽器提供了一致的 API。 官網

動畫

• velocity：加速 JAVAScript 動畫。 官網
• jquery.transit：擁有超級流暢的 CSS3 變換和過渡的 jQuery 外掛程式。 官網
• impess.js：在 HTML 文件裡，運用 CSS3 轉換和過渡製作類似 Prezi 的展現效果。 官網
• bounce.js：可以立刻創建有趣的 CSS3 動畫。 官網
• GreenSock-JS：適用於所有主流瀏覽器的高性能 HTML5 動畫。 官網
• TransitionEnd：TransitionEnd 是一個運用 transitonend 事件的、跨瀏覽器的庫。 官網
• Dynamics.js：用於創建基於物理知識的 CSS 動畫庫。 官網

圖片處理

• lena.js：擁有濾鏡和實用功能的圖像處理庫。 官網
• pica：高品質地調整圖片大小（擁有快速的、純 JS 實現的 Lanczos 濾鏡演算法）。 官網
• cropper：一個簡單的圖像裁剪 jQuery 外掛程式。 官網
• AlloyImage：騰訊前端開源的基於HTML5的專業級圖像處理開源引擎。 官網

ECMAScript 6

• es6features：ECMAScript 6 特性概述。 官網
• es6-features：ECMAScript 6： 特性概述和比較。 官網
• ECMAScript 6 compatibility table ：Compatibility tables 展示了各種平臺上所有 ECMAScript 6 特性的支援程度。 官網
• Babel （Formerly 6to5）：將 ES6+ 代碼轉換成純 ES5。 官網
• Traceur compiler：ES6 特性轉 ES5。 包括 classes、generators、promises、destructuring 官網patterns、default parameters 等。

軟體開發工具套件（SDK）

• javascript-sdk-design：從工作和個人經驗中提煉出來的 JavaScript SDK 設計指導。 官網大雜燴
• echo：利用 data-* 屬性延遲載入圖片。 官網
• picturefill：回應式圖片顯示外掛程式，使瀏覽器支援 srcset、size 屬性。 官網
• platform.js：一個平台檢測庫，幾乎適用於所有 JAVAScript 平臺。 官網
• json3：一個現代 JSON 實現庫，幾乎相容所有 JavaScript 平臺。 官網
• Logical Or Not：一個關於 JAvaScript 特性的遊戲。 官網
• BitSet.js：實現位向量的 JAVAScript 庫。 官網
• Edge.js：執行在一個行程中執行. NET和Node.js代碼。 官網，GitHub

精品閱讀

• braziljs/js-the-right-way：官網
• JSbooks：官網
• Superhero.js：關於創建、測試和維護一個大型 JavaScript 代碼庫的資源集。 官網
• 《前端開發者都應知道的 jQuery 小技巧》
• 《常用的 Javascript 設計模式》
• 《10 個 jQuery 圖表外掛程式推薦》
• 《理解 JavaScript 原型》
• 《只有20行Javascript代碼！ 手把手教你寫一個頁面範本引擎》
• 《編寫快速、高效的 JAvaScript 代碼》
• 《45個實用的JAVAScript技巧、竅門和最佳實踐》
• 《為現代JAVAScript開發做好準備》
• 《給JAVAScript初學者的24條最佳實踐》

Headless Testing是什麼

Headless是指沒有介面的瀏覽器運行環境。 那麼Headless Testing也就不難理解，是基於無介面化提供的命令列工具和api進行的前端測試手段。

為什麼要使用Headless Testing

Headless Testing有下面的優勢：

• 比真實瀏覽器更快
• 抓取數據更加方便
• 便於構建自動化測試腳本
• 輕鬆類比多個瀏覽器

●比真實瀏覽器更快

由於無頭測試不需要啟動瀏覽器的GUI介面，所以你可以繞過真正流覽的載入CSS、JAVAScript和打開、繪製HTML的所有環節。

●擷取資料更加方便

如果沒有無頭測試工具的話，在抓取頁面數據時，你需要打開一個瀏覽器，輸入頁面位址，找到指定的頁面數據。 而有了無頭測試工具之後，這一切操作都可以自動化完成。

●便於建構自動化測試文稿

你可以利用無頭測試工具和js的測試框架（如mocha、jasmin、karma等）輕鬆地進行前端頁面的單元測試。 因為你可以利用無頭測試工具提供的命令列+api來自動化地替代大量的簡單重複操作，如輸入頁面位址、刷新頁面、表單提交、確認顯示數據是否正確等等。

●輕鬆類比多個瀏覽器

在非自動化的測試流程中，測試人員為了能在不同瀏覽器（不同內核、不同尺寸）上確認頁面的表現與運行是否正常，不得不來回切換瀏覽器，移動端測試還不得不切換機型。 如果有了無頭測試則可以輕鬆通過api和配置項來控制當前瀏覽器的屬性。 此外，你也可以通過腳本進行併發測試。

無頭測試工具

無頭測試工具有很多，下面列出一些比較流行的：

1. PhantomJS + CasperJS
2. Nightmare + mocha
3. Headless Chrome
4. Puppeteer

PhantomJS + CasperJS

PhantomJS是一個無頭的WebKit框架，它對外提供了JAVAScript API來與WebKit框架進行交互。 他可以幫助開發者實現頁面測試，頁面截屏，頁面自動化交互，網路監控等功能。

CasperJS專為PhantomJS而生，它提供了一個基本的測試套件，它允許你運行完整的功能測試，也允許你從Web頁面中獲取數據。

安裝phantomjs方法

# To install PhantomJS, run the command below
brew install phantomjs

安裝casperjs方法

npm i casperjs

下面是一個使用PhantomJS+CasperJS來進行無頭測試的例子。

首先你需要創建一個caspergoogle.js檔，它的代碼如下：

varlinks=[];varcasper=require('casper').create();functiongetLinks(){varlinks=document.querySelectorAll('h3 a');returnArray.prototype.map.call(links,function(e){returne.textContent;});}casper.start('http://google.com/',function(){等待頁面載入完成this.waitForSelector('form[action="/search"]');});casper.then(function(){在Google的搜索框中搜索casperjsthis.fill('form[action="/search"]',{q:'casperjs'},true);});casper.then(function(){將casper的搜尋結果聚合起來links=this.evaluate(getLinks);現在再搜索phantomjsthis.fill('form[action="/search"]',{q:'phantomjs'},true);});casper.then(function(){再將phantomjs的搜尋結果也聚合起來links=links.concat(this.evaluate(getLinks));});casper.run(function(){將最終結果以好看的格式輸出到主控台this.echo(links.length+' links found:');this.echo(' - '+links.join('n - ')).exit();});

上面的例子里，我們用CasperJS抓取了http://Google.com的數據，然後我們利用CasperJS向搜索框中類比輸入了一段字串，然後把運行結果輸出到了終端。

為了運行上面的例子，你需要執行下面這個命令。

casperjs caspergoogle.js

Nightmare+Mocha

Nightmare是Segment的一套高級瀏覽器自動化庫。

Nightmare對外提供了一些類比用戶的簡單操作，如goto、type或click等。 他提供的API全部都是同步的，不是深度嵌套在回調中的。 它最初設計用於在沒有對外提供api的網站上自動執行任務，但它最常用的點是UI測試和爬去數據。

Mocha是一個運行在Node和瀏覽器上的測試框架。 他可以輔助Nightmare更好的完成自動化測試。

將Nightmare和Mocha安裝成開發依賴的方法：

npm install --save-dev mocha
npm install --save-dev nightmare

下面是一個基於Nightmare和Mocha的例子：

varNightmare=require('nightmare');varexpect=require('chai').expect;// jshint ignore:line 
describe('test duckduckgo search results',function(){it('should find the nightmare github link first',function(done){varnightmare=Nightmare()nightmare.goto('https://duckduckgo.com').type('#search_form_input_homepage','github nightmare').click('#search_button_homepage').wait('#zero_click_wrapper .c-info__title a').evaluate(function(){returndocument.querySelector('#zero_click_wrapper .c-info__title a').href}).end().then(function(link){expect(link).to.equal('https://github.com/segmentio/nightmare');done();})});});

這裡我還使用到了斷言庫——chai。 在上面的例子中，我們先跳轉到"duckduckgo.com"網站，然後在指定的元素內輸入"github nightmare"，接著通過選擇器點擊指定的按鈕，再等到指定的元素出現后，最終確認元素中的連結是否與期待一致。

Headless Chrome

Headless Chrome是在無頭環境下運行Chrome瀏覽器的一種方式，最終達到幫助開發者完成自動化測試的目的。 目前Chrome 59以上已經支持無頭運行。

Headless Chrome帶來了由Chromium和Blink渲染引擎提供的所有現代web平臺功能。 這是一種不需要在螢幕上打開視窗的全新頁面交互方式。

要想體驗Headless Chrome很簡單，你只需要在控制台輸入下面的命令。 運行該命令之前，你需要確保兩個事情，一是你要安裝最新的chrome版本，另一個是你需要將chrome加入到環境變數中。

chrome --headless --disable-gpu

你可以利用Headless Chrome將頁面轉換為pdf

chrome --headless --disable-gpu --screenshot https://www.baidu.com/

你可以Headless Chrome對頁面進行截屏

chrome --headless --disable-gpu --screenshot https://www.baidu.com/

就像你看到的一樣，Headless Chrome是通過命令行的方式來與瀏覽器進行交互。 如果你想利用它進行自動化腳本或者寫代碼來控制的話，你就需要學習Puppeteer了。

Puppeteer

Puppeteer是Chrome團隊開發的Node庫。 它提供了一系列的高級別API來控制Headless Chrome。 它和其他自動化測試框架一樣，如PhantomJS和NightmareJS，不過它只適用於59+版本的Chrome。

安裝Puppeteer的方法

npm i puppeteer

下面的例子中，使用Puppeteer來對頁面進行截屏。

constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://www.baidu.com',{waitUntil:'networkidle2'});awaitpage.pdf({path:'page.pdf',format:'A4'});awaitbrowser.close();})();

下面的例子中，使用Puppeteer來對頁面數據進行抓取。

constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://google.com',{waitUntil:'networkidle'});// 输入想要搜索的内容
awaitpage.type('英俊潇洒你冲哥');awaitpage.click('input[type="submit"]');// 等待结果
awaitpage.waitForSelector('h3 a');// 遍历并输出页面中的结果
constlinks=awaitpage.evaluate(()=>{constanchors=Array.from(document.querySelectorAll('h3 a'));returnanchors.map(anchor=>anchor.textContent);});console.log(links.join('n'));browser.close();})();

總結

在本文中，我們瞭解了無頭測試如何幫助作為開發者的你，並探索了一些無頭測試工具和範例。

無頭測試在web開發中是非常有用的工具。 通過無頭測試，您可以生成網站的截圖和pdf檔，從網站上抓取內容，自動提交表單，並模擬鍵盤輸入。

當與無頭瀏覽器結合使用時，它允許你在完全成熟的瀏覽器中做任何你可以做的事情，而不需要瀏覽器。

題外話：如果您覺得這篇文章對您有説明，如果您對前端技術感興趣，您可以關注公眾號——"較真的前端"。 那裡有更多技術乾貨等著您。

參考文章：

1. Introduction to Headless Browser Testing

2. Headless Browser Testing Pros and Cons

3. Automated testing with Headless Chrome

Tophatter，在線拍賣型跨境電商平臺，90秒成單，移動端消費佔比95%，2018年預期營業額10億美金。

Tophatter的特徵：移動端、90S成交

作為主要以移動端流量為入口的售賣平臺，Tophatter對碎片化時間的利用率堪稱一絕，90S產生購買訂單的效率與碎片時間的特徵絕對吻合。

Tophatter的消費模型：刺激衝動型消費

在這裡有兩個概念需要入駐Tophatter的賣家瞭解;

"衝動消費：衝動消費是指顧客在外界因素促發下所進行的事先沒有計劃或者意識的購買行為。 衝動消費具有事前無意識、無計劃，以及外界促發下形成的特點。 ”

"刺激衝動消費：顧客在購物現場見到某種產品或某些廣告宣傳、營業推廣，提示或激起顧客尚未滿足的消費需求，從而引起消費欲望，而決定購買，是購物現場刺激的結果。"

與衝動消費對立的是計劃型消費。 對Tophatter而言，無計劃性衝動消費，配合產品本身的低價入口（低價拍，高價買）、圖片等訊息刺激，最終產生了購買。

容易造成衝動消費的產品有哪些？

目前，就Tophatter的主要流量產品，3C及飾品共佔據50%，新興品類為傢俱、配件和配飾。 通常，容易造成衝動消費的產品，實用價值低，附加價值高，外表美觀，通常不作為個人或家庭的必需品，而是為了滿足更高一級的需求，例如精神需求（娛樂需求，虛榮心需求等），所以賣家在選擇商品時可以盡量往這方面考慮。

衝動型消費的刺激時間

衝動型消費的時間，我們以雙11為例。 在雙11期間，消費者實際上是被引誘的消費模型。 消費者在"促銷"的刺激下，大量購買實際上非急切的需求。 在雙11當天過後，刺激需求會短時間內下降，但會隨著獲取的訊息和快遞的到來被重新激起。 如下圖的刺激模型。

在購買時，刺激指數會上升到最高點，伴隨著討論期，在每一個討論點上，隨著時間推移，刺激指數會逐步降低，但在收件期，隨著包裹的到來，刺激會重新拉回到超過討論期的高度。

所以，盡量縮短討論期，提前收件期到來的時間，非常有利於類似Tophatte衝動消費平臺的刺激挽留，有利於提高店鋪好評率和留存率。

影響Tophatter購物的物流特徵和物流渠道選擇

衝動型消費的最大特徵是購買不穩定性，可能隨著天氣、心情、流行趨勢等一些列外界因素而發生改變。 所以對Tophatter平臺的賣家來講，選擇海外倉可能具備一定的滯貨風險，但選擇郵政類產品帶來的不良時效，也可能導致衝動消費的刺激指數會大幅度降低，從而影響購買體驗後期的二次行銷。

鑒於Tophatter的售賣貨值在10-20美金範圍內，品牌商品的價值高達30美金，萬邦速達為Tophatter的賣家推薦的是專線管道，特別是品牌賣家，將討論期縮短在一個星期內，盡量保持收件期的刺激指數，即避免海外倉大量存貨，又避免刺激指數大幅度降低。 目前，萬邦速達正在與Tophatter進行API對接，美國專線也將在5月初正式上線。 另外，佔據Tophatter部分購買份額的歐洲地區，萬邦速達已經具備英國、法國、德國、義大利、西班牙、瑞典六個國家完善的專線服務。

個人微信：sentifed

原創，轉載請聯繫。

您想過開一家網店嗎？ 但是卻不確定是否應該使用Shopify或WooCommerce？

Shopify和WooCommerce是世界上兩個頂級的全球網網平臺，但這兩個平臺都有各自的優點和缺點。

作為業務所有者，為您的業務尋找符合相應需求的的所有通訊平臺對於您的業務成功來說是非常重要的。

在這篇指南裡，我們會為您提供Shopify與WooCommerce之間的詳細。 這樣做的目的是為了向您講解它們兩者之間的和弱勢，以便您可以從中挑選最合適的平台。

由於這是Shopify與WooCommerce的詳細比較，所以這裡附上一個快速的內容清單：

• 概述：WooCommerce對比Shopify
• 您需要在該的平台注意些什麼？
• 費用比較
• 易用性比較
• 付款條件
• 附加功能比較
• 直運（Dropshipping）比較
• 可擴充性比較
• 支援選項
• 總結：WooCommerce對比Shopify – 哪一個更好？

概述：Shopify對比WooCommerce

在我們開始深入比較這兩個在網路上最受歡迎的電子購物平臺前，我們先需要瞭解一些基本知識和這些平臺脫穎而出的特點。

什麼是Shopify？

Shopify是一個一站式的的所有網路平臺，能讓您在單一的平臺上輕鬆地開設自己的網店，接受購買付款，管理自己所有的庫存，以及讓您無需擔心在管理網站時所會面對的技術性問題，例如網路託管， 安全性和緩存等。

什麼是Woocommerce？

WooCommerce是一個專為WordPress打造的開源資源的外掛程式。 它能讓您使用最強大的內容管理系統（CMS）來營運自己的網店。 由於它擁有開源的特性，所以您可以自己制定網店的各個方面和輕鬆建立自己想要的新裝置模式。

所以該選擇哪一個平臺，則完全取決於您的需求和技能水準。

您需要在該的平台注意些什麼？

在您設立網店之前，您絕對要記得這幾件事。 這些是幫助您決定使用哪一個平臺的重要關鍵要素。

• 預算 – 設立功能齊全網店時的初始成本。
• 易於使用– 它應該簡易使用，即使對初學者來說也一樣能快速上手
• 付款條件 – 它應該要能支援多種付款條件（例如PayPal，Stripe和其他的支付網關）
• 整合 – 您能通過整合來提升業績的服務和第三方工具的數量
• 可擴充性 – 該平臺要能夠隨著業務的增長而進行擴充。

這些都是所有網店擁有者必須考慮的基本要求。 取決於您的要求，您也可能會想查看其他選項的選項，例如運輸，庫存管理，發票，稅務和直運等等。

我們的目標是希望通過這篇文章深入瞭解Shopify和WooCommerce在這些基本要求的表現是如何，以及哪一個最適合您的需求。

成本：Shopify對比WooCommerce

成本通常都是的所有業者最優先考慮的因素。 您需要估計設立網店時所涉及的成本，同時也是需要考慮日後附加服務和軟件的額外費用。

使用Shopify的真正成本

Shopify能讓您在超級輕鬆的情況下開始您的網店。 他們的基本配套為每月29美金起，然後您可以選擇升級至每月79美金的Shopify配套或者每月299美金的Shopify高級配套。

這些配套每一個都包括功能變數名稱，SSL和網站託管。

基本配套為設立新的網店提供了足夠的功能。 您可以添加無限產品，附帶2個用戶的使用者，無限檔儲存等等。

但是這個定價並不包括將您的Shopify網店提升至更高層次的第三方工具和附加組件。 隨著您的業務增長，這些費用也會隨著增加，而您很快會支付比基本配套來的更高的費用。

客戶付款也是影響您成本的另一個原因。 Shopify所提供的Shopify Payments付款方案會對每筆交易徵收2.9%+ 30美分的費用。

如果您想使用第三方的支付網關或自己的商業的使用者，那麼您的每筆交易都會被徵收2.0%的固定費用。 您可以通過使用每月299美金的Shopify高級配套將這個費用降低至0.5%。

當您使用外部的支付網關時，這些付款的處理費用是相當高的。 如果您想在開始時使用Shopify的付款方案，那麼它的費用與目前流行的付款平臺，例如Stripe和Braintree則相當。

使用WooCommerce的真正成本

WooCommerce是http://WordPress.org（也被稱為自託管WordPress）的 ARR 的郵件外掛程式。 它是開源元件，並可在WordPress外掛元件組裡免費獲得。 但是，您將需要一個功能變數名稱，SSL證書和一個由WordPress託管的IG才能啟動WooCommerce商店。

一般上，功能變數名稱費用為14.99美金，SSL證書費用為69.99美金，網站託管費用為每月7.99美金左右。 這些費用加起來並不便宜，尤其是當您剛剛踏入初創期時。

值得慶幸的是，目前有幾家託管公司提供專門用於WooCommerce託管的配套，並大大降低了初始成本。

Bluehost是WordPress官方和WooCommerce所推薦的託管服務提供者。

如您所見，設立一個基本WooCommerce網店的成本遠低於Shopify。 同時WooCommerce也不會向你徵收每筆交易的費用，這是一個非常強大的優勢。

但是當您開始購買服務新增時，WooCommerce的費用就會開始增加。 隨著您的網店增長，您的託管成本也會隨著增加。

雖然如此，但使用WooCommerce的一個明顯優勢就是您經常都可以找到付費談判的免費替代方案。 那麼您就能夠根據自己真正的需求去購買工具或外掛程式，從而得以控製成本。

由於WooCommerce提供很多免費的主題和免費的附加元件，所以在成本考量的範圍裡，它絕對是贏家。

贏家：WooCommerce

易用性：Shopify對比WooCommerce

大多數設立網店的用戶都不是網頁設計師或開發者。 即使是熟悉基本操作概念的用戶，他們也需要一個簡易使用的平臺才能發揚光大。

讓我們看看Shopify和WooCommerce在用戶友好的性能方面表現如何。

Shopify – 易用性

Shopify是一個完全託管的平臺，這意味著您無需進行安裝，管理或更新任何的軟件。 您也無需擔心有關安全性，性能，備份和相容性的問題。

一旦您完成註冊後，它就會幫您的網站挑選一個設計。 之後會逐步引導您進行定製化和添加產品。

Shopify採用的是直觀的拖放介面。 所以在Shopify中管理您的產品，銷售和庫存是件輕而易舉的事。

這種引導，美化和高度優化用戶體驗的操作缺點就是限制了您的控制權。 您只能使用由Shopify所提供的設計和開發工具，或者在它們市場裡所提供的附加元件。

然而這也並不是那麼地糟糕。 因為對於大部分的用戶來說，Shopify所提供的大量新檔元件和主題已經遠足以讓您開始和發展您的網店了。

WooCommerce – 易用性

WooCommerce不像是Shopify那樣的託管平臺。 所以這意味著您將需要自行安裝WooCommerce，管理更新，保存備份和確保自己的網站是安全的。 好消息是有很多免費和付費的外掛程式能夠為您自動完成這些大部分的工作。

在定製化方面，WooCommerce有著非常更可的功能。 您可以完全控制整個平臺。 您可以藉助超過55，000多個WordPress外掛程式來向您的網站添加任何您可以想像得到的功能。

可惜的是它沒有內置的拖放設計的程式。 但您可以選擇使用其中一個WordPress頁面的程式，例如Elementor，但它會增加您的成本。

這種功能所帶來的最大弱勢就是您需要不斷去學習設置和付出更多的實際操作來管理你的網站。 您也需要註冊商業的使用者或類似的服務，例如Stripe或PayPal。

雖然WooCommerce的引導設置嚮導很好用，但是卻不及Shopify的入門和易用性。

贏家：Shopify

付款條件：Shopify對比WooCommerce

有很多支付網關能讓您用於接受線上付款。 但一些支付方式可能不合適您，而有些方式也不是所有客戶都能使用的。

所以您所選擇的平臺是否能夠支援多種支付方式是尤其重要的考慮要素。 讓我們來看看Shopify和WooCommerce 在支付選擇方面的性能是如何的。

Shopify的支付選項

Shopify提供了多種支付選項，您可以使用這些來接收客戶付款。 它也有自己的付款方案，成為Shopify Payments（由Stripe提供支援）以及所有常用的第三方支付網關。

但問題是Shopify會對使用第三方支付網關的每筆交易徵收額外2%的費用。 這個2%是您在被支付網關徵收處理費用後的額外費用。 您可以通過選擇每月299美金的Shopify高級配套把費用降至0.5%。

Shopify Payments有固定的信用卡費用，同時沒有附加其他的交易費用。 Shopify基本配套的信用卡費率從2.9%+ 30美分起，而其他配套的信用卡費率則而不是成。

WooCommerce的支付選項

WooCommerce會設置設置接受PayPal和Stripe的付款。 它也能通過添加其他的附加元件來提供所有其他常用的支付服務。

在支付網關方面，WooCommerce支援很多區域性和較不常用的付款服務。 由於沒有入門門檻，所以任何支付公司都能為WooCommerce創建附加元件和為其提供服務。

作為自託管平臺，您只會在使用支付網關或銀行時被收取交易費用。 Woocommerce不會向您的網店交易徵收任何費用，這絕對是一個很大的優勢。

如果您想使用自己的商業的公司或第三方的支付網關，那麼選擇WooCommerce將會為您節省很多的金錢。 但如果您經營的是一家小型網店，並願意使用和Stripe / PayPal具有相同信用卡費率的Shopify Payments，那麼它就沒有任何的區別。

贏家：和局

整合及附加功能：Shopify對比WooCommerce

無論您所選用的通訊平臺有多麼強大，您終將需要第三方的工具和服務來發展您的網店。 舉例來說，電子郵件營銷軟件，潛在客戶生成工具，分析工具，推廣服務等。

Shopify和WooCommerce兩者都有一個龐大的目錄拖展，並可以與很多的第三方服務整合在一起。

Shopify的附加元件和整合

Shopify有一個強大的API和應用商店，您可以在哪裡為您的Shopify網店購買第三方的附加元件。 它們的商店裡有數百個應用程式，覆蓋了您想要添加到網店裡的所有功能。

對於生成潛在客戶方面來說，他們與OptinMonster等軟件進行整合，藉此來幫助您新的新電郵件名單和降低購物車的放棄率。 他們也提供SEO，產品評論，折扣，倒數器等的應用程式。

Shopify的應用商店包含免費和應用付費。 免費應用通常是由第三方服務所創建的，並有自己的定價，而那些應用僅會將您的網店整合到他們的API裡。 附加元件的價格各不相同，而大部分的應用程式都會提供每月訂製。

WooCommerce的附加元件和整合

WooCommerce是開源外掛程式，並基於WordPress建立而成的。 這能讓您接觸到超過55，000個免費的WordPress外掛程式和很多的付費外掛程式。

您可以使用這些附加元件來添加支付網關，潛在客戶生成器，搜尋引擎優化，性能優化以及幾乎任何您所能想像到的功能。

由於入門門檻較高，所以WooCommerce比Shopify擁有更多的整合和附加功能。 幾乎所有第三方工具和服務提供者都有自己的外掛程式，用以整合至您的WooCommerce網店。

您也能聘請一位開發人員來專為您的創建網站集成或外掛程式。 但請記住，WooCommerce在定製化方面擁有更高的的功能。 如果您將外掛程式提交給WordPress和把應用程式提交給Shopify商店要求核批，那麼我們可以說Shopify的過程會比WooCommerce的過程來得更加艱難。

贏家：WooCommerce

Shopify對比WooCommerce的直運（Dropshipping）

直運是一種讓下載商裝置不用保存產品庫存的線上業務。 取而代之的是，它能直接向購買產品，然後將產品直接發送給客戶來完成履約。

由於這種業務做法的開銷很低，所以直運業務已經風靡全球。 很多用戶都要求我們為WooCommerce和Shopify的直運做對比，並想瞭解哪一個配套更合適用來進行直運業務。

Shopify的直運

當我們要設立一個直運業務時，您的網店前端需要看起來和其他的線上商店一樣。 那麼您的用戶就能瀏覽產品，把產品添加入購物車，以及進行支付，這些操作流程就如同其他的入境商店一樣。

取決於您所選擇的供應商，您需要向他們下單，然後發貨給買家。

Shopify提供了一些最受歡迎的直運市場選擇，例如AliExpress，Oberlo和Printify等等。 而您在使用Shopify建立自己的直運網站時，需要格外留意這些產品市場都有各自不同的會員費，運輸費和其他的費用。

WooCommerce的直運

WooCommerce是直運業務裡的熱門選擇。 主要是因為WooCommerce允許您自行安裝擴充模組來讓履約訂單變得更加得心應手。

您可以很容易就能為自己的網站找到讓您立即導入產品和履約訂單等功能的新的電腦組件。 您甚至可以創建自己的登藏市場，讓其他的供應商在您的網站上進行銷售。

注意，您的供應商可能會設定最低的訂單要求，會員費或其他費用。 所以在添加產品至您的WooCommerce至直運店前，您需要格外留意這些限制。

贏家：WooCommerce

可擴充性和增長：Shopify對比WooCommerce

您可能會從很多的CEO哪裡聽過"增長的痛苦"這個名詞。 當您的業務增長時，您將需要更多的資源來應對新的挑戰和目標。 Shopify和WooCommerce這兩者都能進行以擴顯大量的流量和訂單，但它們卻不盡相同。 現在讓我們來對比這兩個售售平台在新複性方面的性能。

Shopify的可擴充性

Shopify會處理您網店的技術性部分，這意味著您不需要擔心網店的性能，安全性和擴擴充性。 一旦您的業務開始增長後，您只需升級Shopify的配套即可。

它們的功能基礎發展能夠輕易地為您處理不斷增長的業務，無需您擔心有關停機，備份，更新或安全性的問題。 它們也為Shopify Plus配套提供企業服務。

這些都能為您消除增長所帶來的痛苦部分，但同時也會增加您的業務成本。 由於您的開銷會提高，所以您必須做出相應的計劃調整。

雖然如此，但它能給您帶來的好處就是您無需聘請或管理自己內部的技術團隊，從而節省大量的運營成本。

WooCommerce的可擴充性

WooCommerce是一個自託管平臺，所以您需要自行負責維護網站的更新，備份和安全性。

您開始所使用的WooCommerce託管服務會隨著您的網店在獲得更多的流量時耗盡資源。

選用WooCommerce的好處是因為在網站有完全的控制權，所以您有很多的選項可以用來管理網站的增長。 您可以通過緩存來更好地管理資源和將您的託管計劃升級到更強大的服務器。

雖然您的WooCommerce託管成本會隨之增加，但您將可以更好地控制資源，同時也可確保您不需要為多餘的資源付費。 您可以使用WP Engine或LiquidWeb等的WordPress託管供應商來幫助新電腦至ZOOCommerce商店。

儘管WooCommerce能給您提供全權的控制，但一些企業擁人比較喜歡最省事的解決方案。

贏家：Shopify

WooCommerce對比Shopify選項的支援

WooCommerce和Shopify都非常易於使用。 但有時您依然需要尋求幫助來學習如何為您的網店做些新東西。

現在讓我們來看看WooCommerce和Shopify在處理支援和能為您提供哪些選項來做性能比較。

Shopify的支援

Shopify是一個完全託管的平臺，這意味著它們可以控制軟件，同時也是最瞭解自己平臺的人。

Shopify能通過在線聊天，電話，電子郵件和Twitter提供全天候的支援。 對於那些想要自己解決問題的用戶，Shopify也為此提供了大量文檔，操作指南，知識庫，視頻教程和論壇。

如果您需要額外的幫助或您想要整合第三方的解決方案至自己的網店，您也可以通過Shopify Experts的目錄來聘請專業人員為您進行處理。

Shopify不會對您所使用的任何第三方應用或主題提供支援。

WooCommerce的支援選項

WooCommerce是世界上最熱門的全球的全球的全球的資訊平臺，所以您有很多的支援選項可以為您處理問題。

它們的官方網站供了大量的文檔，教程和指南，可以幫助您進行解答。 它們也設有支援論壇，您可以通過哪裡向其他的WooCommerce用戶和專家尋找幫忙。

WooCommerce是一個自託管平臺，這意味著您的託管服務提供者有負責為您有關服務器的問題提供支援。

對於您所使用的WooCommerce主題和新的電腦組件，哪些發展者會負責回答有關他們產品的問題。

由於WooCommerce的普及度很高，所以在尋找開發人員來為您解決WooCommerce網店問題時會來得更加簡單和便宜。 您也能夠在自由工作者網站尋找開發人員來為您處理WooCommerce的問題。

贏家：Shopify

WooCommerce對比Shopify：哪一個是最好的下載平台？

Shopify和WooCommerce兩者都是開始您NET商店的強大平臺。 所以該選擇哪一個就歸結於您個人的技能和偏好。

相比之下，Shopify更加容易使用。 它不需要您安裝任何東西和能更快取得開始。 在設置付款方面也容易較，因為它們的收費制度簡而易懂。

Shopify的弱點是您沒有完全的控制權。 您的成本會隨著交易費用，附加元件和整合而提高。 您所能選擇的升級也選項受限，同時也無法在"按需付費"的製度裡妥善地管理成本。

WooCommerce是開源的外掛程式，可以讓您完全控制自己的網站。 當您選擇WooCommerce託管公司開設WooCommerce網店時，所涉及的成本也低很多。

選用WooCommerce的弱點是您將需要自己維護軟件。 需要一些時間來學習才能掌握得到。 然而，已有數百萬的初學者已經在用著了，而他們也很快就完成了這個學習的階段。

如果您正在尋找具有成本效益的解決方案，並希望能夠完全控制自己的網店，那麼WooCommerce就是您的最佳平臺。

如果您想要完全省事和有無限新的發展性的解決方案，那麼Shopify對您來說是更合適的平臺。

我們希望這篇文章能夠為您清楚地對比出Shopify和WooCommerce的優缺點。

回顧一下六月跨境有哪些電商精彩內容。

【小編資料庫】新手如何開店，最常遇到問題解答，熱銷產品趨勢、節日選品、搜索關鍵詞、消費行為等，承包你的跨境資料！ 關注私信（學習）免費領取>>

六月底又有一系列與電商相關的產品發佈和更新，包括數位貨幣、航運和物流、多管道銷售和AR創新工具等等。

Adobe Commerce Cloud推出headless Commerce服務

Adobe Commerce Cloud宣佈了一項headless Commerce服務，簡化持續整合和交付程，並使客戶能夠快速，靈活地反覆運算其代碼庫。 各種規模的商家每天可多次的將新功能部署到產品中，以快速和大規模地回應客戶需求的變化。 Facebook推出加密貨幣Libra和數字錢包Calibra

Facebook宣佈推出建立在區域鏈技術基礎上的新數字貨幣Libra。 Libra的使命是建立一套為數十億人服務的全球貨幣和金融基礎設施，並由三個部分組成，它們將共同作用並創造一個更加普惠的金融體系：包括一個區塊鏈基礎，內在價值的儲備資產，以及負責發展生態系統的獨立Libra協會。 Facebook還宣佈將於2020年推出數字錢包Calibra。

http://Alexa.com提供新的競爭力洞察

亞馬遜子公司http://Alexa.com現為行銷人員提供了免費的競爭力洞察。 Alexa Site Overview每月為300多萬獨立使用者提供服務，揭示品牌的優勢、劣勢和機遇，包括網站相關數據、受眾洞察、關鍵字以及競爭力分析。 網站分析功能還有助於行銷人員發現並充分利用其潛在和現有客戶的數字機遇。 此外，Site Overview還可以幫助代理商制定完美的推銷方案，並為客戶提供更快的結果。 Shopify為美國賣家建設物流網路

為説明小型企業保持與亞馬遜的競爭力，並使平臺賣家更快速、更便宜的交付產品，Shopify計劃斥資10億美元在美國推出新的物流網路。 該網路將採用智慧庫存分配技術，由機器學習提供支援，可預測最近的物流中心和每個位置的最佳庫存數量，以確保快速，低成本的交付。

ShippingEasy推出多管道客戶行銷套件

ShippingEasy為其Customer Marketing推出了一套多管道套件新功能，旨在讓各種規模的在線賣家（尤其是亞馬遜賣家和Shopify賣家）充分利用他們的數據，從而更好地了解客戶並建立源源不斷的回頭生意。 ShippingEasy所擴展的Customer Marketing 套件包括：亞馬遜反饋管理，輕鬆拖放範本建模器，強大的細分規則，Shopify廢棄購物車的電子郵件行銷活動等等。

Whitebox為其電商物流平臺籌集了500萬美元

直接面向消費者的電商物流初創公司Whitebox在A輪融資中籌集了500萬美元。 Whitebox幫助企業將整個電商流程外包出去，併為企業計算出將存儲成本保持在最低水平的庫存量。

SureDone增強了自動化引擎，以支援市場和複雜的集成

SureDone是一個多通道電商listing和訂單管理平臺，旨在提高品牌、企業和不斷發展的電商賣家的在線商務效率並實現自動化，其先進的自動化引擎支援合作夥伴API所需的複雜連接類型和集成工作流。 SureDone的自動化引擎是一個商業數據和系統連接器，賣家可通過配置檔定義連接類型和欄位變數。 這些數據可以導入和匯出到SureDone，以促進產品listing、庫存管理、訂單、船舶跟蹤和其他物流需求。

谷歌優化廣告展示，為YouTube推出新的沉浸式廣告形式

谷歌推出新的3D廣告形式，併為YouTube推廣提供了新的AR展示和Live功能。 谷歌"AR試妝"可以讓消費者在觀看YouTuber的視頻內容時，進行試妝體驗。 通過機器學習和AR技術，它提供了虛擬的產品樣品，可以處理多種膚色。 AR Beauty Try-On可通過YouTube的內部品牌內容平臺FameBit獲得。

亞馬遜為Prime運輸擴大航空網路

在巴黎國際航空展上，亞馬遜宣佈與通用電氣金融航空服務公司（GECAS：GE Capital Aviation Services）合作，租賃15架波音737-800貨運飛機。 這15架飛機將是今年早些時候宣佈從GECAS租賃的5架波音737-800飛機的補充。 該型飛機將通過亞馬遜航空網路的20多個航線飛到美國，並憑藉先進的演算法和用於容量和路線規劃的軟體，亞馬遜的空運業務每天可以運送數十萬個包裹。

亞馬遜今年還將在沃斯堡聯盟機場、威爾明頓機場和芝加哥羅克福德國際機場開設新的航空設施。 辛辛那提/北肯塔基國際機場的主要航空樞紐將於2021年正式對外開放。

Sezzle將在加拿大推出

支付公司Sezzle宣佈其平臺將服務於加拿大的數千家在線商店，包括義大利運動品牌Kappa。 在美國，超過3300家零售商選擇Sezzle作為他們首選的分期付款解決方案。

Sezzle提供六個星期的無息分期付款，不需要額外的費用，這為消費者尤其是沒有信用史的千禧一代提供了一種更方便、更負責的支付方式。 Sezzle的「當下買，后支付」的解決方案使消費者能夠滿足他們的即時購買需求，且不會打亂他們的每月預算或忍受繁重的信用核查。

Insite Software推出其電商平臺最新版本

為製造商和分銷商提供數位商務解決方案的Insite Software宣佈了其電商平臺InsiteCommerce的最新版本。 除了改進Insite的搜索功能，新版本還支援電子郵件清單提醒，提供多個客戶清單共用功能，增強安全性，並提供與InRiver產品數據雲平臺的集成。

亞馬遜AWS聲明AWS Security Hub的可用性亞馬遜AWS聲明了處理安全及合規問題的安全中心AWS Security Hub的可用性。 AWS Security Hub可以聚合、組織並優先處理來自不同的AWS服務以及來自AWS合作夥伴網路解決方案的安全警報，以運行基於行業標準和實踐的自動化、持續的合規檢查。 客戶僅為執行的合規檢查和安全性發現付費，此外每月前10000個安全發現事件是免費的。

據Gartner報告，2018年"無頭電商（Headless eCommerce）"已成國際品牌主最受歡迎的應用技術之一。 近79%的品牌正考慮、計劃或已開始使用無頭或以API為基礎的電商架構。

本文篇幅較長，可按如下目錄閱覽興趣內容：

• 什麼是無頭電商？
• 無頭電商 VS 傳統電商，優劣對比
• 無頭電商的應用價值
• 什麼樣的公司適合無頭電商

什麼是無頭電子商務（Headless eCommerce）

無頭電子商務（Headless eCommerce）本質上是指網站「前端與後端完全分離」的電子商務開發模式。

相較於傳統電商（Traditional eCommerce），無頭電商通過API獨立調用網站前後端邏輯構架。 消費者體驗、多管道可拓展性、內容維護與回應速度、開發難度與時間成本獲得顯著優化。 目前品牌方正期待為使用者提供獨特、定製且整合的購物體驗，而無頭電商顯著了消解了達到上述目標的難度。

無頭電商VS傳統電商，優劣對比

傳統電商

傳統電子商務更像是一個"大型流水線工廠"，相關元件必須依照特定流程按部就班運行。 即傳統電商中，前端必須從後端調用訊息，反饋給消費者。

該情況下，前端開發人員只能使用解決方案所框死的前端設計和流程。 如若他們想更改數據或體驗，則需更改資料庫，代碼和前端。 而無頭電商無需修改資料庫，允許直接自定義開發。

無頭電商

無頭電商更像是個靈活輕便、可拓展的工具集成包，"哪裡需要就調用哪裡"。 因為無頭電商以API的形式充當仲介，前後端不再代碼互相依賴，前端可靈活調用若干後台模組，允許更快速地自定義網站，輕鬆改善消費體驗。

最重要的是，無頭電商模式下「API即服務」，因此他能夠跨越任何管道與設備並處理電子商務流程，包括但不僅限於如下管道的無縫連結：官網、小程式、原生APP、智慧與穿戴設備（如智慧手錶、車載儀錶盤的訂單系統）、ERP及門店訂單管理系統等。

以下，列舉了無頭電商API的主要應用場景：

• 目錄資料：可以使用目錄API完全或增量地顯示目錄數據，從而允許外部系統（例如行動裝置或CMS）創建導航和內容結構。
• 搜索和導航：基於SOLR的搜索和導航API提供了搜尋結果以及構面查詢字串。 來自每個搜索響應的優化路徑也可以用於用戶端整合。
• 客戶模組：可以使用此模組中的API完成客戶註冊。 位址管理等其他功能也是該模組的一部分。
• 產品訊息：詳細訊息的產品（包括圖像的URL和詳細說明）通過API公開。 客戶可以請求有關促銷，產品評論等的訊息，並可以使用一系列參數來完善訊息。
• 購物車和結帳功能：購物會話開始后，API可以管理使用者的購物車，包括添加商品，更改數量或從購物車中刪除商品。 該API還可以管理送貨地址，檢索和設置送貨模式以及添加客戶付款訊息。
• 訂單：下訂單后，訂單API可讓客戶訪問所有下訂單的清單和詳細視圖。
• 多管道：不同管道具有迥然相異的用戶介面與下單流程，但無頭電商可説明統一連結整合"購物車"、"訂單記錄"與"支付處理"等功能。

對公司內部組織架構，相關人員也可受到無頭電商的賦能：

• 後端介面：更輕鬆地自定義開發網站功能，無需擔心拖累前端展現。
• 前端人員：可完全專注於提供高度創新的內容，無需擔心後端開發。
• 行銷人員：即使缺乏技術經驗也可隨時自定義調整內容，無需依賴開發支援。

無頭電商雖有其優勢，但是為了充分激發無頭電商的全部潛能與功能，企業必須編寫大量的自定義API才能獲得更好的用戶端性能。

無頭電商的應用價值

更快速

當代消費者期待新穎時髦、快捷便利、無縫整合的電商購物體驗。 伴隨快速更替的消費需求，這對後端開發並快速映射於前端提出了更高的要求。

無頭電商前後端分離的構架允許品牌在不中斷"業務基礎架構"的情況下更新面向消費者的"內容層"。 並允許僅交付系統的某些部分而不會影響核心商務功能。

例如，您的行銷團隊可以發起新的促銷活動或創新的UI體驗，而不必依賴開發人員和完整的系統重新配置，也無需測試所有後端的核心邏輯。

又如，在部署新的用戶介面或功能方面，無頭電商允許您的團隊成員同時平行處理多項部署，因此您的專案效率變得更加靈活高效。

更個性

實驗與創新是品牌電商獲得成功的關鍵之一。 通過測試消費者對於不同優惠與促銷的反饋，以及對於頁面與內容變動的反應獲得"電商最優解"。 而前後端分離，測試模組獨立運行，無頭電商則不會因為在網站運行多種「A/B測試」而拖累網站速度。

易定製

前後端分離，您可自由的添加（或購買）不同的元件與功能，您的網站再也不是一個「封裝」交易。 您可與業務團隊緊密合作，確定哪些集成最貼合您的業務，隨心所欲的做"加減法"。

通常，選擇無頭電子商務解決方案的企業是那些追求高度定製化平台的企業，無頭電商平臺允許您輕鬆地與其他第三方服務集成。

多管道

通過API的靈活整合與調用，無頭電商可配適任何主流管道與系統。

如果一家公司致力於部署多管道戰略，比如整合多個設備埠（桌面端、移動端、平板端）、移動PWA電商、原生APP（IOS/Android）、微信H5與小程式、OMS、CRM和ERP等，無頭電商架構可為您完美實現上訴訴求。 下列章節亦會對此進行說明。

什麼樣的公司適合無頭電商？

無頭電商適用於任何類型的公司。 無論中小企業還是跨國公司，隨著數位景觀變得愈發複雜，公司必將隨著時間推移而進行多管道乃至多區域的拓展。 而無頭電商的"應用服務架構"可為公司的靈活拓展和架構優化帶來更多可能。

通常，無頭電商更貼合下類公司的需求：

• 迎來快速增長的中小公司
• 投資組合中包含多家子公司，品牌或部門的大型公司
• 具有複雜或獨特的業務規則和訂購流程的公司
• 需將多個獨立系統與品牌電子商務集成的公司
• 具有高級CMS管理需求的公司，及內容不斷迅捷變化的公司

關於無頭電商開發

TMO Group可為品牌提供全面優化的「無頭電商開發服務」，並支援與您的多管道市場戰略進行整合，包含但不僅限於品牌電商（桌面端、移動端、平板端）、PWA電商、微信乃至支付寶、頭條、抖音、百度與QQ小程式等多樣化的品牌管道。

我們還可將無頭電商與您的CMS、OMS或ERP等重要系統連結，實現流暢無縫的訊息共用。
TMO使用GraphQL的最新技術優化所提供的API服務。 該技術僅為前端提供必要的訊息，以降低頻寬需求並提高性能。 並運用API高級緩存，可通過API提供事先請求的訊息。

TGIF！ Vlog第9彈《Amazon EKS 最佳實踐—— Cluster Autoscale》

在使用 Amazon EKS 的過程當中，我們會使用 HPA 幫我們橫向擴容整個Pod的數量，那麼 HPA 如何才能夠更好地跟節點的擴容能相互搭配？ 快來跟 AWS 的專家解決方案架構師 PAHUD HSIEH 瞭解一下 Cluster Autoscaler 的特性以及它應該如何與 Amazon EKS 搭配從而達到最好的效果！

無論多麼難以理解的產品或技術

只要找對學習方法就一定能很快學會

看完本期 Vlog 的你

對 Cluster Autoscaler 是不是有新的理解呢？

讓我們下期再見！

Vlog第11彈《Amazon EKS 最佳實踐——StatefulSet》

在使用 Kubernetes 的過程當中，我們經常會需要打造一些無狀態的應用，這就是 Stateless Application。 然而，有很多應用需要做到有狀態的持久化，那麼在 Kubernetes 當中，我們要如何去打造一個有狀態的應用呢？

快來跟 AWS 的專家解決方案架構師 PAHUD HSIEH 瞭解一下在 Amazon EKS 上如何使用 StatefulSet 去打造 Stateful Application。

無論多麼難以理解的產品或技術

只要找對學習方法就一定能很快學會

看完本期 Vlog 的你

對 StatefulSet 是不是有新的理解呢？

讓我們下期再見！

Headless Commerce是一個有趣的名字，它是近一年國外電商行業的時髦術語。 國內還不怎麼流行這種叫法，但與其對應類似的概念實際上在台灣也是漫天飛舞，這就是"API化"和"中台"說法。 想到中台的火熱，我也隨手記下這篇文章，聊聊無頭電商和中臺。

什麼是無頭電商？

Headleass Commerce可以翻譯成無頭電商，或斷頭電商，核心概念就是將前台展現和後台服務進行解耦的一種架構。 後台以API的方式提供服務，前端展現層與後端分離。 沒有前端表現層（頭），剩下的就是無頭電商了，剩下的就是一堆API介面。

寫過代碼的程式師都很容易理解，這不就是前後端分離，或面向服務架構（SOA）么？ 為什麼這麼簡單的事情，會成為電商行業的噱頭呢？ 其實，這個事情後面有很多深層次的原因，有商業原因，有電商演進歷史，有生態原因，有品牌主新需求等等。

為什麼會發生這種變化？

有幾個事情比較重要：

1. 品牌主建立自有電商的需求

國內外電商平臺雖然都已經寡頭化，美國有亞馬遜，台灣有京東淘寶，很多品牌主依舊努力建立自有電商渠道，不斷突圍。

品牌主建立自有平臺可以加強自有數據的把控能力，直接與消費者進行互動，保證獨有體驗。

2. 電商體驗的多樣化

電商不在是一個簡單Web端，電商行業出現很多新觸點：語音購物，無人超市，場景購物等，前端變得更加豐富多樣

底層的基礎能力相對穩定，底層可以利用API確保穩定

3. 品牌直接面對消費者（Brand Direct To Consumer）

很多互聯網品牌通過創新的電商方式直接面對消費者，消除傳統的中間環節（零售商，批發商等）

一些私域流量給DTC創造了很多創新機會，最後這些創新場景都需要落地電商平臺上。

4. 電商平臺的演化

一體式的電商解決方案：從交易到內容，往往是一家巨型供應商提供，比如Oracle ， SAP， WordPress等

內容和交易能力的一些分離，出現了CMS或DXP的獨立功能區域

無頭電商：以API為基礎的構建方式，前後端分離，通過API支援更廣泛的生態

這種無頭商務平臺脫離了通常範本化的系統前端，允許開發人員在任何類型的框架中為產品和服務創建各種接觸點。 這樣，後端開發人員就可以靈活地創建和使用應用程式程式設計介面（API），以便交付給任何類型的設備，而不僅僅是標準螢幕。

無頭商務與傳統商業有什麼區別？

傳統平台為客戶和業務提供了範本化的體驗，缺少自由風格的發揮空間，通過無頭商務，可以更好地控制商務平臺、客戶業務和用戶體驗。

無頭電商的好處本質上都來源於前後端的解耦，面向服務和API的架構。 後端可以聚焦在沉澱，前後端可以利用API進行交互，以實現更多的應用場景。

1） 無頭商務是迎接物聯網時代（IoT）而創建的對應一些新零售場景，特別是沒有任何螢幕的場景，如何通過語音，視頻，手勢等方式與消費者完成商業互動，其中也包括在戶外，汽車等不同場地。

2） API 是數據流動的管道

無頭電商也是未來數據收集，分析，管理的技術架構的基礎。 傳統的單體電商產品，往往不能實現數據的靈活對流。

3）快速發佈

各模組的解耦使得各個模組可以獨立升級和發佈，各個模組可以採用微服務技術獨立發佈，只需要保持介面的穩定和相容。 新的功能可以通過增加新的介面，新的場景可以驅動這些新介面的集成。 例如，我們需要更換支付服務商，我們只需調用一個新的介面實現者就行，原則上不需要大更改，所有上層應用都不受影響。

4）個性化無頭電商是模組化和靈活的，各個模組API可以進行靈活的組合，封裝，二次開發等。 很多個人化的策略可以靈活應用在無頭電商的各個環節當中。 例如，消費者畫像也可以作為標準模組，提供給各個模組使用，最大程度複用沉澱的洞察。

5）擴展性和穩定性

穩定性，可擴展性和性能對電子商務系統非常重要，因為它們可以直接影響客戶的購買行為。 如果出現意外的後端故障，如果後端和前端斷開連接，後者仍然可用。 後端和前端可以獨立地進行水準擴展和垂直擴展。

無頭電商和中臺

說到這裡，無頭電商和台灣熱火朝天討論的中台（Platform）的理念非常類似：大中台，小前臺;

大中台：本質上是沉澱能力，利用API提高複用性;小前台：本質上是快速反覆運算和試錯。 這個邏輯其實是和Gartner2015提出的Pace-Layerd 應用戰略是一致的，當時Garnter根據系統的變化速度分為 "創新型" ，"差異型"，"穩定型"幾種。

數據中台其實就是保持介面穩定的一個系統，支援快速創新的業務層

中台的一些困惑和隨想

在台灣，中台已經流行幾年了，仔細想想，中台本質也是一種無頭。 無頭電商是中台概念在一個具體行業的應用。 沉澱和複用是很多公司的不同階段都會碰到的，中台戰略是解決這個問題的某種形式。 很多大大小小公司開始組建中台攻堅團隊，我與很多朋友都聊過中體的經歷，大大小小都會碰到一下一些困惑。 例如，一個公司在推進中台戰略中，單點登錄是唯一成功的案例，其它中台能力的推廣都是很難，每個業務線都有自己研發，不喜歡別人輪子。

1） 中台和前臺的界限無法界定清楚。 中台實現兩個能力，一個是沉澱，另外是複用; 二者相輔相成。 前臺更加面向客戶，他們更加容易最快速度創造客戶價值和商業價值。

如何衡量這種花費是否合理？ 一種衡量的方法是：對每個新業務，評估一下中台支援的粒度和程度，如果對於中台的範疇，大家都沒有太大歧義，這麼這種解耦可能是合理的。 如果對於每個新業務，大家都要對範圍界定進行激烈討論，那麼大家還是需要一個更加清晰的中台定位。

2） 中台的成功無法衡量和量化

那麼如何衡量中台的成績和成功呢？ 很多時候這個成績是沒有辦法衡量的，但是無法量化的東西，是無法改進的。 因此，很多中台的戰略都是至上而下的組織形態優化。

具體量化的時候，我們常常有兩個思路：1 中台能力被使用了的範圍和深度 ，例如API調用次數，業務使用量，依賴強度等 2. 中台説明那些業務提升了效率和效益，提升比例等。 量化這些指標常常是短期的行為，中台建設也包括一些創新的投資，以及中長期的數據能力沉澱。

3） 產品經理在中台戰略的新挑戰

大多產品經理喜歡參與2C的產品設計，小一部分產品經理深入2B的產品設計。 中台涉及很多技術邏輯，涉及到業務底層實現，涉及到公司多個部門的協同共贏，能夠勝任這種角色的產品經理，少之又少，大部分都是由研發主管兼任，或者是項目經理類似角色擔當。

中台產品經理比較靠近2B/2D的產品經理，但是更加面向內部多種業務，面向綜合效率提升，面向技術架構，也需要很強的商業化的思考。

4） 數據中台越來越重要

大部分公司都有獨立的數據平台團隊，但各業務線對數據都有自己的解讀。 在每一個時刻，數據中台需要有自己清楚的定位，這個定位需要讓所有業務都清楚瞭解。 如果定位有任何變化，這種變化需要提前通知到各個業務線。

現實中，各個業務線都會發展自己的數據應用能力，數據分析能力，這些分析需要定期的沉澱到數據中台。

5） 中台需要面向開發者，與理解數據邏輯的業務人員的。

中台不是華麗的界面和裝修，而是底層的脊樑和磚頭。 中台的能力，必須由業務團隊使用（邏輯上理解），程式師使用（利用API調用）。

如果中台直接面向業務的運營，很可能是不成功的。 因為，運營很多時候具有快節奏的變化，缺少穩定性，運營平臺更像是一種中台的上層應用。 另外，運營在使用中台時候，缺少工程師對於API的一些理解，也不利於中台的介面完善和發展。

前台團隊中有程式師，才能最大程度發揮中台的作用。

6） 中台是需要運營的，面向中台服務的技術運營，

運營可以成為中台和前臺的潤滑劑，保證前臺和中台之間的順暢。 在一些大型的公司，中台能力甚至需要一些主動的推廣，確保整個組織能夠真正從中台中收益，並且為中台也做貢獻。

無頭電商的技術方案

說了這麼多中台，看起來有些跑題了，回到無頭電商的一些技術，其中有些技術很多技術中台都可以採用。

1）CMS支援無頭電商的產品：

Contentful （非常流行， 基於 API 的內容管理系統 ）

Adobe Experience Manager （企業等級體驗管理平臺）

Amplience （企業級別體驗管理平台，支援無頭電商）

Acquia （企業等級體驗管理平台，支援無頭電商）

Kentico （中型內容管理平臺）

Sitecore （企業層級內容管理平臺）

Prismic （面向API的CMS）

Gatsby （基於react的PWA 框架）

Vuestorefront （基於vue.js的PWA 框架）

Deity （基於react.js的 PWA 框架）

2）持無頭電商的系統

CommerceTools

ElasticPath（用途比較廣的電商平臺，支持豐富API）

Moltin（主打API模式的電商平臺）

Magento （2018年5被Adobe收購，整合在Adobe Commerce Cloud中，支援與Adobe其它軟體整合）

BigCommerce（主打無頭電商）

SAP CX Commerce Cloud （優勢在後端 如CRM/ERP等，支援透過API模式與不同的前端整合）

OroCommerce （B2B的電商平臺）

Spryker

3） 無頭電商的 API 標準：

OCAPI (Open Commerce API)：

這個標準是Salesforce提供的電商API，漸漸成為電商行業的開放標準，Magento，SiteCore等系統能比較好支援這個協定。 Salesforce在對接標準和開放程度上走在行業領先地位，這也是大家看好它的重要原因。

JSS(Javascript Services)

SiteCore利用Javascript提供的API能力，SiteCore也越來越開放

4） 延伸性的前端技術：

JAMStack：

這是一個非常有趣的架構，企圖顛覆傳統三層架構：靜態 元素放在CDN上，動態數據利用Service/API進行交互。 JAMstack將複雜問題分解為動態和靜態部分。

PWA（Progressive Web Apps)

把網頁開發成像本地應用一樣的技術，可以媲美原生用戶體驗，包括離線可用，後台推送等功能。 類似微信的小程式技術，只不過PWA是瀏覽器裡的小程式。 PWA夢想很美好，現實很殘酷。 PWA的技術也在被各種平台內的技術所代替。

GraphQL:

一種面向API的理想主義查詢語言;傳統API需要嚴格規定參數和格式，GraphQL提供了一些API的查詢和歸一化能力，使得API開發更加方便和具有擴充性。 它比REST更加靈活。 一些都是介面，一切都是可描述的。

無頭電商的缺點/缺點

1） 複雜性的增加

單體模式依舊是最簡單模式，無頭電商將失去這種簡單，進入一個複雜的技術世界。 幸運的是，現在的軟體技術和雲技術都可以更好的處理這些複雜度，當然這也涉及到技術思維的升級。。

2）成本的增加

無頭電商的推廣和實施往往需要時間和耐心。 從經驗來看，無頭電子商務實施通常會產生成本開銷（由於需要更多開發）;集成也會更加複雜 ，其中會涉及到更多的第三方供應商。

那麼，如何管理這種複雜度和有效管理成本？ 有幾點可能會有説明：

1）加強數據團隊和雲技術人才，增強管理技術複雜度的能力

2）業務驅動的演化路徑，一步步的演化系統架構，更好的系統架構要更加快速嘗試更多的業務場景

3）積極利用公有雲基礎架構，少造輪子，持續優化

（本文為CSDN博主「互聯居」的原創文章）

知識星球

Shopify VS WooCommerce – 您有沒有想過自己創建一個跨境電商獨立站？ 或者是您有沒有想過自己搭建一個獨立網店？ 您是不是不知道該選擇使用Shopify還是WooCommerce來搭建一個獨立的跨境電商網店？

注意：閱讀完整文章，請點擊下方連結。

Shopify和WooCommerce是世界上2個頂級電子商務搭建平臺，也都有各自的優勢和劣勢。 那麼從賣家的角度出發，這兩大跨境電商獨立站建站平臺又有何不同？ 如何根據自己的業務需要做出選擇呢？

對於跨境電商獨立店鋪的運營人員來說，選擇正確的電商搭建平臺直接關係到跨境電商業務的成敗。

在這篇博文裡，苦心孤譯帶領您一起對Shopify和WooCommerce這兩個跨境電商獨立店鋪搭建平臺做一下詳細對比。 我們會把它們各自的優勢和劣勢詳細的掰扯掰扯，您也好根據相應的訊息選擇適合自己的電商搭建平臺。

本篇文章是關於Shopify和WooCommerce建站平臺的詳細對比說明，因此我們根據內容整理成了目錄，方便您閱讀。

Shopify VS WooCommerce綜述

• Shopify是什麼？
• WooCommerce是什麼？
• 創建跨境電商獨立店鋪需要注意什麼？
• Shopify VS WooCommerce – 建站成本對比
• Shopify建站的真實成本
• WooCommerce建站的真實成本
• Shopify VS WooCommerce建站簡易程度對比
• Shopify的建站簡易程度
• WooCommerce的建站簡易程度
• Shopify VS WooCommerce收款方式對比
• Shopify的收款方式
• WooCommerce的收款方式
• Shopify VS WooCommerce集成及擴展應用
• Shopify擴展外掛程式及集成應用
• WooCommerce擴展外掛程式及整合應用
• Shopify VS WooCommerce代發貨模式對比
• Shopify的待發貨模式
• WooCommerce的待發貨模式
• Shopify VS WooCommerce延伸性對比
• Shopify的延伸性
• WooCommerce的延伸性
• WooCommerce和Shopify的客服對比
• Shopify的客服情況
• WooCommerce的客服情況
• Shopify VS WooCommerce SEO情況對比
• 在Shopify上如何實現SEO
• WooCommerce店鋪如何實現SEO
• Shopify和WooCommerce的常見問題
• 可以免費使用WooCommerce或Shopify嗎？
• 網站從WooCommerce遷移至Shopify簡單不簡單？
• 網站從Shopify遷移至WooCommerce簡單不簡單？
• Shopify VS WooCommerce 區別是什麼？
• Shopify要比WooCommerce好用嗎？
• 在WooCommerce上是否可以使用Shopify的相關外掛程式？
• Shopify是最好的電商建站系統嗎？

Shopify VS WooCommerce綜述

在我們深入對比Shopify和WooCommerce這兩個最受歡迎的電商網站搭建平臺之前，我們有必要對這兩個平臺有個大致的瞭解，同時我們也需要了解它們各自最大的特色。

Shopify是什麼？

Shopify是一個集合了多種功能的電子商務網站搭建平臺。 賣家可以利用Shopify輕鬆創建一個網店，進行收款，並在同一個平臺管理商品的庫存情況。 賣家不需要擔心任何網站管理方便的技術，不需要為網站託管主機、網站的安全性和網站的緩存情況擔心。

WooCommerce是什麼？

WooCommerce是一款為WordPress開發的電子商務外掛程式，而且是一款開源外掛程式。 賣家可以利用WordPress這個世界上最為強大的內容管理系統，再結合WooCommerce這款電商專用外掛程式，創建功能強大的電商網站。 此外，由於WordPress的開源性特徵，還有很多WooCommerce相關的擴展外掛程式，可以大大強化電商網站的功能。

這兩個電商搭建平臺到底選哪個，其實取決於個人的需要和技術門檻。

創建跨境電商獨立店鋪需要注意什麼？

在創建跨境電商獨立店鋪的時候，有些重要東西需要我們謹記。 這些東西將幫助我們在Shopify和WooCommerce中間選擇適合自己的平臺。

• 預算 – 搭建一個功能齊全的跨境電商獨立店鋪最開始的成本有多少。
• 建站簡易程度 – 對小白來說也應該非常容易上手。
• 收款方式 – 應該支持多種收款方式，比如PayPal，Stripe，比特幣，支付寶等。
• 可整合性 – 可以繼承第三方平臺工具增加網站功能
• 延伸性 – 隨著業務增多，平臺的延伸性是否廣闊。

這些只是跨境電商獨立店鋪必須要考慮的因素。 但是具體還要看個人情況，或許您還需要類似快遞訊息、庫存管理、發票、稅務以及代發貨等功能。

本篇文章的目的就是深入探究Shopify和WooCommerce在跨境電商獨立店鋪基本功能方面的表現。

Shopify VS WooCommerce – 建站成本對比

建站成本通常是電商網站建站人員要考慮的最重要的因素。 建站人員需要評估啟動成本，同時還要考慮各種附加服務和軟體的成本，而這部分成本往往是不確定的。

Shopify建站的真實成本

使用Shopify搭建跨境電商獨立店鋪入手比較簡單，他們的基礎套餐是每個月29美元，大約是每個月170元人民幣。 如果要升級套餐，還可以選擇每個月79美元的，或者是299美元的高級Shopify套餐。

這裡每個套餐都包含了功能變數名稱、SSL證書和網路主機。

Shopify的基礎套餐的功能已經足夠搭建一個跨境電商獨立店鋪了，商品不限量，2個用戶帳號，檔存儲空間也不限量。

但是這個價格並不包括第三方工具以及擴展應用，而這些可以將我們的跨境電商獨立店鋪性能提升至新水準。 隨著業務的不斷擴張，我們需要支付的費用也越來越多。

收款是跨境電商獨立店鋪要考慮的最最重要的因素，Shopify有自己的收款方式，但會從每筆交易額里扣除2.9%的成本和30美分的傭金。

如果您想使用類似支付寶收款這種第三方收款方式或者用個人帳戶收款，Shopify會從所有交易額中抽取2%的固定費用。 如果使用Shopify的高級套餐每個月會花費299美元（每個月2000人民幣），但每筆交易額中抽取的費用會降低至0.5%。

使用Shopify之外的收款方式，需要支付高額費用。 但是如果您剛剛入手Shopify，費用跟Stripe和Braintree差不多。

WooCommerce建站的真實成本

WooCommerce是一個電子商務類外掛程式，屬於開源外掛程式，在WordPress外掛程式目錄裡也屬於免費外掛程式。

但是，我們需要一個功能變數名稱、SSL證書和一個WordPress虛擬主機帳戶來創建WooCommerce跨境電商網店。

一個功能變數名稱的費用一般是每個月14.99美元（約100人民幣），SSL證書每月是69.99美元虛擬主機的費用大概是每個月7.99美元。 聽起來挺嚇人，但其實有很多個虛擬主機供應商都推出了專門針對WooCommerce的虛擬主機租賃套餐，可以大大降低這個成本。

SiteGround是一款WordPress官方和WooCommerce外掛程式同時推薦的虛擬主機，有專門的WooCommerce 虛擬主機套餐。 而且這個套餐還整合了功能變數名稱註冊、SSL證書、功能變數名稱郵箱、網站備份等功能。 您可以在苦心孤譯部落格站上找到如何在SiteGround搭建WordPress網站這篇教程。

現在使用SiteGround來搭建跨境電商獨立店鋪的起價只有每個月3.95美元（約28元）。

用SiteGround主機搭建跨境電商獨立站

從上面的數據看，用WooCommerce搭建跨境電商獨立店鋪的成本要比用Shopify搭建低得多。 而且，WooCommerce不會從您的交易額里抽取費用，這一點是Shopify沒法比的。

但是WooCommerce建站的成本也可能會隨著下一步購買擴展外掛程式增加，跨境電商獨立店鋪在虛擬主機上的託管費用也可能會隨之增加。

但是，用WooCommerce搭建跨境電商獨立店鋪一個很明顯的優勢 –站長可以隨時找到付費外掛程式的免費替代外掛程式。 即使是要購買擴展外掛程式和工具，我們只購買能用得上就可以了。

何況，還有很多支援WooCommerce外掛程式的WordPress主題同時整合了這些付費外掛程式，而且這些主題費用也不高，常見的付費主題最多也只有79美元一年，常見的優質主題一般在59美元一年，甚至有些主題屬於一次性交易，後續不需要再更新（一年約400元人民幣）。 此外，還有WooCommerce外掛程式還有很多免費WordPress主題和免費擴展外掛程式做背書。 就成本而言，用WooCommerce搭建跨境電商網站絕對是首選。

Shopify VS WooCommerce建站簡易程度對比

其實，很多經營跨境電商獨立店鋪的人都不是專業的網站設計師或開發人員。 即便是一些熟悉基本建站概念的使用者也需要找到容易上手的建站平臺。

這裏我們就針對建站簡易程度對Shopify和WooCommerce做一下比較。

Shopify的建站簡易程度

Shopify是一個完全託管的平臺，也就是說個人賣家不需要安裝管理任何軟體，更不需要更新軟體。 網站的安全性、性能、網站的備份和相容性問題也不需要考慮。

一旦在Shopify上註冊，他就會説明您設計網站，進行網站個人定製，最後説明你添加商品。

Shopify創建頁面屬於拖拽式創建，所以比較直觀。 在Shopify中管理商品和庫存已經銷售都比較簡單。

但是這種引導式並高度優化的使用者體驗是Shopify 限制了個人賣家對店鋪的掌控能力，個人賣家只能使用Shopify以及Shopify擴展應用提供的設計工具和開發工具。

但是，對於大多數用戶來說，Shopify提供的大量擴展應用和主題已經足夠讓跨境電商網站起步了。

WooCommerce的建站簡易程度

WooCommerce不想Shopify，它不是一個託管平臺。 也就是說，您需要安裝WooCommerce，保持WooCommerce外掛程式的更新和備份，而且需要保護自身網站的安全性。 但是，有很多免費和付費的外掛程式都能達到這種目的。

WooCommerce在個人定製方面特別靈活，個人賣家完全可以掌控整個網站。 而且WordPress的外掛程式目錄有5.5萬多個外掛程式，可以大大強化跨境電商獨立店鋪的功能。 舉個例子，個人賣家可以使用WordPress人工智慧外掛程式給自己的店鋪賦予人工智慧的功能。

但WooCommerce這款外掛程式沒有內置的拖拽式設計工具，但我們可以使用Elementor（也有付費版）、Beaver Building和Visual Composer（付費外掛程式）這樣的拖拽式建站工具來設計網頁。

伴隨著WooCommerce靈活性的是站長需要熟悉不同的擴展應用，也就是說有一個學習曲線。 此外，站長還需要註冊一個外幣收款帳戶，比如說PayPal和Payoneer。 雖然WooCommerce外掛程式的安裝嚮導可以説明賣家進行基礎設置，但是要比Shopify有難度。

Shopify VS WooCommerce收款方式對比

跨境電商的收款方式有很多，可能有些適合您，有些不適合您。

因此，收款方式在某種程度上也決定了您選擇Shopify還是WooCommerce來搭建跨境電商網店。 我們來看一下這兩個工具在支付閘道整合方面的對比情況。

Shopify的收款方式

Shopify提供的收款方式比較多，賣家可以選擇一些收款方式來接收款項。 Shopify自帶的收款方式叫Shopify Payment，它是由Stripe團隊做的。 另外，賣家還能使用第三方收款應用來接收外幣。

但是Shopify會對使用第三方收款方式產生的交易額另外收取2%的費用。 意思就是第三方收款方式本身會收取一定的費用，除此之外，Shopify還會收取2%。 如果使用Shopify的高級套餐，也就是每個月299美元的話，收取的這2%會降到0.5%。

Shopify自帶的收款方式會收取統一的信用卡費用，但除此之外就沒別的費用了。 而Shopify 的基礎套餐的信用卡費是在2.9%再加上30歐元。

WooCommerce的收款方式

WooCommerce這款外掛程式自帶有PayPal和Stripe收款功能，同時通過擴展外掛程式的方式支援所有流行的收款方式。

就收款方式來說，WooCommerce甚至還支援帶有區域特色的稀有收款方式。 因為WooCommerce這款電商外掛程式屬於開源性應用，因此所有從事收付款業務的公司都可以在WooCommerce外掛程式的基礎上開發自己的收付款應用。

使用WooCommerce這款外掛程式的話，收款過程中涉及到的服務費收取方只有銀行或選擇的收款方式供應商。 WooCommerce本身是免費的，不會收取任何費用。 這是最大的優勢。

如果用自己的企業帳戶或第三方收款工具收款，用WooCommerce會節省很多錢。 對小企業來說，如果不在乎Shopify收取的額外費用，那麼這兩種收款方式對賣家來說沒什麼差別。

Shopify VS WooCommerce集成及擴展應用

不管自己的跨境電商獨立網店在哪個平臺上搭建的，通常我們都需要使用一些第三方工具和應用來強化店鋪的功能。 比如說我們可能需要實現電子郵件行銷功能、網站內部數據分析功能、吸引流量所用的工具。

Shopify和WooCommerce都有各自相應的擴展外掛程式目錄，也都跟第三方服務相關聯。

Shopify擴展外掛程式及集成應用

Shopify提供了功能強大的應用程式介面和應用商城，賣家可以在應用商城裡購買第三方擴展應用。 應用商城包含了成千上萬的App，功能幾乎涵蓋所有方面。

在入站流量方面，Shopify整合了類似OptinMonster這款外掛程式，它可以説明賣家收集整理網站訪客的郵件地址，然後有針對性地增加購物車的成交率。 此外，在SEO、商品評論、打折、限時銷售方面都有相應的應用。

Shopify的應用商店裡有免費應用程式，也有付費版的應用程式。 免費的應用程式一般是由第三方服務供應商創建的，他們有自己的定價，這類應用一般是將店鋪跟他們的API綁定。 而付費版的擴展應用價格就有多有少了，不過大部分應用都屬於按月收取訂閱費用的應用。

WooCommerce擴展外掛程式及整合應用

WooCommerce這款電子商務網站專用外掛程式屬於開源外掛程式，是在WordPress這個建站程序基礎上創建的。 賣家可以利用55000多個免費的外掛程式和更多的付費外掛程式來強化跨境電商獨立店鋪的功能。

賣家完全可以使用這些擴展外掛程式來實現收款、流量引入、SEO、速度及性能優化（參考WordPress網站加速終極教程）等功能。

WooCommerce外掛程式的入門門檻較低，因此WooCommerce比Shopify的擴展外掛程式和應用數量更多。 幾乎所有的第三方服務提供者都有自己開發的外掛程式，而且可以跟WooCommerce完美相容。

賣家還可以雇一個專業的開發人員給自己的網店單獨創建外掛程式。 WooCommerce就個人化定製來說，要比Shopify更加方便。 國外的wpbeginnner曾經給WordPress外掛程式目錄和Shopify的應用商店都提交過自己設計的外掛程式和應用，他們得出的結論是在Shopify上提交更加困難一些。 因此，就延伸外掛程式和整合應用來說，WooCommerce 更加強大。

Shopify VS WooCommerce代發貨模式對比

待發貨模式在國外有一個專業術語叫Dropshipping，指的是賣家不備貨也不需要管理商品庫存，他們只需要把訂單發給批發商或廠家，由廠家或批發商直接發貨給買家，然後自己從中賺取外掛程式的模式。

代發貨這種跨境電商模式開銷比較低，因此這種模式也已經慢慢風靡全球了。 我們接下來就來看看Shopify和WooCommerce在代發貨模式方面的差異。

Shopify的待發貨模式

剛從事代發貨這種模式的生意時，自己網站的前端必須要跟其他網店一樣，網站里應該包括購物車、支付方式、商品頁面、商品篩選等功能。

首先選擇供貨商，然後再把自己網上的訂單交給供貨商。

Shopify裡面代發貨方面的外掛程式包括了商城類的速賣通（AliExpress）、Oberlo以及Printify等應用。 但是，上面的這幾個平臺都由各自的會員費、快遞費以及其他費用。 在用Shopify搭建跨境電商獨立店鋪時，需要對不同應用收取的費用進行深入瞭解。

WooCommerce的待發貨模式

WooCommerce也是搭建代發貨類跨境電商網站的熱門選項，這主要是因為WooCommerce這款外掛程式有很多能實現代發貨的相關擴展外掛程式。

網上有很多這類擴展外掛程式，賣家可以一鍵導入商品，然後在自己的網站上對訂單進行管理。 賣家甚至可以搭建一個類似Flipcart、Etsy這樣的跨境電商商城站，然後吸引其他賣家在自己的平臺上賣貨。

但是商品供應商或商品賣家一般對最低訂單量有要求，對會員費以及其他費用也有要求。 把商品添加到自己的WooCommerce店鋪時，應該注意這些費用。

Shopify VS WooCommerce延伸性對比

隨著業務的增長，隨之而來的可能是各種煩惱和挑戰。

Shopify和WooCommerce這兩個電商搭建工具都能處理大量的訂單和海量流量，但是略有差別，我們來看一下這兩個電商平臺在延伸性方面的對比情況。

Shopify的延伸性

Shopify會説明賣家解決技術方面的難題，賣家不需要擔心網站的性能、安全問題，當然也包含網站的延伸性。 如果業務開始增長，賣家需要做的就是花錢升級Shopify套餐。

Shopify的配置可以保證賣家在業務增長的情況下，不會存在因為故障停機的問題，也不用擔心網站的備份、升級和安全性問題。 另外，Shopify還會在Shopify Plus套餐里提供企業服務。

這種情況會減少業務增長帶來的一些問題，但是成本會上升，因此賣家需要選擇相應的套餐。

好處是賣家不需要另外雇傭技術團隊對網站進行管理和維護，這方面可以抵消一部分成本。

WooCommerce的延伸性

WooCommerce是一個完全託管的平臺，賣家需要自己維護網站的更新、備份，並保證網站不受攻擊。

隨著自己網站的流量越來越多，WooCommerce網站所在的虛擬主機套餐也需要升級。

但是，WooCommerce的優勢在於賣家有多重選擇來管理自己的店鋪，因為賣家可以完全掌控自己的店鋪。 比如說管理網站的緩存檔，或把網站伺服器套餐升級。

雖然WooCommerce跨境電商獨立店鋪的虛擬主機成本在上升，但是賣家可以更好地控制自己店鋪和成本。 賣家可以選擇獨立伺服器來託管自己的店鋪，比如WP Engine和Liquid Web的獨立伺服器就可以託管賣家的 WooCommerce 跨境電商獨立店鋪。

從店鋪的長遠發展來看，WooCommerce的延伸性更強。 賣家可以完全掌控自己的跨境電商獨立站，並對自己的電站進行個人化設置。 另外，如果您想讓自己的跨境電商獨立站擁有多種語言版本，只能使用WooCommerce來建站。

WooCommerce和Shopify的客服對比

雖然WooCommerce和Shopify的操作都比較簡單，但是有時賣家還是需要一些説明。 我們接下來看一下這兩個跨境電商獨立店鋪建站工具在客服上的對比情況。

Shopify的客服情況

Shopify是一個全託管式的跨境電商獨立店鋪建站平臺，所有軟體都由Shopify自己的來控制，因此他們對自己平臺上的應用比較瞭解。

Shopify可以為從事跨境電商業務的個人賣家提供全天候服務，支援服務通過即時聊天、電話聯繫、電子郵件以及Twitter為賣家提供説明。 Shopify平臺為賣家提供了豐富的幫助文檔、操作指南、知識庫、視頻教程，賣家還可以在論壇上跟其他人進行互動交流。

另外，Shopify還有自己的專家目錄，如果賣家需要説明或者需要集成第三方工具，還可以聘請這些專家來幫自己實現某些功能。

但是Shopify不給任何第三方應用或主題提供服務和支援。

WooCommerce的客服情況

WooCommerce是世界上最流行的電子商務建站平臺，也就是說如果賣家有需要，客戶服務和技術支援的途徑也很多。

光是WooCommerce外掛程式官方網站自己就有大量的幫助文檔和教程，賣家可以通過查閱學習這些技術資料自己解決問題。 WooCommerce還有自己的論壇，賣家可以進入論壇求教於其他WooCommerce用戶和專業人士。 實在不行，只需要花費很少的費用（比如說5美元）就能在Fiverr這樣的平臺臨時聘請一個WordPress方面的技術人員幫自己解決。

WooCommerce是一個全託管式建站工具，因此網站的虛擬主機供應商會説明賣家解決伺服器方面的問題。 這也是為什麼苦心孤譯向您推薦在跨境電商領域性能、穩定性、載入速度、客服支援方面表現最強勁的10 款虛擬主機。

WooCommerce電商網站上使用的主題和其他外掛程式也有相應的開發人員提供客服和技術支援。

因為WooCommerce這個外掛程式風靡全球，因此雇傭開發人員相對比較簡單，費用也比較低。 賣家可以在很多自由職業網站上來招募一些開發人員，解決WooCommerce跨境電商獨立網店的問題，比如說上面提到的Fiverr。

Shopify VS WooCommerce SEO情況對比

任何電商網站尤其是跨境電商網站需要特別注重網站的SEO效果。

在Shopify上如何實現SEO

SEO設計到方方面面，如果就這個問題來看，Shopify應該排在第二位。 Shopify在SEO方面支援最基礎的設置，但只要您的商品品質很好，一定能夠取得良好的效果和強大的使用者。

Shopify平臺的代碼比較乾淨，連結結構也比較自然，因此用戶體驗更加扁平，因此可以提高跨境電商獨立店鋪在搜尋引擎中的排名。

WooCommerce店鋪如何實現SEO

首先我們必須承認，文章類型的文章在Google上的排名普遍比較高，而WordPress恰好又專注於內容管理。

WordPress主要是一個內容創作平臺，很多SEO方面的專家都認為WordPress是很可靠的選擇。 在WordPress上搭建的網站在谷歌里排名靠前的幾率更高。

使用Rank Math這樣的WordPress外掛程式（參照最好的21款SEO外掛程式和工具）可以讓WordPress網站高度優化，賣家也可以對SEO的相關細節進行充分配置。

WooCommerce利用WordPress業內現存的網站優化工具對店鋪進行優化，免費的外掛程式比如上面提到的Rank Math，付費的外掛程式有SEOPress和Yoast WooCommerce SEO等。

總之，WooCommerce提供的SEO方案更多，畢竟WooCommerce是在WordPress的基礎上搭建的。 WooCommerce跨境電商獨立店鋪的運行速度究竟如何還是得看選擇的虛擬主機性能。

正因如此，苦心孤譯才向賣家推薦了SiteGround，GreenGeeks，ChemiCloud和Bluehost香港主機。 當然，您還可以查看我之前整理的國外十佳虛擬主機。

如果利用Shopify建站，賣家一般不用為網站的優化擔心，因為Shopify的團隊就能幫賣家搞定。

Shopify和WooCommerce的常見問題

很多使用者都在諮詢有關Shopify和WooCommerce的問題，苦心孤譯就常見的問題做了匯總，答案也附在下邊供大家參考。

可以免費使用WooCommerce或Shopify嗎？

賣家可以在14天內免費試用Shopify，隨後需要註冊付費套餐。 WooCommerce雖然免費，但賣家需要花錢租賃虛擬主機（參考全球10佳虛擬主機）、維護網站安全、註冊功能變數名稱等跟建站相關的問題。

網站從WooCommerce遷移至Shopify簡單不簡單？

您的跨境電商獨立店鋪從WooCommerce遷移到Shopify要比從Shopify遷移到WooCommerce簡單。 因為Shopify有自己的客服團隊可以説明賣家解決這些問題。 另外Shopify還有相關的幫助文檔和數據轉移的相關應用。

網站從Shopify遷移至WooCommerce簡單不簡單？

網站從Shopify遷移到WooCommerce的網站上不可能把所有的網站設計的內容都搬遷過來，但是資料庫和相關商品是可以遷移到WooCommerce網站上的。 苦心孤譯建議您找一下相關的教程，或者是找一下相關的WordPress外掛程式。

實現網站數據從Shopify到WooCommerce可以在您的WordPress網站上安裝Cart2Cart這款外掛程式。

Shopify VS WooCommerce 區別是什麼？

這兩個跨境電商獨立店鋪建站工具的區別主要是2方面：

掌控程度 – WooCommerce是一個開源工具，賣家可以完全掌控網站的伺服器、網站的維護、網站內部的外掛程式、網站的安全措施等。 Shopify會託管您的網站，但是您每個月都得付費。 這要看您如何選擇了。

內建的電商工具 – WooCommerce可以算是一個起點，但需要安裝一些外掛程式然後進行設置。 Shopify的設置更容易一些。