babel and webpack

#Babel and webpack

Babel is Javacsript compiler.

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging ##

In this unit, you modify the existing application and use some new ECMAScript 6 features. You then set up a build environment using Babel and Webpack.

Step 1: using new ECMAScript 6 Features

in app.js with arrow functions and let %!#$!#

Step 2: Setup Babel and Webpack
install webpack and babel
in folder create webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var path = require('path');
 var webpack = require('webpack');
 module.exports = {
     entry: './js/app.js',
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'app.bundle.js'
     },
     module: {
         loaders: [
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 query: {
                     presets: ['es2015']
                 }
             }
         ]
     },
     stats: {
         colors: true
     },
     devtool: 'source-map'
 };

Step 4:

package.json in your favorite code editor. In the scripts section, add a script named webpack that builds your application using Webpack and Babel. The scripts section should now look like this:

1
2
3
4
"scripts": {
    "webpack": "webpack",
    "start": "http-server"
},

  1. Create build folder to the compile version of the application
    1
    The build process will fail if you don’t create the build directory

Step next: Build and Run

  1. npm run webpack

open index.html modified the

js null vs undefined

null vs undefined

What is null?
There are two features of null you should understand:

null is an empty or non-existent value.
null must be assigned.

ex:

1
2
3
let a = null;
console.log(a);
// null

Undefined most typically means a variable has been declared, but not defined. For example:

1
2
3
4
5
6
7
let b;
console.log(b);
// undefined

let c = undefined;
console.log(c);
// undefined

Finally, when looking up non-existent properties in an object, you will receive undefined:

1
2
3
var d = {};
console.log(d.fake);
// undefined

Here’s a full list for six falsy values:

1
2
3
4
5
6
false
0 (zero)
“” (empty string)
null
undefined
NaN (Not A Number)

Interestingly enough, when using typeof to test null, it returns object:

1
2
3
4
5
6
let a = null;
let b;
console.log(typeof a);
// object
console.log(typeof b);
// undefined

Null !== undefined

1
null !== undefined

But, and this may surprise you, null loosely equals undefined.

1
null == undefined

a great example:

1
2
let logHi = (str = 'hi') => {
  console.log(str);

This function requires one parameter and sets the default of that parameter to hi if it isn’t supplied. Here’s what that looks like:

1
2
3
4
5
6
logHi();
// hi
logHi('bye');
// bye

}

With default parameters, undefined will use the default while null does not.

1
2
3
4
logHi(undefined);
// hi
logHi(null);
// null

Summary
null is an assigned value. It means nothing.
undefined typically means a variable has been declared but not defined yet.
null and undefined are falsy values.
null and undefined are both primitives. However an error shows that typeof null = object.
null !== undefined but null == undefined.

didmount&&willunmount 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class A extends React.Component {

    constructor(props) {
        super(props);
    }
    scroll1（）{}

    componentDidMount() {
        window.addEventListener('scroll', this.srcoll1.bind(this));
    }
    
    componentWillUnmount(){
        window.removeEventListener('scroll', this.srcoll1);

    }

    render() {
    };

}

when using event handler in render(), need to bind this to the function
inside constructor, it will be global. otherwise, everytime inside render() we need to bind this when we use the method everytime, it will be awaste of time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default class A extends React.Component {

    constructor(props) {
        super(props);
        this.scroll1 = this.scroll1.bind(this)
    }
    scroll1（）{}

    componentDidMount() {
        window.addEventListener('scroll', this.scroll1);
    }
    
    componentWillUnmount(){
        window.removeEventListener('scroll', this.scroll1);

    }

    render() {
    };

}

bind方法，顾名思义，就是绑定的意思，到底是怎么绑定然后怎么用呢，下面就来说说我对这个方法的理解。

bind的使用和call，apply的区别：都是将方法的主人绑定，this指向全局object。
bind will not be executed imediately while call, aply will execute right away.
为什么要创建绑定函数，就是当我们调用某些函数的时候是要在特定环境下才能调用到，所以我们就要把函数放在特定环境下，就是使用bind把函数绑定到特定的所需的环境下。

topological sort template

2.怎么得出拓扑序？

有两种方法，分别基于BFS和DFS，时间复杂度都是O(|V| + |E|)。
Topological Sort: DFS and BFS
DFS:
据说这是神书《算法导论》中提到的算法：用深度搜索来遍历整个图，采用一个数组来保存每个顶点完成的时间，这样这个数组就存放了按先后顺序访问完成的顶点了。然后我们按照顶点访问的完成时间从大到小排序，得到的就是一个拓扑序了，具体证明如下（来自其他博客）：&……%¥¥……&&

