关于前端:手把手教你打造属于自己团队的前端小报系统

第 62 篇原创好文～
本文首发于政采云前端团队博客：手把手教你打造属于本人团队的前端小报体系

常常关注咱们政采云前端团队的同学，对上面这张图应该不生疏~

每周五下午咱们会定时推送一期前端小报，外面会集了一些精选的前端文章~

上面这张图就是政采云前端小报的官方站点的截图，这个站点外面有咱们历史每期的汇总~

至今前端小报曾经 93 期，汇聚了 1000+ 文章，笼罩了 50+ 大小分类，堪称是一个十分好的知识库了~

继续学习是每个工程师必备的素养，同样一个成长性的团队也同样须要这样一个继续学习的气氛。那么如何通过技术的伎俩来帮忙团队造就继续学习的气氛呢？

政采云前端小报因而应运而生，它次要蕴含投稿、汇总积淀、定时投递三大外围模块，这样的一个零碎能够让大家轻松的将本人喜爱的文章分享到团队外部，并且将文章进行分类积淀，营造团队的知识库，不便大家查阅，同时小报零碎也会在每周五进行定时推送，不便大家理解最新的技术动向，前端小报零碎是一个帮忙咱们营造团队外部分享和学习气氛的得力帮手~

那么这样的一个小报零碎是如何实现的呢？

置信大家看到好的文章的时候，总会有忍不住想分享给他人的激动，一个简略易用的投递性能能够很不便的满足大家的分享欲望，将好的文章输出到团队，帮忙其他同学~

一个简略易容的投稿性能，咱们须要解决两件事件：

1、如何能在看到好文章时，满足分享的激动

2、如何对投稿的文章进行归类收集，不便积淀与查找

如果是一个独自的录入零碎，手动录入，这种形式操作繁琐，很容易打消大家的激情，平时在浏览器看文章的时候，咱们常常将好的文章退出书签珍藏，一键操作，方便快捷。那么如何能像浏览器书签珍藏文章一样不便的去投稿呢？

很容易想到通过浏览器的扩大能力去做这个事件，Chrome 插件就提供了这样的能力

官网解释：谷歌插件是一种小型的用于定制浏览器体验的程序。它能够使用户依据集体须要或偏好来定制 Chrome 的性能和行为，它们基于 Web 技术（HTML，JavaScript 和 CSS）构建。

说人话：开发一个 Web 我的项目，可能嵌入到 Chrome 浏览器中，同时可能通过一些特定的 Api 获取到一些能力，从而订制本人的插件性能

首先创立一个我的项目，开发一个投稿性能页面。

此我的项目和一般 Vue 我的项目惟一的区别是根目录多了一个 manifest.json 文件。

创立 manifest.json：Chrome 通过辨认我的项目根目录是否有 manifest.json 文件来辨认是否为 Chrome 插件。

{   
  // 外围代码 
  "name": "Zoo！", // 扩展名 
  "browser_action": {"default_popup": "./popup.html"  // 点击浏览器右上方插件小图标弹出的内容 html}, 
  "content_scripts": [  // 可能在  Web 页面内运行的 javascript 脚本 
    { 
      "matches": [
        // 满足什么协定下进行调用 
        "http://*/*",  
        "https://*/*" 
      ], 
      "js": ["./contentScripts/zdata.js" // 插入到网页的 JS 文件门路], 
        "run_at": "document_start" // 在 document 加载时执行 
    } 
  ] 
}

这样插件被关上时会默认加载 popup.html 页面的内容，成果如图：

如何获取文章题目、简介、URL

插件自身其实不能获取到以后页面的题目，但 Chrome 插件提供一种可能在以后页面动静插入固定 JS 脚本的能力，咱们能够依据这种机制向以后页面插入一段 JS 脚本去获取页面的题目、简介和 URL，而后再通过音讯机制将获取到的内容返回到插件中。

let host = this;
// 获取以后窗口 id 
chrome.tabs.query({
  active: true,
  currentWindow: true
}, function (tabs) {let tabId = tabs.length ? tabs[0].id : null;
  // 向以后页面注入 JavaScript 脚本 
  chrome.tabs.executeScript(tabId || null, {file: './contentScripts/recommend.js'}, function () {
    // 向指标网页进行通信，向 recommend.js 发送一个音讯 
    chrome.tabs.sendMessage(tabId, {message: 'GET_TOPIC_INFO',}, function (response) {
      // 获取到返回的文章 title、url、description 
      host.article.title = response.title;
      host.article.link = response.link;
      host.article.description = response.description;
    });
  });
});

recommend.js 监听音讯，通过 addListener 咱们能够监听来自 sendMessage 收回的音讯，在 sendMessage 中定义 message 常量让咱们能够在接管音讯时对音讯进行辨别。

let doc = document;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if (request.message === 'GET_TOPIC_INFO') {
    // 获取 title 
    let title = document.getElementsByTagName('title')[0].textContent;
    let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];
    // 获取 形容 
    let description = descriptionEl ? descriptionEl.getAttribute('content') : title;
    // 发送数据 
    sendResponse({title: title.trim(),
      link: location.href,
      description: description.trim()});
  } else if (request.message === 'SIGN_RELOAD') {console.log('request, sender', request, sender);
  }
});

