用Web前端技术打造Github最有毒的8.8K老哥Star的表情包博物馆丨【WEB前端大作战】

随着Web前端技术迅猛发展，Gmail, Word, Excel, PowerPoint等工具都可以通过浏览器使用。Web前端不只和浏览器打交道，Node.js的发展让前端的舞台进一步扩展，前端不仅可以使用Node.js打包复杂的js, css, html 构建优化前端工程， 还能配合Github，做出喜闻乐见的表情包开源项目。

本文提到的开源代码仓库

https://github.com/zhaoolee/ChineseBQB

如何用前端打造一个受欢迎的开源项目？

好的工具要走群众路线，在中国，人人聊微信，人人要斗图，那就做个表情包博物馆，方便人们斗图吧~

搜索表情包，长按表情包图片，发给朋友（微信和QQ好友皆可）

将表情包图片链接，发到不支持表情包的朋友圈

以上工具所有的表情包和工具源码均开源在 https://github.com/zhaoolee/ChineseBQB

开发ChineseBQB过程中的技术选型思考与实现

• 表情包工具采用H5构建，通过固定的网址打开 https://www.v2fy.com/asset/0i/ChineseBQB/，这样可以保证在任何App内打开，也能交给搜索引擎抓取，逐步进行SEO，获得自然流量

• 表情包工具适配PC端和移动端，给任何尺寸屏幕的用户最好的体验

• 表情包工具支持关键词查询，并通过url参数分享搜索结果页
  

这是奥特曼表情包的分享页面(未来最好的兼容性，参数已encode)： https://www.v2fy.com/asset/0i/ChineseBQB/?key_val=%E5%A5%A5%E7%89%B9%E6%9B%BC

• 为提升表情包搜索准确性，zhaoolee对所有表情包进行了人工标注，并将标注数据导出为json文件

生成json的程序

// 本程序用于创建表情包图片列表
const fse = require('fs-extra');
const fs = require('fs');
const path = require('path');

function get_bqb_dir(){
  let file_list = fs.readdirSync(path.join(__dirname, "./"));
  let md_dir_list = [];
  file_list.map((file_name_value, file_name_index)=>{
      if(file_name_value.endsWith("BQB")){
          md_dir_list.push(file_name_value);
      }
  });
  return md_dir_list 
}

function get_json_data(bqb_dir_list, prefix){
  let json_data = [];
  // 遍历表情包文件夹
  for(let i = 0, bqb_dir_list_length = bqb_dir_list.length; i< bqb_dir_list_length;i++){
    let absolute_bqb_path = path.join(__dirname, bqb_dir_list[i]);
    // 获取文件夹内所有表情包图片
    let file_list = fs.readdirSync(absolute_bqb_path);
    for(let n = 0, file_list_length = file_list.length; n < file_list_length; n++){
      let tmp_img_url = prefix + path.join(bqb_dir_list[i] ,file_list[n]);
      // 忽略一切隐藏文件
      if(file_list[n].startsWith(".") === false){
        let tmp_img_info = {
          name: file_list[n],
          category: bqb_dir_list[i],
          url: tmp_img_url
        }
        json_data.push(tmp_img_info);
      }
    }
  }
  return json_data;
}
function main() {
  // 创建Json文件，ChineseBQB_github.json ChineseBQB_v2fy.json
  // 创建最终写入的数据结构 chinesebqb_github_json  chinesebqb_v2fy_json
  // 获取所有以BQB为后缀的文件夹路径
  let bqb_dir = get_bqb_dir()
  console.log("bqb_dir::", bqb_dir);
  // 将图片地址添加到 chinesebqb_github_json_data  chinesebqb_v2fy_json_data  
  let chinesebqb_github_json_data = get_json_data(bqb_dir, "https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/");
  let chinesebqb_github_json = {
    status: 1000,
    info: "ChineseBQB的Github数据源",
    data: chinesebqb_github_json_data
  };
  
  let chinesebqb_v2fy_json_data = get_json_data(bqb_dir, "https://v2fy.com/asset/0i/ChineseBQB/")
  let chinesebqb_v2fy_json = {
    status: 1000,
    info: "ChineseBQB的V2方圆数据源",
    data: chinesebqb_v2fy_json_data
  };

  // 创建Json文件，ChineseBQB_github.json ChineseBQB_v2fy.json
  fse.writeJsonSync('./chinesebqb_github.json', chinesebqb_github_json);
  fse.writeJsonSync('./chinesebqb_v2fy.json', chinesebqb_v2fy_json);
}
main();

生成的标注好的json文件
https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/chinesebqb_github.json

对编程感兴趣的小伙伴，可以将json文件作为开放数据源，开发微信小程序，制作爬虫Demo，甚至作为机器学习的数据源

• 如何低成本维护项目？

表情包工具背后的数据源需要长期维护，最好的方式是让程序自动读取特定文件夹中的表情包数据

文件夹内表情包数据

生成的json数据，可作为表情包工具的前端数据库，查询速度极快，无需网络交互~

数量统计与文件夹同名的超链接

自动生成的网页

一个好玩的前端项目，需要好玩的想法，也需要合理的技术选型，表情包工具的搜索速度非常快，因为索引数据已经提前加载到前端，浏览器本地的查询要比网络请求快的多。

小结

现代产生的巨量数据，催生了数据云的出现，数据云的出现，可以让80%的软件直接上云，比如Word, Excel, PowerPoint大多数常用功能都可以通过在线版实现。

大量在线版工具的涌现，对前端技术提出了更高的要求，对于一名程序员，如果想成为独立开发者，打造充满个性且实用的软件或工具， 对前端领域的深入思考会变得不可或缺。

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890