盘点 2020 | 10 天开发前台系统技术系列

关注

发布于: 2020 年 12 月 29 日

在确定了前台系统的详细规划和整体功能以后，花费时间更多的其实是对技术细节的打磨。本篇文章是一个对前台开发技术进行概要整理，也会对其他的分主题进行一些引导。

本文来源：魚立说。本文链接：https://www.yulisay.com/d/frontskill.html，支持微信浏览器打开。

更多精彩文章，请移步魚立说个人网站翻看。欢迎欣赏，吐槽不足之处。

本主题借鉴我开发个人网站魚立说的经验，整理了在开发前台系统过程可能会遇到的各种技术要点。整个系列由以下几个文章部分组成：

而且，涉及到的代码已经整理到 https://github.com/yulis-say/web-full-stack 中的 front-skills 目录，若觉得有用，请分享并 star 。

前台开发小结

下面对前台系统的开发技术要点依次进行概括，包括必要的说明和资源引导。

:root 是一个伪类，表示文档根元素。在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在文件，都可以使用 var() 来引用。
要除去多余的 CSS 样式，有一个叫 CSS remove and combine 的 Chrome 插件可以参考，可以生成未使用的选择器分析报告。下载地址：http://www.cnplugins.com/devtool/css-remove-and-combine/。
推荐一个叫 Autosize 的 JavaScript 插件，它是一个小型的、独立的脚本，可以自动调整 textarea 标签的文本高度以适应文本，且取消右边滚动条。Github 地址：https://github.com/jackmoore/autosize。

设置的 Cookie 无法取到？这是因为添加 Cookie 的时候没有指定 path。在添加 Cookie 时，应该指定其 path 为唯一绝对路径，方便获取或操作同一网站中的 Cookie。
QRCode.js ：一个用于生成二维码的 JavaScript 库，主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制而成，不依赖任何库。Github 地址：https://github.com/davidshimjs/qrcodejs。
social-share.js ：实现网站一键分享到 QQ、微信、微博、豆瓣、Facebook、Twitter、Linkedin、Google+等，不过项目现在已经不再维护了。Github 地址：https://github.com/davidshimjs/qrcodejs。