点击投稿时，须要将数据发送到服务端做存储

// 投稿按钮点击事件 
handleRecommendArticle: function () {
  let request;
  request = ajax({
    method: 'post',
    url: 'https://XXX/api/post', // 后端接口 
    data: {
      'title': this.article.title,
      'desc': this.article.description,
      'category': this.article.category[1] || '默认分类',
      'link': this.article.link,
      'referrer': this.article.reporter
    }
  });
}

效果图：

下面就是一个很轻量的 Chrome 插件的实现了，基于这样的一个 Chrome 插件，当咱们看到喜爱的文章时，就能够一键分享给团队的小伙伴了~

当文章多了之后，如果没有无效的治理，文章会沉积芜杂，反而让大家失去了去学习的欲望，那么咱们如何对投稿的文章进行归类收集，不便同学们有查找本人须要的常识体系呢？

标签分类

在标签分类上过后花了一些工夫去设计，难点次要是什么样的分类维度可能让投稿人疾速找到对应的分类，让查看人可能疾速依据分类找到本人想要的文章，以及如何可能疾速找到往期文章等。

这就要求咱们的分类需通俗易懂，且可能涵盖业务大部分文章的类型，最初咱们是从根底、语言、架构、选型、工具、总结等多维度进行分类。

为了可能疾速进行文章查找，这里将分类查看性能也集成在 Chrome 插件中

插件制作实现之后，其他同学就能够将你的插件安装包装置到浏览器中。因为墙的起因，这里没有抉择将插件上传到 Chrome 利用商店，咱们是间接装置到本地，下图为打包后的我的项目目录构造：

装置步骤：浏览器抉择设置 —> 扩大程序 —> 加载已解压的扩大程序 —> 抉择文件目录即可。同时，开发者模式记得关上。

对于 Chrome 扩大 插件的官网 具体文档请移步 链接查看

很一般一个前端我的项目，这里不再过多陈说，次要是可能看到每一期文章和依照分类进行疾速查找，并对立收录文章入口。其中，前端页面采纳 SSR 服务端渲染实现。

到这里小报零碎的前台展现页面曾经实现，那么如何将每一期的优质文章更及时且不便的让同学可能浏览到呢，让大家及时的去理解新技术，裁减视线。起初咱们想能够通过被动触达，定时揭示等形式将期刊被动发送给团队同学。因而在上述根底上独自设计了一个推送服务，定时将每一周的小报推送到钉钉群和前端邮件组。

通过钉钉群机器人，每周五将期刊发送到前端群里。详情见官网开发手册

const pushToRobot = async ({data, title, nums}) => {
  // 组装发送数据格式 
  const links = wrapperFeedcard({data, nums});
  // 发送数据到指定群 
  return axios("https://oapi.dingtalk.com/robot/send?", {
    method: "post",
    params: {access_token: "XXXX" // 前端群},
    data: {
      feedCard: {links},
      msgtype: "feedCard"
    }
  })
};

通过邮件发送，每周定时发送邮件到团队邮件组。

// 创立邮件链接 
const nodemailer = require("nodemailer"); 
let transporter = nodemailer.createTransport({ 
  service: "qiye.aliyun", 
  port: 25, // SMTP 端口 
  host: "smtp.mxhichina.com", 
  secureConnection: true, // 应用了 SSL 
  auth: { 
    user: "xxx@cai-inc.com", 
    pass: "xxx" 
  } 
}); 
// 组装发送内容 
let mailOptions = { 
  from: '"政采云前端小报" <liujian@cai-inc.com>', // sender address 
  to: "ZooTeam@cai-inc.com", // list of receivers 
  cc: ["ZooTeam@cai-inc.com"], 
  html: '邮件内容' // html body 
}; 
// 邮件发送 
transporter.sendMail(mailOptions);

定时公布掘金

有一天咱们的掘金经营小姐姐和我说，每周五快下班时都要进行文章公布，太苦楚了，耽搁我上班约会，掘金为啥没有定时发送性能？我说好吧，那咱们本人开发个定时公布性能吧，想晓得如何实现掘金定时公布性能，可在评论区留言探讨。

前端小报零碎尽管是个小零碎，然而不管从功能设计，还是零碎设计方面都奔着一个指标，致力推动团队的学习气氛，让团队同学继续的成长。心愿通过本文分享可能给大家一些启发，如何从一个指标登程去拆解落地，去思考如何让工具的去更好的服务于人。

政采云前端团队（ZooTeam），一个年老富裕激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员形成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端利用、数据分析及可视化等方向进行技术摸索和实战，推动并落地了一系列的外部技术产品，继续摸索前端技术体系的新边界。

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com

关于前端:手把手教你打造属于自己团队的前端小报系统

前言

前端小报的由来

如何设计一个小报零碎

投稿

什么是 Chrome 插件

如何开发一个一键投稿的 Chrome 插件

标签设计

装置插件

汇总积淀

定时投递

整体设计

总结

招贤纳士