1.打包部署出現(xiàn)空白或404
/\*
@于志程
1.空白頁面多半是資源路徑請求不成功
解決辦法：vue.config.js下的assetsPublicPath默認的是 ‘/’ 也就是根目錄蛆楞。而我們的index.html和 static在同一級目錄下面。 所以要改為 ‘./ ’;
2\. 頁面刷新404問題
這是因為 使用的是history模式 所以vue用路由跳轉(zhuǎn)完之后 再次刷新 所以這個模式會默認的請求一次資源 請求不成功 就會返回404 所以要在服務(wù)器配置 原理是讓所有請求的路徑全部重定向到 根目錄/index.html 這樣就不會出現(xiàn)問題了
但是這么做的話 需要自己創(chuàng)造一個404頁面 給用戶觀看。桐款。
3\. 如果沒有部署在根目錄
解決辦法：vue.config.js下的assetsPublicPath默認的是 ‘/’ 在那個目錄就修改這個路徑就可以
\*/
2. 調(diào)用攝像頭
/*注 只能在移動端執(zhí)行 */
<input type='file' accept='image/*' capture='camera' multiple > /*調(diào)用相機*/
<input type='file' accept='video/\*' capture='camcorder' > /*調(diào)用視頻*/
<input type='file' accept='audio/*' capture='microphone' > /*調(diào)用錄音功能*/
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.解決回調(diào)地獄
// 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.如何把函數(shù)add(1,2,3,4)的調(diào)用方式改為add(1)(2)(3)(4)
//普通方法
function fun(a, b, c, d) {
return a + b + c + d;
}
//運用函數(shù)柯里化方法實現(xiàn)：
// 把第一種函數(shù)的形式變成第二種的形式灿里，這個就叫做函數(shù)柯里化的過程
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),
不同瀏覽器， 不同版本昂灵， 有些支持获茬， 有些不支持。 我們又想使用這個特性倔既，
怎么辦？ 有些人就寫對應(yīng)的Polyfill（ Polyfill有很多）鹏氧，
幫你把這些差異化抹平渤涌， 不支持的變得支持了（ 簡單來講
， 寫些代碼判斷當(dāng)前瀏覽器有沒有這個功能把还， 沒有的話实蓬，
就寫一些支持的補丁代碼）。
你只需要把需要的Polyfill引入到你的程序里吊履， 就可以了安皱。
*/
/*
自己的理解 就是說Polyfill 是一種解決兼容的一種規(guī)范
他不是一個方法也不是一個屬性 知識一個解決兼容規(guī)范的 命名
*/
7.隨機選取10-50之間數(shù)字
let arr = []
//定義一個空數(shù)組
for (var i = 0; i < 100; i++) {
// 循環(huán)創(chuàng)建隨機數(shù)放進去
let math = parseInt(Math.random() * (50 - 10 + 1) + 10);
//數(shù)組最大數(shù)量 10個
if (arr.length < 10) {
if (arr.indexOf(math) === -1) {
//數(shù)組沒有相同的再添加進去
arr.push(math)
arr.sort(function (a, b) {
return a - b;
})
}
}
}
console.log(arr)
8.寫一個閉包的應(yīng)用例子
//在javascript里，在函數(shù)里聲明的函數(shù)都是局部的艇炎，函數(shù)運行完后就釋放了
function add() {
//函數(shù)內(nèi)部定義函數(shù)酌伊，連接函數(shù)內(nèi)部和外部的橋梁
// 閉包的作用有2個:
// 一是讀取函數(shù)內(nèi)部的變量，
// 二是讓這些變量的值保存在內(nèi)存中缀踪， 實現(xiàn)數(shù)據(jù)共享
//閉包 執(zhí)行過的函數(shù) 不會被釋放 這樣就形成了閉包
// 每一個函數(shù)經(jīng)過執(zhí)行形成閉包 都是一個全新的閉包
// 每個閉包都是獨立的居砖。
//好處: 1.緩存
// 2. 面向?qū)ο笾械膶ο? /// 3. 實現(xiàn)封裝虹脯， 防止變量跑到外層作用域中， 發(fā)生命名沖突
// 4. 匿名自執(zhí)行函數(shù)奏候， 匿名自執(zhí)行函數(shù)可以減小內(nèi)存消耗
//缺點：
// 1.無法及時釋放內(nèi)存
// 2. 內(nèi)存泄漏
// 3. 內(nèi)存泄漏
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添加了該屬性之后蔗草，下載腳本時將可以與頁面其他內(nèi)容并行下載咒彤，但是該屬性必須在ie9以上的瀏覽器中才可以使用，并且只能用于加載外部js腳本咒精。
2.同樣镶柱，在html4中也有一個defer屬性，該屬性的兼容性更好一點狠轻，但是與async一樣奸例，可以讓js腳本實現(xiàn)異步加載，同樣只能用于加載外部js腳本向楼。
asyc與defer屬性的不同點是查吊，async會讓腳本在加載完可用時立即執(zhí)行，而defer腳本則會在dom加載完畢后執(zhí)行湖蜕，defer腳本的執(zhí)行會在window.onload之前逻卖，其他沒有添加defer屬性的script標簽之后。
*/
console.log('normal')
</script>
<script>
// /3.利用XHR異步加載js內(nèi)容并執(zhí)行昭抒，代碼如下
// 就是利用ajax 實現(xiàn)異步加載數(shù)據(jù)
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.動態(tài)創(chuàng)建script標簽评也，主要代碼如下
var script = document.createElement('script');
script.src = "js/defer.js";
document.head.appendChild(script)
</script>
<script>
//5.iframe方式，利用iframe加載一個同源的子頁面灭返，讓子頁面內(nèi)的js影響當(dāng)前父頁面的一種方式盗迟。
</script>
10.在js中什么是偽數(shù)組和轉(zhuǎn)真實數(shù)組
<body>
<div class="li">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<script>
/**偽數(shù)組（類數(shù)組）：無法直接調(diào)用數(shù)組方法或期望 length
* 屬性有什么特殊的行為，
* 但仍可以對真正數(shù)組遍歷方法來遍歷它們熙含。
* 典型的是函數(shù)的 argument 參數(shù)罚缕，還有像調(diào)用
*
*/
var li = document.getElementsByTagName('li');
console.log('偽數(shù)組 // 不能執(zhí)行 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 是什么
// 是一個基于用于操作請求發(fā)送數(shù)據(jù)的模塊
// 是一個基于promise 把 ajax 封裝 的一個模塊
// 2. 如何使用
// yarn add axios|| npm install -save axios
// import Axios from 'axios'
// 3. 描述用其實現(xiàn)注冊功能
// - 先下載axios
// - 引入axios
// - 實現(xiàn)布局
// - 請求后臺接口 把需要的參數(shù)傳遞上去
// - 注冊成功
結(jié)言
這只是本人解決的方法芜繁，還有待補充苇倡，也許會有更好的方法，虛心受教廷雅，學(xué)無止境蚓聘，謝謝
感謝您的查閱腌乡，本文由@于志程整理并總結(jié)，代碼冗余或者有錯誤的地方望不吝賜教夜牡；菜鳥一枚与纽，請多關(guān)照
點個關(guān)注把 咻咻咻
