Web端常见问题总结

时间 2019-11-11

原文原文链接

1.ES6箭头函数和普通函数的区别（至少3点）html

（1）箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply()，普通函数的this指向调用它的那个对象
（2）变量提高，因为js的内存机制，function的级别最高，而用箭头函数定义函数的时候，须要var(let const)关键词，而var所定义的变量不能获得变量提高，故箭头函数必定要定义于调用以前
（3）箭头函数不能做为构造函数，不能被new，没有property

2.弹性布局html5

3.git经常使用指令node

1.查看版本库状态：git status
2.添加文件到stage中：
    $ git add README.md    #仅添加README.md文件
    $ git add *.py         #添加全部python文件
    $ git add .            #添加当前目录下的全部文件       
3.将stage中的内容提交到当前分支：
    $ git commit -m "msg of commit" -a     #提交stage中全部内容
    $ git commit -m "msg of commit"            #同上
    $ git commit -m "msg of commit" filename   #仅提交filename文件
    $ git commit --amend   #增补提交，尚未用过 
4.撤销在工做区作的修改：
    $ git checkout -- README.md        #撤销对文件README.md的修改
    $ git checkout -- .                #撤销对全部文件的修改
    $ git checkout -- *.py         #撤销对全部python文件的修改 
//1）文件在修改后没有add到stage区，撤销以后文件状态与版本库保持一致； 
//2）文件已经add到stage区，然后在工做区有对其进行了修改，此时撤销工做区中文件的修改，文件和stage区中的状态保持一致。  
5.撤销add到stage中的内容:
    $ git reset HEAD README.md #将stage区中的README.md文件撤销回工做区
    $ git reset HEAD           #将stage区中的全部文件撤销回工做区
6.查看版本日志:git log
7.版本回退:
//当咱们发现最近提交到版本库中的内容有误，须要将版本库回退到以前某个版本时，就须要使用以下指令进行版本回退：
    $ git reset --hard HEAD^   #回退到上一个版本
    $ git reset --hard HEAD^^  #回退到上上个版本
    $ git reset --hard HEAD~10    #回退到以前10个版本
    $ git reset --hard 5185793 #回退到版本号开头是5185793的版本
8.版本恢复：
    $ git reflog
    5185793 HEAD@{0}: reset: moving to HEAD^
    a65eebe HEAD@{1}: commit: add push_email.py
    5185793 HEAD@{2}: commit: add test
    0e24ff7 HEAD@{3}: commit (initial): add README.md

    $ git reset --hard a65eebe
9.删除文件：
    $ git rm test  #删除文件
    rm 'test'
    $ git status   #查看状态
    On branch master
    Changes to be committed:
      (use "git reset HEAD <file>..." to unstage)

        deleted:    test
    $ git commit -m"remove test"   #提交删除

    //误删，使用checkout恢复该文件
    $ git checkout -- test

4.npm维护的文件中有哪几种依赖：python

dependencies：应用依赖
devDependencies：开发环境依赖
peerDependencies：同等依赖，或者叫同伴依赖
optionalDependencies：可选依赖
bundledDependencies / bundleDependencies：打包依赖

5.iframe优缺点：react

//优势
1.iframe可以原封不动的把嵌入的网页展示出来。
2.若是有多个网页引用iframe，那么你只须要修改iframe的内容，就能够实现调用的每个页面内容的更改，方便快捷。
3.网页若是为了统一风格，头部和版本都是同样的，就能够写成一个页面，用iframe来嵌套，能够增长代码的可重用。
4.若是遇到加载缓慢的第三方内容如图标和广告，这些问题能够由iframe来解决。
5.重载页面时不须要重载整个页面，只须要重载页面中的一个框架页(减小了数据的传输，增长了网页下载速度)
//缺点
1、页面样式调试麻烦，出现多个滚动条；
2、浏览器的后退按钮失效；
3、过多会增长服务器的HTTP请求；
4、小型的移动设备没法彻底显示框架；
5、产生多个页面，不易管理；
6、不容易打印；
七、代码复杂，没法被一些搜索引擎解读。

6.src和href的区别：git

//src
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。
//href
href是Hypertext Reference的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，如link  a

7.JS中避免回调地狱的方法：程序员

//1.什么是回调地狱（callback  hell）
    在使用JavaScript时，为了实现某些逻辑常常会写出层层嵌套回调函数，若是嵌套过多，会极大影响代码可读性和逻辑，这种状况也被成为回调地狱(callback hell)

//2.如何避免
//2.1 解决回调嵌套问题（ES6 promise）
    Promise 对象就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，容许将回调函数的嵌套，改为链式调用。
