关于前端:10-天开发前台系统技术系列

32次阅读

共计 1763 个字符,预计需要花费 5 分钟才能阅读完成。

在确定了前台零碎的具体布局和整体性能当前,破费工夫更多的其实是对技术细节的打磨。本篇文章是一个对前台开发技术进行概要整顿,也会对其余的分主题进行一些疏导。


本主题借鉴我开发集体网站 魚立说 的教训,整顿了在开发前台零碎过程可能会遇到的各种技术要点。整个系列由以下几个文章局部组成:

  • 前台开发技术小结
  • 动起来的网站元素

而且,波及到的代码曾经整顿到 https://github.com/yulis-say/web-full-stack 中的 front-skills 目录,若感觉有用,请分享并 star。

前台开发小结

上面对前台零碎的开发技术要点顺次进行概括,包含必要的阐明和资源疏导。

CSS 应用技巧

  • :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。

JavaScript 应用技巧

  • 设置的 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。

动起来的网站元素

有时候,动起来的网站元素能给用户带来更好的体验,从而吸引更多的人们拜访你的网站。当然,缺点是会给网页带来一些额定的资源耗费。成果如图:


图:动起来的网站元素

一些乏味的网站性能

Gravatar 随机头像

它是 Gravatar 推出的一项服务,意为“全球通用头像”。只有提供一个哈希值,就可能显示出 Gravatar 头像来。如果这个哈希值是由注册的 email 地址生成的,那么就会显示你在 Gravatar 上传的头像;如果是未注册的轻易生成的哈希值,那么就会随机生成一个虚伪头像。

并且,应用 Gravatar 可能生成多种类型的头像,例如神秘人、随机图案、怪物、卡通头像、像素图片、机器人等。文档地址:http://en.gravatar.com/site/implement/images/。成果如图:


图:Gravatar 随机头像

新浪微博表情

网站的评论或聊天性能中,通常须要反对各种表情,这时就能够参考应用新浪微博表情,官网文档:https://open.weibo.com/wiki/2/emotions。成果如图:


图:新浪微博表情

向浏览器控制台输入信息

有时候能够应用 Console 对象,向浏览器控制台输入一些非凡的网站信息,比方网站介绍、业务反对、招揽人才等。例如我的网站中输入的信息,如图:


图:向浏览器控制台输入信息

更多有用的网站

  • MDN Web 文档:提供无关凋谢网络技术的信息,包含 HTML、CSS 和万维网及 HTML5 利用的 API。网址:https://developer.mozilla.org。
  • Font Awesome 字体图标:提供可缩放矢量图标,能够被定制大小、色彩、暗影以及任何能够用 CSS 的款式。网址:https://fontawesome.com/。

参考链接

① Gravatar – Globally Recognized Avatars

② console.log – Web API 接口参考 | MDN

正文完
 0