[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 } ~~~