又是好久没有更新文章了，技术差，人又懒是重罪啊！！
在工作中每天都要查找目前正在接手的项目，而如果项目一多起来怎么办呢？ 最近主管突然说要找一下以前的项目改一点BUG，然后我就找了半天才找到对应的文件夹。这就严重影响了工作时间。故此，花了一点时间做了一下公司的项目查找功能，方便以后项目的查找，减少在这个上面的时间。
需求如下：
1、项目查找分为URL地址及文件夹路径
2、输入相应的项目名称(拼音),回车即可打开对应的项目URL或显示文件夹路径
3、显示以往项目列表，点击即可查看相应数据
效果实现：
一、页面结构及样式( html结构及样式就不多做解释)
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="UTF-8">
<title>公司项目查找</title>
<style>
body {text-align:center;padding:100px 0;font-family:"Microsoft YaHei";background:#f5f5f5;text-shadow:0 1px 0 #fff;}
ul, ol {margin:0;padding:0;list-style:none;}
h1,h2 {font-weight:normal;color:#333;}
h1 {margin-bottom:40px;}
input {font-size:16px;font-family:"Microsoft YaHei";outline:none;}
input[type="text"] {width:360px;height:38px;padding:0 10px;margin-right:20px;border:1px solid #ccc;}
input[type="text"]:focus {box-shadow:0 1px 4px rgba(0,0,0,.2);}
input[type="button"] {height:42px;line-height:38px;width:100px;cursor:pointer;background:#fff;border:1px solid #ccc;}
input[type="button"]:hover {background:#eee;}
.search {width:510px;margin:0 auto 40px;text-align:left;}
.search p {font-size:14px;color:#333;margin:8px 0;}
.search_type li {display:inline-block;*display:block;*zoom:1;margin-right:15px;cursor:pointer;line-height:40px;color:#999;}
.search_type li.on {color:#333;}
.search_list {width:1024px;margin:0 auto;padding-bottom:1px;overflow:hidden;}
.search_list li {float:left;width:200px;line-height:50px;cursor:pointer;border:1px solid #ccc;margin:0 -1px -1px 0;background:#fff;}
.search_list li:hover {background:#eee;}
/*弹出框*/
.box {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);}
.box_txt {display:none;position:fixed;top:50%;left:50%;background:#fff;font-size:20px;padding:20px 60px;transform:translate(-50%,-50%);border-radius:5px;box-shadow:0 1px 10px rgba(0,0,0,.6);}
</style>
</head>
<body> <h1>公司项目查找</h1>
<div class="search">
<!-- 选择类型 -->
<ul id="searchType" class="search_type">
<li data-type="url" class="on">访问地址</li>
<li data-type="file">文件夹路径</li>
</ul>
<input type="text" name="url" id="url" placeholder="请输入对应项目名称" />
<input type="button" id="urlBtn" value="打 开" />
<p>示例：六色网站项目，请输入"liuse"，回车即可！</p>
</div>
<!-- 项目列表 -->
<h2>项目列表</h2>
<ul id="searchList" class="search_list"></ul> <!-- 弹出框 -->
<div id="box" class="box"></div>
<div id="boxTxt" class="box_txt">E:\MoRong\AMP\htdoc\vhost6\yang</div> </body>
</html>
二、脚本功能实现
1）定义项目存储数据数组， 分别代表： name: 搜索名称 ， desc: 项目中文描述 ， file: 项目文件夹路径 ， url: 项目URL地址
// url 地址
var dataUrl = [
{
"name": "yang-mobile",
"desc": "羊羊得意-手机访问",
"file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\yang",
"url": "192.168.1.185/yang"
},
{
"name": "yang",
"desc": "羊羊得意",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost6\\yang",
"url": "127.0.0.6/yang"
},
{
"name": "lottery",
"desc": "阿里感谢有你",
"file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\lottery",
"url": "192.168.1.185/lottery"
},
{
"name": "jiate",
"desc": "嘉特通信",
"file": "E:\\MoRong\\AMP\\htdoc\\jiate",
"url": "jiate.com"
},
{
"name": "jinpai",
"desc": "金派电子",
"file": "E:\\MoRong\\AMP\\htdoc\\jinpai",
"url": "jinpai.com"
},
{
"name": "laili",
"desc": "莱立服装",
"file": "E:\\MoRong\\AMP\\htdoc\\laili",
"url": "www.laili.com"
},
{
"name": "liuse",
"desc": "六色软件",
"file": "E:\\MoRong\\AMP\\htdoc\\liuse",
"url": "liuse.com"
},
{
"name": "paizhao",
"desc": "公司摄影",
"file": "E:\\MoRong\\AMP\\htdoc\\paizhao",
"url": "www.paizhao.com"
},
{
"name": "saima",
"desc": "阿里巴巴赛马会",
"file": "E:\\MoRong\\AMP\\htdoc\\paizhao/saima",
"url": "www.paizhao.com/saima"
},
{
"name": "morong",
"desc": "默容官网",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\morong",
"url": "127.0.0.3/morong"
},
{
"name": "wohao",
"desc": "沃豪科技",
"file": "E:\\MoRong\\AMP\\htdoc\\wohao",
"url": "www.wohao.com"
}
];
2） 创建公用function，获取ID及返回事件目标功能
// 公用功能
var morong = function() {
return {
// 获取ID
$$: function(id) {
return (!id) ? null : document.getElementById(id);
},
// 返回事件目标
eventFun: function(event) {
var e = event || window.event;
return e.target || e.srcElement;
}
}
}();
3）创建项目查找功能构造函数，存储项目需要使用功能变量
// 打开URL构造函数
function ProjectSearch(obj) {
this.url = morong.$$(obj.url); // 接收URL文本框
this.btn = morong.$$(obj.btn); // 打开按钮
this.list = morong.$$(obj.list); // 项目列表
this._type = morong.$$(obj._type); // 搜索类型
this.box = morong.$$(obj.box); // 弹出框
this.boxTxt = morong.$$(obj.boxTxt);// 弹出内容
this.dataUrl = obj.dataUrl; // 项目数据
this.len = this.dataUrl.length; // 项目数量
this.selType = "url"; // 选择类型
}
4）创建原型方法
ProjectSearch.prototype = {
constructor: ProjectSearch
};
5）实例化构造函数，并传入相应参数，调用init()方法初始化页面功能
// 实例化
var project = new ProjectSearch({
url: "url",
btn: "urlBtn",
list: "searchList",
_type: "searchType",
box: "box",
boxTxt: "boxTxt",
dataUrl: dataUrl
});
// 初始化页面功能
project.init();
6）获取项目列表， 获取项目长度，遍历并且获取相应内容插入到页面ul#searchList标签中
// 获取项目列表
getListDesc: function() {
var strHTML = "", i;
// 遍历项目
for (i = 0; i < this.len; i++) {
var d = this.dataUrl[i];
strHTML += "<li data-name='"+d.name+"' title="+d.name+">"+d.desc+"</li>";
}
// 插入数据
this.list.innerHTML = strHTML;
}
7）获取查找项目名称，如果是点击列表则获取列表name 值，如果为文本框输入，则获取文本框内容，并判断搜索的是什么类型，最后搜索类型的不同，执行对应操作。
// 获取URL并打开
getUrlContent: function(name) {
var val = name || this.url.value,
flag = false,
url;
// 如果是点击项目列表
if (!name) {
if (val == '') {
alert("内容不能为空！");
return false;
}
}
// 判断类型
if (this.selType == "url") {
// 遍历查找内容
for (var i = 0; i < this.len; i++) {
if (this.dataUrl[i].name == val) {
url = "http://"+this.dataUrl[i].url;
break;
}
}
} else if (this.selType == "file") {
// 遍历查找内容
for (var i = 0; i < this.len; i++) {
if (this.dataUrl[i].name == val) {
url = this.dataUrl[i].file;
flag = true;
break;
}
}
}
// 如果没有找到
if (!url) {
alert("没有找到此项目，请重新输入！");
return false;
}
// 判断打开url或显示文件路径
(!flag) ? window.open(url) : this.promptBox(url);
}
8）设置类型及文件路径弹出框，设置类型：根据点击的目标，设置当前点击样式，并设置搜索类型为URL 或者 文件路径。 文件路径弹出框：插入文本内容，并显示
// 设置类型
classTag: function(target) {
var list = this._type.getElementsByTagName("li"), // 搜索类型列表
len = list.length;
for (var i = 0; i < len; i++) {
list[i].className = ""; // 移除所有class
}
target.className = "on"; // 添加给当前点击元素
this.selType = target.getAttribute("data-type"); // 设置类型
},
// 提示框
promptBox: function(file) {
this.boxTxt.innerHTML = file; // 插入数据
this.box.style.display = "block"; // 显示
this.boxTxt.style.display = "block";
}
9）设置初始化功能， 分别绑定“打开”按钮点击搜索事件及回车搜索事件功能，项目列表和类型选择同样采用绑定事件委托，并获取相应内容类型进行搜索，弹出框点击隐藏
// 初始化
init: function() {
var _self = this;
_self.url.focus(); // 默认聚焦
_self.getListDesc(); // 展示项目列表
// 按钮监听
_self.btn.addEventListener("click", function() {
_self.getUrlContent(false);
}, false);
// 键盘回车键监听
document.addEventListener("keypress", function() {
if (event.keyCode == 13) {
_self.getUrlContent(false);
}
}, false);
// 绑定点击项目列表 - 事件委托
_self.list.addEventListener("click", function(event) {
var target = morong.eventFun(event);
if (target.nodeName.toLowerCase() == "li") {
//获取自定义属性内容并打开页面
_self.getUrlContent(target.getAttribute("data-name"));
}
}, false);
// 类型选择事件
_self._type.addEventListener("click", function(event) {
var target = morong.eventFun(event);
if (target.nodeName.toLowerCase() == "li") {
_self.classTag(target);
}
}, false);
// 点击弹出框背景隐藏弹出框
_self.box.addEventListener("click", function() {
if (this.style.display == "block") {
this.style.display = "none";
_self.boxTxt.style.display = "none";
}
}, false);
}
10）整个项目查找功能分为以上几个小部分组成，全部代码示例如下：
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="UTF-8">
<title>公司项目查找</title>
<style>
body {text-align:center;padding:100px 0;font-family:"Microsoft YaHei";background:#f5f5f5;text-shadow:0 1px 0 #fff;}
ul, ol {margin:0;padding:0;list-style:none;}
h1,h2 {font-weight:normal;color:#333;}
h1 {margin-bottom:40px;}
input {font-size:16px;font-family:"Microsoft YaHei";outline:none;}
input[type="text"] {width:360px;height:38px;padding:0 10px;margin-right:20px;border:1px solid #ccc;}
input[type="text"]:focus {box-shadow:0 1px 4px rgba(0,0,0,.2);}
input[type="button"] {height:42px;line-height:38px;width:100px;cursor:pointer;background:#fff;border:1px solid #ccc;}
input[type="button"]:hover {background:#eee;}
.search {width:510px;margin:0 auto 40px;text-align:left;}
.search p {font-size:14px;color:#333;margin:8px 0;}
.search_type li {display:inline-block;*display:block;*zoom:1;margin-right:15px;cursor:pointer;line-height:40px;color:#999;}
.search_type li.on {color:#333;}
.search_list {width:1024px;margin:0 auto;padding-bottom:1px;overflow:hidden;}
.search_list li {float:left;width:200px;line-height:50px;cursor:pointer;border:1px solid #ccc;margin:0 -1px -1px 0;background:#fff;}
.search_list li:hover {background:#eee;}
/*弹出框*/
.box {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);}
.box_txt {display:none;position:fixed;top:50%;left:50%;background:#fff;font-size:20px;padding:20px 60px;transform:translate(-50%,-50%);border-radius:5px;box-shadow:0 1px 10px rgba(0,0,0,.6);}
</style>
</head>
<body> <h1>公司项目查找</h1>
<div class="search">
<!-- 选择类型 -->
<ul id="searchType" class="search_type">
<li data-type="url" class="on">访问地址</li>
<li data-type="file">文件夹路径</li>
</ul>
<input type="text" name="url" id="url" placeholder="请输入对应项目名称" />
<input type="button" id="urlBtn" value="打 开" />
<p>示例：六色网站项目，请输入"liuse"，回车即可！</p>
</div>
<!-- 项目列表 -->
<h2>项目列表</h2>
<ul id="searchList" class="search_list"></ul> <!-- 弹出框 -->
<div id="box" class="box"></div>
<div id="boxTxt" class="box_txt">E:\MoRong\AMP\htdoc\vhost6\yang</div> <script>
(function() { // url 地址
var dataUrl = [
{
"name": "yang-mobile",
"desc": "羊羊得意-手机访问",
"file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\yang",
"url": "192.168.1.185/yang"
},
{
"name": "yang",
"desc": "羊羊得意",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost6\\yang",
"url": "127.0.0.6/yang"
},
{
"name": "lottery",
"desc": "阿里感谢有你",
"file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\lottery",
"url": "192.168.1.185/lottery"
},
{
"name": "jiate",
"desc": "嘉特通信",
"file": "E:\\MoRong\\AMP\\htdoc\\jiate",
"url": "jiate.com"
},
{
"name": "jinpai",
"desc": "金派电子",
"file": "E:\\MoRong\\AMP\\htdoc\\jinpai",
"url": "jinpai.com"
},
{
"name": "laili",
"desc": "莱立服装",
"file": "E:\\MoRong\\AMP\\htdoc\\laili",
"url": "www.laili.com"
},
{
"name": "liuse",
"desc": "六色软件",
"file": "E:\\MoRong\\AMP\\htdoc\\liuse",
"url": "liuse.com"
},
{
"name": "paizhao",
"desc": "公司摄影",
"file": "E:\\MoRong\\AMP\\htdoc\\paizhao",
"url": "www.paizhao.com"
},
{
"name": "saima",
"desc": "阿里巴巴赛马会",
"file": "E:\\MoRong\\AMP\\htdoc\\paizhao/saima",
"url": "www.paizhao.com/saima"
},
{
"name": "morong",
"desc": "默容官网",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\morong",
"url": "127.0.0.3/morong"
},
{
"name": "wohao",
"desc": "沃豪科技",
"file": "E:\\MoRong\\AMP\\htdoc\\wohao",
"url": "www.wohao.com"
},
{
"name": "chenzong",
"desc": "陈总网站",
"file": "E:\\MoRong\\AMP\\htdoc\\chenzong",
"url": "chenzong.com"
},
{
"name": "angular",
"desc": "angular练习",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\angular",
"url": "127.0.0.3/angular"
},
{
"name": "gulp",
"desc": "gulp练习",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\gulp",
"url": "127.0.0.3/gulp"
},
{
"name": "1",
"desc": "127.0.0.1",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost1",
"url": "127.0.0.1"
},
{
"name": "2",
"desc": "127.0.0.2",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost2",
"url": "127.0.0.2"
},
{
"name": "3",
"desc": "127.0.0.3",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost3",
"url": "127.0.0.3"
},
{
"name": "4",
"desc": "127.0.0.4",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost4",
"url": "127.0.0.4"
},
{
"name": "5",
"desc": "127.0.0.5",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost5",
"url": "127.0.0.5"
},
{
"name": "6",
"desc": "127.0.0.6",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost6",
"url": "127.0.0.6"
},
{
"name": "7",
"desc": "127.0.0.7",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost7",
"url": "127.0.0.7"
},
{
"name": "8",
"desc": "127.0.0.8",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost8",
"url": "127.0.0.8"
},
{
"name": "9",
"desc": "127.0.0.9",
"file": "E:\\MoRong\\AMP\\htdoc\\vhost9",
"url": "127.0.0.9"
}
]; // 公用功能
var morong = function() {
return {
// 获取ID
$$: function(id) {
return (!id) ? null : document.getElementById(id);
},
// 返回事件目标
eventFun: function(event) {
var e = event || window.event;
return e.target || e.srcElement;
}
}
}(); // 打开URL构造函数
function ProjectSearch(obj) {
this.url = morong.$$(obj.url); // 接收URL文本框
this.btn = morong.$$(obj.btn); // 打开按钮
this.list = morong.$$(obj.list); // 项目列表
this._type = morong.$$(obj._type); // 搜索类型
this.box = morong.$$(obj.box); // 弹出框
this.boxTxt = morong.$$(obj.boxTxt);// 弹出内容
this.dataUrl = obj.dataUrl; // 项目数据
this.len = this.dataUrl.length; // 项目数量
this.selType = "url"; // 选择类型
}
// 原型方法
ProjectSearch.prototype = {
constructor: ProjectSearch,
// 获取项目列表
getListDesc: function() {
var strHTML = "", i;
// 遍历项目
for (i = 0; i < this.len; i++) {
var d = this.dataUrl[i];
strHTML += "<li data-name='"+d.name+"' title="+d.name+">"+d.desc+"</li>";
}
// 插入数据
this.list.innerHTML = strHTML;
},
// 获取URL并打开
getUrlContent: function(name) {
var val = name || this.url.value,
flag = false,
url;
// 如果是点击项目列表
if (!name) {
if (val == '') {
alert("内容不能为空！");
return false;
}
}
// 判断类型
if (this.selType == "url") {
// 遍历查找内容
for (var i = 0; i < this.len; i++) {
if (this.dataUrl[i].name == val) {
url = "http://"+this.dataUrl[i].url;
break;
}
}
} else if (this.selType == "file") {
// 遍历查找内容
for (var i = 0; i < this.len; i++) {
if (this.dataUrl[i].name == val) {
url = this.dataUrl[i].file;
flag = true;
break;
}
}
}
// 如果没有找到
if (!url) {
alert("没有找到此项目，请重新输入！");
return false;
}
// 判断打开url或显示文件路径
(!flag) ? window.open(url) : this.promptBox(url);
},
classTag: function(target) {
var list = this._type.getElementsByTagName("li"), // 搜索类型列表
len = list.length;
for (var i = 0; i < len; i++) {
list[i].className = ""; // 移除所有class
}
target.className = "on"; // 添加给当前点击元素
this.selType = target.getAttribute("data-type"); // 设置类型
},
// 提示框
promptBox: function(file) {
this.boxTxt.innerHTML = file; // 插入数据
this.box.style.display = "block"; // 显示
this.boxTxt.style.display = "block";
},
// 初始化
init: function() {
var _self = this;
_self.url.focus(); // 默认聚焦
_self.getListDesc(); // 展示项目列表
// 按钮监听
_self.btn.addEventListener("click", function() {
_self.getUrlContent(false);
}, false);
// 键盘回车键监听
document.addEventListener("keypress", function() {
if (event.keyCode == 13) {
_self.getUrlContent(false);
}
}, false);
// 绑定点击项目列表 - 事件委托
_self.list.addEventListener("click", function(event) {
var target = morong.eventFun(event);
if (target.nodeName.toLowerCase() == "li") {
//获取自定义属性内容并打开页面
_self.getUrlContent(target.getAttribute("data-name"));
}
}, false);
// 类型选择事件
_self._type.addEventListener("click", function(event) {
var target = morong.eventFun(event);
if (target.nodeName.toLowerCase() == "li") {
_self.classTag(target);
}
}, false);
// 点击弹出框背景隐藏弹出框
_self.box.addEventListener("click", function() {
if (this.style.display == "block") {
this.style.display = "none";
_self.boxTxt.style.display = "none";
}
}, false);
}
};
// 实例化
var project = new ProjectSearch({
url: "url",
btn: "urlBtn",
list: "searchList",
_type: "searchType",
box: "box",
boxTxt: "boxTxt",
dataUrl: dataUrl
});
project.init();
})();
</script>
</body>
</html>
总结： 工作中总会需要查找以往的许多项目，或可以加入浏览器书签，或可直接把新增的项目数据存入数组中，都是为了提高工作效率，减少不必要的时间浪费。本功能只是个人的javascript练习，因为新手，代码组织不是很好，望大神指点优化，共勉之！