隨著Web前端技術(shù)迅猛發(fā)展琳拭，Gmail, Word, Excel, PowerPoint等工具都可以通過(guò)瀏覽器使用懈贺。Web前端不只和瀏覽器打交道堂氯，Node.js的發(fā)展讓前端的舞臺(tái)進(jìn)一步擴(kuò)展得院，前端不僅可以使用Node.js打包復(fù)雜的js, css, html 構(gòu)建優(yōu)化前端工程， 還能配合Github柿扣，做出喜聞樂(lè)見(jiàn)的表情包開(kāi)源項(xiàng)目肖方。
本文提到的開(kāi)源代碼倉(cāng)庫(kù)
https://github.com/zhaoolee/ChineseBQB
如何用前端打造一個(gè)受歡迎的開(kāi)源項(xiàng)目？
好的工具要走群眾路線未状，在中國(guó)俯画，人人聊微信，人人要斗圖司草，那就做個(gè)表情包博物館艰垂，方便人們斗圖吧~
搜索表情包，長(zhǎng)按表情包圖片埋虹，發(fā)給朋友（微信和QQ好友皆可）
將表情包圖片鏈接搔课，發(fā)到不支持表情包的朋友圈
以上工具所有的表情包和工具源碼均開(kāi)源在 https://github.com/zhaoolee/ChineseBQB
開(kāi)發(fā)ChineseBQB過(guò)程中的技術(shù)選型思考與實(shí)現(xiàn)
- 表情包工具采用H5構(gòu)建，通過(guò)固定的網(wǎng)址打開(kāi) https://www.v2fy.com/asset/0i/ChineseBQB/爬泥，這樣可以保證在任何App內(nèi)打開(kāi)柬讨，也能交給搜索引擎抓取，逐步進(jìn)行SEO袍啡，獲得自然流量
- 表情包工具適配PC端和移動(dòng)端踩官，給任何尺寸屏幕的用戶最好的體驗(yàn)
-
表情包工具支持關(guān)鍵詞查詢，并通過(guò)url參數(shù)分享搜索結(jié)果頁(yè)
分享搜索結(jié)果
這是奧特曼表情包的分享頁(yè)面(未來(lái)最好的兼容性境输，參數(shù)已encode)： https://www.v2fy.com/asset/0i/ChineseBQB/?key_val=%E5%A5%A5%E7%89%B9%E6%9B%BC
- 為提升表情包搜索準(zhǔn)確性蔗牡，zhaoolee對(duì)所有表情包進(jìn)行了人工標(biāo)注，并將標(biāo)注數(shù)據(jù)導(dǎo)出為json文件
生成json的程序
// 本程序用于創(chuàng)建表情包圖片列表
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]);
// 獲取文件夾內(nè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() {
// 創(chuàng)建Json文件嗅剖，ChineseBQB_github.json ChineseBQB_v2fy.json
// 創(chuàng)建最終寫(xiě)入的數(shù)據(jù)結(jié)構(gòu) 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數(shù)據(jù)源",
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方圓數(shù)據(jù)源",
data: chinesebqb_v2fy_json_data
};
// 創(chuàng)建Json文件蛋逾，ChineseBQB_github.json ChineseBQB_v2fy.json
fse.writeJsonSync('./chinesebqb_github.json', chinesebqb_github_json);
fse.writeJsonSync('./chinesebqb_v2fy.json', chinesebqb_v2fy_json);
}
main();
生成的標(biāo)注好的json文件
https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/chinesebqb_github.json
對(duì)編程感興趣的小伙伴，可以將json文件作為開(kāi)放數(shù)據(jù)源窗悯，開(kāi)發(fā)微信小程序，制作爬蟲(chóng)Demo偷拔，甚至作為機(jī)器學(xué)習(xí)的數(shù)據(jù)源
- 如何低成本維護(hù)項(xiàng)目蒋院？
表情包工具背后的數(shù)據(jù)源需要長(zhǎng)期維護(hù)亏钩，最好的方式是讓程序自動(dòng)讀取特定文件夾中的表情包數(shù)據(jù)
文件夾內(nèi)表情包數(shù)據(jù)
生成的json數(shù)據(jù)欺旧，可作為表情包工具的前端數(shù)據(jù)庫(kù)姑丑，查詢速度極快，無(wú)需網(wǎng)絡(luò)交互~
數(shù)量統(tǒng)計(jì)與文件夾同名的超鏈接
自動(dòng)生成的網(wǎng)頁(yè)
一個(gè)好玩的前端項(xiàng)目辞友，需要好玩的想法栅哀，也需要合理的技術(shù)選型，表情包工具的搜索速度非吵屏快留拾，因?yàn)樗饕龜?shù)據(jù)已經(jīng)提前加載到前端，瀏覽器本地的查詢要比網(wǎng)絡(luò)請(qǐng)求快的多鲫尊。
小結(jié)
現(xiàn)代產(chǎn)生的巨量數(shù)據(jù)痴柔，催生了數(shù)據(jù)云的出現(xiàn)，數(shù)據(jù)云的出現(xiàn)疫向，可以讓80%的軟件直接上云咳蔚，比如Word, Excel, PowerPoint大多數(shù)常用功能都可以通過(guò)在線版實(shí)現(xiàn)。
大量在線版工具的涌現(xiàn)搔驼，對(duì)前端技術(shù)提出了更高的要求谈火，對(duì)于一名程序員，如果想成為獨(dú)立開(kāi)發(fā)者舌涨，打造充滿個(gè)性且實(shí)用的軟件或工具糯耍， 對(duì)前端領(lǐng)域的深入思考會(huì)變得不可或缺。
