唐霜的博客

我们比较两个对象，比较好的一种办法是直接比较两个对象的hash值，对于相同结构和内容的对象，hash值应该相等。怎么获取对象的hash值？

/**
 * 获取一个字符串的hash
 * @param {*} str
 */
function getStringHash(str) {
	let hash = 5381
	let i = str.length

	while(i) {
		hash = (hash * 33) ^ str.charCodeAt(--i)
	}

	return hash >>> 0
}

/**
 * 格式化对象，类似JSON.stringify，但是支持自引用嵌套
 * @param {*} obj
 */
export function stringifyObject(obj) {
	const exists = [obj] // 存储已经处理过的，避免死循环
	const used = [] // 记录被用到的引用标记
	const stringifyObjectByKeys = (obj) => {
		if (isArray(obj)) {
			let items = obj.map((item) => {
				if (item && typeof item === 'object') {
					return stringifyObjectByKeys(item)
				}
				else {
					return JSON.stringify(item)
				}
			})
			let str = '[' + items.join(',') + ']'
			return str
		}

		let str = '{'
		let keys = Object.keys(obj)
		let total = keys.length
		keys.sort()
		keys.forEach((key, i) => {
			let value = obj[key]
			str += key + ':'

			if (value && typeof value === 'object') {
				let index = exists.indexOf(value)
				if (index > -1) {
					str += '#' + index
					used.push(index)
				}
				else {
					exists.push(value)
					let num = exists.length - 1
					str += '#' + num + stringifyObjectByKeys(value)
				}
			}
			else {
				str += JSON.stringify(value)
			}

			if (i < total - 1) {
				str += ','
			}
		})
		str += '}'
		return str
	}
	let str = stringifyObjectByKeys(obj)

	exists.forEach((item, i) => {
		if (!used.includes(i)) {
			str = str.replace(new RegExp(`:#${i}`, 'g'), ':')
		}
	})

	if (used.includes(0)) {
		str = '#0' + str
	}

	return str
}

/**
 * 获取一个对象的hash值
 * @param {*} obj
 */
export function getObjectHash(obj) {
	if (typeof obj !== 'object') {
		return
	}

	let str = stringifyObject(obj)
	let hash = getStringHash(str)
	return hash
}

这里面考虑到了一个非常严重的问题，就是当一个对象如果存在自引用的情况，普通的遍历会引起死循环而导致程序挂掉，但这个函数不会，它会用一个临时变量去记录已经处理过的对象，如果在下一次处理到一个对象时，首先会去临时变量里面查找，如果找到的话，会把这个变量的索引值作为参考系数，直接用于hash计算。

之前用了qr.liantu.com的接口生存二维码，并且通过curl抓取到接口生成的二维码图片之后，再保存到本地的一个cache目录下。之前用着挺爽的，但是最近这个网站开始抽风，生成二维码非常慢，最后完全无法忍受了，于是决定还是自己生成二维码得了。

我的目标是给每一篇文章生成一个二维码，放在cache目录下，在我的首页和路迹栏目都需要用到。于是下载了知名的二维码库phpqrcode，然后集成到我自己的工具函数中。自己写的代码如下：

<?php

include_once(__DIR__.'/phpqrcode/qrlib.php');

function get_qr_code_url($text) {
  $path = "/cache/qrcode-".md5($text).".png";
  $file = WP_CONTENT_DIR.$path;

  if (!file_exists($file)) {
    QRcode::png($text, $file, QR_ECLEVEL_L, 4);
  }

  $url = home_url("/wp-content".$path);
  return $url;
}

然后在主题文件中调用get_qr_code_url函数即可。$text则通过get_the_permalink()得到，这样就快速把二维码集成到自己到博客中了。

今天遇到一个极其蛋疼的情况，两个js模块，相互循环引用，造成一个bug。

// a.js
import { SomeB } from './b.js'

export const SomeA = 'aaa:' + SomeB

// b.js
import { SomeA } from './a.js'

export const SomeB = 'bbb:' + SomeA

接下来我在一个文件中使用模块b：

// c.js
import { SomeB } from './b.js'

console.log(SomeB)

你知道会得到什么结果吗？总之是得到错误的结果。在chrome中直接运行会直接报错，说a.js中的SomeB未定义。这……

其实这是真的。因为a.js和b.js相互引用，导致的结果就是，无论是谁，在执行的时候，都需要另外一个模块加载完成才能进行自己的解释。这就很蛋疼：

c.js -> b.js -> a.js -> b.js -> a.js ...

而js解释器一般会灵活处理，即不会死循环的去如此解释，而是在发现循环的时候，就直接结束，即：

c.js -> b.js -> a.js $

但是，当a.js需要b.js所带来的上下文时，实际上b.js还没有被解释，因为b.js依赖a.js的解释结果，因此，在a.js中，SomeB被认为是not defined，这已经不是TypeError，而是ReferenceError，也就是在上下文中，该变量未被声明。

因此，千万不要循环引用啊，切记切记。

在Robust中，我提到说babel和webpack具有时间节点上的意义，但是现在看来，这个时间节点已经过去，它们可以功成身退了。怎么讲？我们使用babel的主要目的，是将js高版本的语法编译为低版本语法，以在前几年时间里，浏览器还没有跟上节奏，很多新版本特性没支持的情况下，解决临时问题。但是，现在不同了，大部分新特性浏览器都会提前埋好，标准出来时，浏览器已经支持了。而且，很多特性我们之前不敢用，我们担心某些浏览器不支持。但是随着时间的流逝，可以确定的是，两年前的特性浏览器一定已经支持了，只是新发布的标准还是比较难确定的。而比较激进的chrome，则大部分我们需要的特性都是支持的。我觉得，ES2018发布之后，我们就可以不需要babel了，因为99%以上的语法浏览器都支持了，其中最重要也是最慢的，就是object spread/resest这个特性：

var obja = { a: 1 }
var objb = { ...obja, b: 2 }

这个特性已经成为标准的一部分，那么基本上我们需要的特性都有了。我们对ES标准，已经没有太大的要求，只希望它慢慢迭代，更正和修复一些小问题了。

除了特性支持以外，模块引入也已经被支持了。我们不需要通过webpack来打包，支持我们写的import/export语法，浏览器原生支持这些语法。

<sricpt type="module">
import SomeModule from 'http://xxx/somemodule.mjs'
</script>

它的工作方式非常符合我们的理解，这使得我们完全可以放弃AMD那种复杂的模块引入方式，这就让曾经传言浏览器内置require.js这样的传言不攻自破。

另外，还有一个特性，即tagged string tempaltes，这个特性可以直接替代jsx，ES本身就支持类似jsx那样的语法，只是需要一个tag解析函数而已，而这些都是在运行时可以完成的。举个例子：

import { jsx } from 'https://xxx/jsx'

const vdom = props => jsx`<div class="${props.className}">${props.children}</div>`

ES本身就支持通过一个函数去解析字符串，然后返回任意形式的数据。这样一来，字符串模板本身就可以实现和jsx相同的功能。当然，还是有一点不同，jsx是需要编译的，编译后直接生成代操作的程序代码，在运行的时候，不需要经过解析解析模板这个步骤，省了一些性能。而如果运行时去解析字符串模板，可以缓存，因为字符串本身的结构不会变化，但是比较复杂的结构，还是需要每次都去进行解析模板，所以，性能上会有消耗。但无论如何，ES已经给了我们这样的能力，我们完全可以抛开babel，99%的代码都可以运行。