第二章 相關研究與技術背景
2.5 前端頁面技術
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 2-12 反向索引示意圖
在反向索引中，關鍵字的數量並非隨著文本內容的增長也線性增長。這因為 不論多大數量的文本資料庫，總能規範出一個關鍵詞表，它的增長率在文本資料 庫達到一定規模後可以忽略不計。
而在索引系統從建置索引到進行檢索時，在這整個過程中，最消耗時間的應 該倒排階段。因為在倒排時，需要對文本進行分析，斷詞，還要構建索引結構，
記錄位置資訊。雖然這一階段花時間，但是一旦完成，在搜尋時將會大大節省時 間。故搜尋速度才是影響用戶最終體驗的直接因素。
2.5 前端頁面技術
前端頁面在本研究之成果系統中扮演著關鍵重要的角色，因此簡潔的版面以 及順暢的操作流程都是前端頁面必須具備的基本要素，舉凡現今有許多的網站開 發工具都非常方便開發者使用，而其中 ORACLE 推出的 JAVA 更包含有一整套的
‧
如 jQuery[4]及 JAVA 的前端框架 Spring[5]等讓頁面呈現能更豐富完整。另外本研 究相關統計圖表也使用了百度所開發的 JavaScript 的圖表套件 ECharts[7]，以便將 相關統計數值以圖形視覺化的方式呈現。2.5.1 Spring
Spring 的核心是個輕量級（Lightweight）容器（Container），實現了 IoC
（Inversion of Control）模式的容器，基於此核心容器所建立的應用程式，可以達 到程式元件的鬆散耦合（Loose coupling），讓程式元件可以進行測試，這些特性 都使得整個應用程式可以在架構上與維護上都能得到相當程度的簡化，其特色如 下：
輕量級（Lightweight）：Spring 的核心在檔案容量上只有不到 1MB 的大小，
而使用 Spring 核心所需要的資源也是很小的，Spring 是個非侵入性
（Nonintrusive）框架，它的目的之一，是讓應用程式不感受到框架的存在，減 低應用程式從框架移植時的負擔。
容器（Container）：Spring 核心本身是個容器，管理物件的生命週期、物件 的組態、相依注入等，並可以控制物件在創建時是以原型（Prototype）或單例
（Singleton）的方式來建立。
IoC（Inversion of Control）：Spring 的核心概念是 IoC，更具體而易懂的名詞 是依賴注入（Dependency Injection），使用 Spring，自己不需在程式碼中維護物 件的依賴關係，只需在組態檔中加以設定，Spring 核心容器會自動根據組態將依 賴注入指定的物件。
持久層：Spring 提供對持久層的整合，如 JDBC、O/R Mapping 工具
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
（Hibernate、iBATIS）、事務處理等。
Web 框架：Spring 也提供 Web 框架的解決方案，但也可以將自己所熟悉的 Web 框架與 Spring 整合，像是 Struts、Webwork 等，都可以與 Spring 整合而成為 適用於自己的解決方案。Spring 運作架構如下圖 2-13：
圖 2-13 Spring 運作架構 引用來源:
http://www.jcombat.com/spring/architecture-spring-framework
2.5.2 jQuery
jQuery 是一套跨瀏覽器的 JavaScript 函式庫，簡化 HTML 與 JavaScript 之間的 操作。由約翰·雷西格（John Resig）在 2006 年 1 月的 BarCamp NYC 上釋出第一
‧
取最高的網站中有 65%使用了 jQuery，是目前最受歡迎的 JavaScript 函式庫。透過 jQuery 可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM
延伸性（Extensibility）
工具：例如瀏覽器版本（已取消內建，改由 jQuery Migrate plugin 外掛提供）
和 each 函式。
JavaScript 外掛模組
輕量級
2.5.3 ECharts
ECharts 是百度公司用 JavaScript 所撰寫的一個圖表函式庫, 能夠很簡單便 捷的在 Web 網站添加豐富、漂亮、互動式的圖表，ECharts，縮寫來自 Enterprise Charts，商業級數據圖表，一個純 JavaScript 的圖表庫，可以流暢的運行在 PC 和 移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11， chrome，firefox，
Safari 等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可高度個
12 DOM 文件物件模型(Document Object Model) 是 HTML，XML 和 SVG 文件的程式介面。它提 供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方 法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大 大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區 域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K 線圖、餅圖（環形圖）、雷達圖
（填充雷達圖）、和弦圖、力導向佈局圖、地圖、儀錶盤、漏斗圖、事件河流圖 等 12 類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工 具箱等 7 個可交互組件，支持多圖表、組件的聯動和混搭展現。ECharts 架構如 下圖 2-14：
圖 2-14 ECharts 架構圖 引用來源:
http://echarts.baidu.com/echarts2/doc/doc.html
2.5.4 Bootstrap
Bootstrap 原名 Twitter Blueprint，由 Twitter 的 Mark Otto 和 Jacob Thornton 編寫，它簡潔靈活，使得 Web 開發更加快捷。Bootstrap 是一組用於網站和網路
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
應用程式開發的開源前端（所謂「前端」，指的是展現給終端使用者的介面。與 之對應的「後端」是在伺服器上面執行的代碼）框架，包括 HTML、CSS 及 JavaScript 的框架，提供字體排印、表單、按鈕、導航及其他各種元件及 JavaScript 擴充套件，讓在使動態網頁和 Web 應用的開發更加容易。