Web端常见问题总结

时间:2023-03-08 19:56:40
Web端常见问题总结

1.ES6箭头函数和普通函数的区别(至少3点)

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

2.弹性布局Web端常见问题总结

3.git常用指令

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维护的文件中有哪几种依赖:

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

5.iframe优缺点:

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

6.src和href的区别:

//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.判断变量为数组类型:

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

9.浏览器缓存问题:

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>
)
}
}

一、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;

二、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;

三、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;