下面所记录的是我在刷 LeetCode Array 相关的题目自己的解法。

100. Same Tree

Given two binary trees, write a function to check if they are equal or not.

Two binary trees are considered equal if they are structurally identical and the nodes have the same value

JavaScript Solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
 * Definition for a binary tree node.
 * function TreeNode(val) {
 *     this.val = val;
 *     this.left = this.right = null;
 * }
 */
/**
 * @param {TreeNode} p
 * @param {TreeNode} q
 * @return {boolean}
 */
var isSameTree = function(p, q) {
    if (p === null && q === null) return true;
    if (p === null || q === null) return false;
    return (p.val === q.val && isSameTree(p.left, q.left) && isSameTree(p.right, q.right));
};

Java Solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
 * Definition for a binary tree node.
 * public class TreeNode {
 *     int val;
 *     TreeNode left;
 *     TreeNode right;
 *     TreeNode(int x) { val = x; }
 * }
 */
public class Solution {
    public boolean isSameTree(TreeNode p, TreeNode q) {
        if (p == null && q == null) return true;
        if (p == null || q == null) return false;
        return (p.val == q.val && isSameTree(p.left, q.left) && isSameTree(p.right, q.right));
    }
}

本笔记是根据CSS 3 Flex 全解【视频】介绍总结，如有需要，可以去原视频查看。

Flex 之前

布局主要使用：

• noraml flow(正常文档流)
• float + clear
• position relative + absolute
• display inline + block
• 负 margin

Flex 布局的特点

1. 块状布局侧重垂直方向，行内布局侧重水平方向，flex 布局与方向无关
2. flex 布局可以实现空间自动分配、自动对齐
3. flex 布局适用于简单的线性布局，复杂的布局交给 Grid 布局

Flex 基本概念

本文是我在学习 ECMAScript 6 时的记录，用于个人查询总结。在学习的过程中参考过很多别人的文章，如有需要，可以根据链接详细学习：

• ECMAScript 6 入门

ECMAScript 6简介

ECMAScript和JavaScript的关系

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。

部署进度

各大浏览器的最新版本，对ES6的支持可以查看 kangax.github.io/es5-compat-table/es6/。随着时间的推移，支持度已经越来越高了，ES6的大部分特性都实现了

下面所记录的是我在刷 LeetCode Array 相关的题目自己的解法。

13. Roman to Integer

Given a roman numeral, convert it to an integer.

Input is guaranteed to be within the range from 1 to 3999.

罗马数字是阿拉伯数字传入之前使用的一种数码。罗马数字采用七个罗马字母作数字、即Ⅰ（1）、X（10）、C（100）、M（1000）、V（5）、L（50）、D（500）。记数的方法：

• 相同的数字连写，所表示的数等于这些数字相加得到的数，如 Ⅲ=3；
• 小的数字在大的数字的右边，所表示的数等于这些数字相加得到的数，如 Ⅷ=8、Ⅻ=12；
• 小的数字（限于 Ⅰ、X 和 C）在大的数字的左边，所表示的数等于大数减小数得到的数，如 Ⅳ=4、Ⅸ=9

JavaScript Solution

我的想法就是，首先把所有的数所代表的值都加起来，然后减去小叔子在大数字左边的情况。

在 JavaScript 中，获取第 i 个位置上的 char, 可以使用 s[i]，也可以使用 s.charAt(1)；
在 JavaScript 中，判断 String 中是否存在某个String s2 ，有 s1.indexOf(s2)，可以通过返回值是否为 -1 判断，也可以使用
s1.includes(s2) 判断 true/false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * @param {string} s
 * @return {number}
 */
var romanToInt = function(s) {
	let sum = 0;
	for (let i = s.length - 1; i >= 0; i--) {
	  	if(s[i] === "I") sum += 1;
	  	if(s[i] === "V") sum += 5;
	  	if(s[i] === "X") sum += 10;
	  	if(s[i] === "L") sum += 50;
	  	if(s[i] === "C") sum += 100;
	  	if(s[i] === "D") sum += 500;
	  	if(s[i] === "M") sum += 1000;
	}  
	if(s.includes("IV")) sum -= 2;
	if(s.includes("IX")) sum -= 2;
	if(s.includes("XL")) sum -= 20;
	if(s.includes("XC")) sum -= 20;
	if(s.includes("CD")) sum -= 200;
	if(s.includes("CM")) sum -= 200;
	return sum;
};

romanToInt("DCXXI");

Java Solution

在 Java 中，获取第 i 个位置上的 char，一般使用 s.charAt(i)
在 Java 中，判断一个 String s2 是否出现过，可以使用 s1.indexOf(s2)，判断值是否为 -1，也可以使用 s1.contains(s2)，判断 true/false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