Coding:

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
26
27
28
class Solution {
public:
    vector<int> topologicalSort(int n, vector<pair<int, int> >& edges) {
        vector<int> res;
        stack<int> s;
        int * isVisited = new int[n];
        for (int i = 0; i < n; i++) {
            isVisited[i] = 0;
        } 
        for (int i = 0; i < n; i++) {
            if (!isVisited[i]) dfs(edges, s, isVisited, i);
        }
        while (!s.empty()) {
            res.push_back(s.top());
            s.pop();
        }
        return res;
    }
    void dfs(vector<pair<int, int> >& edges, stack<int> & s, int * isVisited, int u) {
        isVisited[u] = 1;
        for (int i = 0; i < edges.size(); i++) {
            if (edges[i].first == u && !isVisited[edges[i].second]) {
                dfs(edges, s, isVisited, edges[i].second);
            }
        }
        s.push(u);
    } 
};

BFS:

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
26
27
28
class Solution {
public:
    vector<int> topologicalSort(int n, vector<pair<int, int> >& edges) {
        vector<int> res;
        vector<vector<int> > newedges(n, vector<int>());
        queue<int> q;
        vector<int> in_degree(n, 0);
        for (int i = 0; i < edges.size(); i++) {
            in_degree[edges[i].second]++;
            newedges[edges[i].first].push_back(edges[i].second);
        }
        for (int i = 0; i < n; i++) {
            if (in_degree[i] == 0) {
                q.push(i);
            }
        }
        while (!q.empty()) {
            int front = q.front();
            q.pop();
            res.push_back(front);
            for (int i = 0; i < newedges[front].size(); i++) {
                in_degree[newedges[front][i]]--;
                if (in_degree[newedges[front][i]] == 0) q.push(newedges[front][i]);
            }
        }
        return res;
    }
};

4.抛开这道题目——有环情况的判断

可以利用上面的dfs方法，比如isVisited这个数组，我们可以多增一种情况，比如0为未访问，1为已访问，-1为正在访问，当dfs搜索时遇到了一条边终止顶点对应的isVisited元素为-1时，就说明图中有环了（为-1说明我们是从这个顶点开始dfs的，现在又遇到了这个顶点…）。

另外一种判断图是否有环的方法，借助bfs（dfs也可，但既然用了dfs，直接用上面的方法好了），假如“生成拓扑序”后，还有顶点不在这个“拓扑序”里面，则图就有环了（加双引号是因为不能真正称作“拓扑序”啊）。

路径选择的dp问题之三角形最小路径和

原文链接：https://blog.csdn.net/xdzhangzhenhao/article/details/81356095
http://www.cnblogs.com/shizhh/p/5302852.html 动态规划

  1. 三角形最小路径和

给定一个三角形，找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。

例如，给定三角形：

[
[2],
[3,4],
[6,5,7],
[4,1,8,3]
]
自顶向下的最小路径和为 11（即，2 + 3 + 5 + 1 = 11）。

如果你可以只使用 O(n) 的额外空间（n 为三角形的总行数）来解决这个问题，那么你的算法会很加分.暂时没想到。。。（可能是用in-place方法）可行。

这道题类似于hmm的路径中选择概率最大的乘织。
采用topdown的dp 方法，最顶端的点决定于左右下方两侧的点的minsum，不能采用bottomup的方法。因为可能出现local最优值。
思路是经过当前节点的最小路径为左右节点的路径的最小值加自身，从上往下递归（top down），如果从下往上选，这个思路将是错的，因为你的局部最小并不可以确定最优会经过这里，所以从源头定点开始。
采用递归的方法构造，minsum(trangle, 0, 0).
代码：

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
class Solution1 {
 
private:
 
	vector<vector<int>> memo;
	//cache
	int m;		// 行数
 
	// i,j代表当前节点的索引
	int minPathSum(vector<vector<int>>& triangle, int i, int j) {
 
		if (i == m - 1)
			return triangle[i][j];
 
		// 相同结构子问题的递归
		if (memo[i][j] == -1) {
			memo[i][j] = min(minPathSum(triangle, i + 1, j), minPathSum(triangle, i + 1, j + 1)) + triangle[i][j];
			cout <<"memo["<<i<<"]["<<j<<"] : "<< memo[i][j] << endl;
		}
		
		return memo[i][j];
	}

public:
	int minimumTotal(vector<vector<int>>& triangle) {
 
		if (triangle.size() == 0)
			return 0;
 
		// triangle中应该都是正数吧
		int res;
		m = triangle.size();
		//构造cache容器
		for (int i = 0; i < m; i++) {
			vector<int> tmp(triangle[i].size(), -1);
			memo.push_back(tmp);
		}
 
		res = minPathSum(triangle, 0, 0);
		return res;
	}
};

//犹记得当日的nlp课程的hmm状态转移方法，yangsky算法，一个句子在一个概率字典里找出最有可能的点。当时查找路径。

Quick Sort' 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public void quickSort(int[] arr, int low, int high){
	if(low>high) return;
	int i = low, int j = high, base = arr[low];
	while(i < j){
		while(arr[i]<base && i<j){i++;}
		while(arr[j]>base && i < j){ j--;}
		//after that the order is messy
		swap(arr, low, j);
	}
	swap(arr, base, j);
	quickSort(arr, low, j-1);
	quickSort(arr, j+1, high);
}

