唐霜的博客

随着时间的流逝，越来越对很多看似花里胡哨的库感到失望，其中以 react 和基于 react/vue 所做起来的库为最。对 vue 报以热烈的喜爱，在于，它的开箱即用性和易用性。虽然是一个框架，但你完全可以把它当作一个库来使用。这就是我认为的纯库。所谓纯库，就是 cdn 加载进来，立即可用的库，不需要复杂的构建环境，不需要上下游的 babel 插件，只需要一个 <script src> 就可以使用其功能的库，而这样的库，以 jquery 为最，以 bootstrap 为最，这才是 web 开发的本质，简洁的声明式编程。react 给 web 开发开了一个坏头，但这和 react 自己没有太多关系，而是类 react 的 web 框架，以及趴在 react 上的 web 组件。react 不是最好的 react 库。但要知道，react 的设计理念，是要抽象视图层为 virtual dom，从而可以在跨平台上发挥作用，因此，它有自己的一套事件系统，如果不是为了跨平台，没必要自己做事件系统，而那些只管用 react 做 web 开发的开发者，实际上，和 flutter 做 web 应用一样憋足。而 vue 一个 cdn 挂载进来，把各类插件用 Vue.use 加载进来，马上就可以用。这就像 jquery 一样，插件加载进来就可以用，真正做到的 web 开发的便捷性。失去便捷性的 web 开发，应该交给另外一门语言去做，比如 ts，甚至 go，总之，便捷性是我认为 web 开发的真谛。为了工程的稳定和可持续发展，引入庞大的构建体系，这没有错，但是如果随便一个东西，都一定要走这么庞大的构建体系，那么真的是背道而驰。

JavaScript 这门语言，让开发者感受编程乐趣的方式多种多样。今天掌握了一个新技能。我们来看下：

data.key = value
var a = data.key
value === a

这段代码平淡无奇对吗？但是，如果我告诉你，最后返回的结果是 false，是不是很好玩。

很显然，在这段代码前面，我还干了一些其他事情，导致最后的比较返回 false。我们来看看我都做了什么：

Object.defineProperty(data, 'key', {
  get() {
    return this._originalData.key
  },
  set(v) {
    this._originalData.key = { ...v }
  },
})

当前，在这之前，我还处理 _originalData 等，但这一段代码就可以了。也就是说，我规定了 key 属性在被赋值的时候，都要做怎么样的处理。这是已经到元编程的层面了，所以说 js 好玩。

这不单单是好玩的问题，而是在实际编程中，我们可能遇到的问题。你可能会问，谁会在自己的项目中搞这种蛋疼的事？不过很抱歉，很多处理数据的库，都会这么干，用来解决一些特别的逻辑。我想有一天你肯定也会这么干。我们来看一个可能出现 bug 的实用场景。

const files = []
const file = input()

files.push(file)

