[TOC] >[success] # 動態引入阿里圖標庫 最近項目中加入了給菜單**選擇圖標**的功能，因為用[阿里圖標](https://www.iconfont.cn/)的**鏈接方式**引入到項目中，如果想實現向下面一樣**展示阿里圖標庫所有的圖標**，有**2**種方法。 **第1種：單個去手動記錄圖標的class類名，整理成數組的形式進行在列表中循環**。 **第2種: 用ajax請求阿里圖標的鏈接，鏈接會返回一個JSON字符串的一大串icon的類名的數據，需要寫一個截取方法把所有class整合成數組的形式進行在列表中循環**  <br> >[success] ## 截取class類名方法 ~~~ /** * 獲取阿里圖標列表 * @param {String} url 阿里巴巴圖標URL */ getCssJson(url) { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { const css = JSON.parse(JSON.stringify(xhr.responseText)) let [,, ...iconArr ] = Object.keys(this.css2json(css)) // 去除掉class類名上的點 for(let i=0;i<iconArr.length;i++){ iconArr[i] = iconArr[i].replace('.','') } // 把遠程圖標跟本地圖標合并 this.iconArr = [...iconArr, ...localIconList] || [...localIconList] } } xhr.send() }, /** * 將CSS形式的字符串轉換為JSON * @param {String} css 字符串 */ css2json(css) { // 移除CSS所有注釋 let open //開始注釋 let close //結束注釋 while ((open = css.indexOf('/*')) !== -1 && (close = css.indexOf('*/')) !== -1) { css = css.substring(0, open) + css.substring(close + 2) } // 初始化返回值 let json = {} while (css.length > 0) { // 存儲第一個左/右花括號的下標 const lbracket = css.indexOf('{') const rbracket = css.indexOf('}') let declarations = css .substring(lbracket + 1, rbracket) .split(';') .map(e => e.trim()) .filter(e => e.length > 0) // 移除所有""空值 // 轉為Object對象 declarations = this.toObject(declarations) let selectors = css .substring(0, lbracket) .split(',') .map(selector => { //去掉偽類 const signBracket = selector.indexOf(':') if (signBracket === -1) { return selector.trim() } else { return selector.substring(0, signBracket) } }) // 迭代賦值 selectors.forEach(selector => { // 若不存在，則先初始化 if (!json[selector]) json[selector] = {} // 賦值到JSON Object.keys(declarations).forEach((key) => { json[selector][key] = declarations[key] }) }) // 繼續下個聲明塊 css = css.slice(rbracket + 1).trim() } // 返回JSON形式的結果串 return json }, toObject(array){ //?輔助方法：將array轉為object let?ret?=?{} array.forEach(e?=>?{ const?index?=?e.indexOf(':') const?property?=?e.substring(0,?index).trim() const?value?=?e.substring(index?+?1).trim() ret[property]?=?value }) return?ret } ~~~