xmlplus組件設計系列之表徵圖（ICON）(1），xmlplusicon

xmlplus組件設計系列之表徵圖（ICON）(1），xmlplusicon

網頁上使用的表徵圖分可為三種：檔案表徵圖、字型表徵圖和 SVG 表徵圖。對於檔案表徵圖，下面僅以 PNG 格式來說明。

PNG 表徵圖

對於 PNG 表徵圖的引用，有兩種方式。一種是直接由 HTML 元素 img 的 src 屬性給出。下面是一個簡單的樣本。

Icon: {  css: "#icon { width: 68px; height: 68px; }",  xml: "<img id='icon'/>",  fun: function (sys, items, opts) {    this.attr("src", this + ".png");  }}

這裡假定表徵圖檔案與組件所在檔案在同級目錄中，於是可以按如下的方式便捷地引用所需的表徵圖。注意組件 Icon 巧妙地使 id 屬性值與圖片檔案名稱關聯，這樣可以避免建立額外的屬性。

Example: {  css: "#example > * { padding: 10px; background: #F9F9F9; }",  xml: "<div id='example' class='bs-example'>\      <Icon id='msg'/>\      <Icon id='home'/>\      <Icon id='contact'/>\     </div>"}

另一種引用 PNG 表徵圖的方式是給相應的對象添加 background-image 樣式，並且由樣式中給出表徵圖所在路徑。下面是一個簡單的樣本。

Icon: {  css: "#icon { width: 68px; height: 68px; }",  xml: "<div id='icon'/>",  fun: function (sys, items, opts) {    this.css("background-image", this + ".png");  }}

這種形式與前面由 img 標籤給出的表徵圖有許多相似之處。不同的是，前者動態指定的是 img 標籤的 src 值 ，而後者動態指定的則是 div 元素的 css 樣式。該組件與前面給出的 Icon 組件的使用方式完全一致，這裡就不重複了。

對於以上給出的組件 Icon，使用的是離散的表徵圖檔案。實際應用中，通常給出的是一個包含許多表徵圖的 PNG 檔案。這種情況下該如何構建表徵圖組件呢？請看下面給出的一種較為實用的方案。

Icon: {  css: "#msg { background-position: 0 0; }\     #home { background-position: -48px 0; }\     #contact { background-position: -96px 0; }\     #icon { width: 68px; height: 68px; background-image: url(icons.png); }",  xml: "<div id='icon'/>",  fun: function (sys, items, opts) {    sys.icon.addClass("#" + this);  }}

此組件在樣式項 css 中直接給出了表徵圖檔案所在路徑，以及各種表徵圖在檔案內的位置。並且表徵圖執行個體 id 與相應表徵圖類名對應。當然，組件的使用方式與前面給出的組件是一致的。

下面給出的是另一種組件設計方案，它把位置資訊移到了函數項中。此方案是可行的，但組件的執行效率不如前者。該組件每次執行個體化都要產生位置資訊一次，而對於前者，由於樣式項在組件執行個體化時，僅產生一次，所以保證了組件的執行效能。

Icon: {  css: "#icon { width: 48px; height: 48px; background-image: url(icons.png); }",  xml: "<div id='icon'/>",  fun: function (sys, items, opts) {    var positions = {      "msg": "0 0",      "home": "-48px 0",      "contact": "-96px 0"    }    sys.icon.css("background-position", positions[this]);  }}

字型表徵圖

字型表徵圖通過引入包含表徵圖的字型檔，將表徵圖像文字一樣使用。它與 PNG 表徵圖相比，最關鍵一點在於它的向量性。字型表徵圖的引用方式有兩種：通過類名的引用方式以及直接引用 unicode 的方式。

通過類名引用

這種類型的表徵圖內容定義在樣式項中，HTML 元素通過類名進行關聯。

Msg: {  css: "#msg { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }\     #msg:before { content: '\\e608'; }",  xml: "<div id='msg'/>"}

直接引用unicode

這種引用方式與前一種在本質上沒什麼不同，它只是將表徵圖內容由樣式項轉移到視圖項中而已。

Home: {  css: "#home { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }",  xml: "<div id='home'><div/>"}

下面給出的樣本展示了兩種不同的引用字型表徵圖的方式。注意，此樣本簡化了樣式項中與相容性相關的內容，詳情請查閱配套源碼。

Example: {  css: "@font-face { font-family: 'iconfont'; url('iconfont.ttf') format('truetype');}\     #msg, #home { font-family: 'iconfont'; font-style:normal; }\     #example > * { display: inline-block; padding: 10px; background: #F9F9F9; }",  xml: "<div id='example'>\      <Msg id='msg'/>\      <Home id='home'/>\     </div>"}

SVG 表徵圖

最後來看看我們的重頭戲，如何封裝以及使用 SVG 表徵圖。在 xmlplus 中，SVG 表徵圖是推薦的表徵圖使用形式，它允許直接內嵌程式碼，無需額外引用相關檔案。

通過 xlink:href 引用

對於這種方式，首先你需要一個 svg 表徵圖集，其包含的內容大概是下面這樣子。

<svg>  <symbol id="icon" width='48px' height='48px' viewBox='0 0 24 24'>    <g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\  </symbol>  <!-- 還可以有更多的symbol --></svg>

svg 表徵圖集有兩種存在方式，一個是以檔案形式存在，這時 xlink:href 屬性值需要明確指明檔案的 url，下面是一個樣本。

<svg>  <use xlink:href='http://example.com/file.svg#icon'/>\</svg>

另一種形式是，表徵圖集直接存在於頁內，這種方式叫做頁內引用，它無需指明 url，只要指定相應 symbol 的 id 就好了。

<svg>  <use xlink:href='#icon'/>\</svg>

對svg 表徵圖的直接封裝

相對於通過 xlink:href 引用表徵圖，使用 xmlplus 的組件化技術直接封裝會是一種更好的方式。請看下面的一個 SVG 表徵圖組件。

Icon: {  xml: "<svg width='48px' height='48px' viewBox='0 0 24 24'>\      <g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\     </svg>",  fun: function (sys, items, opts) {    this.attr("fill", '' + this);  }}

這是一個鉤形表徵圖，組件中僅包含視圖項以及函數項成份。根據函數項的內容可以知道，表徵圖顏色由組件執行個體的 id 屬性值給出。下面來看看如何使用該表徵圖。

Example: {  css: "#example > * { padding: 10px; background: #F9F9F9; }\     #example > *:hover { fill: #fff; background: #563d7c; }",  xml: "<div id='example'>\      <Icon id='red'/>\      <Icon id='green'/>\      <Icon id='blue'/>\     </div>",  fun: function (sys, items, opts) {    sys.example.on("click", "*", e => console.log(this + " clicked"));  }}

此樣本展示了三個不同顏色的表徵圖，並且偵聽了表徵圖的點擊事件，開啟瀏覽器控制台，當點擊不同表徵圖時，可以看到相應的輸出。

另外，有一種常見的 SVG 表徵圖的封裝方式，它把 SVG 文本經過 URL 編碼後直接在 img 的 src 屬性或者樣式 background-image 中給出。就像下面這樣子。

Icon: {  css: "#icon {width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...")},  xml: "<div id='icon'/>"}

這種方式與上一種方式比起來，有兩個缺點：其一，你看不出 SVG 的源檔案。其二，你失去了對 SVG 表徵圖的操作權。當然，這種方式也並非不能用。如果你不需要對表徵圖進行後續的操作，使用這種方式也是可以接受的。另外，與之相似的一種表徵圖使用方式是對表徵圖 base64 編碼後的內嵌引用。下面是一個簡單的示範：

Icon: {  xml: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />"}

這種方式與上一種 SVG 表徵圖的封裝方式是類似的。不過相對於 SVG 表徵圖組件的直接封裝，你同樣失去了對表徵圖的操作權。

本系列文章基於 xmlplus 架構。如果你對 xmlplus 沒有多少瞭解，可以訪問 www.xmlplus.cn。這裡有詳盡的入門文檔可供參考。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。