[發明專利]基于視覺、組件、圖標的前端開發系統

在審

• 申請號: 201710664206.8
• 申請日: 2017-08-03
• 公開（公告）號: CN108334343A
• 公開（公告）日: 2018-07-27
• 發明（設計）人: 吳留坡;葛加文;丁誠;程波;殷玉華;湯嚴敏
• 申請（專利權）人: 千尋位置網絡有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 上海市海華永泰律師事務所 31302
• 代理人: 包文超

本發明提供了一種基于視覺、組件、圖標的前端開發系統，分為三個內容：樣式視覺庫、組件庫和圖標庫。樣式視覺庫主要提供樣式和視覺服務，比如按鈕、文字、鏈接的樣式，顏色的分類等等一切跟視覺相關的元素。組件庫主要是將一些通用的模塊化組件抽象提供統一出口服務。比如表單組件、切換組件等等。圖標庫將事先準備好的svg文件通用技術手段生成字體文件，然后再通過webfont技術在頁面中使用字體，使用圖標確定的css樣式名來展示某一個圖標。本發明糅合了前端開發過程中需要的視覺、組件、圖標等服務，提供企業級的定制化一站式服務。

技術領域

本發明涉及前端開發技術領域，具體涉及一種基于視覺、組件、圖標的前端開發系統。

背景技術

隨著公司業務發展，需要自有一套公共視覺、組件、圖標庫，旨在統一網站項目的前端UI(用戶界面)設計，屏蔽不必要的設計差異和實現成本，解放設計和前端的研發資源。

現有的Bootstrap是一個用于快速開發Web應用程序和網站的前端框架。Bootstrap基于HTML、CSS、JavaScript。Bootstrap提供了一個帶有網格系統、鏈接樣式、背景的基本結構。Bootstrap自帶以下特性：全局的CSS設置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的網格系統。另外，Bootstrap包含了十幾個可重用的組件，用于創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在布局組件部分詳細講解。Bootstrap包含了十幾個自定義的jQuery插件，用戶可以直接包含所有的插件，也可以逐個包含這些插件。

其中，HTML、CSS、JavaScript解釋如下：

HTML：超文本標記語言(Hyper Text Markup Language)，是一種用于創建網頁的標準標記語言

CSS：層疊樣式表(Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

JavaScript：JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML(標準通用標記語言下的一個應用)網頁上使用，用來給HTML網頁增加動態功能。

此外，Pure.CSS也是一套可用于Web項目的小型響應式CSS模塊，包含多個模塊：Base(基本樣式)、Grids(網格系統)、Forms(表單)、Buttons(按鈕)、Tables(表格)、Menus(菜單)。

Foundation的網格流式布局跟Bootstrap差不多，默認不帶圖標集，它推薦使用開源字體圖標來實現ICON，好處是可以通過字體大小來調節圖片大小。

但是上述現有技術基本上都是面向開源，各套件較通用，存在無法滿足公司定制化需求的問題。

發明內容

本發明主要為前端開發時客戶端UI層面提供通用解決方案，解決了以下技術問題：

1、抽象與業務無關的通用視覺UI及組件，為各個業務線對應的前端工程提供服務。

2、把有一些與具體業務強相關的模塊抽象成業務組件，比如頁面母版、頁頭導航、頁腳導航等等，為各個業務線對應的前端工程提供服務，方便復用。

3、在前端開發過程中，會需要各種各樣的圖標。提供通用的字體圖標服務，為各個業務線對應的前端工程提供服務，同時還提供圖標顏色變換、大小變換、動畫特效、版本化管理，免發布更新圖標庫等特性。

本發明采用的技術方案是：