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

InfoQ 2021-04-07 21:01:06
教你 手把手 手把 把手 打造


{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"经常关注我们政采云前端团队的同学, 对下面这张图应该不陌生~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/07\/07d01318e29c7639d8e65bac3f29927b.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每周五下午我们会定时推送一期前端小报,里面汇集了一些精选的前端文章~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面这张图就是 "},{"type":"link","attrs":{"href":"https:\/\/weekly.zoo.team\/","title":"xxx","type":null},"content":[{"type":"text","text":"政采云前端小报"}]},{"type":"text","text":" 的官方站点的截图,这个站点里面有我们历史每期的汇总~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c150a8c83b52f1b827b9ed56ae7e34c8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至今前端小报已经 93 期,汇聚了 1000+ 文章,覆盖了 50+ 大小分类,可谓是一个非常好的知识库了~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端小报的由来"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"持续学习是每个工程师必备的素养,一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"政采云前端小报因此应运而生,它主要包含投稿、汇总沉淀、定时投递三大核心模块,这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部,并且将文章进行分类沉淀,营造团队的知识库,方便大家查阅,同时小报系统也会在每周五进行定时推送,方便大家了解最新的技术动向,前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么这样的一个小报系统是如何实现的呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何设计一个小报系统"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"投稿"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相信大家看到好的文章的时候,总会有忍不住想分享给别人的冲动,一个简单易用的投递功能可以很方便的满足大家的分享欲望,将好的文章输入到团队,帮助其他同学~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一个简单容易的投稿功能,我们需要解决两件事情:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1、如何能在看到好文章时,满足分享的冲动"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2、如何对投稿的文章进行归类收集,方便沉淀与查找"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果是一个单独的录入系统,手动录入,这种方式操作繁琐,很容易打消大家的热情,平时在浏览器看文章的时候,我们经常将好的文章加入书签收藏,一键操作,方便快捷。那么如何能像浏览器书签收藏文章一样方便的去投稿呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很容易想到通过浏览器的扩展能力去做这个事情,Chrome 插件就提供了这样的能力"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"什么是 Chrome 插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/developer.chrome.com\/extensions","title":"xxx","type":null},"content":[{"type":"text","text":"官方解释"}]},{"type":"text","text":" :谷歌插件是一种小型的用于定制浏览器体验的程序。它可以使用户根据个人需要或偏好来定制  Chrome 的功能和行为,它们基于 Web 技术(HTML,JavaScript 和 CSS)构建。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"说人话:开发一个 Web 项目,能够嵌入到 Chrome 浏览器中,同时能够通过一些特定的 Api 获取到一些能力,从而订制自己的插件功能"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"如何开发一个一键投稿的 Chrome 插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先创建一个项目,开发一个投稿功能页面 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此项目和普通 Vue 项目唯一的区别是根目录多了一个 "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":" 文件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3f\/3fc5ed5c64ace5764659bea6162cb8c4.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"创建 "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":":Chrome 通过识别项目根目录是否有 "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":" 文件来识别是否为 Chrome  插件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{ \n \/\/ 核心代码 \n \"name\": \"Zoo!\", \/\/ 扩展名 \n \"browser_action\": { \n \"default_popup\": \".\/popup.html\" \/\/ 点击浏览器右上方插件小图标弹出的内容 html \n }, \n \"content_scripts\": [ \/\/ 能够在 Web 页面内运行的 javascript 脚本 \n { \n \"matches\": [\n \/\/ 满足什么协议下进行调用 \n \"http:\/\/*\/*\", \n \"https:\/\/*\/*\" \n ], \n \"js\": [ \n \".\/contentScripts\/zdata.js\" \/\/ 插入到网页的 JS 文件路径 \n ], \n \"run_at\": \"document_start\" \/\/ 在document 加载时执行 \n } \n ] \n} "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这样插件被打开时会默认加载 "},{"type":"codeinline","content":[{"type":"text","text":"popup.html"}]},{"type":"text","text":" 页面的内容,效果如图:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4c\/4cf4bdc742b07b6a6204f508001aa4bf.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何获取文章标题、简介、URL"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"插件本身其实不能获取到当前页面的标题,但 Chrome 插件提供一种能够在当前页面动态插入固定 JS 脚本的能力,我们可以根据这种机制向当前页面插入一段 JS 脚本去获取页面的标题、简介和 URL,然后再通过消息机制将获取到的内容返回到插件中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let host = this;\n\/\/ 获取当前窗口 id \nchrome.tabs.query({\n active: true,\n currentWindow: true\n}, function (tabs) {\n let tabId = tabs.length ? tabs[0].id : null;\n \/\/ 向当前页面注入 JavaScript 脚本 \n chrome.tabs.executeScript(tabId || null, {\n file: '.\/contentScripts\/recommend.js'\n }, function () {\n \/\/ 向目标网页进行通信,向 recommend.js 发送一个消息 \n chrome.tabs.sendMessage(tabId, {\n message: 'GET_TOPIC_INFO',\n }, function (response) {\n \/\/ 获取到返回的文章 title 、url、description \n host.article.title = response.title;\n host.article.link = response.link;\n host.article.description = response.description;\n });\n });\n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"recommend.js"}]},{"type":"text","text":"  监听消息 ,通过 addListener 我们可以监听来自  sendMessage  发出的消息,在 sendMessage 中定义 message 常量让我们可以在接收消息时对消息进行区分。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let doc = document;\nchrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {\n if (request.message === 'GET_TOPIC_INFO') {\n \/\/ 获取 title \n let title = document.getElementsByTagName('title')[0].textContent;\n let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];\n \/\/ 获取 描述 \n let description = descriptionEl ? descriptionEl.getAttribute('content') : title;\n \/\/ 发送数据 \n sendResponse({\n title: title.trim(),\n link: location.href,\n description: description.trim()\n });\n } else if (request.message === 'SIGN_RELOAD') {\n console.log('request, sender', request, sender);\n }\n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"点击投稿时,需要将数据发送到服务端做存储"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"\/\/ 投稿按钮点击事件 \nhandleRecommendArticle: function () {\n  let request;\n  request = ajax({\n    method: 'post',\n    url: 'https:\/\/XXX\/api\/post', \/\/ 后端接口 \n    data: {\n      'title': this.article.title,\n      'desc': this.article.description,\n      'category': this.article.category[1] || '默认分类',\n      'link': this.article.link,\n      'referrer': this.article.reporter\n    }\n  });\n} "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果图:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/52\/5260a11bf4b6e88d656b2e3a76d2d4fe.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面就是一个很轻量的 Chrome 插件的实现了,基于这样的一个 Chrome 插件,当我们看到喜欢的文章时,就可以一键分享给团队的小伙伴了~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当文章多了之后,如果没有有效的管理,文章会堆积杂乱,反而让大家失去了去学习的欲望,那么我们如何对投稿的文章进行归类收集,方便同学们有查找自己需要的知识体系呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"标签设计"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/04\/041c55aa641fda75d15fb4a96a5405ef.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"标签分类"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在标签分类上当时花了一些时间去设计,难点主要是什么样的分类维度能够让投稿人快速找到对应的分类,让查看人能够快速根据分类找到自己想要的文章, 以及如何能够快速找到往期文章等 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这就要求我们的分类需通俗易懂,且能够涵盖业务大部分文章的类型,最后我们是从基础、语言、架构、选型、工具、总结等多维度进行分类。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f4\/f486116177a3e722447ddeabf4f95b6c.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了能够快速进行文章查找,这里将分类查看功能也集成在 Chrome 插件中"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3a\/3a11e3dd131e2d648e614bde94790c71.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"安装插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"插件制作完成之后,其他同学就可以将你的插件安装包安装到浏览器中。因为墙的原因,这里没有选择将插件上传到 Chrome 应用商店,我们是直接安装到本地, 下图为打包后的项目目录结构:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3f\/3fc5ed5c64ace5764659bea6162cb8c4.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安装步骤:浏览器选择设置 —> 扩展程序 —> 加载已解压的扩展程序 —> 选择文件目录即可。同时,开发者模式记得打开。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/98\/983536a91d59ef914e9b947f40f8df10.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"汇总沉淀"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很普通一个前端项目,这里不再过多陈述,主要是能够看到每一期文章和按照分类进行快速查找,并统一收录文章入口。其中,前端页面采用 SSR 服务端渲染实现。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c150a8c83b52f1b827b9ed56ae7e34c8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/84\/84af85bce5e0fa2e009292d1111bbf52.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"整体设计"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/53\/535b4f60f95485342f24a8984490370f.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"总结"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端小报系统虽然是个小系统 ,但是不论从功能设计,还是系统设计方面都奔着一个目标,努力推动团队的学习氛围,让团队同学持续的成长。希望通过本文分享能够给大家一些启发,如何从一个目标出发去拆解落地,去思考如何让工具的去更好的服务于人。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"头图:Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者:猴子"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文:https:\/\/mp.weixin.qq.com\/s\/YE_XEP38C3DeSEx-hHYQkA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文:手把手教你打造属于自己团队的前端小报系统"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。"}]}]}
版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://www.infoq.cn/article/MdfsN2tfeS4OTUMtNLGY?utm_source=rss&utm_medium=article

  1. Nginx-技术专题-入门教程
  2. Reactor详解之:异常处理
  3. React Fiber 是什么?
  4. Serverless Components 在腾讯云的落地和实践
  5. 波塞冬:伴鱼运营活动前端配置化实践
  6. 4982亿背后的前端技术—2020天猫双11前端体系大揭秘
  7. 前端菜鸟让老接口提速60%的原理与实现
  8. 前端周报:Vue 新语法糖引争议;VSCode 现内存泄漏 BUG,官方置若罔闻引不满;百度应用收集用户敏感数据被谷歌短暂下架
  9. React Portals 简述及其用例
  10. 万字长文深度剖析面向对象的javascript
  11. 高德最佳实践:Serverless 规模化落地有哪些价值?
  12. 前端开发还可以这么玩?元数据实践分享
  13. 解密智联招聘的大前端架构 Ada
  14. Serverless 如何落地?揭秘阿里核心业务大规模落地实现
  15. 封装 axios 取消重复请求
  16. Serverless弹性伸缩的现状调研
  17. 预填充Vue.js全局存储状态的三种方法
  18. React Native 优先的多端统一化方案
  19. 解读前端的2020:一直走在“变化”的路上
  20. 移动AI系列-百度Paddle.js在Web前端中的探索和实践
  21. 博睿数据支持腾讯云函数监控,Serverless时代已来临
  22. 使用 Jenkins、Docker 构建部署 Serverless 应用
  23. 如何用 typescript 写一个处理 console 的 babel 插件
  24. How to write a Babel plug-in to handle console with typescript
  25. Vue 组件数据通信方案总结
  26. 一文读懂 Serverless,将配置化思想复用到平台系统中
  27. 基于 Vue 的商品主图放大镜方案
  28. 聊聊 React 组件库的技术选型与设计
  29. 看完这篇,再也不怕被问 Webpack 热更新
  30. 写给前端工程师的 Serverless 入门
  31. 前端团队的成长
  32. 从设计模式理解Vue响应式(多图警告)
  33. 干货 | 前端跨端业务整合的探索与实践
  34. 2021年前端发展预测
  35. 4个强大JavaScript运算符
  36. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  37. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  38. 性能!!让你的 React 组件跑得再快一点
  39. 权威指南:Serverless 未来十年发展解读(下)
  40. 权威指南:Serverless 未来十年发展解读(上)
  41. 如何在 React 中优雅的写 CSS
  42. 自建图床应用,我只推荐 Serverless
  43. 前端DEF部署和BUC接入的“跨域”坑
  44. 可视化搭建数据大屏系统的前端实现
  45. 跨国合作:Serverless Components 在腾讯云的落地和实践
  46. 前端工程师的自我修养-关于 Babel 那些事儿
  47. 腾讯 IMWEB 前端团队一站式 Serverless 开发解决方案
  48. 五分钟看懂 Nginx 负载均衡
  49. 腾讯云 Serverless 应用初探 —— 印象笔记
  50. Springboot 之基于腾讯云 Serverless 的订单应用
  51. 前端文档站点搭建方案
  52. 爱奇艺智能前端异常监控平台的设计与实践
  53. 这就是你日思夜想的 React 原生动态加载
  54. Tim Wagner: Serverless 是云计算的第三次浪潮
  55. 15+人团队的前端体系架构应该如何管理?
  56. 前端开发者必备的12个工具
  57. Gitee x 腾讯云 Serverless,实现 Web 框架快速上云
  58. APM:实质提升 Serverless 可观察性
  59. Serverless比你预期要贵得多
  60. 伯克利谈Serverless:服务器的存在,是云计算的大问题