刚刚完成了一个小项目的基本功能：
键盘.jpg
简单介绍一下这个项目:
这是一个非常个性化的导航网站
核心功能，通过给常用网站与固定键位绑定，用户可以便捷地访问常用网站；
相比浏览器的收藏夹、chorme 的首页地址展示，这个导航网站的优点很突出：1.便捷：一个键位便可以访问常用网站；
2.直观：键位设置了网站对应的图标提示，根本不怕自己忘了；
3.容量足够：可以设置 36 个网址；
4.美观：“金属键盘”，质感酷酷的~
5.其它 …… 待升级
事实上，这是一个很基础、很简单的小项目，但是我确实挺高兴的，因为这是我第一次成功地用简单的代码实现了看起来不简单的东西。
看看我在此之前做的东西就知道了：
program1.png
program2.png
连我自己都忍不住，“真的丑的要死” ……
仔细看看这个项目的细节处理
1.按钮上，
1）外观：用 css 的 conic-gradient 圆锥渐变实现了金属效果, 利用 border, border-radius, box-shadow实现了立体效果；
2）动态：利用 :hover, margin-top，box-shadow 实现了按键点击效果，点击后，触发页面跳转是在 100 毫秒后，在 50 毫秒的时候，设置了一个 onblur() method 让按键“弹回”，这样用户就能够看到按键按下与弹回的效果；
3）排布：模拟真实键盘排布，包括键位的长宽比，键位间间隔，都是根据真实键盘的排布，所以视觉上，虽然不整齐，却反而有一定的美感；
2.背景，
背景主要是配合键盘的颜色，看起来很舒服，我自己对于背景的考虑是，虽然这个事儿不难，当是效果却非凡，
no_back.png
如果没有背景的时候竟然长这个样子。
有个哥们花了一个星期学了点前端知识，做出来的东西把我吓呆了：
月夜茶会
仔细看看，这个页面比我的还简单，关键是背景和飘落的花瓣真的选的很恰当！
所以说，找合适的背景很重要；
3.图标
小图标附着在键位上，这样用户万一忘了键位，看一下就知道了，并且，键位所在的 element 还设置了 title 就是网站的网址，用户只要鼠标放上去就会有提示；
图标都是源自每个网站自带的 favicon.ico，对于那些网站本身没有这个图标的，用 onerror 抓取，并且设置为一个默认的蓝色小地球图标；
相应的，没有设置网址的键位配上了一个灰色的地球图标。
4.javascript&封装
javascript 代码实现了这个项目的功能，后面花了不少时间把 js 代码整理注释封装了一遍，整理的核心原则有两点：
1）归类，代码结构分层，（初始化数据、elements生成、监听、函数）；
2）功能独立，把很多小功能都封装成独立的函数；
总体上，结构清晰很多，简洁很多。
接下来，想谈谈最重要的是，这个项目虽然代码是自己写的，当绝大部分效果、思想其实是借鉴（抄袭）别人的。
可能跟你的理解有点差异，我并不觉得这是什么见不得人的事儿。主要是因为我现在对于前端工程师的理解（想象）：
作为一名合格的前端工程师，该自豪的是，我能够实现什么东西，而不是去证明自己有多牛逼。
这两者有什么差异呢？关注的焦点不一样，前者是“就算我不太懂的东西我也能够做出来”，后者是“我真正懂的东西我才用”。
不谈别的，就这两种思想的差异，直接决定了这个项目中按钮的金属效果我能否实现：
看看它的代码：
background: conic-gradient(#d7d7d7, #c3c3c3, #cccccc, #c6c6c6,
#d3d3d3, #d8d8d8, #d5d5d5, #d8d8d8, #d3d3d3, #c5c5c5, #c0c0c0,
#bfbfbf, #d0d0d0, #d9d9d9, #d1d1d1, #c5c5c5, #c8c8c8, #d7d7d7,
#d5d5d5, #cdcdcd, #c4c4c4, #d9d9d9, #cecece, #c5c5c5, #c5c5c5,
#cdcdcd, #d8d8d8, #d9d9d9, #d7d7d7);
一个小按钮要搭配这么多颜色 ……
于是我的做法很简单，别人调好的颜色，虽然我不懂，但是我可以直接用，我所真正要做的是调节 边框还有阴影属性，让它看起来更符合我的主题。
这在道理上也是说得过去的，在编程的世界里，好东西非常多，非常易得，以至于，自己花大量的时间去瞎创新反而是很不划算的。
我们常常说，人要更注重自己的内在能力，这当然没错，可那是基础，也只能是自个暗中对自个的要求，面对他人，我们总不得不致力于更好地表现给他人看。
这点在 前端上特别明显，同样的样式，你可以用 css 以特别牛逼特别精妙的方式实现，但你也可以用非常蠢的方式做到，别人相对不太关心的（注意，不是不关心），别人最关心的是，你做出来的东西看起来如何，用起来如果。
除了善于借鉴他人成果，学习前端的另外一个技巧就是，快速掌握必要的小技巧：
这种小技巧常常非常多，可以分到非常细：
1.图片去哪里找？
2.要如何处理图片？
3.如何快速取色？
4.如何快速判断元素长宽？
5.记住图片的常用长宽像素
6.图片压缩技巧
7.小图标去哪里，并且如何使用
……
面对这样的小技巧，都靠自己摸索吗？肯定不行的，因为这样的小技巧常常是“你不知道也过得去，知道了却离不开”，最有效的获取办法恰恰就是去观察别人。
总结下来，以我的理解，作为前端，想法很重要，外观很重要，小技巧很重要。
想要做出精美的作品，懂得如何借鉴别人是开始之后最重要的一步。
网友评论