爬虫溢前端面试题及个人总结(二)

接上一篇。(问题的答案全是个人理解，有可能错误，如发现错误问题，请发邮件给我，我的邮箱在侧边栏有，谢谢！)

function内路由跳转

Angular、vue、react都可实现，以下依次是实现方法。

Angular：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="angular1.4.6.min.js"></script>
  <script src="angular-route.js"></script>
</head>
<body ng-app="MyApp" >
<a href="#/" rel="external nofollow" >CHINA</a><br/>
<a href="#/1" rel="external nofollow" >CHINA1</a><br/>
<a href="#/2" rel="external nofollow" >CHINA2</a><br/>
<a href="#/3" rel="external nofollow" >CHINA3</a><br/>
<div ng-view>
11111
</div>
<script>
  var app = angular.module("MyApp", ["ngRoute"]);
  app.config(function ( $routeProvider) {
$routeProvider
  .when("/", {template: "<h1>123</h1>"})
  .when("/1", {template: "<h1>111</h1>"})
  .when("/2", {template: "<h1>222</h1>"})
  .when("/3", {template: "<h1>333</h1>"});
  });
</script>
</body>
</html>

vue：

比如html中这样写：

<span @click="clickFn">点我</span>

js中这样写：

methods:{
clickFn:function(){
    this.$router.go('/login');//其中login是你定义的一个路由模块
}

React：

import { browserHistory } from 'react-router'  //引入路由函数

browserHistory.push('/some/path')   //js方式跳转

或者使用 hashHistory 代替 browserHistory，看个人爱好。

关于react路由带#号问题

Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/

详情请见：阮一峰的博客

react组件参数验证

propTypes是React提供的一种验证机制，该对象中定义了一系列的验证方法，可对props进行验证。组件初始化时，如果传递的props属性和propTypes不匹配，则会打印一个console.warn日志。

详情请见：验证对象propTypes

react取input值

给input加入一个ref属性，<input ref="Dom" value="111"／> ,通过this.ref.dom就能获取到这个input，this.ref.Dom.value就能获取input中的值。

或者：

无约束组件。直接给定组件一个defaultValue值

<input type="text" defaultValue="Hello World!" ref="helloTo" />
//通过ref获取input的值
var inputValue = this.ref.hello.getDOMNode().value;

约束组件

<input type="text" defaultValue={this.state.hello} />
//{}来获取input的值, var inputValue = this.state.hello;

Promise对象

Promise对象标准语法：

var p = new Promise(function (resolve, reject) {
   setTimeout(function () {
   var ra = Math.random()
   ra < 0.5 ? resolve() : reject()  
}, 1000)
})

p.then(function () {
  console.log('成功')
}, function () {
  console.log('失败')
})

new Promise() 构造函数建立一个Promise对象

其最常见的就是then方法，then方法可接收3个函数，一般传递2个，最常见传递1个。

分别为成功回调、失败回调、完成回调

react中应用了Promise对象，很好解决了不优雅的金字塔结构代码。
下面是常看到用ajax请求回来数据会有这样一段代码。

componentDidMount() {
this.props.promise.then(
  value => this.setState({loading: false, data: value}),
  error => this.setState({loading: false, error: error}));
  }

value 是代表 promise 完成后的 resolve 值，需要通过 value 传递。

详情了解promise对象：点击此处

babel是干什么的

Babel并非React的一部分，实际上，Babel的主要用途并非一个JSX语句转换器。Babel主要是一个JavaScript转换器，它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说，Babel主要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。

有了Babel，我们可以放心的在React中使用最新的ES语句了。

eslint

ESLint 是用来检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。或者说ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

详细了解：ESlint官网

代理接口

主要通过代理服务器站点实现，代理网络用户获取信息，主要提高访问的速度。

什么是Reducer

下面这个函数就是reducer，这里就是所谓的“predictable”可以被预测的含义。所有对state的操作，都要罗列出来。

reducer函数必须符合的形态：接受之前的state和action，返回新的state：

(previousState,action) => newState

reducer：

function counter(state = {"v" : 100} , action){
if(action.type == "ZENGJIA"){
    return {"v" : state.v + 1};
}else if(action.type == "JIANSHAO"){
    return {"v" : state.v - 1};
}
return state;
}

在reducer中是绝对不能更改state的，而是应该返回新的state。

发送action

按钮监听不是直接改变state的值，而是调用store的dispatch方法发送命令给仓库，比对reducer中的if语句，执行相应的改变。action必须有一个type属性，这个type属性表示这个action是干嘛的。

document.getElementById("jiaBtn").onclick = function(){
 store.dispatch({"type" : "ZENGJIA"});
}

nodejs、npm、cnpm

Node.js是一个平台不是一个语言，语言仍然是JavaScript。此时Node.js平台可以让我们用JavaScript语言来开发服务器程序，Node.js特别像java虚拟机，大家只需要写一份语言，就可以运行在windows、mac、linux上。安装nodejs后会有npm命令，npm 可以安装node插件，cnpm使用的是淘宝网的镜像http://npm.taobao.org，安装命令提示符执行：npm install cnpm -g --registry=https://registry.npm.taobao.org

git命令拉取项目

新建一个文件夹，在文件夹里执行gitbash，输入
$git clone ssh://(你要拉取项目的ssh码)