private void swap(int[] arr, int i, int j){
	int temp = arr[i];
	arr[i] = arr[j];
	arr[j] = tamp;
}

axios instance

Question??
axios.create({ baseURL: ajaxUrl,timeout: 30000,withCredentials: true}) 创建实例作用是啥 没有不行吗### 问题描述
引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里的创建实例充当什么角色

Answer:
默认会导出实例axios，通常你只需使用这个axios就可以了。

但是有时候你需要创建多个实例，比如你需要访问多个服务地址，而这些服务请求和响应的结构都完全不同，那么你可以通过axios.create创建不同的实例来处理。

比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器。

dfs和回溯模版

dfs template

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

void f()  
{  
     if(符合边界条件)  
     {  

        ///////  
        return;  
     }  

     //某种形式的调用  
     f();  
}

回溯模版： 限制条件 if，选择 （for。。。）结束条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void DFS(int 当前状态)  
{  
      if(当前状态为边界状态)  
      {  
        记录或输出  
        return;  
      }  
      for(i=0;i<n;i++)       //横向遍历解答树所有子节点  
      {  
           //扩展出一个子状态。  
           修改了全局变量  
           if(子状态满足约束条件)  
            {  
              dfs(子状态)  
           }  
            恢复全局变量//回溯部分  
      }  
}

BFS和DFS相似。BFS显式用队列，DFS隐式用栈，即递归。
当然，对于DFS，用递归可能会造成栈溢出，所以也可以更改为显示栈。

经典例题： 走迷宫
*表示可走

#表示障碍
T表示出口
入口是(1,1)，数据保证左上角是入口。

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#include<iostream>
using namespace std;

char maze[100][100];
bool flag[100][100];
int dx[]={0,0,1,-1};
int dy[]={1,-1,0,0};
int m,n;

bool dfs(int x,int y)
{
    flag[x][y]=1;              //走过的路标记为1
    if(maze[x][y]=='T')return true;
    for(int i=0;i<4;i++)       //四个方向
    {
        int nx=x+dx[i];
        int ny=y+dy[i];
        if(flag[nx][ny]==0||maze[nx][ny]=='*'||maze[nx][ny]=='T'&&nx>0&&ny>0&&nx<m+1&&ny<n+1)
        {
            return dfs(nx,ny);   
            flag[nx][ny]=0;    //回溯，将标记重新标记为0
        }
    }
    return false;             //找不到返回false
}

int main()
{

    while(cin>>m>>n){
    memset(maze,0,sizeof(maze));
    memset(flag,0,sizeof(flag));
    for(int i=1;i<=m;i++)
        for(int j=1;j<=n;j++)
            cin>>maze[i][j];
    if(dfs(1,1))cout<<"YES"<<endl;
    else cout<<"NO"<<endl;
    }
}

回溯的两种写法：

递归写法和迭代写法，链接：https://blog.csdn.net/man_sion/article/details/74993907

回溯，递归，dp三法leetcode 题目“

leetcode 10 regular expression matching 可以减去一字符
leetcode wildcard matching 可以匹配一个字符
leetcode edit distance
回溯三要素：选择，限制条件，结束条件
回溯是一种算法思想，它是用递归实现的。回溯的过程类似于穷举法，但回溯有“剪枝”功能，即自我判断过程。例如有求和问题，给定有 7 个元素的组合 [1, 2, 3, 4, 5, 6, 7]，求加和为 7 的子集。累加计算中，选择 1+2+3+4 时，判断得到结果为 10 大于 7，那么后面的 5, 6, 7 就没有必要计算了。这种方法属于搜索过程中的优化，即“剪枝”功能。

回溯法解决leetcode10注意递归和回溯的区别
回溯具有剪枝的功能。当出现结束条件，自动回溯，不必再往不必要的地方搜索。

我们在路上走着，前面是一个多岔路口，因为我们并不知道应该走哪条路，所以我们需要尝试。尝试的过程就是一个函数。
我们选择了一个方向，后来发现又有一个多岔路口，这时候又需要进行一次选择。所以我们需要在上一次尝试结果的基础上，再做一次尝试，即在函数内部再调用一次函数，这就是递归的过程。
这样重复了若干次之后，发现这次选择的这条路走不通，这时候我们知道我们上一个路口选错了，所以我们要回到上一个路口重新选择其他路，这就是回溯的思想。

递归和回溯相关题目：
leetcode17 letter Combinations of a Phone Number
leetcode22 Generate Parentheses(最为经典)
leetcode46 permutations
在 Backtracking 标签中，有 30+ 道与递归、回溯相关的例题

回溯搜索是深度优先搜索（DFS）的一种。对于某一个搜索树来说（搜索树是起记录路径和状态判断的作用），回溯和DFS，其主要的区别是，回溯法在求解过程中不保留完整的树结构，而深度优先搜索则记下完整的搜索树。

http://www.cnblogs.com/shizhh/p/5302852.html 动态规划系列问题汇总