常见面试题解 @于志程
2019-08-02 本文已影响0人
于志程_yzcheng_程程程
1.打包部署出现空白或404
/\*
@于志程
1.空白页面多半是资源路径请求不成功
解决办法：vue.config.js下的assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和 static在同一级目录下面。 所以要改为 ‘./ ’;
2\. 页面刷新404问题
这是因为 使用的是history模式 所以vue用路由跳转完之后 再次刷新 所以这个模式会默认的请求一次资源 请求不成功 就会返回404 所以要在服务器配置 原理是让所有请求的路径全部重定向到 根目录/index.html 这样就不会出现问题了
但是这么做的话 需要自己创造一个404页面 给用户观看。。
3\. 如果没有部署在根目录
解决办法：vue.config.js下的assetsPublicPath默认的是 ‘/’ 在那个目录就修改这个路径就可以
\*/
2. 调用摄像头
/*注 只能在移动端执行 */
<input type='file' accept='image/*' capture='camera' multiple > /*调用相机*/
<input type='file' accept='video/\*' capture='camcorder' > /*调用视频*/
<input type='file' accept='audio/*' capture='microphone' > /*调用录音功能*/
3.封装一个简单的ajax，返回promise
/**
* @function {Promise}
* @params {Object} params
* @params {String} params.type 请求方式
* @params {String} params.url 请求地址
* @return {Promise}
*/
function promise(params) {
return new Promise((reslove, reject) => {
console.log(params)
xhr = null;
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMlHTTP')
}
xhr.open('get', params.url, true)
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4) {
reslove(xhr.responseText)
}
}
})
}
console.log(promise({
url: 'js/defer.json'
}).then(res => {
console.log(res)
}))
4.解决回调地狱
// 1. 方法一
setTimeout(() => {
console.log('1')
setTimeout(() => {
console.log('2')
setTimeout(() => {
console.log('3')
setTimeout(() => {
console.log('4')
setTimeout(() => {
console.log('5')
setTimeout(() => {
console.log('6')
setTimeout(() => {
console.log('7')
setTimeout(() => {
console.log('8')
}, 2000);
}, 2000);
}, 2000);
}, 2000);
}, 2000);
}, 2000);
}, 2000);
}, 2000);
- 解决方法其一
/// promise 解决
let prom = new Promise((reslove, reject) => {
setTimeout(() => {
console.log('1')
reslove();
}, 4000);
})
function p2() {
return new Promise((reslove, reject) => {
setTimeout(() => {
console.log('2')
reslove();
}, 4000);
})
}
function p3() {
return new Promise((reslove, reject) => {
setTimeout(() => {
console.log('3')
reslove();
}, 4000);
})
}
prom.then(() => {
return p2()
}).then(() => {
return p3()
})
- 后续代码待补充
5.如何把函数add(1,2,3,4)的调用方式改为add(1)(2)(3)(4)
- 使用函数柯里化方法
//普通方法
function fun(a, b, c, d) {
return a + b + c + d;
}
//运用函数柯里化方法实现：
// 把第一种函数的形式变成第二种的形式，这个就叫做函数柯里化的过程
function fn(a) {
return function (b) {
return function (c) {
return function (d) {
return a + b + c + d
}
}
}
}
console.log(fn(1)(2)(3)(6))
6.什么是Polyfill
/* Polyfill你可以理解为“ 腻子”， 就是装修的时候， 可以把缺损的地方填充抹平。
举个例子， html5的storage(session, local),
不同浏览器， 不同版本， 有些支持， 有些不支持。 我们又想使用这个特性，
怎么办？ 有些人就写对应的Polyfill（ Polyfill有很多），
帮你把这些差异化抹平， 不支持的变得支持了（ 简单来讲
， 写些代码判断当前浏览器有没有这个功能， 没有的话，
就写一些支持的补丁代码）。
你只需要把需要的Polyfill引入到你的程序里， 就可以了。
*/
/*
自己的理解 就是说Polyfill 是一种解决兼容的一种规范
他不是一个方法也不是一个属性 知识一个解决兼容规范的 命名
*/
7.随机选取10-50之间数字
let arr = []
//定义一个空数组
for (var i = 0; i < 100; i++) {
// 循环创建随机数放进去
let math = parseInt(Math.random() * (50 - 10 + 1) + 10);
//数组最大数量 10个
if (arr.length < 10) {
if (arr.indexOf(math) === -1) {
//数组没有相同的再添加进去
arr.push(math)
arr.sort(function (a, b) {
return a - b;
})
}
}
}
console.log(arr)
8.写一个闭包的应用例子
//在javascript里，在函数里声明的函数都是局部的，函数运行完后就释放了
function add() {
//函数内部定义函数，连接函数内部和外部的桥梁
// 闭包的作用有2个:
// 一是读取函数内部的变量，
// 二是让这些变量的值保存在内存中， 实现数据共享
//闭包 执行过的函数 不会被释放 这样就形成了闭包
// 每一个函数经过执行形成闭包 都是一个全新的闭包
// 每个闭包都是独立的。
//好处: 1.缓存
// 2. 面向对象中的对象
/// 3. 实现封装， 防止变量跑到外层作用域中， 发生命名冲突
// 4. 匿名自执行函数， 匿名自执行函数可以减小内存消耗
//缺点：
// 1.无法及时释放内存
// 2. 内存泄漏
// 3. 内存泄漏
let count = 0;
function a() {
count++;
return count;
}
return a
}
var addcount = add()
console.log(addcount())
console.log(addcount())
console.log(addcount())
9. 异步加载js方式有哪些
<script>
window.onload = function () {
console.log('window.onload')
}
</script>
<script src="js/defer.js" defer></script>
<script>
/*
1.在html5中，script新增了async的属性，script添加了该属性之后，下载脚本时将可以与页面其他内容并行下载，但是该属性必须在ie9以上的浏览器中才可以使用，并且只能用于加载外部js脚本。
2.同样，在html4中也有一个defer属性，该属性的兼容性更好一点，但是与async一样，可以让js脚本实现异步加载，同样只能用于加载外部js脚本。
asyc与defer属性的不同点是，async会让脚本在加载完可用时立即执行，而defer脚本则会在dom加载完毕后执行，defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后。
*/
console.log('normal')
</script>
<script>
// /3.利用XHR异步加载js内容并执行，代码如下
// 就是利用ajax 实现异步加载数据
var xhr = new XMLHttpRequest();
xhr.open('get', 'js/defer.json', true)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4) {
console.log(xhr.responseText)
}
}
</script>
<script>
//4.动态创建script标签，主要代码如下
var script = document.createElement('script');
script.src = "js/defer.js";
document.head.appendChild(script)
</script>
<script>
//5.iframe方式，利用iframe加载一个同源的子页面，让子页面内的js影响当前父页面的一种方式。
</script>
10.在js中什么是伪数组和转真实数组
<body>
<div class="li">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<script>
/**伪数组（类数组）：无法直接调用数组方法或期望 length
* 属性有什么特殊的行为，
* 但仍可以对真正数组遍历方法来遍历它们。
* 典型的是函数的 argument 参数，还有像调用
*
*/
var li = document.getElementsByTagName('li');
console.log('伪数组 // 不能执行 push pop 等方法 ')
console.log(li)
//方法1
var li2 = Array.prototype.slice.call(li)
console.log(li2.push('asd'))
console.log(li2)
//方法2
var li3 = Array.from(li)
console.log(li3.push('方法3'))
console.log(li3)
</script>
</body>
11.promise封装axios
// import Axios from 'axios';
function axios(params) {
return new Promise((reslove, reject) => {
Axios({
method: params.type || 'get',
url: params.url || '',
data: params.data,
baseURL: params.base,
headers: params.headers || {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
}).then(res => {
switch (expression) {
case expression:
reslove(res)
break;
default:
}
}).catch(err => {
reject(err)
})
})
}
12.axios
// 1. axios 是什么
// 是一个基于用于操作请求发送数据的模块
// 是一个基于promise 把 ajax 封装 的一个模块
// 2. 如何使用
// yarn add axios|| npm install -save axios
// import Axios from 'axios'
// 3. 描述用其实现注册功能
// - 先下载axios
// - 引入axios
// - 实现布局
// - 请求后台接口 把需要的参数传递上去
// - 注册成功
结言
这只是本人解决的方法，还有待补充，也许会有更好的方法，虚心受教，学无止境，谢谢
感谢您的查阅，本文由@于志程整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照
点个关注把 咻咻咻
