随着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大多数常用功能都可以通过在线版实现。
大量在线版工具的涌现，对前端技术提出了更高的要求，对于一名程序员，如果想成为独立开发者，打造充满个性且实用的软件或工具， 对前端领域的深入思考会变得不可或缺。
