JavaScript 最佳实践:提升代码质量的建议和技巧

翻译自:JavaScript Best Practices: Tips & Tricks to Level Up Your Code
没有严格的按照原文翻译,删减修改了部分内容。

在这个教程中,会列出一些重要的 JavaScript 的最佳实践,学习这些并不会很困难。

避免污染全局作用域

声明变量是很有趣的,有时候你会在你不知情的情况下声明了全局变量。在现在的浏览器中,全局变量将会存储在 window 变量中。在全局作用域中的变量可能在不经意间被覆盖。

如何减少浏览器回流

什么是浏览器回流

浏览器在显示网页时,需要计算每一个元素应该放置的位置,这个计算过程就称为浏览器回流(browser reflow)。回流会重新计算页面的布局,在回流中会重新计算元素的尺寸与位置,并且也会触发对子元素的回流。

触发浏览器回流的操作:

  • 在 DOM 中插入,移除或者更新元素
  • 修改页面上的内容
  • 移动 DOM 元素
  • 修改元素 CSS 样式
  • 修改元素的类名
  • 调整窗口的大小

数组乱序的正确姿势

underscore 中有一个函数,其作用是将数组乱序排序,实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Shuffle a collection, using the modern version of the
// [Fisher-Yates shuffle](http://en.wikipedia.org/wiki/Fisher–Yates_shuffle).
// `shuffle` 函数。
_.shuffle = function(obj) {
var set = isArrayLike(obj) ? obj : _.values(obj);
var length = set.length;
var shuffled = Array(length);
for (var index = 0, rand; index < length; index++) {
rand = _.random(0, index);
if (rand !== index) shuffled[index] = shuffled[rand];
shuffled[rand] = set[index];
}
return shuffled;
};

浪矢杂货店

解忧杂货店,零零散散的在地铁上看完了这本之前一直听到却没有去看的小说。其实几天前想写这篇读书笔记的,一直被拖延至今。

爱情公寓中有一集曾小贤说了这样一句话。当面对两个选择时,抛硬币总能奏效,并不是因为它总能给出对的答案,而是在你把它抛在空中的那一秒里,你突然知道你希望它是什么。就像是那些向浪矢杂货店投递烦恼信件一样,其实真正来向浪矢爷爷咨询的人大多心里已经有了答案。只是自己没有发现,当杂货店回信中的建议并不像所期望的回答的时候,咨询者就发现自己想要的那个答案。

Vue 中使用 highlight.js

今天遇到一个问题:在使用 vue 的练手项目中,渲染的 HTML 里 <code> 标签中的代码没有代码高亮。

遂想到用 highlight.js 来解决,按照平常那样在 HTML 文件中引入 jscss 文件,然后在<header> 中加上一句 <script>hljs.initHighlightingOnLoad();</script>。但是却没有效果。

在 Vue.js 的论坛上找到了解决方案 Getting highlightjs to work with vue-router。highlight.js 没有效果是因为使用了 vue-route,在 route 改变时,页面将会重新渲染并且会移除事件,这里就把 highlight 的事件给移除了。

CSS 实现垂直居中

我们有这样一个结构的 HTML:

1
2
3
<div class="parent">
<div class="children"></div>
</div>

如果我们要实现 .children.parent 中垂直居中。

通常第一印象会想起给父元素设置相对定位,给子元素设置绝对定位。这样子元素就相对于父元素定位,再通过 topleft 各偏移 50% 父元素宽度,使用 margin-* 来修正子元素的位置。

Sass 初探

为什么学 Sass

说起来其实很早就知道 Sass 这东西。刚开始写 Even 这个博客主题的时候就有在考虑是要用 Less 还是Sass,最后用了变量名用 @ 开头的 Less(可能是 PHP 的原因,对 $ 开头的变量名没什么好感)。

最近正在看 Foundation,源码是用 Sass 写的。Bootstrap 之前也是用 Less 的,不过后来也转向了 Sass。然后发现 Foundation 写得挺不错的,看看博客主题写的代码,简直不能看。正好打算把主题给重构重构,就顺手学学 Sass,用 Sass 写。

使用 Nokogiri 解析 HTML

Nokogiri 是 Ruby 的一个 HTML/XML 文件的解析库。在需要解析 HTML/XML 文件获取数据时,它是一个很好的选择。

解析 HTML 文档

使用 Nokogiri 解析 HTML 将会生成 Nokogiri documens
生成该对象的方式有三种,分别是通过字符串解析,通过文件解析,通过网络解析。

通过字符串解析

通过字符串解析,即是将字符串当作函数的参数传给 Nokogiri::HTML 函数。

1
doc = Nokogiri::HTML("<html><body><h1>Ahonn</h1></body></html>")

使用 JavaScript 实现简单的拖拽

步骤

使用 JavaScript 实现拖拽的步骤:

  • 让元素捕获事件(mousedown, mousemove & mouseup)
  • 单击并不释放,触发 mousedown,标记开始拖拽,并获取元素和鼠标的位置
  • 拖动鼠标,触发 mousemove,不断的获取鼠标的位置,并通过计算重新确定元素的位置
  • 释放师表,触发 mouseup,结束拖拽,确定元素位置并更新

被拖拽的元素必须是相对父元素定位,或者是绝对定位

记第一次面试

记录第一次面试 流水账 想到什么写什么

第一次正正经经的去面试,虽然只是个软件开发暑期实习生。

刚开始是在网上无聊的逛 V2EX 什么的,然后看了看 conde 社区。后来神不知鬼不觉的不知道为什么就跑到了 Ruby China 去了,又神不知鬼不觉的跑去看了招聘的版块。

其实在这之前的两个星期都有在拉钩上投实习,虽然有几个简历通过了,但是却毫无沟通的直接定了面试时间。不是刚刚好顶到上课时间,就是早上 10 点的(也就是说我得早上 7 点起床赶去广州面试)。说实在的对那些公司兴趣也不是很大。