把 网页版API手册 搜索输入框的自动提示 植入到 ecplise 里 (MX framework)

有的公司可能会用到一些自己的 前端  框架,这个时候 我们使用 eclipse 开发 编写代码,往往是没有提示的 .

这个时候 只需有 网页版的 API 一般就能,通过一些技巧 提取出 templates 到 eclipse 中 变成自动提示.

这里以 mx framework 为例,介绍如何 把 网页版 API 手册输入框自动提示 >>> 转换为 开发中的 自动提示.

 

网页版手册目录结构:

在 上图中 scripts 目录中 有一个 索引文件 index.js

用 eclipse 打开后是 这个样子 :

一个 3W 多行的 json 对象.

 然后自己写了一个工具类,提取这些数据,转换为 templates.xml 文件

package template;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.FileReader;
import java.io.IOException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

public class WriteTemplate {
	// index.js 文件
	private static final File INDEX_JS;
	// index.js 转换后的字符串
	private static String INDEX_JS_STR;
	private static final String fileName = "index.js";
	static {
		// 初始化
		INDEX_JS = new File("sources/" + fileName);
		try (BufferedReader br = new BufferedReader(new FileReader(INDEX_JS))) {
			StringBuilder strBuilder = new StringBuilder();
			String temp = "";
			while ((temp = br.readLine()) != null) {
				strBuilder.append(temp.trim());
			}
			INDEX_JS_STR = strBuilder.toString();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	/** 把 index.js 中 json 字符串转换为  List<Map<String, String>> 对象的方法  */
	public static List<Map<String, String>> getList() {
		/** 1.首先去除掉开头的东西 >> var $_index = [ 和结尾的 >> ]; */
		INDEX_JS_STR = INDEX_JS_STR.replace("var $_index = [", "").replace("];", "");
		/** 2.根据 "{" 拆分字符串 得到 若干,保存在数组里 ↓↓↓  <br/>
		 * ps:最后的一条数据,会不带逗号 */
		// key: '$',
		// fullName: 'mx.controls.Control.$',
		// type: 'method'
		// },
		// 不加 // 会报错 >> Illegal repetition
		String[] arr = INDEX_JS_STR.split("\\{");
		/** 3.去除 一部分杂质 */
		for (int i = 0; i < arr.length; i++) {
			arr[i] = arr[i].replace("},", "").replace("}", "").trim();
		}
		/**
		 * 4.转为集合,需要一个新集合接收 <br/>
		 * 因为现集合里的元素是原数组的引用 然后 去除第一个空白元素 <br/>
		 **/
		List<String> listStr = new LinkedList<String>(Arrays.asList(arr));
		listStr.remove(0);
		// 集合里每一条数据的样子
		// key: '$',fullName: 'mx.controls.Control.$',type: 'method'
		/** 遍历转为为  ListMap */
		List<Map<String, String>> list = new LinkedList<Map<String, String>>();
		for (String str : listStr) {
			Map<String, String> tempMap = new HashMap<String, String>();
			String tempArr[] = str.split(",");
			//去除 单引号,此里面   需要转换为 map
			for (int i =0;i<tempArr.length;i++) {
				tempArr[i] = tempArr[i].replace("'", "");
//				key: $
//				fullName: mx.controls.Control.$
//				type: method
				String [] mapTemp = tempArr[i].split(":");
				for (int j = 0; j < mapTemp.length; j++) {
					tempMap.put(mapTemp[0].trim(), mapTemp[1].trim());
				}
			}
			list.add(tempMap);
		}
		return list;
	}
	
	/** 获取  List<Map<String, String>>,写入到 xml中 */
	private static void writeXML(List<Map<String, String>> list){
		try {
			/*
			 * 写出XML的大致步骤
			 * 1:创建一个Document对象表示一个空白文档
			 * 2:向Document中添加根元素
			 * 3:从根元素开始按照要生成的文档结构逐级
			 *   添加子元素及信息
			 * 4:创建XmlWriter
			 * 5:将Document通过XmlWriter写出以生成
			 *   XML文档  
			 */
			//1
			Document doc = DocumentHelper.createDocument();
			/*
			 * 2
			 * Document提供了添加根元素的方法:
			 * Element addElement(String name)
			 * 向当前文档中添加给定名字的根元素,并以Element
			 * 实例的形式返回,以便于继续向根元素追加信息.
			 * 需要注意,该方法只能调用一次,因为一个文档只能
			 * 有一个根元素.
			 */
			Element root = doc.addElement("templates");
			for(Map<String, String> m : list){
				//向根元素中追加子元素<emp>
				Element empEle = root.addElement("template");
				empEle.addText(m.get("fullName"));
				//向<template>中追加 name 属性
				empEle.addAttribute("name", String.valueOf(m.get("key")));		
				//向<template>中追加 description 属性
				empEle.addAttribute("description", String.valueOf(m.get("type")));		
			
				// 添加其他属性
//				<template autoinsert="true" context="javaScript" deleted="false"
//						description="测试" enabled="true" name="test">a greate test</template>
				empEle.addAttribute("autoinsert", String.valueOf("true"));		
				empEle.addAttribute("context", String.valueOf("javaScript"));		
				empEle.addAttribute("deleted", String.valueOf("false"));		
				empEle.addAttribute("enabled", String.valueOf("true"));		
			}
			//org.dom4j.io.XMLWriter
			XMLWriter writer = new XMLWriter(
				new FileOutputStream("mx-jacktu-templates.xml"),
				OutputFormat.createPrettyPrint()
			);
			writer.write(doc);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		writeXML(getList());
		System.out.println("写出完毕!");
		//然后 在,写完后的 xml 文件头,替换为 导出templates 文件一样的 说明标签  ↓↓
		//<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	}
}

通过这个工具类,刚才的 index.js 中的 json 字符串 就会变为 大概这样子的一个 xml 文件.

(这里是 自动对齐后的效果, 2w多行)

再然后 放到桌面 导入到 JavaScript 代码的 templates 中就可以了.

然后点击 OK,再 在 js 中编辑代码.就会有提示  比如 输入 mx.in 就会出现 mx.indicate 之类的提示.很晚了就不讲了.