找找和你同名的人——技术篇

April 2, 2018 | by: ECWU

去年 UICer 联系到我们，提出了想要与我们一起开发一个能对学校学生英文名进行检索的小工具的想法，作为 UIC 学生英文名报告的补充。但之前一直没有想到优雅的实现方式，直到前段时间找到了解决方案。

在小工具发布之际，我们想给大家分享一下它是怎么实现的。

如果不算上版权和隐私声明页面，这个查询工具可以看作一个单页面的应用，技术上是完全依靠前端实现的。但是我们可以进行一下拆分，从界面层和数据层来为大家讲解实现的原理。

在软件架构和程序设计领域，前端是软件系统中直接和用户交互的部分，而后端控制着软件的输出。将软件分为前端和后端是一种将软件不同功能的部分相互分离的抽象。

—- Wikipedia 《前端和后端》

界面层

网站的主界面用到了已经迭代到 V4.0 版本的 Bootstrap。这个开源项目是由 GitHub 设计总监 Mark Otto 供职于 Twitter 时发起，现在已经成为网页开发中最常用的前端框架之一。

使用 Bootstrap 可以非常快速的开发出美观的响应式网页。像小工具中的输入框，按钮，使用的都是 Bootstrap 的默认样式。而且在排版页面内容时，用上了 Bootstrap 的栅格系统。可以说 Bootstrap 大大方便了我们的开发工作，不擅长设计的开发人员也能轻松做出漂亮的页面。

响应式网页设计，或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法，该设计可使网站在不同的设备上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。

—- Wikipedia 《响应式网页设计》

我们还用到了大名鼎鼎的 jQuery（一套跨浏览器的 JavaScript 库，简化了 HTML 与 JavaScript 之间的操作，是目前最受欢迎的 JavaScript 库）。

JavaScript 是允许你在网页中实现复杂事情的一门编程语言 —— 每次当你浏览网页时不只是显示静态信息—— 显示即时更新的内容， 或者交互式的地图，或 2D/3D 图形动画，又或者自动播放视频等，你可以确信，JavaScript 参与其中。

—- MDN web docs 《什么是 JavaScript？》

网页中能移动，变化的都是通过 jQuery 实现的（例如页面的载入动画，按下搜索键后页面返回相应信息）。我们在使用 jQuery 时，首先通过 jQuery 选择器来准确选取需要操作的元素，再通过内带的修改内容的函数，对页面的元素进行修改。

数据层

该怎么储存大量的数据也是一开始困扰我们的问题。一开始有想过网页发送 Ajax 请求，通过 PHP 来读取数据库中存取的内容并返回 JSON 数据，再通过 JavaScript 实现异步刷新。但是这样我们需要多为一个服务器付出人力和物力。

JSON (JavaScript Object Notation) 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript。

—- MDN web docs 《JSON - 描述》

Ajax (Asynchronous JavaScript And XML) 用来描述一种使用现有技术集合的‘新’方法，这种方法可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。

—- MDN web docs 《Ajax - Getting Started》

然后我们换了个思路：能否将数据保存在网页，然后通过 JavaScript 进行检索并更新页面内容呢？

经过一番寻找，LINQ.js 出现在我们的眼前。LINQ 本身是 .NET 4.0 的一个方法，允许开发者从一个或多个给定的数据源中检索数据。LINQ.js 就是将这个方法使用 JavaScript 进行了实现。

于是我们将数据（只有英文名和对应的数量）转换成了 JSON 格式进行了储存（以"name":<str:name>,"count":<str:count> 的格式储存，共 2392 行）。然后通过 LINQ.js 的函数进行检索。

当你输入了内容，按下搜索的那一刻，会执行搜索函数 InquiryName(rawName)。

在检索函数中会进行两次搜索（调用 InquiryEntry() 函数），一次是根据用户的原始输入进行搜索，第二次是将首字母格式化后（将每个词的首字母大写）再进行搜索。之所以这样做的原因是，存在一些同学的名字是全部大写的，如果格式化后，他名字是无法的。于是我们进行两次搜索，提高名字能被搜索到可能性（需要区分大小写）。

下面展示了InquiryEntry() 函数的具体实现：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function InquiryEntry(input) {
  return Enumerable.From(dataSet) // 从 dataSet 这个 JSON 数组中（里面存储了所有的数据）
    .Where(function(x) {
      return x.name === input; // 找到 name 与用户输入(input) 相同的元素
    })
    .Select(function(x) {
      return x.count; // 返回元素中储存的保存的 Count 值
    })
    .ToArray(); // 以数组形式返回
}

等函数接收到返回的数值时，jQuery 就会将内容放置到相应的位置，并显示给用户。

至此，英文名的一次搜索就完成了。

除了上面提到的开源项目。我们还使用了 Unsplash 的图片 API 作为我们页面背景图片的来源。BootCDN 为网站中使用的开源前端项目提供 CDN 加速。网站托管在 GitHub Pages，使用 Cloudflare CDN 进行内容分发。

当一个项目被开源，这意味着任何人都可以出于任何目的查看，使用，修改和分发你的项目。 这些权限通过开源许可强制实施。

开源是强大的，因为它降低了事物被采纳的障碍，允许想法迅速传播。

—- GitHub 开源指南 《什么是开源，为什么要开源》

仓库地址： https://github.com/UICHCC/uic_name_inquiry

联系我们： [email protected]