又是好久没有更新文章了，技术差，人又懒是重罪啊！！
在工作中每天都要查找目前正在接手的项目，而如果项目一多起来怎么办呢？ 最近主管突然说要找一下以前的项目改一点BUG，然后我就找了半天才找到对应的文件夹。这就严重影响了工作时间。故此，花了一点时间做了一下公司的项目查找功能，方便以后项目的查找，减少在这个上面的时间。
需求如下：
1、项目查找分为URL地址及文件夹路径
2、输入相应的项目名称(拼音),回车即可打开对应的项目URL或显示文件夹路径
3、显示以往项目列表，点击即可查看相应数据
效果实现：
一、页面结构及样式( html结构及样式就不多做解释)
1 <!DOCTYPE html>
2 <html lang="ZH-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>公司项目查找</title>
6 <style>
7 body {text-align:center;padding:100px 0;font-family:"Microsoft YaHei";background:#f5f5f5;text-shadow:0 1px 0 #fff;}
8 ul, ol {margin:0;padding:0;list-style:none;}
9 h1,h2 {font-weight:normal;color:#333;}
10 h1 {margin-bottom:40px;}
11 input {font-size:16px;font-family:"Microsoft YaHei";outline:none;}
12 input[type="text"] {width:360px;height:38px;padding:0 10px;margin-right:20px;border:1px solid #ccc;}
13 input[type="text"]:focus {box-shadow:0 1px 4px rgba(0,0,0,.2);}
14 input[type="button"] {height:42px;line-height:38px;width:100px;cursor:pointer;background:#fff;border:1px solid #ccc;}
15 input[type="button"]:hover {background:#eee;}
16 .search {width:510px;margin:0 auto 40px;text-align:left;}
17 .search p {font-size:14px;color:#333;margin:8px 0;}
18 .search_type li {display:inline-block;*display:block;*zoom:1;margin-right:15px;cursor:pointer;line-height:40px;color:#999;}
19 .search_type li.on {color:#333;}
20 .search_list {width:1024px;margin:0 auto;padding-bottom:1px;overflow:hidden;}
21 .search_list li {float:left;width:200px;line-height:50px;cursor:pointer;border:1px solid #ccc;margin:0 -1px -1px 0;background:#fff;}
22 .search_list li:hover {background:#eee;}
23 /*弹出框*/
24 .box {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);}
25 .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);}
26 </style>
27 </head>
28 <body>
29
30 <h1>公司项目查找</h1>
31 <div class="search">
32 <!-- 选择类型 -->
33 <ul id="searchType" class="search_type">
34 <li data-type="url" class="on">访问地址</li>
35 <li data-type="file">文件夹路径</li>
36 </ul>
37 <input type="text" name="url" id="url" placeholder="请输入对应项目名称" />
38 <input type="button" id="urlBtn" value="打 开" />
39 <p>示例：六色网站项目，请输入"liuse"，回车即可！</p>
40 </div>
41 <!-- 项目列表 -->
42 <h2>项目列表</h2>
43 <ul id="searchList" class="search_list"></ul>
44
45 <!-- 弹出框 -->
46 <div id="box" class="box"></div>
47 <div id="boxTxt" class="box_txt">E:\MoRong\AMP\htdoc\vhost6\yang</div>
48
49 </body>
50 </html>
二、脚本功能实现
1）定义项目存储数据数组， 分别代表： name: 搜索名称 ， desc: 项目中文描述 ， file: 项目文件夹路径 ， url: 项目URL地址
1 // url 地址
2 var dataUrl = [
3 {
4 "name": "yang-mobile",
5 "desc": "羊羊得意-手机访问",
6 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\yang",
7 "url": "192.168.1.185/yang"
8 },
9 {
10 "name": "yang",
11 "desc": "羊羊得意",
12 "file": "E:\\MoRong\\AMP\\htdoc\\vhost6\\yang",
13 "url": "127.0.0.6/yang"
14 },
15 {
16 "name": "lottery",
17 "desc": "阿里感谢有你",
18 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\lottery",
19 "url": "192.168.1.185/lottery"
20 },
21 {
22 "name": "jiate",
23 "desc": "嘉特通信",
24 "file": "E:\\MoRong\\AMP\\htdoc\\jiate",
25 "url": "jiate.com"
26 },
27 {
28 "name": "jinpai",
29 "desc": "金派电子",
30 "file": "E:\\MoRong\\AMP\\htdoc\\jinpai",
31 "url": "jinpai.com"
32 },
33 {
34 "name": "laili",
35 "desc": "莱立服装",
36 "file": "E:\\MoRong\\AMP\\htdoc\\laili",
37 "url": "www.laili.com"
38 },
39 {
40 "name": "liuse",
41 "desc": "六色软件",
42 "file": "E:\\MoRong\\AMP\\htdoc\\liuse",
43 "url": "liuse.com"
44 },
45 {
46 "name": "paizhao",
47 "desc": "公司摄影",
48 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao",
49 "url": "www.paizhao.com"
50 },
51 {
52 "name": "saima",
53 "desc": "阿里巴巴赛马会",
54 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao/saima",
55 "url": "www.paizhao.com/saima"
56 },
57 {
58 "name": "morong",
59 "desc": "默容官网",
60 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\morong",
61 "url": "127.0.0.3/morong"
62 },
63 {
64 "name": "wohao",
65 "desc": "沃豪科技",
66 "file": "E:\\MoRong\\AMP\\htdoc\\wohao",
67 "url": "www.wohao.com"
68 }
69 ];
2） 创建公用function，获取ID及返回事件目标功能
1 // 公用功能
2 var morong = function() {
3 return {
4 // 获取ID
5 $$: function(id) {
6 return (!id) ? null : document.getElementById(id);
7 },
8 // 返回事件目标
9 eventFun: function(event) {
10 var e = event || window.event;
11 return e.target || e.srcElement;
12 }
13 }
14 }();
3）创建项目查找功能构造函数，存储项目需要使用功能变量
1 // 打开URL构造函数
2 function ProjectSearch(obj) {
3 this.url = morong.$$(obj.url); // 接收URL文本框
4 this.btn = morong.$$(obj.btn); // 打开按钮
5 this.list = morong.$$(obj.list); // 项目列表
6 this._type = morong.$$(obj._type); // 搜索类型
7 this.box = morong.$$(obj.box); // 弹出框
8 this.boxTxt = morong.$$(obj.boxTxt);// 弹出内容
9 this.dataUrl = obj.dataUrl; // 项目数据
10 this.len = this.dataUrl.length; // 项目数量
11 this.selType = "url"; // 选择类型
12 }
4）创建原型方法
1 ProjectSearch.prototype = {
2 constructor: ProjectSearch
3 };
5）实例化构造函数，并传入相应参数，调用init()方法初始化页面功能
1 // 实例化
2 var project = new ProjectSearch({
3 url: "url",
4 btn: "urlBtn",
5 list: "searchList",
6 _type: "searchType",
7 box: "box",
8 boxTxt: "boxTxt",
9 dataUrl: dataUrl
10 });
11 // 初始化页面功能
12 project.init();
6）获取项目列表， 获取项目长度，遍历并且获取相应内容插入到页面ul#searchList标签中
1 // 获取项目列表
2 getListDesc: function() {
3 var strHTML = "", i;
4 // 遍历项目
5 for (i = 0; i < this.len; i++) {
6 var d = this.dataUrl[i];
7 strHTML += "<li data-name=‘"+d.name+"‘ title="+d.name+">"+d.desc+"</li>";
8 }
9 // 插入数据
10 this.list.innerHTML = strHTML;
11 }
7）获取查找项目名称，如果是点击列表则获取列表name 值，如果为文本框输入，则获取文本框内容，并判断搜索的是什么类型，最后搜索类型的不同，执行对应操作。
1 // 获取URL并打开
2 getUrlContent: function(name) {
3 var val = name || this.url.value,
4 flag = false,
5 url;
6 // 如果是点击项目列表
7 if (!name) {
8 if (val == ‘‘) {
9 alert("内容不能为空！");
10 return false;
11 }
12 }
13 // 判断类型
14 if (this.selType == "url") {
15 // 遍历查找内容
16 for (var i = 0; i < this.len; i++) {
17 if (this.dataUrl[i].name == val) {
18 url = "http://"+this.dataUrl[i].url;
19 break;
20 }
21 }
22 } else if (this.selType == "file") {
23 // 遍历查找内容
24 for (var i = 0; i < this.len; i++) {
25 if (this.dataUrl[i].name == val) {
26 url = this.dataUrl[i].file;
27 flag = true;
28 break;
29 }
30 }
31 }
32 // 如果没有找到
33 if (!url) {
34 alert("没有找到此项目，请重新输入！");
35 return false;
36 }
37 // 判断打开url或显示文件路径
38 (!flag) ? window.open(url) : this.promptBox(url);
39 }
8）设置类型及文件路径弹出框，设置类型：根据点击的目标，设置当前点击样式，并设置搜索类型为URL 或者 文件路径。 文件路径弹出框：插入文本内容，并显示
1 // 设置类型
2 classTag: function(target) {
3 var list = this._type.getElementsByTagName("li"), // 搜索类型列表
4 len = list.length;
5 for (var i = 0; i < len; i++) {
6 list[i].className = ""; // 移除所有class
7 }
8 target.className = "on"; // 添加给当前点击元素
9 this.selType = target.getAttribute("data-type"); // 设置类型
10 },
11 // 提示框
12 promptBox: function(file) {
13 this.boxTxt.innerHTML = file; // 插入数据
14 this.box.style.display = "block"; // 显示
15 this.boxTxt.style.display = "block";
16 }
9）设置初始化功能， 分别绑定“打开”按钮点击搜索事件及回车搜索事件功能，项目列表和类型选择同样采用绑定事件委托，并获取相应内容类型进行搜索，弹出框点击隐藏
1 // 初始化
2 init: function() {
3 var _self = this;
4 _self.url.focus(); // 默认聚焦
5 _self.getListDesc(); // 展示项目列表
6 // 按钮监听
7 _self.btn.addEventListener("click", function() {
8 _self.getUrlContent(false);
9 }, false);
10 // 键盘回车键监听
11 document.addEventListener("keypress", function() {
12 if (event.keyCode == 13) {
13 _self.getUrlContent(false);
14 }
15 }, false);
16 // 绑定点击项目列表 - 事件委托
17 _self.list.addEventListener("click", function(event) {
18 var target = morong.eventFun(event);
19 if (target.nodeName.toLowerCase() == "li") {
20 //获取自定义属性内容并打开页面
21 _self.getUrlContent(target.getAttribute("data-name"));
22 }
23 }, false);
24 // 类型选择事件
25 _self._type.addEventListener("click", function(event) {
26 var target = morong.eventFun(event);
27 if (target.nodeName.toLowerCase() == "li") {
28 _self.classTag(target);
29 }
30 }, false);
31 // 点击弹出框背景隐藏弹出框
32 _self.box.addEventListener("click", function() {
33 if (this.style.display == "block") {
34 this.style.display = "none";
35 _self.boxTxt.style.display = "none";
36 }
37 }, false);
38 }
10）整个项目查找功能分为以上几个小部分组成，全部代码示例如下：
1 <!DOCTYPE html>
2 <html lang="ZH-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>公司项目查找</title>
6 <style>
7 body {text-align:center;padding:100px 0;font-family:"Microsoft YaHei";background:#f5f5f5;text-shadow:0 1px 0 #fff;}
8 ul, ol {margin:0;padding:0;list-style:none;}
9 h1,h2 {font-weight:normal;color:#333;}
10 h1 {margin-bottom:40px;}
11 input {font-size:16px;font-family:"Microsoft YaHei";outline:none;}
12 input[type="text"] {width:360px;height:38px;padding:0 10px;margin-right:20px;border:1px solid #ccc;}
13 input[type="text"]:focus {box-shadow:0 1px 4px rgba(0,0,0,.2);}
14 input[type="button"] {height:42px;line-height:38px;width:100px;cursor:pointer;background:#fff;border:1px solid #ccc;}
15 input[type="button"]:hover {background:#eee;}
16 .search {width:510px;margin:0 auto 40px;text-align:left;}
17 .search p {font-size:14px;color:#333;margin:8px 0;}
18 .search_type li {display:inline-block;*display:block;*zoom:1;margin-right:15px;cursor:pointer;line-height:40px;color:#999;}
19 .search_type li.on {color:#333;}
20 .search_list {width:1024px;margin:0 auto;padding-bottom:1px;overflow:hidden;}
21 .search_list li {float:left;width:200px;line-height:50px;cursor:pointer;border:1px solid #ccc;margin:0 -1px -1px 0;background:#fff;}
22 .search_list li:hover {background:#eee;}
23 /*弹出框*/
24 .box {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);}
25 .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);}
26 </style>
27 </head>
28 <body>
29
30 <h1>公司项目查找</h1>
31 <div class="search">
32 <!-- 选择类型 -->
33 <ul id="searchType" class="search_type">
34 <li data-type="url" class="on">访问地址</li>
35 <li data-type="file">文件夹路径</li>
36 </ul>
37 <input type="text" name="url" id="url" placeholder="请输入对应项目名称" />
38 <input type="button" id="urlBtn" value="打 开" />
39 <p>示例：六色网站项目，请输入"liuse"，回车即可！</p>
40 </div>
41 <!-- 项目列表 -->
42 <h2>项目列表</h2>
43 <ul id="searchList" class="search_list"></ul>
44
45 <!-- 弹出框 -->
46 <div id="box" class="box"></div>
47 <div id="boxTxt" class="box_txt">E:\MoRong\AMP\htdoc\vhost6\yang</div>
48
49 <script>
50 (function() {
51
52 // url 地址
53 var dataUrl = [
54 {
55 "name": "yang-mobile",
56 "desc": "羊羊得意-手机访问",
57 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\yang",
58 "url": "192.168.1.185/yang"
59 },
60 {
61 "name": "yang",
62 "desc": "羊羊得意",
63 "file": "E:\\MoRong\\AMP\\htdoc\\vhost6\\yang",
64 "url": "127.0.0.6/yang"
65 },
66 {
67 "name": "lottery",
68 "desc": "阿里感谢有你",
69 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\lottery",
70 "url": "192.168.1.185/lottery"
71 },
72 {
73 "name": "jiate",
74 "desc": "嘉特通信",
75 "file": "E:\\MoRong\\AMP\\htdoc\\jiate",
76 "url": "jiate.com"
77 },
78 {
79 "name": "jinpai",
80 "desc": "金派电子",
81 "file": "E:\\MoRong\\AMP\\htdoc\\jinpai",
82 "url": "jinpai.com"
83 },
84 {
85 "name": "laili",
86 "desc": "莱立服装",
87 "file": "E:\\MoRong\\AMP\\htdoc\\laili",
88 "url": "www.laili.com"
89 },
90 {
91 "name": "liuse",
92 "desc": "六色软件",
93 "file": "E:\\MoRong\\AMP\\htdoc\\liuse",
94 "url": "liuse.com"
95 },
96 {
97 "name": "paizhao",
98 "desc": "公司摄影",
99 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao",
100 "url": "www.paizhao.com"
101 },
102 {
103 "name": "saima",
104 "desc": "阿里巴巴赛马会",
105 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao/saima",
106 "url": "www.paizhao.com/saima"
107 },
108 {
109 "name": "morong",
110 "desc": "默容官网",
111 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\morong",
112 "url": "127.0.0.3/morong"
113 },
114 {
115 "name": "wohao",
116 "desc": "沃豪科技",
117 "file": "E:\\MoRong\\AMP\\htdoc\\wohao",
118 "url": "www.wohao.com"
119 },
120 {
121 "name": "chenzong",
122 "desc": "陈总网站",
123 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong",
124 "url": "chenzong.com"
125 },
126 {
127 "name": "angular",
128 "desc": "angular练习",
129 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\angular",
130 "url": "127.0.0.3/angular"
131 },
132 {
133 "name": "gulp",
134 "desc": "gulp练习",
135 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\gulp",
136 "url": "127.0.0.3/gulp"
137 },
138 {
139 "name": "1",
140 "desc": "127.0.0.1",
141 "file": "E:\\MoRong\\AMP\\htdoc\\vhost1",
142 "url": "127.0.0.1"
143 },
144 {
145 "name": "2",
146 "desc": "127.0.0.2",
147 "file": "E:\\MoRong\\AMP\\htdoc\\vhost2",
148 "url": "127.0.0.2"
149 },
150 {
151 "name": "3",
152 "desc": "127.0.0.3",
153 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3",
154 "url": "127.0.0.3"
155 },
156 {
157 "name": "4",
158 "desc": "127.0.0.4",
159 "file": "E:\\MoRong\\AMP\\htdoc\\vhost4",
160 "url": "127.0.0.4"
161 },
162 {
163 "name": "5",
164 "desc": "127.0.0.5",
165 "file": "E:\\MoRong\\AMP\\htdoc\\vhost5",
166 "url": "127.0.0.5"
167 },
168 {
169 "name": "6",
170 "desc": "127.0.0.6",
171 "file": "E:\\MoRong\\AMP\\htdoc\\vhost6",
172 "url": "127.0.0.6"
173 },
174 {
175 "name": "7",
176 "desc": "127.0.0.7",
177 "file": "E:\\MoRong\\AMP\\htdoc\\vhost7",
178 "url": "127.0.0.7"
179 },
180 {
181 "name": "8",
182 "desc": "127.0.0.8",
183 "file": "E:\\MoRong\\AMP\\htdoc\\vhost8",
184 "url": "127.0.0.8"
185 },
186 {
187 "name": "9",
188 "desc": "127.0.0.9",
189 "file": "E:\\MoRong\\AMP\\htdoc\\vhost9",
190 "url": "127.0.0.9"
191 }
192 ];
193
194 // 公用功能
195 var morong = function() {
196 return {
197 // 获取ID
198 $$: function(id) {
199 return (!id) ? null : document.getElementById(id);
200 },
201 // 返回事件目标
202 eventFun: function(event) {
203 var e = event || window.event;
204 return e.target || e.srcElement;
205 }
206 }
207 }();
208
209 // 打开URL构造函数
210 function ProjectSearch(obj) {
211 this.url = morong.$$(obj.url); // 接收URL文本框
212 this.btn = morong.$$(obj.btn); // 打开按钮
213 this.list = morong.$$(obj.list); // 项目列表
214 this._type = morong.$$(obj._type); // 搜索类型
215 this.box = morong.$$(obj.box); // 弹出框
216 this.boxTxt = morong.$$(obj.boxTxt);// 弹出内容
217 this.dataUrl = obj.dataUrl; // 项目数据
218 this.len = this.dataUrl.length; // 项目数量
219 this.selType = "url"; // 选择类型
220 }
221 // 原型方法
222 ProjectSearch.prototype = {
223 constructor: ProjectSearch,
224 // 获取项目列表
225 getListDesc: function() {
226 var strHTML = "", i;
227 // 遍历项目
228 for (i = 0; i < this.len; i++) {
229 var d = this.dataUrl[i];
230 strHTML += "<li data-name=‘"+d.name+"‘ title="+d.name+">"+d.desc+"</li>";
231 }
232 // 插入数据
233 this.list.innerHTML = strHTML;
234 },
235 // 获取URL并打开
236 getUrlContent: function(name) {
237 var val = name || this.url.value,
238 flag = false,
239 url;
240 // 如果是点击项目列表
241 if (!name) {
242 if (val == ‘‘) {
243 alert("内容不能为空！");
244 return false;
245 }
246 }
247 // 判断类型
248 if (this.selType == "url") {
249 // 遍历查找内容
250 for (var i = 0; i < this.len; i++) {
251 if (this.dataUrl[i].name == val) {
252 url = "http://"+this.dataUrl[i].url;
253 break;
254 }
255 }
256 } else if (this.selType == "file") {
257 // 遍历查找内容
258 for (var i = 0; i < this.len; i++) {
259 if (this.dataUrl[i].name == val) {
260 url = this.dataUrl[i].file;
261 flag = true;
262 break;
263 }
264 }
265 }
266 // 如果没有找到
267 if (!url) {
268 alert("没有找到此项目，请重新输入！");
269 return false;
270 }
271 // 判断打开url或显示文件路径
272 (!flag) ? window.open(url) : this.promptBox(url);
273 },
274 classTag: function(target) {
275 var list = this._type.getElementsByTagName("li"), // 搜索类型列表
276 len = list.length;
277 for (var i = 0; i < len; i++) {
278 list[i].className = ""; // 移除所有class
279 }
280 target.className = "on"; // 添加给当前点击元素
281 this.selType = target.getAttribute("data-type"); // 设置类型
282 },
283 // 提示框
284 promptBox: function(file) {
285 this.boxTxt.innerHTML = file; // 插入数据
286 this.box.style.display = "block"; // 显示
287 this.boxTxt.style.display = "block";
288 },
289 // 初始化
290 init: function() {
291 var _self = this;
292 _self.url.focus(); // 默认聚焦
293 _self.getListDesc(); // 展示项目列表
294 // 按钮监听
295 _self.btn.addEventListener("click", function() {
296 _self.getUrlContent(false);
297 }, false);
298 // 键盘回车键监听
299 document.addEventListener("keypress", function() {
300 if (event.keyCode == 13) {
301 _self.getUrlContent(false);
302 }
303 }, false);
304 // 绑定点击项目列表 - 事件委托
305 _self.list.addEventListener("click", function(event) {
306 var target = morong.eventFun(event);
307 if (target.nodeName.toLowerCase() == "li") {
308 //获取自定义属性内容并打开页面
309 _self.getUrlContent(target.getAttribute("data-name"));
310 }
311 }, false);
312 // 类型选择事件
313 _self._type.addEventListener("click", function(event) {
314 var target = morong.eventFun(event);
315 if (target.nodeName.toLowerCase() == "li") {
316 _self.classTag(target);
317 }
318 }, false);
319 // 点击弹出框背景隐藏弹出框
320 _self.box.addEventListener("click", function() {
321 if (this.style.display == "block") {
322 this.style.display = "none";
323 _self.boxTxt.style.display = "none";
324 }
325 }, false);
326 }
327 };
328 // 实例化
329 var project = new ProjectSearch({
330 url: "url",
331 btn: "urlBtn",
332 list: "searchList",
333 _type: "searchType",
334 box: "box",
335 boxTxt: "boxTxt",
336 dataUrl: dataUrl
337 });
338 project.init();
339 })();
340 </script>
341 </body>
342 </html>
总结： 工作中总会需要查找以往的许多项目，或可以加入浏览器书签，或可直接把新增的项目数据存入数组中，都是为了提高工作效率，减少不必要的时间浪费。本功能只是个人的javascript练习，因为新手，代码组织不是很好，望大神指点优化，共勉之！
时间： 2024-10-08 04:02:36