.then(function(){
    console.log('frist');
}).then(function(){
    return sayhello("huawei");
    console.log('second');
}).then(function(){
    console.log('second');
}).then(function(){
    return sayhello("apple");
}).then(function(){
    console.log('end');
}).catch(function(err){
    console.log(err);
})
//但看着那一堆then，其实并无将嵌套回调的问题根本上的解决，只是换了一种写法而已。
//2.2 ES6 co/yield方案
yield: Generator 函数是协程在 ES6 的实现，而yield是 Generator关键字， 异步操做须要暂停的地方，都用yield语句注明。 
co: co 模块是著名程序员 TJ Holowaychuk 于 2013 年 6 月发布的一个小工具，用于 Generator 函数的自动执行。
//2.2.1 什么是Generator 函数？
    Generator 函数是协程在 ES6 的实现，最大特色就是能够交出函数的执行权（即主动交出执行权，暂停执行）。 
    整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操做须要暂停的地方，都用yield语句注明。Generator 函数的执行方法以下。
function* gen() {
     yield console.log("test 1");
     yield console.log("test 2");
     yield console.log("test 3");
    return y;
}

var g = gen();
g.next()//“test 1”
g.next()//“test 2”
    Generator 函数不一样于普通函数的另外一个地方，即执行它不会返回结果，返回的是指针对象。调用指针g的next方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的yield语句，打印”test 1”并暂停，再次调用next会打印”test 2”暂停住，但不会打印”test 3”
Generator 函数能够暂停执行和恢复执行，这是它能封装异步任务的根本缘由
//2.3 ES7 async/await 方案
    async/await是es7的新标准，而且在node7.0中已经获得支持。 
它就是 Generator 函数的语法糖，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。能够理解官方对co和Generator 封装方案。

    async关键字用于修饰function，async函数的特征在于调用return返回的并非一个普通的值，而是一个Promise对象，若是正常return了，则返回Promise.resolve(返回值)，若是throw一个异常了，则返回Promise.reject(异常)。

    await关键字只能在async函数中才能使用，也就是说你不能在任意地方使用await。await关键字后跟一个promise对象（你想要执行的异步操做），函数执行到await后会退出该函数，直到事件轮询检查到Promise有了状态resolve或reject 才从新执行这个函数后面的内容。

 //使用
var sayhello = function(name, ms){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log("hello");
            console.log(name);
         if(name === "huawei")
                return reject(name);
             else
           return resolve("helloworld");

        }, ms);
    });
}

async function test() {
    try {
        console.log('frist');
        await sayhello("xiaomi", 2000);
        console.log('second');
        await sayhello("huawei", 1000);
        console.log('end');
        await sayhello("apple", 500);
    }
    catch (err) {
        console.log('err:'+err);
    }
};

test();

//对错误的处理
    await命令后面的 Promise 对象若是变为reject状态，则reject的参数会被catch方法的回调函数接收到，然后续的await函数就不会继续执行了。咱们应该在将await语句放在try catch代码块中，若是有多个await命令，能够统一放在try…catch结构中，咱们经过这种方式对发生的异步错误进行处理。

8.判断变量为数组类型：npm

Object.prototype.toString.call(数组)=='[object Array]';  //true为数组

9.浏览器缓存问题：json

https://blog.csdn.net/u011001084/article/details/53005615/跨域

10.JS经常使用跨域方法：

1.CORS（Cross-Origin Resource Sharing）
2.jsonp
3.document.domain + iframe
4.html5  window.postMessage(message,targetOrigin)

11.react高阶组件：

先来回顾高阶函数的定义：接收函数做为输入，或者输出另外一个函数的一类函数，被称做高阶函数。对于高阶组件，它描述的即是接受React组件做为输入，输出一个新的React组件的组件。

更通俗地描述为，高阶组件经过包裹（wrapped）被传入的React组件，通过一系列处理，最终返回一个相对加强（enhanced）的React组件，供其余组件调用。以下：

export default function (title) {
  return function (WrappedComponent) {
    return class HOC extends Component {
      render() {
        return <div>
          <div className="demo-header">
            {title
              ? title
              : '我是标题'}
          </div>
          <WrappedComponent {...this.props}/>
        </div>
      }
    }
  }
}

使用ES6写法能够更加简洁。

export default(title) => (WrappedComponent) => class HOC extends Component {
  render() {
    return <div>
      <div className="demo-header">
        {title
          ? title
          : '我是标题'}
      </div>
      <WrappedComponent {...this.props}/>
    </div>
  }
}

12.react router传参：

import { Router,Route,hashHistory} from 'react-router';

class App extends React.Component {
  render() {
    return (
        <Router history={hashHistory}>
            <Route path='/user/:name' component={UserPage}></Route>
        </Router>
    )
  }
}

1、props.params

定义路由：<Route path='/user/:data' component={UserPage}></Route>

使用：
var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;

1.<Link to={path}>用户</Link>
2.hashHistory.push(path);

获取数据：
var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

2、query

定义路由：<Route path='/user' component={UserPage}></Route>

使用：
var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  query:data,
}

1.<Link to={path}>用户</Link>
2.hashHistory.push(path);

获取数据：
var data = this.props.location.query;
var {id,name,age} = data;

3、state

定义路由：<Route path='/user' component={UserPage}></Route>

使用：
var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  state:data,
}

1.<Link to={path}>用户</Link>
2.hashHistory.push(path);

获取数据：
var data = this.props.location.state;
var {id,name,age} = data;