作为一名程序员,终会遇到不懂的问题,这时候我们就需要默默地打开百度,去搜索一番才能找到我们想要的答案。但是过程往往比较繁琐。通常需要不停的在各种搜索引擎之间切换搜索,才能找到合适的方案。 另外一个场景, 公司的内网环境通常可以流畅实用google, 你会把你得浏览器默认搜索引擎设置为google,但是回到家, 没有内网加持,想在搜索栏里直接搜索就不行了。
那么有没有一个小工具,可以方便的在各个搜索引擎之间自由切换呢? 这就是本文想要去探讨的问题。
体验地址:搜索直达
一、需求点
需求出发点如上,就是要有一个工具,方便程序员可以方便快捷的切换搜索引擎去查找资料。这里我们收敛用户群——程序员,程序员的执拗就是,能用键盘的绝不用鼠标,键盘操作用的溜的话的确会节省大量时间。那么接着来,要想键盘用的溜,快捷键映射少不了, 所以我们的工具要有便捷热键操作;再次, 程序员用的高效的搜索引擎或网站并不是很多,github,google,stackoverflow,zhihu,csdn,掘金等,在这些引擎和网站基本上可以解决99%的问题。所以备选引擎上有主流的就够用了。
总结一下:
- 简化搜索流程,快速搜索到结果;
- 人群收敛,引擎工具收敛,无需做到面面俱到;
- 操作便捷快速,支持热键;
tips: 目标明确,确定产品定位,才能做好内容。
二、设计开发
这是一次完全自由的开发过程。作为一名程序员,我竟然研究起了设计软件(figma, pixso, 即时设计, masterGo都耍了一遍,都是在瞎搞😜, 具体实用体验这里先不细讲,如若感兴趣,后面出一期程序员角度的设计软件是什么亚子的~), 我是想把页面搞得简洁大气一点。最后以拙劣的设计告终(毕竟不是专业的设计嘛)。
从程序员角度看,作为一个类搜索引擎聚合的工具,页面要简洁,不要要奇奇怪怪的东西;标题 + 搜索框就可以了。用法也很简单,输入引擎关键词(右上角帮助有映射表) + 空格, 会触发对应的引擎, 再输入查询的词, ENTER!,搞定,就会直达目的页面。例如:我想用github搜koa的仓库,只需要输入gi koa
, 回车, 就会打开新tab,页面是github的搜索内容。
听着似乎有点高大上,其实非常简单,就是模拟我们打开github页面去搜索的过程。细心观察会知道,多数网站的搜索功能都会体验在url上, 例如github搜索的url是https://github.com/search?q=
, q的参数就是搜索词, 其他网站和搜索引擎也大同小异。所以我们要做的就很简单,input输入时,匹配到引擎关键词,通过映射表匹配到对应的搜索url, 随后把搜索词填充上, 用window.open(url, '_blank')
打开新tab就Ok了!大功告成!
部分代码如下(不贴点代码有点不好意思,哈哈~):
<template>
<!-- ... ...-->
<div class="direct-search__title"></div>
<div class="direct-search__input">
<i class="direct-search__input--logo" :class="engineName"></i>
<input ref="inputRef" v-model="inputVal" type="text" @input="handleInput" @keyup.enter="handleSearch" />
<i v-show="inputVal" class="direct-search__input--clear ri-close-fill" @click="handleClearInput"></i>
<button class="icon direct-search__input--btn" :disabled="searchBtnDisabled" @click="handleSearch"></button>
</div>
<!-- ... ...-->
</template>
<script lang='ts' setup>
import { ref, onMounted, computed } from 'vue';
import { getEngineObj, getEngineSymbol, getQuery, searchEngineMap } from './search';
const inputRef = ref<HTMLInputElement | null>(null);
const inputVal = ref('');
// 默认百度
const engineName = ref('baidu');
const searchUrl = ref('https://baidu.com/s?wd=');
const query = ref('');
const showModal = ref(false);
const searchBtnDisabled = computed(() => !query.value.length);
const sortedSearchEngineMap = computed(() =>
searchEngineMap.sort((a, b) => {
const aVal = a.name.toLowerCase();
const bVal = b.name.toLowerCase();
if (aVal > bVal) {
return 1;
} else if (aVal < bVal) {
return -1;
}
return 0;
})
);
const handleInput = () => {
const engineAbbr = getEngineSymbol(inputVal.value);
const engine = getEngineObj(engineAbbr);
if (engine) {
// 设置搜索引擎图标和url
engineName.value = engine.name;
searchUrl.value = engine.searchUrl;
}
// 获取搜索词
query.value = getQuery(inputVal.value, engineAbbr);
};
// 键盘enter或点击搜索按钮
const handleSearch = () => {
query.value && window.open(`${searchUrl.value}${query.value}`, '_blank');
};
// 清除搜索框病=并重新聚焦
const handleClearInput = () => {
inputVal.value = '';
query.value = '';
inputRef.value?.focus();
};
// 帮助弹窗
const toggleModal = (show: boolean): void => {
showModal.value = show;
};
// 页面渲染完成后自动聚焦input
onMounted(() => {
inputRef.value?.focus();
});
</script>
逻辑非常简单,50行核心代码搞定!
目前已经支持百度,google, 必应,github,StackOverflow、知乎、掘金、segmentfault,csdn等发开常用的搜索引擎和网站,可以一键直达。更多可以查看网站帮助说明。
代码已经开源,感兴趣的小伙伴可以看看,对你有帮助的话,多多star哦!
三、最后
整体上看,这个小项目并不复杂,甚至还很简单。但是过程还是值得记录下来的,供自己和大家参考学习。
- 就像开始讲的一样。我们是怎么去发现问题的。我搜索用的不爽,影响我效率了,有没工具或方法能解决这个问题呢? 调研一番,没有? 那我能做吗? 我来做的话,要怎么做呢? 会用到哪些技术的呢?过程遇到卡壳的技术难题该怎么解决呢? 如果取舍疑难问题让项目尽快上线呢?这些都是我们要考虑的, 而这其中的方法和技巧同样适用于大项目。我们自己在小项目去练手摸索到的,就会沉淀自己的方法论,有自己的体系, 这比别人教授可要记得牢,用的灵活呀。
- 整个过程我自己完成,想方案, 做设计(虽然很水),服务器部署,自动化部署(没错,就这个小页面我还搞个CI,哈哈哈)。过程中,我查了很多资料,代码方面的,设计方面的,事实告诉我,一定要记录,不要相信自己记忆力好,长时间不用就会忘。笔记可以记得随意,但是一定要好找,做好分类。我们不需要记住所有做过写过的东西,只要记得我曾经写过,记在笔记的那个部分了,回头再去查就可以了。
- 发现自己的不足。比如我本打算做个深色模式适配的,但是最后发现我的css样式类名起的很繁琐,结构不是很清晰,在级联修改时有些麻烦(类名上我用了bem风格,设置了比较严格stylelint规则, 经常会报错警告, 就没搞了)。也让我发现,bemf风格虽然能尽可能避免命名冲突,但是在实用less/scss时,会不自觉地去层级嵌套,一不小心会导致嵌套过深,样式联动是就不好办了。
End~~