首页 > WEB开发 > 代码 > 【经验】少写代码少填坑?
2016
09-23

【经验】少写代码少填坑?


我不是这个世界上最有才的程序员。是的,我知道这是真的。所以我尝试尽可能少写代码。我写得越少,破坏越少,调整和维护的工作量也就越少。

我也很懒,所以觉得一切过得去就行了。

然而,事实证明让 Web 变得高效的唯一行之有效的方法也只是少写代码。精简代码?压缩代码?缓存?好吧,听起来好高级。从源头上竭尽全力拒绝增加代码或者引入别人写的代码?现在你说到点子上了。解决一个问题又会带来另一堆别的问题,你的任务可能让你无比蛋疼。

而这还没完。不同于为了可见的性能收益的优化目标 —— 如果确实有可见的优化点,你还是需要多写一些代码,不过你得想好了 —— 少写代码可以让你的 Web 应用使用成本降低。我接收的数据内容不在乎你用小块还是大块数据发送,反正它们拼起来之后都一样(意思是性能优化不明显的话没必要过度合并请求 —— 译者注)。

我最喜欢的关于少写代码更好的观点是:你应该只完成你真正需要的东西 —— 即你的用户真正需要的东西。在按钮上加一道光?别说道光,加康熙也不干。为了加社交按钮引入一堆第三方代码,同时破坏掉你的页面设计?将它们一脚踹开。用 JavaScript 定制用户的鼠标右键来显示一个自定义的模态对话菜单?代表月亮消灭它们。

这不仅仅是关于你引入代码来破坏 UX 设计的问题,你自己写的代码也必须要尽量减少。这里我提供一些观点会有帮助。我曾经写过一些不用写的代码,用在无障碍和响应式设计方面。结果却让我明白一个道理,灵活的、无障碍的 Web 正需要我们尽可能少去人为控制。只有不写的代码才永远都不需要重写。

WAI-ARIA

首先,WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 不等于 Web 无障碍。它只是一个工具,在需要的时候通过某些辅助技术来提高兼容性,比如支持读屏软件。因此,ARIA 使用的第一原则 是如果你不是必须要用的时候不要使用 WAI-ARIA。

为了德玛西亚!别这样写:(原文这里是 LOL,no:,LOL 应该是 Laugh Out Loud,不过我故意翻译成那个的 )


<div role="heading"aria-level="2">Subheading</div>

应该这样写:

<h2>Subheading</h2>

使用原生元素的好处是你通常也不需要为你的元素行为添加脚本。看下面的 checkbox 实现,这么写不仅代码很冗长,而且还需要依赖一段 JavaScript 来控制状态变化从而 模拟(follyfill) 出本来就是浏览器标准化的 name 属性和 HTTP GET 的基本行为。明显这么写需要更多代码,而且不那么健壮。搞笑吧?

<div role="checkbox"      aria-checked="false"      tabindex="0"      id="checkbox1"      aria-labelledby="label-for-checkbox1"></div> <div class="label" id="label-for-checkbox1">My checkbox label</div>

上面那么写是为了要考虑样式?没关系,如果你真的需要自定义样式,可以这么做。

<input type="checkbox"        id="checkbox"        name="checkbox1"> <label for="checkbox1">My checkbox label</label>

Grids

你记得曾经享受使用/阅读一个超过三栏布局的网页吗?我不觉得那是一种享受。太多的内容堆在一起,干扰了我的注意力。“我想知道那些看起来像是导航栏的东西它真的是我想要的导航栏吗?” 这样的网站套路太深,我要做的任务被打断了,于是我离开了这个网站。

有时候我们确实想要内容堆在一起。比如搜索结果或者其他什么。但是为什么要引入一整个笨重的栅格框架模板只为了实现这个功能?Flexbox 用三两个声明块就能做到。

.grid {  display: flex;  flex-flow: row wrap; } .grid > * {  flex-basis: 10em;  flex-grow: 1; }

现在一切都“扭曲”为大约 10em 宽。一行有多少列取决于 viewport 可以放下大约多少个 10em 宽的单元格。搞定,继续。

然后,当我们来到这里,下面这个是什么鬼:

width: 57.98363527356473782736464546373337373737%;

你知道精确的测量是根据一个神秘的比例计算的吗?一个令人敬畏的神奇比例?不,我不觉得,也不感兴趣。我只想要让播放动作片的按钮足够大以便我能找到它。

Margins

我们做到了这个。使用通用选择器让元素共享 margin 定义。只在需要改变的地方重写它,不需要更复杂。

body * + * {  margin-top: 1.5rem; }

不,通用选择器不会破坏你页面的性能,别被砖家坑了。

Views

你不需要一整个 Angular 或者 Meteor 或者别的什么来分离一个简单的网页到“视图”。视图只是分别控制你所能看见的网页部分和你看不见的部分,CSS 也可以做到:

.view {  display: none; } .view:target {  display: block; }

“但是单页应用需要在它们加载视图的时候执行代码!”我知道你要说这个。这个用 onhashchange 事件就好了。不需要其他库,你只需要使用标准的,可收藏到书签的链接方式就可以了。这很棒。关于这个技术,这里有更多介绍,如果你感兴趣可以看一下。

Font sizes

调整字体大小真的可以让你的 @media 块膨胀。这也是为什么你需要小心照顾好你的 CSS。其实用一行代码可以解决:

font-size: calc(1em + 1vw);

嗯,这样就行了。你甚至有了字体的最小大小,所以在手机上字体也不会变得太小。多亏了Vasilis 教会了我这个。


本文转载自:[众成翻译](http://www.zcfy.cc)

译者:[十年踪迹](http://www.zcfy.cc/@akira)



关注代码技巧 回复19领350本编程书籍

代码技巧

查 看学习编程5个常见的疑问