10 天开发前台系统技术系列

可莉
• 阅读 463

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

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

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


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

而且,涉及到的代码已经整理到 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

动起来的网站元素

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

10 天开发前台系统技术系列 10 天开发前台系统技术系列 10 天开发前台系统技术系列
图:动起来的网站元素

一些有趣的网站功能

Gravatar 随机头像

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

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

10 天开发前台系统技术系列 10 天开发前台系统技术系列 10 天开发前台系统技术系列 10 天开发前台系统技术系列 10 天开发前台系统技术系列 10 天开发前台系统技术系列
图:Gravatar 随机头像

新浪微博表情

网站的评论或聊天功能中,通常需要支持各种表情,这时就可以参考使用新浪微博表情,官方文档:https://open.weibo.com/wiki/2/emotions。效果如图:

10 天开发前台系统技术系列
图:新浪微博表情

向浏览器控制台输出信息

有时候可以使用 Console 对象,向浏览器控制台输出一些特殊的网站信息,比如网站介绍、业务支持、招揽人才等。例如我的网站中输出的信息,如图:

10 天开发前台系统技术系列
图:向浏览器控制台输出信息

更多有用的网站

参考链接

Gravatar - Globally Recognized Avatars

console.log - Web API 接口参考 | MDN

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。回调publicfunctionnotify(){$wechatDb::name('wechat')where('status',1)find();
Stella981 Stella981
3年前
AssemblyScript 入门指南[每日前端夜话0xEB]
每日前端夜话0xEB每日前端夜话,陪你聊前端。每天晚上18:00准时推送。正文共:2459 字预计阅读时间:10分钟作者:DannyGuo翻译:疯狂的技术宅来源:logrocket!(https://oscimg.oschina.net/oscnet/b880277c594152a503
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
35岁,真的是程序员的一道坎吗?
“程序员35岁是道坎”,“程序员35岁被裁”……这些话咱们可能都听腻了,但每当触及还是会感到丝丝焦虑,毕竟每个人都会到35岁。而国内互联网环境确实对35岁以上的程序员不太友好:薪资要得高,却不如年轻人加班猛;虽说经验丰富,但大部分公司并不需要太资深的程序员。但35岁危机并不是不可避免的,比如你可以不断精进技术,将来做技术管理或者
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
3年前
5 天开发接口系统技术小结
在确定了接口系统的详细规划和整体功能以后,花费时间更多的其实是对技术细节的打磨。本主题借鉴我开发个人网站魚立说(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.yulisay.com)的经验,整理了在开发接口系统过程可能会遇到的各种技术要点。本文来源:魚立说。本文链接:
Wesley13 Wesley13
3年前
7 天开发后台系统技术小结
在确定了后台系统的详细规划和整体功能以后,花费时间更多的其实是对技术细节的打磨。本主题借鉴我开发个人网站魚立说(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.yulisay.com)的经验,整理了在开发后台系统过程可能会遇到的各种技术要点。本文来源:魚立说。本文链接: