lqt0223 lqt0223

Chromatic aberration effect - a simple implementation in JavaScript

A chromatic aberration is an optical effect caused by one or more color channels being displaced. Although it is an optical failure and should be avoided for displaying or image capturing devices, chromatic aberration can be used to make graphics be more realistic in some other applications like 3D games.

The following codes is an example of implementing the effect using ImageData API of HTML5 canvas. By fetching and manipulating pixel data of the image, the chromatic aberration effect is easy to achieve.

<html>
<body>
<canvas id="canvas"></canvas>

设计模式之“命令模式”初体验

起因

今天研究了设计模式里的“命令模式”，起因是自己写的基于Vue的webapp上，需要实现一个允许用户编辑数据时undo/redo的功能。

一开始以为这个实现起来应该很简单，只要用一个列表保存好每次变化的一些参数，再在需要的时候执行出来就是redo，反向执行出来就是undo。但实际开始写之后却发现问题不断，自己的类的拆分不佳，导致多余的代码很多，而且越写自己也越感觉混乱了（大概自己还是太菜了吧）。

于是上网查阅这种undo/redo功能的实现的思路，许多文章提到了“命令模式”(command design pattern)，遂研究之。

JavaScript闭包实现对象、类的私有属性和方法

网上有大量讨论JavaScript的闭包的用法的文章，而且结合了函数作用域等JavaScript的很底层的知识。鉴于自己都没有在代码中有意识地写过闭包，这些文章看起来自然是很吃力了。而且看了N多篇也不能回答，到底怎样的一段代码才叫做闭包，这个问题。

但很多文章也同样提到了，JavaScript的闭包可以实现对象、类的私有属性和方法。于是今天试着写了一下下面的代码，感觉豁然开朗。这样一来，自己对于闭包到底是什么依然不是很清晰，但是至少可以实现一些之前自己实现不了的东西了。

以下是代码：

var People = function (){

Oracle官方文档节译：Java并发 - 线程干扰

小白初学Java的多线程编程，一下子遇到了海量的新知识点。一方面，Java中要想灵活使用多线程编程，需要了解concurrecy, Thread 等包和类中的很多实现的类的使用方法；另一方面，自己之前学习的比较多的JS是一个单线程的世界，很多多线程背后的原理我是不能理解的。所以这次的文章，用翻译的形式来细读一些基础的Java多线程编程的教程，顺便分享给大家，希望对各位能有帮助。

以下内容翻译自Thread Interference (The Java™ Tutorials > Essential Classes > Concurrency)

线程间干扰

假设有一个简单的类叫做Counter

	// unweighted undirectional graph implementation
	// TODO directional and weighted graph implementation; travelling salesman's problem

	class Graph {
	constructor() {
	this.vertices = [];
	this.edges = [];
	}

	add(){

	<html>
	<head>
	<title></title>
	</head>
	<body>
	<input id="input">

	<!-- The DOM that will be binded later -->
	<div id="app"></div>

	class Heap {
	constructor() {
	/* A heap is a tree-based data structure with the following features
	- Child nodes for a node in the heap is always greater(or smaller) than
	the parent node(which can be categorized as min-heap or nax-heap)
	- A heap is a complete tree. Because of this feature, we can keep records
	of a heap by array and refer to all nodes by index manipulation
	- For example, in the case of a binary heap where a node has an index of
	i, then its children indexes should be ((i + 1) << 1) - 1 and
	(i + 1) << 1

	// 实现基于两种不同原地分区方式的快排
	function quicksort(arr){
	qs(arr, 0, arr.length - 1);
	}

	function qs(arr, start, end){
	if(start < end){
	var k = partition2(arr, start, end);
	qs(arr, start, k);
	qs(arr, k + 1, end);

	// 前端收到一个服务器传来的Uint8Array数组后，
	//（Uint8Array是JavaScript中的一种带类型的数组（元素为无符号8位整数，取值范围为0-255）
	// Uint8Array也是Node.js中Buffer类所采用的数组）

	var arr = new Uint8Array(response);
	var blob = new Blob(arr.buffer);
	img.src = URL.createObjectURL(blob);

	/*

	用JavaScript实现字典树(Trie)。
	该数据结构是由节点组成的树，每个节点的数据是一个单字
	每个节点拥有N个字节点，为一对多的关系

	*/

	// 字符节点类
	class Node{