前端脚本实现json文件展示和搜索

前端小白的随手一记，希望能帮助有需要的人 。实现的功能就是展示不同环境中，项目配置文件的差异，其实主要展示记录差异的json文件,效果是这样的:

实现的功能点：

1.读取指定json文件的数据

2.以jsonview的形式展示记录差异的json文件

3.左侧菜单栏列出涉及到的所有应用，并按字母排序

4.点击左侧菜单任一项，页面滚动至对应详情位置

5.左侧菜单栏提供搜索功能，搜索到指定应用，并滚动到对应详情位置；不存在的应用给出alert提示

6.页面右下角提供‘回到顶部’按钮，可以快速回到顶部

功能点1：

获取链接（http://xxxx.xx.xx/warning.html?file=1669799387.json）中file的值

         /**
         * 获取参数的键值对对象。
         * @returns {Object}
         */
        var getParam = function () {
            try{
            var url = window.location.href;
            var result = url.split("?")[1];
            var keyValue = result.split("&");
            var obj = {};
            for (var i = 0; i < keyValue.length; i++) {
                var item = keyValue[i].split("=");
                obj[item[0]] = item[1];
            }
            return obj;}catch(e){
                console.warn("There has no param value!");
            }
        };
        /**
         * 页面加载完毕打印键值对对象
         */
        window.onload = function () {
            console.log(getParam());
        }

getParam().file就可以获取到链接中file的值1669799387.json，这样就可以指定源数据了

功能点2：

在写一些简单的html时，需要从本地json文件读取数据展示，最后找到了以下方式：

    //getParam().file可以是json文件的相对路径（或绝对路径）
    $.getJSON(getParam().file, function(json) {
    	for(var key in json){
    	    document.write('<h3>标题3</h3><div><pre id="test"></pre></div>'.replace("test",key).replace("head",h));
    	    j = JSON.stringify(json[key]);
    	    $("#"+h).html(key);
            $("#test".replace("test",key)).JSONView(j);
    	};

});

function(json)中的json是object类型，知道类型后就可以操作数据了。

 

功能点3：

 

 功能点4：

 

 功能点5：

 

 

功能点6：

固定‘回到顶部’按钮位置，点击后跳到h1的位置

 

 

前置条件：

在html的head标签中引入了以下库

<link rel