public int romanToInt(String s) {
        int sum = 0;
        for (int i = 0; i < s.length(); i++) {
            if (s.charAt(i) == 'I') sum += 1;
            if (s.charAt(i) == 'V') sum += 5;
            if (s.charAt(i) == 'X') sum += 10;
            if (s.charAt(i) == 'L') sum += 50;
            if (s.charAt(i) == 'C') sum += 100;
            if (s.charAt(i) == 'D') sum += 500;
            if (s.charAt(i) == 'M') sum += 1000;
        }
        if (s.contains("IV")) sum -= 2;
        if (s.contains("IX")) sum -= 2;
        if (s.contains("XL")) sum -= 20;
        if (s.contains("XC")) sum -= 20;
        if (s.contains("CD")) sum -= 200;
        if (s.contains("CM")) sum -= 200;
        return sum;
    }

本文是我在学习 Webpack 时的记录，用于个人查询总结。在学习的过程中参考过很多别人的文章，如有需要，可以根据链接详细学习：

• Webpack 中文指南
• 一小时包教会 —— webpack 入门指南
• Webpack 官网
• 阮一峰 Webpack demos
• 入门Webpack，看这篇就够了

介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

本文是在学习 React 的时候，根据 Learn React & Webpack by building the Hacker News front page 这篇教程来进行练习的Demo，详细文章请阅读原文。

准备工作

安装 Webpack

在此之前你应该已经安装了 node.js.

1

npm install webpack --save-dev

参数 -g 表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.

webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上

1

npm install webpack-dev-server --save-dev

下面所记录的是我在刷 LeetCode Array 相关的题目自己的解法。

1. Two Sum Easy

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

1
2
3
4

Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

根据题目中的要求，找到组成和为 target 的数组中两个数的下标，并且只能遍历一遍，所以在遍历数组的时候，需要开辟额外的空间来缓存已经遍历的数据。在我的解法中，使用了 Map 来缓存已经遍历的数据，key 为数组元素的大小，value 代表着数据对应的数组下标。

JavaScript Solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var twoSum = function(nums, target) {
	var tmp =  new Map();
	for (var i=0; i< nums.length; i++) {
		var another = target - nums[i];
		if(tmp.has(another)) {
			return [tmp.get(another), i];
		} else {
			tmp.set(nums[i], i)
		}
	}
	return null;
};

twoSum([2, 7, 11, 15], 9);

Java Solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public int[] twoSum(int[] nums, int target) {
        Map<Integer, Integer> tmp = new HashMap<Integer, Integer>();
        for(int i =0; i<nums.length; i++) {
            int another = target - nums[i];
            if(tmp.containsKey(another)) {
                int[] result = new int[2];
                result[0] = tmp.get(another);
                result[1] = i;
                return result;
            } else {
                tmp.put(nums[i], i);
            }
        }
        return null;
    }

本文是根据React学习资源汇总这个文章中提及的文章阅读后的总结，仅供个人学习使用，更清楚详细的介绍可以根据链接阅读原贴。

React 产生的背景

原文参考链接

在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

本系列的是参考慕课网 远人老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

响应式布局背景介绍

响应式布局，要求服务器端根据不同大小，不同分辨率的客户端，呈现出不同的页面显示效果。

响应式设计的优点：针对不同的设备，进行差异化显示，优化了不同设备的显示效果

响应式设计的缺点：

1. 兼容性代码多，工作量大，加载速度受到影响
2. 用户设备的判断未必精确

一般，需要进行响应式设计的网站都是经常在多终端展示的网站。

感谢K.Chen 的博客为我提供了实现的方法。

应用场景

在我们使用 Markdown 做笔记的时候，经常遇到的一个很麻烦的问题就是如何将图片插入到 Markdown 笔记中。原有的 Markdown 笔记不支持将本地图片上传到笔记中，即使是马克飞象等编辑器支持将图片剪贴到 Markdown 笔记中进行预览，但是其图片链接是一个本地链接，若是将笔记本上传到网络中，图片则无法显示。所以，我在向 Markdown 笔记插入图片的时候，使用的是七牛云存储相关的图片，然后导出外链到本地笔记，这样，本地可以通过外链预览图片，即使是笔记上传到了网上也可以通过外链预览图片。

但是，在本地剪切图片，上传到七牛云并且导出外链到 Markdown 笔记中是一个很复杂的过程。下面是一般情况下将图片插入 Markdown 笔记需要进行的步骤：

1. 使用截屏工具将截屏并且将截屏文件保存在本地桌面（Mac）
2. 为获得的截屏文件修改一个合适的名字
3. 打开七牛云存储，上传本体图片（可以设置前缀）
4. 退出上传页面，在网页中找到刚刚上传的图片，点击复制外链，获得图片的外链
5. 在 Markdown 笔记中使用 ![]() 添加外链，可以实现图片预览

由于其步骤繁琐并且消耗的时间很多，经常会打断我们的写作思路，所以我们需要一种快捷的方法将剪切板中的笔记上传到七牛云并导出链接。下面是本教程的实现目标：

1. 使用截屏工具截屏并保存到剪贴板
2. 使用 Alfred Workflow 将剪贴板内容上传到七牛云，并将该图片的外链自动保存到剪贴板
3. 使用![]()在 Markdown 笔记中插入图片。