作为一名程序员，终会遇到不懂的问题，这时候我们就需要默默地打开百度，去搜索一番才能找到我们想要的答案。但是过程往往比较繁琐。通常需要不停的在各种搜索引擎之间切换搜索，才能找到合适的方案。另外一个场景，公司的内网环境通常可以流畅实用google，你会把你得浏览器默认搜索引擎设置为google，但是回到家，没有内网加持，想在搜索栏里直接搜索就不行了。
那么有没有一个小工具，可以方便的在各个搜索引擎之间自由切换呢？这就是本文想要去探讨的问题。

体验地址：搜索直达

一、需求点

需求出发点如上，就是要有一个工具，方便程序员可以方便快捷的切换搜索引擎去查找资料。这里我们收敛用户群——程序员，程序员的执拗就是，能用键盘的绝不用鼠标，键盘操作用的溜的话的确会节省大量时间。那么接着来，要想键盘用的溜，快捷键映射少不了，所以我们的工具要有便捷热键操作；再次，程序员用的高效的搜索引擎或网站并不是很多，github，google，stackoverflow，zhihu，csdn，掘金等，在这些引擎和网站基本上可以解决99%的问题。所以备选引擎上有主流的就够用了。

总结一下：

简化搜索流程，快速搜索到结果；
人群收敛，引擎工具收敛，无需做到面面俱到；
操作便捷快速，支持热键；

tips: 目标明确，确定产品定位，才能做好内容。

二、设计开发

这是一次完全自由的开发过程。作为一名程序员，我竟然研究起了设计软件(figma, pixso, 即时设计， masterGo都耍了一遍，都是在瞎搞😜，具体实用体验这里先不细讲，如若感兴趣，后面出一期程序员角度的设计软件是什么亚子的~)，我是想把页面搞得简洁大气一点。最后以拙劣的设计告终(毕竟不是专业的设计嘛)。

img-1 (1).png 从程序员角度看，作为一个类搜索引擎聚合的工具，页面要简洁，不要要奇奇怪怪的东西；标题 + 搜索框就可以了。用法也很简单，输入引擎关键词(右上角帮助有映射表) + 空格，会触发对应的引擎，再输入查询的词， 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~~

提高亿丢丢效率，来试试搜索直达吧

一、需求点

二、设计开发

三、最后