if (files.find(item => item === file) {
  // do something
}

类似的代码我们经常用吧。把一个元素加入到一个数组中，需要的时候，又在数组中，去找这个元素。这么干，说实话，经常出事。所以，我建议你最好 files.find(item => item.id === file.id)，用一个字符串或数字作为唯一标志。不然翻车别怪我没提醒过。

为什么会这样呢？

你怎么知道 push 没有被修改过？

files.push = function(v) {
  return Array.prototype.push.call(this, { ...v })
}

所以，你敢随便自认为吗？js 编程就是这么任性。甚至有些人直接在原型链顶端搞事情，你扛得住吗？不要用一个没看过源码的不可靠第三方库！！！这是老人言。现在有些人，非蠢即坏，你防不住的。另外，善用 Reflect 或许也是忠告。

虽然你可以

const pushed = files.push(file)

这样可以得到 push 之后的真实数据，然而，然而，你怎么知道在类似 angular 之类的框架中，这些数据有没有被篡改过。总之，少年，我劝你善良。

今天收到苹果推送的邮件，Robust 已经可以在 PodCast 上搜索到了，赶紧去试了一下，真的可以了。如果你一直关注 Robust，可以直接在 iPhone 上找到 “PodCast” 或者叫 “播客” 这个应用，打开之后，搜索 “Robust” 关键字，就可以找到我们的音频了。大家订阅关注吧～

另外，你可以使用泛用型博客客户端，订阅如下 RSS 地址：

http://www.ximalaya.com/album/34869197.xml

这样也可以及时获得我的更新。我对自己的要求是，Robust 不闲聊生活，也不传递负能量。让我们专注聊技术，专心关注技术话题，我不会去追热点事件，但我会去聊背后的技术，专注于技术，也许不会获得很多关注，但是我可能也不需要那么多关注吧。

在项目中，我们经常需要一个自动刷新的功能。无论你使用 webpack-dev-server 还是其他工具，不够，市面上的工具都稍微有点复杂，会另外起一个端口，用于服务端和客户端相互通信。这在某些条件下反而不符合要求，有些情况下，我们只有一个端口可以使用，只能在当前服务基础上进行处理。我专门写了一个 express 的中间件来实现。

const chokidar = require('chokidar'); // 除了其他依赖，还需要依赖这个，用于监听文件变动

// 开启保存自动刷新功能
if (livereload) {
	app.use(createLiveReload({
		matchUrls: [/^\/some/, '/index.html'],
		renderFile: path.join(__dirname, 'www/index.html'),
		watchFiles: path.join(__dirname, 'www/**/*'),
                isReady: () => true,
	}))
}

/**
 * 创建一个 livereload 中间件
 * @param {*} options
 */
function createLiveReload(options) {
	const { matchUrls, renderFile, watchFiles, intervalTime = 1000, isReady } = options

	let latest = Date.now()
	let modified = latest

	chokidar.watch(watchFiles, {
		ignored: /(.*\.(map)$)|(\/vendor\/)/,
	}).on('all', () => {
		if (typeof isReady === 'function' && !isReady()) {
			return
		}
		modified = Date.now()
	})

	return function(req, res, next) {
		const { method, originalUrl } = req

		if (method.toLowerCase() !== 'get') {
			next()
			return
		}

		const scriptUrl = '/_live-reload.js'
		const url = URL.parse(originalUrl)
		const { pathname } = url

		if (pathname === scriptUrl) {
			if (modified > latest) {
				const content = `window.location.reload(true)`
				latest = modified
				res.end(content)
			}
			else {
				const content = `
					var currentScript = document.currentScript;
					setTimeout(function() {
						// 移除老的脚本
						currentScript.parentNode.removeChild(currentScript)
						// 插入新的脚本
						const script = document.createElement('script')
						script.src = '/_live-reload.js?v=' + Date.now()
						document.body.appendChild(script)
					}, ${intervalTime})
				`
				res.setHeader('content-type', 'application/json; charset=utf-8')
				res.end(content)
			}
		}
		else if (matchUrls.some(item => item instanceof RegExp ? item.test(pathname) : item === pathname)) {
			fs.readFile(renderFile, (err, data) => {
				if (err) {
					res.sendStatus(404);
				}
				else {
					const html = data.toString()
					const body = html.indexOf('</body>')
					const script = `<script src="${scriptUrl}"></script>`
					if (body > -1) {
						const content = html.replace('</body>', script + '</body>')
						res.end(content)
					}
					else {
						const content = html + script
						res.end(content)
					}
				}
			})
		}
		else {
			next()
		}
	}
}

实现原理，就是在前端界面不断的移除，新增脚本，脚本的内容由服务端输出，在服务端文件变化时，脚本内容为 window.location.reload(true) 从而刷新页面。

需要注意两个点：

• 由于它会直接读取文件后立即渲染，所以，在 express 的路由列表中，要注意其顺序，放在 app.use(express.static(...)) 后面，这样可以保证静态文件都可以被访问到，放在其他所有动态路由的前面，这样能保证通过 matchUrls 匹配到的 url 能够使用 renderFile 进行渲染
• 你可能需要根据不同的 url 渲染不同的文件，此时，你要多次调用 createLiveReload 来实现多个中间件实例，当然，这个时候你要保证 matchUrls 的顺序是正确的。

这就是简单的自刷新中间件了。