ARTS第三周

Algorithm

用栈来实现队列

// 原题地址 https://leetcode.com/problems/implement-queue-using-stacks/description/
// 原题描述
/**
Implement the following operations of a queue using stacks.

push(x) -- Push element x to the back of queue.
pop() -- Removes the element from in front of queue.
peek() -- Get the front element.
empty() -- Return whether the queue is empty.
Example:

MyQueue queue = new MyQueue();

queue.push(1);
queue.push(2);  
queue.peek();  // returns 1
queue.pop();   // returns 1
queue.empty(); // returns false
Notes:

You must use only standard operations of a stack -- which means only push to top, peek/pop from top, size, and is empty operations are valid.
Depending on your language, stack may not be supported natively. You may simulate a stack by using a list or deque (double-ended queue), as long as you use only standard operations of a stack.
You may assume that all operations are valid (for example, no pop or peek operations will be called on an empty queue).
*/
// 用栈来模拟队列，我们知道栈和队列都是一种受限的数据结构，栈的特点是只能在一端进行所有操作，队列的特点是只能在一端入，一端出
// 因为栈只能操作一端，我们peek和pop的时候，也只能从栈顶操作，要到达队列，先进先出的效果，我们在push的时候，要把对头放到栈顶，新push的队列压到栈低，那么这里要考虑用辅助栈来做。也就是两个栈，实现一个队列，时间复杂度和空间复杂度都是O(n)

class MyQueu {
  constructor(){
    this.stack = [];
    this.helperStack = [];
  }
  
  /**
  * 入队
  */
  push(x) {
    // 思路就是在push的时候，先把原始栈的元素都取出来压到辅助栈，这个时候顺序就会颠倒，然后push新的，在重复操作压回原始栈，顺序就对了
    let cur = null;
    while((cur = this.stack.pop()){
    	this.helperStack.push(cur);      
    }
  	this.helperStack.push(x);
		while((cur = this.helperStack.pop())){
      this.stack.pop(cur);
    }
  }
  // 出队
  pop(){
    return this.stack.pop();
	}

// 前一个元素
	peek() {
   return this.stack[this.stack.length - 1];
  }
 //是否为空
	empty(){
    return this.stack.length === 0
  }
}

review

原文，https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

react脚手架2.0发布了，这次带来很大的更新

虽然react本身不需要用任何依赖进行构建，但是编写一个react的应用，模块化，自动化单元测试，生产，开发各个环境这样的复杂应用。create react app的目标就是帮助开发人员专注于最重要的事，也就是我们自己的代码，其他的事，不用操心。

最新的依赖包含了很多新的功能和性能改进的地方，babel7，webpack4，jest23，但是，手动更新他们并且配置他们在一起完美工作，还是要花很多时间的，但是cra2.0,解决了这个问题。并且升级，迁移配置和依赖项，都不用自己亲自动手。

加入了什么东西

• 更多的css工具，sass，css模块
• 更新到babel7，包括对react片段语法和许多错误修正的支持
• webpack4，更智能地自动拆分js包
• 更新到jest23，包括用于查看快照的交互模式
• postcss，这样就可以在旧浏览器中使用新的css特性
• 可以使用Apollo,Relay Modern, MDX和其他第三方babel
• 可以将SVG作为react组件导入
• https://github.com/yarnpkg/rfcs/pull/101
• 现在，您可以在开发中插入自己的代理实现，以匹配您的后端API。
• 您现在可以使用最新Node版本编写的包而不会破坏构建。
• 如果您只打算定位现代浏览器，现在可以选择获得较小的CSS包。
• 服务人员现在可以选择加入并使用Google的工作箱构建

使用

无需更新任何特殊内容。当运行create-react-app它时，默认情况下将使用2.0版本的模板。

如果由于某种原因想要使用旧的1.x模板，可以通过--scripts-version=react-scripts@1.x作为参数传递来实现create-react-app。

更新创建

将非弹出项目升级到Create React App 2.0通常应该很简单。package.json在项目的根目录中打开并找到react-scripts它。

然后将其版本更改为2.0.3：

 // ... other dependencies ...
  "react-scripts": "2.0.3"

然后npm install

**当npm start在升级后第一次运行时，您会收到一个提示，询问您希望支持哪些浏览器。按y接受默认值。它们将写入您的package.json，您可以随时编辑它们。创建React App将使用此信息生成较小或填充的CSS包，具体取决于您是以现代浏览器还是旧浏览器为目标。

如果npm start升级后仍然无法正常工作， 请查看发行说明中的更详细的迁移说明。有的是此版本中的几个重大的变动，但他们的范围是有限的，所以他们不应该超过几个小时进行梳理。请注意，现在可以选择***支持旧版浏览器以减少polyfill的大小。

**如果您之前已经弹出但现在想要升级，**一个常见的解决方案是找到您弹出的提交（以及任何后续提交更改配置），还原它们，升级，然后再选择再次弹出。现在支持您弹出的功能（可能是Sass或CSS模块？）也是可能的。

变化

以下是此版本中重大更新的列表：

• 不再支持node6。
• 现在可以选择使用单独的软件包支持旧版浏览器（例如IE 9到IE 11）。
• 可以使用import()，代码分割的行为更接近于规范，同时require.ensure()被禁用。
• 默认的Jest环境现在包含jsdom。
• 支持将对象指定为proxy设置已替换为对自定义代理模块的支持。
• 对.mjs扩展的支持被删除，直到它周围的生态系统稳定下来。
• PropTypes定义会自动从生产版本中删除。

tip

提一提日志的重要性吧，前端总是很容易忽略这个东西，认为这都是后端做的，一些To C端的产品可能会有埋点的操作，但是其实无论前端，后端，日志都非常重要。

记一个tip，说明一下日志的意义，

记录日志是软件开发中很重要的一部分。编写良好的日志代码能为软件提供快速的诊断信息和良好的存储结构。我们可以通过对记录的日志进行分析来支撑一些其他的功能，例如解析mysql的binary log来同步数据，通过日志分析用户行为，系统某功能的访问频率，通过日志排查程序的BUG等等。

• 开发人员调试程序
  • 开发阶段的debug日志，通过输出重要参数来调试跟踪程序的正确性
• 记录用户行为
  • 记录用户的操作，访问，一般用于数据分析，操作留痕
• 记录程序的运行情况
  • 记录程序的运行情况，尤其是异常情况，是排查问题的重要线索
• 记录系统的状态
  • 记录网络请求、IO等，便于监控和排查问题

关于如何做日志，合并请求，优化数据包大小，提升性能，离线数据等东西，下次可以搞个share，给自己埋了好多坑了。

share

IE浏览器不支持element的scroll，scrollTo等方法，一个polyfill

https://github.com/iamdustan/smoothscroll。